From 87a4a6f070746f08009f36b7871c9520a939b067 Mon Sep 17 00:00:00 2001 From: emilyjablonski Date: Wed, 13 Mar 2024 14:29:50 -0600 Subject: [PATCH 1/4] fix: visual fixes --- doorway-ui-components/src/global/tokens/colors.scss | 12 ++++++------ .../src/notifications/AlertBox.scss | 2 +- sites/public/styles/overrides.scss | 2 ++ 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/doorway-ui-components/src/global/tokens/colors.scss b/doorway-ui-components/src/global/tokens/colors.scss index b0e77c9f7b..726dd26a10 100644 --- a/doorway-ui-components/src/global/tokens/colors.scss +++ b/doorway-ui-components/src/global/tokens/colors.scss @@ -17,7 +17,7 @@ --bloom-color-green-100: #e7f7ea; --doorway-color-blue-1300: #001830; - --doorway-color-blue-1100: #0F2B50; + --doorway-color-blue-1100: #0f2b50; --bloom-color-blue-900: #205493; --bloom-color-blue-700: #0067be; --bloom-color-blue-500: #0077da; @@ -46,9 +46,9 @@ --bloom-color-gray-200: #f7f7f7; --bloom-color-gray-100: #f9f9f9; - --doorway-color-cyan-300: #C8F1FF; - --doorway-color-cyan-500: #00BED5; - --doorway-color-cyan-700: #009DB0; + --doorway-color-cyan-300: #c8f1ff; + --doorway-color-cyan-500: #00bed5; + --doorway-color-cyan-700: #009db0; /* Semantic Colors */ @@ -110,7 +110,7 @@ --primary-appearance-hover-background-color: var(--bloom-color-primary-dark); --primary-appearance-hover-border-color: var(--bloom-color-primary-dark); - ---text-large-primary--color: var(--bloom-color-primary); - --doorway-color-primary-background: var(--bloom-color-primary-lightest); + --text-large-primary--color: var(--bloom-color-primary); + --doorway-color-primary-background: var(--bloom-color-blue-300); --doorway-color-secondary-background: var(--bloom-color-blue-100); } diff --git a/doorway-ui-components/src/notifications/AlertBox.scss b/doorway-ui-components/src/notifications/AlertBox.scss index 7215f85ff7..48f6b89bef 100644 --- a/doorway-ui-components/src/notifications/AlertBox.scss +++ b/doorway-ui-components/src/notifications/AlertBox.scss @@ -4,7 +4,7 @@ --background-color: var(--bloom-color-primary-light); --alert-background-color: var(--bloom-color-alert-light); --alert-invert-background-color: var(--bloom-color-alert); - --notice-background-color: var(--bloom-color-primary-lightest); + --notice-background-color: var(--bloom-color-blue-300); --notice-invert-background-color: var(--bloom-color-primary); --success-background-color: var(--bloom-color-success-light); --success-invert-background-color: var(--bloom-color-success); diff --git a/sites/public/styles/overrides.scss b/sites/public/styles/overrides.scss index 75c2ee6091..78fd075233 100644 --- a/sites/public/styles/overrides.scss +++ b/sites/public/styles/overrides.scss @@ -130,4 +130,6 @@ .form--card__sub-header { border-top: none; } + + --notice-background-color: var(--bloom-color-primary-light); } From e65cfd2aba1f6472daca8d66902ca60d9020fd46 Mon Sep 17 00:00:00 2001 From: emilyjablonski Date: Wed, 13 Mar 2024 15:40:17 -0600 Subject: [PATCH 2/4] fix: visual fixes --- doorway-ui-components/src/headers/SiteHeader.scss | 2 +- doorway-ui-components/src/headers/SiteHeader.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/doorway-ui-components/src/headers/SiteHeader.scss b/doorway-ui-components/src/headers/SiteHeader.scss index 8cc7bde046..f0b1720188 100644 --- a/doorway-ui-components/src/headers/SiteHeader.scss +++ b/doorway-ui-components/src/headers/SiteHeader.scss @@ -215,7 +215,7 @@ .site-header__base-wrapped { margin-top: 0.2rem; - margin-bottom: var(--bloom-s12); + margin-bottom: var(--bloom-s24); padding-left: 0; } diff --git a/doorway-ui-components/src/headers/SiteHeader.tsx b/doorway-ui-components/src/headers/SiteHeader.tsx index ad42d64d73..bfe8c3aec6 100644 --- a/doorway-ui-components/src/headers/SiteHeader.tsx +++ b/doorway-ui-components/src/headers/SiteHeader.tsx @@ -63,7 +63,7 @@ const SiteHeader = (props: SiteHeaderProps) => { const logoOffset = document.getElementById("site-header-logo")?.offsetLeft const linksOffset = document.getElementById("site-header-links")?.offsetLeft if (linksOffset === undefined || logoOffset === undefined) return - return linksOffset === 0 + return linksOffset === 0 || linksOffset === logoOffset ? setNavbarClass("site-header__navbar-wrapped") : setNavbarClass("site-header__navbar-inline") } @@ -73,6 +73,7 @@ const SiteHeader = (props: SiteHeaderProps) => { const DESKTOP_MIN_WIDTH = props.desktopMinWidth || 767 // @screen md // Enables toggling off navbar links when entering mobile useLayoutEffect(() => { + console.log("useLayoutEffect") const updateMedia = () => { if (window.innerWidth > DESKTOP_MIN_WIDTH) { setIsDesktop(true) From 405507e4ae943b8497f3cdb355ca68ad2d75dbd3 Mon Sep 17 00:00:00 2001 From: emilyjablonski Date: Wed, 13 Mar 2024 15:43:28 -0600 Subject: [PATCH 3/4] fix: visual fixes --- doorway-ui-components/src/headers/SiteHeader.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doorway-ui-components/src/headers/SiteHeader.scss b/doorway-ui-components/src/headers/SiteHeader.scss index f0b1720188..0a89be9516 100644 --- a/doorway-ui-components/src/headers/SiteHeader.scss +++ b/doorway-ui-components/src/headers/SiteHeader.scss @@ -215,7 +215,7 @@ .site-header__base-wrapped { margin-top: 0.2rem; - margin-bottom: var(--bloom-s24); + margin-bottom: 5.5rem; padding-left: 0; } From 0eb6160ba255caed1254141e0de78cfa13ad454f Mon Sep 17 00:00:00 2001 From: emilyjablonski Date: Thu, 14 Mar 2024 15:19:26 -0600 Subject: [PATCH 4/4] fix: remove log --- doorway-ui-components/src/headers/SiteHeader.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/doorway-ui-components/src/headers/SiteHeader.tsx b/doorway-ui-components/src/headers/SiteHeader.tsx index bfe8c3aec6..5e1d6dd7c1 100644 --- a/doorway-ui-components/src/headers/SiteHeader.tsx +++ b/doorway-ui-components/src/headers/SiteHeader.tsx @@ -73,7 +73,6 @@ const SiteHeader = (props: SiteHeaderProps) => { const DESKTOP_MIN_WIDTH = props.desktopMinWidth || 767 // @screen md // Enables toggling off navbar links when entering mobile useLayoutEffect(() => { - console.log("useLayoutEffect") const updateMedia = () => { if (window.innerWidth > DESKTOP_MIN_WIDTH) { setIsDesktop(true)