From a0a91b9146af8a942f49638982e655b8fdf9083b Mon Sep 17 00:00:00 2001 From: tanner-ricks <182143365+tanner-ricks@users.noreply.github.com> Date: Tue, 21 Jan 2025 13:15:35 -0600 Subject: [PATCH 1/3] Adding comments for marked locations --- index.html | 1 + src/components/Button.tsx | 4 ++-- src/components/FieldGroup.tsx | 1 + src/components/FieldGroupDivider.tsx | 1 + src/components/InlineStatus.tsx | 1 + src/components/Loading.tsx | 1 + src/index.css | 7 +++++-- src/pages/AuthenticatedLanding/Landing.less | 1 + src/pages/AuthenticatedLanding/index.tsx | 1 + src/pages/Filing/FilingApp/FileSubmission.tsx | 4 ++-- src/pages/Filing/FilingHome.less | 1 + src/pages/Filing/FilingHome.tsx | 1 + tailwind.config.js | 1 + vite.config.ts | 1 + 14 files changed, 20 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 36d81536b..6a4c8eae5 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,7 @@ name="description" content="Use the CFPB Small Business Lending Data Filing Platform to upload your lending data, review validation results, and submit your filing." /> + ); diff --git a/src/components/InlineStatus.tsx b/src/components/InlineStatus.tsx index 6a8f5790b..7874a49da 100644 --- a/src/components/InlineStatus.tsx +++ b/src/components/InlineStatus.tsx @@ -60,6 +60,7 @@ function InlineStatus({ const getStatusClassName = (): string => { const { value } = classNamePriorityPipe.find(option => option.condition) ?? {}; + // TODO: Consolidate colors to tailwind theme: https://github.com/cfpb/sbl-frontend/issues/1094 return value ?? 'text-[#0072CE]'; }; diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx index 6eb2083cf..80186f2e8 100644 --- a/src/components/Loading.tsx +++ b/src/components/Loading.tsx @@ -15,6 +15,7 @@ export interface LoadingType { export function LoadingContent({ message = 'Loading', }: LoadingType): ReactElement { + // TODO: Consolidate colors to tailwind theme: https://github.com/cfpb/sbl-frontend/issues/1094 return ( diff --git a/src/index.css b/src/index.css index 363e3a165..c949b79d7 100644 --- a/src/index.css +++ b/src/index.css @@ -74,6 +74,7 @@ select.error { @apply border-[1px] border-solid border-errorColor outline outline-[1px] outline-errorColor; } +/* TODO: Consolidate colors to tailwind theme: https://github.com/cfpb/sbl-frontend/issues/1094 */ .auth-action .a-btn { font-weight: 600; color: #43484e; @@ -85,7 +86,8 @@ select.error { } } -/* Fixes the issue where too much white space below the footer while zoomed out or when swiping on mobile */ +/* TODO: Consolidate colors to tailwind theme: https://github.com/cfpb/sbl-frontend/issues/1094 + Fixes the issue where too much white space below the footer while zoomed out or when swiping on mobile */ body { background-color: #f7f8f9; } @@ -118,7 +120,8 @@ td:last-child{ /* TODO: Put this fix in the DSR */ -/* https://github.com/cfpb/design-system-react/issues/345 */ +/* TODO: Consolidate colors to tailwind theme: https://github.com/cfpb/sbl-frontend/issues/1094 + https://github.com/cfpb/design-system-react/issues/345 */ td { background-color: white !important; } diff --git a/src/pages/AuthenticatedLanding/Landing.less b/src/pages/AuthenticatedLanding/Landing.less index b6615ecee..e7816015c 100644 --- a/src/pages/AuthenticatedLanding/Landing.less +++ b/src/pages/AuthenticatedLanding/Landing.less @@ -1,3 +1,4 @@ +/* TODO: Consolidate colors to tailwind theme: https://github.com/cfpb/sbl-frontend/issues/1094 */ .m-hero { border-bottom: 1px solid #afd2f2; } diff --git a/src/pages/AuthenticatedLanding/index.tsx b/src/pages/AuthenticatedLanding/index.tsx index e1fd25216..026e759e4 100644 --- a/src/pages/AuthenticatedLanding/index.tsx +++ b/src/pages/AuthenticatedLanding/index.tsx @@ -21,6 +21,7 @@ function Landing(): ReactElement | null { return (
+ {/* TODO: Consolidate colors to tailwind theme: https://github.com/cfpb/sbl-frontend/issues/1094 */} + {/* TODO: Consolidate colors to tailwind theme: https://github.com/cfpb/sbl-frontend/issues/1094 */} { 'icons/*.svg', ], manifest: { + // TODO: Consolidate colors to tailwind theme: https://github.com/cfpb/sbl-frontend/issues/1094 theme_color: '#BD34FE', icons: [ { From 4497e4884a8d87f75ee54940b90a488504da5494 Mon Sep 17 00:00:00 2001 From: tanner-ricks <182143365+tanner-ricks@users.noreply.github.com> Date: Wed, 22 Jan 2025 15:34:45 -0600 Subject: [PATCH 2/3] updated hardcoded colors to use tailwind theme colors instead --- index.html | 2 -- src/components/Button.tsx | 3 +-- src/components/FieldGroup.tsx | 3 +-- src/components/FieldGroupDivider.tsx | 3 +-- src/components/InlineStatus.tsx | 3 +-- src/components/Loading.tsx | 3 +-- src/index.css | 19 ++++++++++--------- src/pages/AuthenticatedLanding/Landing.less | 4 ++-- src/pages/AuthenticatedLanding/index.tsx | 2 -- src/pages/Error/Error500.tsx | 1 - src/pages/Error/NotFound404.tsx | 1 - src/pages/Filing/FilingApp/FileSubmission.tsx | 4 ++-- src/pages/Filing/FilingHome.less | 4 ++-- src/pages/Filing/FilingHome.tsx | 2 -- tailwind.config.js | 6 +++++- vite.config.ts | 2 -- 16 files changed, 26 insertions(+), 36 deletions(-) diff --git a/index.html b/index.html index 6a4c8eae5..a1041f164 100644 --- a/index.html +++ b/index.html @@ -13,8 +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 f7276e400..27d2a68b8 100644 --- a/src/components/FieldGroupDivider.tsx +++ b/src/components/FieldGroupDivider.tsx @@ -1,6 +1,5 @@ export default function FieldGroupDivider(): JSX.Element { - // TODO: Consolidate colors to tailwind theme: https://github.com/cfpb/sbl-frontend/issues/1094 return ( -
+
); } diff --git a/src/components/InlineStatus.tsx b/src/components/InlineStatus.tsx index 7874a49da..e103f0da0 100644 --- a/src/components/InlineStatus.tsx +++ b/src/components/InlineStatus.tsx @@ -60,8 +60,7 @@ function InlineStatus({ const getStatusClassName = (): string => { const { value } = classNamePriorityPipe.find(option => option.condition) ?? {}; - // TODO: Consolidate colors to tailwind theme: https://github.com/cfpb/sbl-frontend/issues/1094 - 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 80186f2e8..131b932aa 100644 --- a/src/components/Loading.tsx +++ b/src/components/Loading.tsx @@ -15,9 +15,8 @@ export interface LoadingType { export function LoadingContent({ message = 'Loading', }: LoadingType): ReactElement { - // TODO: Consolidate colors to tailwind theme: https://github.com/cfpb/sbl-frontend/issues/1094 return ( - + {message} diff --git a/src/index.css b/src/index.css index c949b79d7..a94c9e466 100644 --- a/src/index.css +++ b/src/index.css @@ -74,22 +74,20 @@ select.error { @apply border-[1px] border-solid border-errorColor outline outline-[1px] outline-errorColor; } -/* TODO: Consolidate colors to tailwind theme: https://github.com/cfpb/sbl-frontend/issues/1094 */ .auth-action .a-btn { font-weight: 600; - color: #43484e; border: none; text-decoration: none; + @apply text-grayDark; &:hover { - color: #2284d5; + @apply text-pacific90; } } -/* TODO: Consolidate colors to tailwind theme: https://github.com/cfpb/sbl-frontend/issues/1094 - Fixes the issue where too much white space below the footer while zoomed out or when swiping on mobile */ +/* 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,10 +118,9 @@ td:last-child{ /* TODO: Put this fix in the DSR */ -/* TODO: Consolidate colors to tailwind theme: https://github.com/cfpb/sbl-frontend/issues/1094 - https://github.com/cfpb/design-system-react/issues/345 */ +/* https://github.com/cfpb/design-system-react/issues/345 */ td { - background-color: white !important; + @apply !bg-white; } /* Design System overrides */ @@ -140,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 e7816015c..1a9b3ffb3 100644 --- a/src/pages/AuthenticatedLanding/Landing.less +++ b/src/pages/AuthenticatedLanding/Landing.less @@ -1,6 +1,6 @@ -/* TODO: Consolidate colors to tailwind theme: https://github.com/cfpb/sbl-frontend/issues/1094 */ .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 026e759e4..370f4aa06 100644 --- a/src/pages/AuthenticatedLanding/index.tsx +++ b/src/pages/AuthenticatedLanding/index.tsx @@ -21,11 +21,9 @@ function Landing(): ReactElement | null { return (
- {/* TODO: Consolidate colors to tailwind theme: https://github.com/cfpb/sbl-frontend/issues/1094 */} 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 ( - {/* TODO: Consolidate colors to tailwind theme: https://github.com/cfpb/sbl-frontend/issues/1094 */} diff --git a/tailwind.config.js b/tailwind.config.js index c3a46ffb2..af296d51d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -14,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 09ce4056a..2eaa38aa8 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -73,8 +73,6 @@ export default async ({ mode }) => { 'icons/*.svg', ], manifest: { - // TODO: Consolidate colors to tailwind theme: https://github.com/cfpb/sbl-frontend/issues/1094 - theme_color: '#BD34FE', icons: [ { src: '/android-chrome-192x192.png', From 8ebb8ed50f5307e37fb7f1eb19b536cc31050f59 Mon Sep 17 00:00:00 2001 From: tanner-ricks <182143365+tanner-ricks@users.noreply.github.com> Date: Fri, 24 Jan 2025 11:01:35 -0600 Subject: [PATCH 3/3] Fix for failing test --- e2e/pages/shared-lending-platform/Navigation.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/e2e/pages/shared-lending-platform/Navigation.spec.ts b/e2e/pages/shared-lending-platform/Navigation.spec.ts index fe08ffed9..1ad6a3b91 100644 --- a/e2e/pages/shared-lending-platform/Navigation.spec.ts +++ b/e2e/pages/shared-lending-platform/Navigation.spec.ts @@ -170,7 +170,7 @@ test('Navigation', async ({ page, navigateToFilingHome }) => { .getByRole('link', { name: 'Diversity & Inclusion' }) .click(); await expect(page.locator('h1')).toContainText( - 'Diversity and inclusion at the Bureau', + 'Office of Minority and Women Inclusion at the Bureau', ); await page.goBack();