[TO Main] MET Web - Replace hover & background colors (#2424)

* DESENG-520: Changed background color white to use bcds-surface-background-white * DESENG-520: Updating hover color for white * DESENG-520: Updated changelog * Changelog fix * DESENG-520: Removed inline style for language selector
bcgov · Mar 21, 2024 · b3dd910 · b3dd910
1 parent fc09bc6
commit b3dd910
Show file tree

Hide file tree

Showing 27 changed files with 77 additions and 33 deletions.
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -1,3 +1,10 @@
+## March 21, 2024
+
+- **Task**: MET Web - Replace hover & background colours [DESENG-520](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-520)
+  - Update Table and Menu Dropdown hover colors
+  - Update engagement tiles hover color.
+  - Updated all white backgrounds to use css variable.
+
 ## March 19, 2024
 
 - **Task**: Add poll results to results tab [DESENG-513](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-513)

diff --git a/met-web/package-lock.json b/met-web/package-lock.json
diff --git a/met-web/package.json b/met-web/package.json
@@ -5,9 +5,15 @@
     "dependencies": {
         "@arcgis/core": "^4.26.5",
         "@bcgov/bc-sans": "^2.0",
+        "@bcgov/design-tokens": "^2.0.1",
         "@emotion/react": "^11.9.0",
         "@emotion/styled": "^11.8.1",
         "@formio/react": "^5.3.0",
+        "@fortawesome/fontawesome-svg-core": "^6.1.1",
+        "@fortawesome/free-brands-svg-icons": "^6.1.1",
+        "@fortawesome/free-regular-svg-icons": "^6.1.1",
+        "@fortawesome/free-solid-svg-icons": "^6.1.1",
+        "@fortawesome/react-fontawesome": "^0.1.18",
         "@hello-pangea/dnd": "^16.2.0",
         "@hookform/resolvers": "^2.9.8",
         "@mui/icons-material": "^5.8.3",
@@ -68,12 +74,7 @@
         "typescript": "^4.6.3",
         "universal-cookie": "^7.0.1",
         "web-vitals": "^2.1.4",
-        "yup": "^0.32.11",
-        "@fortawesome/fontawesome-svg-core": "^6.1.1",
-        "@fortawesome/free-brands-svg-icons": "^6.1.1",
-        "@fortawesome/free-regular-svg-icons": "^6.1.1",
-        "@fortawesome/free-solid-svg-icons": "^6.1.1",
-        "@fortawesome/react-fontawesome": "^0.1.18"
+        "yup": "^0.32.11"
     },
     "scripts": {
         "start": "react-app-rewired start",

diff --git a/met-web/src/App.scss b/met-web/src/App.scss
@@ -1,5 +1,5 @@
 @charset "UTF-8";
-
+@import '@bcgov/design-tokens/css-prefixed/variables';
 
 #main {
   margin-top: 10px;
@@ -23,3 +23,22 @@ code {
     padding-right: 0;
   }  
 }
+
+/** Overriding Select Menu Dropdown color **/
+// Background white and on hover light grey
+.MuiMenuItem-root {
+  background-color: var(--bcds-surface-background-white) !important;
+  &:hover {
+    background-color: var(--bcds-surface-secondary-hover) !important;
+  }
+}
+
+/** Overriding Met table styles **/
+// set background color of tr to white
+.MuiTable-root tbody > tr {
+  background-color: var(--bcds-surface-background-white) !important;
+}
+// set background color of tr on hover to light gray
+tbody.MuiTableBody-root > tr:hover {
+  background-color: var(--bcds-surface-secondary-hover) !important;
+}
diff --git a/met-web/src/App.tsx b/met-web/src/App.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import '@bcgov/design-tokens/css-prefixed/variables.css'; // Will be available to use in all component
 import './App.scss';
 import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
 import UserService from './services/userService';
@@ -245,7 +246,7 @@ const App = () => {
             </Box>
             <Box
                 sx={{
-                    backgroundColor: 'white',
+                    backgroundColor: 'var(--bcds-surface-background-white)',
                     zIndex: ZIndex.footer,
                     position: 'relative',
                 }}

diff --git a/met-web/src/components/comments/admin/review/emailPreview/EmailPreview.tsx b/met-web/src/components/comments/admin/review/emailPreview/EmailPreview.tsx
@@ -82,7 +82,7 @@ export default function EmailPreview({
 }
 
 const container = {
-    backgroundColor: '#ffffff',
+    backgroundColor: 'var(--bcds-surface-background-white)',
     border: '1px solid #eee',
     borderRadius: '5px',
     boxShadow: '0 5px 10px rgba(20,50,70,.2)',

diff --git a/met-web/src/components/common/LanguageSelector.tsx b/met-web/src/components/common/LanguageSelector.tsx
@@ -84,7 +84,7 @@ const LanguageSelector = () => {
                     value={language.id}
                     size="small"
                     sx={{
-                        backgroundColor: 'white',
+                        backgroundColor: 'var(--bcds-surface-background-white)',
                         color: Palette.info.main,
                         minWidth: '8ch',
                     }}

diff --git a/.../components/engagement/form/EngagementFormTabs/AdditionalDetails/AdditionalTabContent.tsx b/.../components/engagement/form/EngagementFormTabs/AdditionalDetails/AdditionalTabContent.tsx
@@ -41,7 +41,7 @@ const AdditionalTabContent = () => {
                     marginTop={2}
                     zIndex={1000}
                     boxShadow="0px 0px 5px rgba(0, 0, 0, 0.1)"
-                    sx={{ backgroundColor: 'white' }}
+                    sx={{ backgroundColor: 'var(--bcds-surface-background-white)' }}
                 >
                     <Grid item xs={12}>
                         <PrimaryButton

diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/EngagementForm.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/EngagementForm.tsx
@@ -253,7 +253,7 @@ const EngagementForm = () => {
                     marginTop={2}
                     zIndex={1000}
                     boxShadow="0px 0px 5px rgba(0, 0, 0, 0.1)"
-                    sx={{ backgroundColor: 'white' }}
+                    sx={{ backgroundColor: 'var(--bcds-surface-background-white)' }}
                 >
                     <Grid item xs={12}>
                         <PrimaryButton

diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/Results/EngagementResults.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/Results/EngagementResults.tsx
@@ -33,7 +33,7 @@ const EngagementResults = () => {
                     marginTop={2}
                     zIndex={1000}
                     boxShadow="0px 0px 5px rgba(0, 0, 0, 0.1)"
-                    sx={{ backgroundColor: 'white' }}
+                    sx={{ backgroundColor: 'var(--bcds-surface-background-white)' }}
                 >
                     <Grid item xs={12}>
                         <PrimaryButton

diff --git a/...web/src/components/engagement/form/EngagementFormTabs/Settings/EngagementSettingsForm.tsx b/...web/src/components/engagement/form/EngagementFormTabs/Settings/EngagementSettingsForm.tsx
@@ -47,7 +47,7 @@ const EngagementSettingsForm = () => {
                     marginTop={2}
                     zIndex={1000}
                     boxShadow="0px 0px 5px rgba(0, 0, 0, 0.1)"
-                    sx={{ backgroundColor: 'white' }}
+                    sx={{ backgroundColor: 'var(--bcds-surface-background-white)' }}
                 >
                     <Grid item xs={12}>
                         <PrimaryButton

diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/UserManagement/ActionsDropDown.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/UserManagement/ActionsDropDown.tsx
@@ -81,7 +81,7 @@ export const ActionsDropDown = ({ membership }: { membership: EngagementTeamMemb
             value={0}
             fullWidth
             size="small"
-            sx={{ backgroundColor: 'white', color: Palette.info.main }}
+            sx={{ backgroundColor: 'var(--bcds-surface-background-white)', color: Palette.info.main }}
         >
             <MenuItem value={0} sx={{ fontStyle: 'italic', height: '2em' }} color="info" disabled>
                 {'(Select One)'}

diff --git a/...components/engagement/form/EngagementFormTabs/UserManagement/EngagementUserManagement.tsx b/...components/engagement/form/EngagementFormTabs/UserManagement/EngagementUserManagement.tsx
@@ -60,7 +60,7 @@ const EngagementUserManagement = () => {
                         marginTop={2}
                         zIndex={1000}
                         boxShadow="0px 0px 5px rgba(0, 0, 0, 0.1)"
-                        sx={{ backgroundColor: 'white' }}
+                        sx={{ backgroundColor: 'var(--bcds-surface-background-white)' }}
                     >
                         <Grid item xs={12}>
                             <PrimaryButton

diff --git a/met-web/src/components/engagement/listing/ActionsDropDown.tsx b/met-web/src/components/engagement/listing/ActionsDropDown.tsx
@@ -165,7 +165,7 @@ export const ActionsDropDown = ({ engagement }: { engagement: Engagement }) => {
             value={0}
             fullWidth
             size="small"
-            sx={{ backgroundColor: 'white', color: Palette.info.main }}
+            sx={{ backgroundColor: 'var(--bcds-surface-background-white)', color: Palette.info.main }}
         >
             <MenuItem value={0} sx={{ fontStyle: 'italic', height: '2em' }} color="info" disabled>
                 {'(Select One)'}

diff --git a/met-web/src/components/engagement/view/widgets/PhasesWidget/PhaseBox.tsx b/met-web/src/components/engagement/view/widgets/PhasesWidget/PhaseBox.tsx
@@ -20,7 +20,7 @@ interface PhaseBoxProps {
 }
 export const PhaseBox = ({
     title,
-    backgroundColor = 'white',
+    backgroundColor = 'var(--bcds-surface-background-white)',
     learnMoreBox,
     iconBox,
     currentPhase,

diff --git a/...src/components/engagement/view/widgets/PhasesWidget/PhasesWidgetMobile/PhaseBoxMobile.tsx b/...src/components/engagement/view/widgets/PhasesWidget/PhasesWidgetMobile/PhaseBoxMobile.tsx
@@ -24,7 +24,7 @@ interface PhaseBoxProps {
 }
 export const PhaseBoxMobile = ({
     title,
-    backgroundColor = 'white',
+    backgroundColor = 'var(--bcds-surface-background-white)',
     learnMoreBox,
     iconBox,
     accordionBackground,

diff --git a/met-web/src/components/engagement/view/widgets/Timeline/TimelineWidgetView.tsx b/met-web/src/components/engagement/view/widgets/Timeline/TimelineWidgetView.tsx
@@ -69,7 +69,7 @@ const TimelineWidgetView = ({ widget }: TimelineWidgetProps) => {
     const commonWhiteAvatarStyles = {
         height: 23,
         width: 23,
-        backgroundColor: '#FFF',
+        backgroundColor: 'var(--bcds-surface-background-white)',
     };
 
     const renderIcon = (status: EventStatus) => {

diff --git a/met-web/src/components/feedback/actionDropdown.tsx b/met-web/src/components/feedback/actionDropdown.tsx
@@ -88,7 +88,7 @@ export const ActionsDropDown = ({ feedback, reload }: { feedback: Feedback; relo
             value={0}
             fullWidth
             size="small"
-            sx={{ backgroundColor: 'white', color: Palette.info.main }}
+            sx={{ backgroundColor: 'var(--bcds-surface-background-white)', color: Palette.info.main }}
         >
             <MenuItem value={0} sx={{ fontStyle: 'italic', height: '2em' }} color="info" disabled>
                 {'(Select One)'}

diff --git a/met-web/src/components/imageUpload/cropModal.tsx b/met-web/src/components/imageUpload/cropModal.tsx
@@ -80,7 +80,7 @@ export const CropModal = () => {
                             }}
                             style={{
                                 containerStyle: {
-                                    backgroundColor: '#fff',
+                                    backgroundColor: 'var(--bcds-surface-background-white)',
                                 },
                             }}
                         />

diff --git a/met-web/src/components/landing/EngagementTile.tsx b/met-web/src/components/landing/EngagementTile.tsx
@@ -85,7 +85,7 @@ const EngagementTile = ({ passedEngagement, engagementId }: EngagementTileProps)
             sx={{
                 maxWidth: 345,
                 '&:hover': {
-                    backgroundColor: '#F2F2F2',
+                    backgroundColor: 'var(--bcds-surface-secondary-hover)',
                     cursor: 'pointer',
                 },
             }}

diff --git a/met-web/src/components/layout/SideNav/SideNav.tsx b/met-web/src/components/layout/SideNav/SideNav.tsx
@@ -59,7 +59,7 @@ const DrawerBox = () => {
                         </ListItemButton>
                     </ListItem>
                 ))}
-                <Divider sx={{ backgroundColor: 'white' }} />
+                <Divider sx={{ backgroundColor: 'var(--bcds-surface-background-white)' }} />
                 <UserGuideNav />
             </List>
         </Box>

diff --git a/met-web/src/components/map/index.tsx b/met-web/src/components/map/index.tsx
@@ -71,7 +71,12 @@ const MetMap = ({ geojson, latitude, longitude, markerLabel, zoom }: MapProps) =
                 <Stack direction="column" alignItems="center" justifyContent="center">
                     <MarkerIcon fontSize="large" htmlColor="red" />
                     <When condition={Boolean(markerLabel)}>
-                        <MetSmallText bold bgcolor={'white'} borderRadius="10px" padding="0 2px 0 2px">
+                        <MetSmallText
+                            bold
+                            bgcolor={'var(--bcds-surface-background-white)'}
+                            borderRadius="10px"
+                            padding="0 2px 0 2px"
+                        >
                             {markerLabel}
                         </MetSmallText>
                     </When>

diff --git a/met-web/src/components/publicDashboard/constants.ts b/met-web/src/components/publicDashboard/constants.ts
@@ -22,8 +22,8 @@ export const DASHBOARD = {
         FILL_COLOR: '#4C81AF',
     },
     SURVEY_RESULT: {
-        BACKGROUND_COLOR: '#FFFFFF',
-        HOVER_COLOR: '#F2F2F2',
+        BACKGROUND_COLOR: 'var(--bcds-surface-background-white)',
+        HOVER_COLOR: 'var(--bcds-surface-secondary-hover)',
         SELECTED_TEXT_COLOR: '#494949',
     },
 };
diff --git a/met-web/src/components/survey/listing/ActionsDropDown.tsx b/met-web/src/components/survey/listing/ActionsDropDown.tsx
@@ -119,7 +119,7 @@ export const ActionsDropDown = ({ survey }: { survey: Survey }) => {
             value={0}
             fullWidth
             size="small"
-            sx={{ backgroundColor: 'white', color: Palette.info.main }}
+            sx={{ backgroundColor: 'var(--bcds-surface-background-white)', color: Palette.info.main }}
         >
             <MenuItem value={0} sx={{ fontStyle: 'italic', height: '2em' }} color="info" disabled>
                 {'(Select One)'}

diff --git a/met-web/src/components/userManagement/listing/ActionsDropDown.tsx b/met-web/src/components/userManagement/listing/ActionsDropDown.tsx
@@ -90,7 +90,7 @@ export const ActionsDropDown = ({ selectedUser }: { selectedUser: User }) => {
             value={0}
             fullWidth
             size="small"
-            sx={{ backgroundColor: 'white', color: Palette.info.main }}
+            sx={{ backgroundColor: 'var(--bcds-surface-background-white)', color: Palette.info.main }}
         >
             <MenuItem value={0} sx={{ fontStyle: 'italic', height: '2em' }} color="info" disabled>
                 {'(Select One)'}

diff --git a/met-web/src/components/userManagement/userDetails/ActionsDropDown.tsx b/met-web/src/components/userManagement/userDetails/ActionsDropDown.tsx
@@ -86,7 +86,7 @@ export const ActionsDropDown = ({ membership }: { membership: EngagementTeamMemb
             value={0}
             fullWidth
             size="small"
-            sx={{ backgroundColor: 'white', color: Palette.info.main }}
+            sx={{ backgroundColor: 'var(--bcds-surface-background-white)', color: Palette.info.main }}
         >
             <MenuItem value={0} sx={{ fontStyle: 'italic', height: '2em' }} color="info" disabled>
                 {'(Select One)'}

diff --git a/met-web/src/styles/Theme.ts b/met-web/src/styles/Theme.ts
@@ -12,7 +12,7 @@ export const Palette = {
         light: '#FFE082',
     },
     hover: {
-        light: '#4C81AF',
+        light: 'var(--bcds-surface-primary-hover)',
     },
     text: {
         primary: '#494949',
@@ -24,11 +24,11 @@ export const Palette = {
         main: '#707070',
     },
     internalHeader: {
-        backgroundColor: '#FFFFFF',
+        backgroundColor: 'var(--bcds-surface-background-white)',
         color: '#292929',
     },
     publicHeader: {
-        backgroundColor: '#FFFFFF',
+        backgroundColor: 'var(--bcds-surface-background-white)',
         color: '#292929',
     },
     dashboard: {