diff --git a/CHANGELOG.MD b/CHANGELOG.MD index 5c49f3af8..83959e676 100644 --- 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 index ccdb95fd4..7973937ed 100644 --- a/met-web/package-lock.json +++ b/met-web/package-lock.json @@ -10,6 +10,7 @@ "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", @@ -2872,6 +2873,11 @@ "resolved": "https://registry.npmjs.org/@bcgov/bc-sans/-/bc-sans-2.1.0.tgz", "integrity": "sha512-1MesF4NAVpM5dywoJ68wNcBylHbPqg1dDV/FNuQm0BbspETGlPmfX8LG8rtrCjCAPhWuL2qRT/lBYDUMvFTUnw==" }, + "node_modules/@bcgov/design-tokens": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@bcgov/design-tokens/-/design-tokens-2.0.1.tgz", + "integrity": "sha512-TCC2PlTTSplfBgZYR/KOVEWPdqi7QkoxMazVGgO8PTd1NeCwkN+wCTFtkGuzo7JjVAAu7SwCt3RGnR9mluArkQ==" + }, "node_modules/@bcoe/v8-coverage": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz", @@ -28332,6 +28338,11 @@ "resolved": "https://registry.npmjs.org/@bcgov/bc-sans/-/bc-sans-2.1.0.tgz", "integrity": "sha512-1MesF4NAVpM5dywoJ68wNcBylHbPqg1dDV/FNuQm0BbspETGlPmfX8LG8rtrCjCAPhWuL2qRT/lBYDUMvFTUnw==" }, + "@bcgov/design-tokens": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@bcgov/design-tokens/-/design-tokens-2.0.1.tgz", + "integrity": "sha512-TCC2PlTTSplfBgZYR/KOVEWPdqi7QkoxMazVGgO8PTd1NeCwkN+wCTFtkGuzo7JjVAAu7SwCt3RGnR9mluArkQ==" + }, "@bcoe/v8-coverage": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz", diff --git a/met-web/package.json b/met-web/package.json index 5e8415412..efa4ed293 100644 --- 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 index e32168897..b61bc6896 100644 --- 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; +} \ No newline at end of file diff --git a/met-web/src/App.tsx b/met-web/src/App.tsx index 5aa53f544..3df571a04 100644 --- 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 = () => { { value={language.id} size="small" sx={{ - backgroundColor: 'white', + backgroundColor: 'var(--bcds-surface-background-white)', color: Palette.info.main, minWidth: '8ch', }} diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/AdditionalTabContent.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/AdditionalTabContent.tsx index 13c723dab..61f89cdaf 100644 --- a/met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/AdditionalTabContent.tsx +++ b/met-web/src/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)' }} > { marginTop={2} zIndex={1000} boxShadow="0px 0px 5px rgba(0, 0, 0, 0.1)" - sx={{ backgroundColor: 'white' }} + sx={{ backgroundColor: 'var(--bcds-surface-background-white)' }} > { marginTop={2} zIndex={1000} boxShadow="0px 0px 5px rgba(0, 0, 0, 0.1)" - sx={{ backgroundColor: 'white' }} + sx={{ backgroundColor: 'var(--bcds-surface-background-white)' }} > { marginTop={2} zIndex={1000} boxShadow="0px 0px 5px rgba(0, 0, 0, 0.1)" - sx={{ backgroundColor: 'white' }} + sx={{ backgroundColor: 'var(--bcds-surface-background-white)' }} > {'(Select One)'} diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/UserManagement/EngagementUserManagement.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/UserManagement/EngagementUserManagement.tsx index 7f7539106..1bc6b6ffe 100644 --- a/met-web/src/components/engagement/form/EngagementFormTabs/UserManagement/EngagementUserManagement.tsx +++ b/met-web/src/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)' }} > { value={0} fullWidth size="small" - sx={{ backgroundColor: 'white', color: Palette.info.main }} + sx={{ backgroundColor: 'var(--bcds-surface-background-white)', color: Palette.info.main }} > {'(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 index 447414b63..19da1bb56 100644 --- 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/met-web/src/components/engagement/view/widgets/PhasesWidget/PhasesWidgetMobile/PhaseBoxMobile.tsx b/met-web/src/components/engagement/view/widgets/PhasesWidget/PhasesWidgetMobile/PhaseBoxMobile.tsx index 31c69ad0f..15f5118e0 100644 --- a/met-web/src/components/engagement/view/widgets/PhasesWidget/PhasesWidgetMobile/PhaseBoxMobile.tsx +++ b/met-web/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 index f35acd512..b0b87fa5f 100644 --- 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 index 1cab2dae3..e267d4b9f 100644 --- 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 }} > {'(Select One)'} diff --git a/met-web/src/components/imageUpload/cropModal.tsx b/met-web/src/components/imageUpload/cropModal.tsx index 44a914d79..af102fa46 100644 --- 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 index d52287e73..a5f21927e 100644 --- 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 index 2000574f9..3a4f1b7ea 100644 --- a/met-web/src/components/layout/SideNav/SideNav.tsx +++ b/met-web/src/components/layout/SideNav/SideNav.tsx @@ -59,7 +59,7 @@ const DrawerBox = () => { ))} - + diff --git a/met-web/src/components/map/index.tsx b/met-web/src/components/map/index.tsx index 5f66b1e2a..23ff7ab46 100644 --- 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) = - + {markerLabel} diff --git a/met-web/src/components/publicDashboard/constants.ts b/met-web/src/components/publicDashboard/constants.ts index a97f4fa3b..a18f1b0bc 100644 --- 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 index 61b9a08e5..8e224dfc0 100644 --- 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 }} > {'(Select One)'} diff --git a/met-web/src/components/userManagement/listing/ActionsDropDown.tsx b/met-web/src/components/userManagement/listing/ActionsDropDown.tsx index d1a525647..5a58521a4 100644 --- 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 }} > {'(Select One)'} diff --git a/met-web/src/components/userManagement/userDetails/ActionsDropDown.tsx b/met-web/src/components/userManagement/userDetails/ActionsDropDown.tsx index 3f99ada38..0893ea1c2 100644 --- 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 }} > {'(Select One)'} diff --git a/met-web/src/styles/Theme.ts b/met-web/src/styles/Theme.ts index b8377c51b..63e08dc92 100644 --- 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: {