Browser nav fix and various IE 11 fixes

 * Push nav state instead of replace on navigation. This means the
back/forward browser buttons work
 * Goal picker sets height = min height for the controller, this makes
the text inside the textbox center properly in ie11
 * react-uswds ^1.12.2 was causing the page to not load in ie11.
Downgrade to 1.11.0
 * Hex colors with transparency weren't playing nice with ie11,
converted to rgba
 * Padding-inline wasn't working in ie11, switch to padding-left
 * Duration validation updated to actually force durations rounded to
the half hour
 * Goal multiselect only displays "x goals selected" if there is no user
input
 * Objectives are only focused on mount instead of when the ref changes.
Fixes a bug where focus switches back to the objective after switching
off

frontend/package.json

@@ -9,7 +9,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "@fortawesome/react-fontawesome": "^0.1.11",
     "@hookform/error-message": "^0.0.5",
-    "@trussworks/react-uswds": "^1.12.2",
+    "@trussworks/react-uswds": "1.11.0",
     "@use-it/interval": "^1.0.0",
     "http-proxy-middleware": "^1.0.5",
     "lodash": "^4.17.20",

frontend/src/components/MultiSelect.js

@@ -56,6 +56,9 @@ const styles = {
     ...provided,
     borderColor: '#565c65',
     backgroundColor: 'white',
+    // IE 11 does not take minHeight into account when centering elements vertically.
+    // Setting heigth = minHeight forces the input element in ie 11 to be centered vertically
+    height: provided.minHeight,
     borderRadius: '0',
     '&:hover': {
       borderColor: '#565c65',

frontend/src/components/Navigator/components/SideNav.css

@@ -1,8 +1,8 @@
 .smart-hub--navigator-link-active {
-  background-color: #f8f8f8;
-  color: #0166ab;
+  background-color: rgb(248, 248, 248);
+  color: rgb(1, 102, 171);
   font-weight: bold;
-  border-left: 2px solid #0166ab;
+  border-left: 2px solid rgb(1, 102, 171);
   text-decoration-line: none;
 }
 
@@ -13,45 +13,45 @@
   width: 100%;
   height: 100%;
   font-size: 16px;
-  color: #12549d;
+  color: rgb(18, 84, 157);
   line-height: 24px;
 }
 
 .smart-hub--navigator-list {
   list-style-type: none;
-  padding-inline-start: 0;
+  padding-left: 0;
   margin: 0;
 }
 
 .smart-hub--navigator-item {
   width: 100%;
   height: 40px;
-  color: #0166ab;
+  color: rgb(1, 102, 171);
 }
 
 .smart-hub--tag-not-started {
   background-color: #eceef1;
-  color: #21272dc1;
+  color: rgba(33, 39, 45, 0.76);
 }
 
 .smart-hub--tag-in-progress {
-  background-color: #e2eff7;
-  color: #0166ab;
+  background-color: rgb(226, 239, 247);
+  color: rgb(1, 102, 171);
 }
 
 .smart-hub--tag-complete {
-  background-color: #e6faedb0;
-  color: #3a7e5a;
+  background-color: rgba(230, 250, 237, 0.69);
+  color: rgb(58, 126, 90);
 }
 
 .smart-hub--tag-submitted {
-  background-color: #0166ab;
-  color: #f8f8f8;
+  background-color: rgb(1, 102, 171);
+  color: rgb(248, 248, 248);
 }
 
 .smart-hub--tag-needs-action {
-  background-color: #f9e0e4;
-  color: #d42240;
+  background-color: rgb(249, 224, 228);
+  color: rgb(212, 34, 64);
 }
 
 .smart-hub--tag {
@@ -67,7 +67,7 @@
   font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
   font-size: 1.06rem;
   line-height: 1.5;
-  color: #005ea2;
+  color: rgb(0, 94, 162);
   text-decoration: underline;
   background: transparent;
   left: 0;

frontend/src/pages/ActivityReport/Pages/activitySummary.js

@@ -264,6 +264,7 @@ const ActivitySummary = ({
                     register({
                       required: 'Please enter the duration of the activity',
                       valueAsNumber: true,
+                      pattern: { value: /^\d+(\.[0,5]{1})?$/, message: 'Duration must be rounded to the nearest half hour' },
                       min: { value: 0, message: 'Duration can not be negative' },
                     })
                   }

frontend/src/pages/ActivityReport/Pages/components/GoalInput.js

@@ -33,7 +33,11 @@ const Input = ({
   const selectedGoals = selectProps.value.length;
   let message;
 
-  if (selectedGoals === 0) {
+  const { value } = props;
+
+  if (value !== '') {
+    message = '';
+  } else if (selectedGoals === 0) {
     message = 'Select goal(s)';
   } else if (selectedGoals === 1) {
     message = '1 goal selected';

frontend/src/pages/ActivityReport/Pages/components/Objective.js

@@ -27,7 +27,7 @@ const Objective = ({
     if (firstInput.current) {
       firstInput.current.focus();
     }
-  }, [firstInput.current]);
+  }, []);
 
   const [editableObject, updateEditableObject] = useState(objective);
   const onChange = (e) => {

frontend/src/pages/ActivityReport/index.js

@@ -185,7 +185,7 @@ function ActivityReport({
     }
 
     const page = pages.find((p) => p.position === position);
-    history.replace(`/activity-reports/${reportId.current}/${page.path}`, state);
+    history.push(`/activity-reports/${reportId.current}/${page.path}`, state);
   };
 
   const onSave = async (data) => {

frontend/yarn.lock

@@ -1751,10 +1751,10 @@
   dependencies:
     "@babel/runtime" "^7.12.5"
 
-"@trussworks/react-uswds@^1.12.2":
-  version "1.13.0"
-  resolved "https://registry.yarnpkg.com/@trussworks/react-uswds/-/react-uswds-1.13.0.tgz#52ef0beeaae6a3692aea777dc3539a5edf9e517b"
-  integrity sha512-g9RNupEc9Hm3It4DX1aorTLX0W5twJK+f3pFvBdKch63w4gL8qgocjNmKiW5LUYxGW7WWtoE4bNY8p0A+4qwWQ==
+"@trussworks/react-uswds@1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@trussworks/react-uswds/-/react-uswds-1.11.0.tgz#f5f01247038792e8fec40c828e32bc78bcc04c95"
+  integrity sha512-wIFzLM/1aJ0enyt42YFcJRSlEALfRU2qPaVK5955mHmP083l9o2CrnmJDK7La8ebrNxtyhhgrx76K3PwFgRCjQ==
 
 "@types/anymatch@*":
   version "1.3.1"