From 89c5343c813835140b7e504c2386bf2a9588fb5f Mon Sep 17 00:00:00 2001 From: Tanner Ricks <182143365+tanner-ricks@users.noreply.github.com> Date: Tue, 4 Feb 2025 09:43:49 -0600 Subject: [PATCH] [Styling] Use CFPB Colors in Tailwind Theme (#1112) Find hardcoded colors and replace them to use tailwind theme colors ## Changes - Updated locations of hardcoded colors to take advantage of tailwind styles instead ## How to test this PR #### Setup for verification - Perform any console commands below from within the `sbl-frontend` directory 1. Run `checkout main && git pull` 2. Restart the stack 3. Run `yarn run test:e2e:snapshot-update` 4. Once finished `ctrl-c` 5. Run `git add --all` 6. Run `git stash` 7. Run `git checkout 1094-tailwind-theme && git pull` 8. Run `git stash pop` 9. Restart the stack #### Verify the changes 1. Run `yarn run test:e2e:snapshot` 2. In the playwright testing window that appears, run all tests 3. Verify that there are no relevant snapshot related failures 4. Click through the site and verify that things look as they should --- index.html | 1 - src/components/Button.tsx | 5 ++--- src/components/FieldGroup.tsx | 2 +- src/components/FieldGroupDivider.tsx | 2 +- src/components/InlineStatus.tsx | 2 +- src/components/Loading.tsx | 2 +- src/index.css | 12 ++++++++---- src/pages/AuthenticatedLanding/Landing.less | 3 ++- src/pages/AuthenticatedLanding/index.tsx | 1 - src/pages/Error/Error500.tsx | 1 - src/pages/Error/NotFound404.tsx | 1 - src/pages/Filing/FilingApp/FileSubmission.tsx | 4 ++-- src/pages/Filing/FilingHome.less | 3 ++- src/pages/Filing/FilingHome.tsx | 1 - tailwind.config.js | 7 ++++++- vite.config.ts | 1 - 16 files changed, 26 insertions(+), 22 deletions(-) diff --git a/index.html b/index.html index 36d81536b..a1041f164 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,6 @@ name="description" content="Use the CFPB Small Business Lending Data Filing Platform to upload your lending data, review validation results, and submit your filing." /> - {children} diff --git a/src/components/FieldGroupDivider.tsx b/src/components/FieldGroupDivider.tsx index b6fc61b78..27d2a68b8 100644 --- a/src/components/FieldGroupDivider.tsx +++ b/src/components/FieldGroupDivider.tsx @@ -1,5 +1,5 @@ export default function FieldGroupDivider(): JSX.Element { return ( -
+
); } diff --git a/src/components/InlineStatus.tsx b/src/components/InlineStatus.tsx index 6a8f5790b..e103f0da0 100644 --- a/src/components/InlineStatus.tsx +++ b/src/components/InlineStatus.tsx @@ -60,7 +60,7 @@ function InlineStatus({ const getStatusClassName = (): string => { const { value } = classNamePriorityPipe.find(option => option.condition) ?? {}; - return value ?? 'text-[#0072CE]'; + return value ?? 'text-pacific'; }; const getMessage = (): JSX.Element | null => { diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx index 6eb2083cf..131b932aa 100644 --- a/src/components/Loading.tsx +++ b/src/components/Loading.tsx @@ -16,7 +16,7 @@ export function LoadingContent({ message = 'Loading', }: LoadingType): ReactElement { return ( - + {message} diff --git a/src/index.css b/src/index.css index 363e3a165..a94c9e466 100644 --- a/src/index.css +++ b/src/index.css @@ -76,18 +76,18 @@ select.error { .auth-action .a-btn { font-weight: 600; - color: #43484e; border: none; text-decoration: none; + @apply text-grayDark; &:hover { - color: #2284d5; + @apply text-pacific90; } } /* Fixes the issue where too much white space below the footer while zoomed out or when swiping on mobile */ body { - background-color: #f7f8f9; + @apply bg-gray5; } /* Uncomment to use ellipsis trick on Review Errors and Warnings tables */ @@ -120,7 +120,7 @@ td:last-child{ /* https://github.com/cfpb/design-system-react/issues/345 */ td { - background-color: white !important; + @apply !bg-white; } /* Design System overrides */ @@ -137,3 +137,7 @@ a:visited .link-icon-override-color .cf-icon-svg { a:hover .link-icon-override-color .cf-icon-svg { @apply !fill-pacificDark; } + +.m-hero { + @apply !bg-white; +} diff --git a/src/pages/AuthenticatedLanding/Landing.less b/src/pages/AuthenticatedLanding/Landing.less index b6615ecee..1a9b3ffb3 100644 --- a/src/pages/AuthenticatedLanding/Landing.less +++ b/src/pages/AuthenticatedLanding/Landing.less @@ -1,5 +1,6 @@ .m-hero { - border-bottom: 1px solid #afd2f2; + border-bottom: 1px solid; + @apply border-b-pacific40 !bg-pacific10; } #landing-page { diff --git a/src/pages/AuthenticatedLanding/index.tsx b/src/pages/AuthenticatedLanding/index.tsx index e1fd25216..370f4aa06 100644 --- a/src/pages/AuthenticatedLanding/index.tsx +++ b/src/pages/AuthenticatedLanding/index.tsx @@ -24,7 +24,6 @@ function Landing(): ReactElement | null { diff --git a/src/pages/Error/Error500.tsx b/src/pages/Error/Error500.tsx index 314d8de08..1ee4337c3 100644 --- a/src/pages/Error/Error500.tsx +++ b/src/pages/Error/Error500.tsx @@ -54,7 +54,6 @@ export function Error500({ return ( diff --git a/tailwind.config.js b/tailwind.config.js index e67b1bc98..af296d51d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,6 +6,7 @@ const config = { content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], theme: { extend: { + // TODO: Consolidate colors to tailwind theme: https://github.com/cfpb/sbl-frontend/issues/1094 colors: { warningColor: '#ff9e1b', errorColor: '#D14124', @@ -13,14 +14,18 @@ const config = { disabledColor: '#E7E8E9', cfpbBorderColor: '#919395', black: '#101820', + gray5: '#F7F8F9', gray20: '#D2D3D5', + gray50: '#A2A3A4', grayDark: '#43484E', grayDarker: '#293037', + pacific90: '#2284d5', + pacific40: '#AFD2F2', + pacific10: '#EFF8FD', pacific: '#0072CE', // TODO: Integrate DS color vars pacificDark: '#0050b4', navy: '#254b87', teal: '#257675', - navy: '#254B87', }, fontFamily: { inter: ['Inter', ...defaultConfig.theme.fontFamily.sans], diff --git a/vite.config.ts b/vite.config.ts index 58aa345fe..7c2c74078 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -74,7 +74,6 @@ export default async ({ mode }) => { 'icons/*.svg', ], manifest: { - theme_color: '#BD34FE', icons: [ { src: '/android-chrome-192x192.png',