diff --git a/client/app/components/Alert.jsx b/client/app/components/Alert.jsx
index 0fcc4da8983..f2fdbf8618a 100644
--- a/client/app/components/Alert.jsx
+++ b/client/app/components/Alert.jsx
@@ -21,11 +21,14 @@ export default class Alert extends React.Component {
const typeClass = `usa-alert-${type}`;
- const className = classnames('usa-alert', typeClass, {
- 'usa-alert-slim': !title,
- fixed,
- 'cf-margin-bottom-2rem': lowerMargin,
- });
+ const className = classnames('usa-alert',
+ typeClass,
+ {
+ 'usa-alert-slim': !title,
+ fixed,
+ 'cf-margin-bottom-2rem': lowerMargin,
+ },
+ );
return (
diff --git a/client/app/components/AppFrame.jsx b/client/app/components/AppFrame.jsx
index c2b45d9f9af..62b093ea4ff 100644
--- a/client/app/components/AppFrame.jsx
+++ b/client/app/components/AppFrame.jsx
@@ -1,10 +1,38 @@
import React from 'react';
import PropTypes from 'prop-types';
+import { Route } from 'react-router-dom';
import getAppWidthStyling from
'@department-of-veterans-affairs/caseflow-frontend-toolkit/components/util/getAppWidthStyling';
+import classnames from 'classnames';
+
+import Alert from './Alert';
+
+// eslint-disable-next-line no-process-env
+const env = process.env.DEPLOY_ENV;
+
+const className = classnames(
+ {
+ 'no-env-alert': env !== 'prodtest' && env !== 'preprod' && env !== 'uat' && env !== 'demo',
+ 'preprod-env-alert': env !== 'prod' && env === 'preprod',
+ 'prodtest-env-alert': env !== 'prod' && env === 'prodtest',
+ 'uat-env-alert': env !== 'prod' && env === 'uat',
+ 'demo-env-alert': env !== 'prod' && env === 'demo',
+ },
+);
const AppFrame = ({ children, wideApp }) =>
+
+ // eslint-disable-next-line no-undefined
+ (env !== 'prod' && env !== 'production' && env !== undefined) &&
+ (
+
This is the {env} environment!
+
)
+ } />
{children}
;
diff --git a/client/app/styles/_main.scss b/client/app/styles/_main.scss
index 9f62a821db6..e1e2afdee6e 100644
--- a/client/app/styles/_main.scss
+++ b/client/app/styles/_main.scss
@@ -116,6 +116,12 @@ body {
}
// Used for Caseflow app header rendered in React
+nav {
+ &.cf-push-left p a {
+ color: $color-gray-dark;
+ }
+}
+
.cf-wide-app {
.usa-grid {
padding-left: 0;
diff --git a/client/app/styles/react/_alerts.scss b/client/app/styles/react/_alerts.scss
index 085d3018a68..beeefabdb1e 100644
--- a/client/app/styles/react/_alerts.scss
+++ b/client/app/styles/react/_alerts.scss
@@ -1,3 +1,94 @@
+.no-env-color {
+ display: none;
+}
+
+.prodtest-env-color {
+ color: $color-black-light;
+}
+
+.preprod-env-color {
+ color: $color-secondary;
+}
+
+.uat-env-color {
+ color: $color-primary-alt;
+}
+
+.demo-env-color {
+ color: $color-green-light;
+}
+
+.no-env-alert {
+ .usa-alert {
+ display: none;
+ }
+}
+
+.prodtest-env-alert {
+
+ .usa-alert {
+ background-color: $color-gold-lightest;
+ border-left: 5px solid $color-gold-lighter;
+ background-image: url('/images/warning-429d7a1540c2e7d036805bb73a0ba690.png');
+
+ .usa-alert-text {
+ padding-left: 1.5rem;
+ }
+
+ &::before {
+ background-color: $color-gold-lightest;
+ }
+ }
+}
+
+.preprod-env-alert {
+
+ .usa-alert {
+ background-color: $color-secondary-lightest;
+ border-left: 5px solid $color-secondary-light;
+ background-image: url('/images/warning-429d7a1540c2e7d036805bb73a0ba690.png');
+
+ .usa-alert-text {
+ padding-left: 1.5rem;
+ }
+
+ &::before {
+ background-color: $color-secondary-lightest;
+ }
+ }
+}
+
+.uat-env-alert {
+ .usa-alert {
+ background-color: $color-primary-alt-lightest;
+ border-left: 5px solid $color-primary-alt-light;
+ background-image: url('/images/warning-429d7a1540c2e7d036805bb73a0ba690.png');
+
+ .usa-alert-text {
+ padding-left: 1.5rem;
+ }
+
+ &::before {
+ background-color: $color-primary-alt-lightest;
+ }
+ }
+}
+
+.demo-env-alert {
+ .usa-alert {
+ background-color: $color-green-lightest;
+ border-left: 5px solid $color-green-lighter;
+ background-image: url('/images/warning-429d7a1540c2e7d036805bb73a0ba690.png');
+
+ .usa-alert-text {
+ padding-left: 1.5rem;
+ }
+
+ &::before {
+ background-color: $color-green-lightest;
+ }
+ }
+}
.usa-alert {
@@ -14,6 +105,7 @@
&.usa-alert-slim {
background-size: 4rem;
+
.usa-alert-body {
padding-left: 3.5rem;
}
diff --git a/client/package.json b/client/package.json
index d3f77214a04..820ec8426d5 100644
--- a/client/package.json
+++ b/client/package.json
@@ -60,7 +60,7 @@
"@babel/preset-react": "^7.12.7",
"@babel/register": "^7.12.1",
"@babel/runtime-corejs2": "^7.12.5",
- "@department-of-veterans-affairs/caseflow-frontend-toolkit": "https://github.com/department-of-veterans-affairs/caseflow-frontend-toolkit#a98b291",
+ "@department-of-veterans-affairs/caseflow-frontend-toolkit": "https://github.com/department-of-veterans-affairs/caseflow-frontend-toolkit#fa44cf3e",
"@fortawesome/fontawesome-free": "^5.3.1",
"@hookform/resolvers": "^2.0.0-beta.5",
"@reduxjs/toolkit": "^1.9.7",
diff --git a/client/test/app/containers/CaseWorker/__snapshots__/CaseWorkerIndex.test.js.snap b/client/test/app/containers/CaseWorker/__snapshots__/CaseWorkerIndex.test.js.snap
index a467c6c7045..3c0a2c04db3 100644
--- a/client/test/app/containers/CaseWorker/__snapshots__/CaseWorkerIndex.test.js.snap
+++ b/client/test/app/containers/CaseWorker/__snapshots__/CaseWorkerIndex.test.js.snap
@@ -4,7 +4,7 @@ exports[`CaseWorkerIndex renders correctly 1`] = `
diff --git a/client/yarn.lock b/client/yarn.lock
index d83474f96f3..c844f0e37f6 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -2529,9 +2529,9 @@
exec-sh "^0.3.2"
minimist "^1.2.0"
-"@department-of-veterans-affairs/caseflow-frontend-toolkit@https://github.com/department-of-veterans-affairs/caseflow-frontend-toolkit#a98b291":
+"@department-of-veterans-affairs/caseflow-frontend-toolkit@https://github.com/department-of-veterans-affairs/caseflow-frontend-toolkit#fa44cf3e":
version "2.6.1"
- resolved "https://github.com/department-of-veterans-affairs/caseflow-frontend-toolkit#a98b29188aaf2d85f7af749eda95cc02ed1282d2"
+ resolved "https://github.com/department-of-veterans-affairs/caseflow-frontend-toolkit#fa44cf3e009280d39275f16150990f8749b4818a"
dependencies:
classnames "^2.2.5"
glamor "^2.20.40"
diff --git a/package.json b/package.json
deleted file mode 100644
index e361aad526b..00000000000
--- a/package.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "dependencies": {
- "node": "16.16.0"
- }
-}
diff --git a/yarn.lock b/yarn.lock
deleted file mode 100644
index f0b9254cd9e..00000000000
--- a/yarn.lock
+++ /dev/null
@@ -1,15 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-node-bin-setup@^1.0.0:
- version "1.1.3"
- resolved "https://registry.yarnpkg.com/node-bin-setup/-/node-bin-setup-1.1.3.tgz#d45d5220e3b2ecc3a94263a56116f727f6c1bb14"
- integrity sha512-opgw9iSCAzT2+6wJOETCpeRYAQxSopqQ2z+N6BXwIMsQQ7Zj5M8MaafQY8JMlolRR6R1UXg2WmhKp0p9lSOivg==
-
-node@16.16.0:
- version "16.16.0"
- resolved "https://registry.yarnpkg.com/node/-/node-16.16.0.tgz#43ce8731d97ae79dff2f227e764938025200796d"
- integrity sha512-uEZWEG6HuGbrRi6wEZIna4yWj197JByvJkMmi8Yxx9Z6y8GazVy0p2qYOwLYJqQRf4N37+eL+FBIdhT1mHGpFA==
- dependencies:
- node-bin-setup "^1.0.0"