From 01ceb85622b41f5df2273114eaa2ee1c5b8cc999 Mon Sep 17 00:00:00 2001 From: Alex Humphries Date: Tue, 5 Aug 2025 16:50:39 -0400 Subject: [PATCH] Fix some font in hop, add letter spacing change --- public/css/hop-styling.css | 5 +++++ public/scss/hop-styling.scss | 5 +++++ src/digital-components/date-picker/date-picker.vue | 2 +- .../dropdown-question/dropdown-question.vue | 1 + .../textarea-question/textarea-question.vue | 1 + src/digital-components/textbox-question/textbox-question.vue | 1 + .../cancel-claim-modal/cancel-claim-modal.vue | 1 + src/styles/common-styles.scss | 1 + src/styles/common-typography-styles.scss | 1 - src/styles/ux-variables.scss | 5 ++++- src/ux-components/button-main/button-main.vue | 1 + src/ux-components/modal-button-main/modal-button-main.vue | 1 + 12 files changed, 22 insertions(+), 3 deletions(-) diff --git a/public/css/hop-styling.css b/public/css/hop-styling.css index b6524f00..2c9abdc0 100644 --- a/public/css/hop-styling.css +++ b/public/css/hop-styling.css @@ -6,6 +6,7 @@ body { font-family: Urbanist, Arial, Helvetica, sans-serif; font-weight: 400; + letter-spacing: 0.03em; color: #000; margin: 0; background-color: white; @@ -46,6 +47,8 @@ body select { border: 1px solid #8E9292; padding: 16px; font-size: 16px; + font-family: inherit; + letter-spacing: inherit; color: #000; background-color: #fff; } @@ -139,6 +142,8 @@ body .buttonContainer button { justify-content: center; font-weight: 500; font-size: 16px; + font-family: inherit; + letter-spacing: inherit; height: 48px; } @media (hover: hover) { diff --git a/public/scss/hop-styling.scss b/public/scss/hop-styling.scss index eab65544..34d76485 100644 --- a/public/scss/hop-styling.scss +++ b/public/scss/hop-styling.scss @@ -6,6 +6,7 @@ body { font-family: Urbanist, Arial, Helvetica, sans-serif; font-weight: 400; + letter-spacing: .03em; color: #000; margin: 0; background-color: white; @@ -55,6 +56,8 @@ body { border: 1px solid #8E9292; padding: 16px; font-size: 16px; + font-family: inherit; + letter-spacing: inherit; color: #000; background-color: #fff; &:focus, @@ -149,6 +152,8 @@ body { justify-content: center; font-weight: 500; font-size: 16px; + font-family: inherit; + letter-spacing: inherit; height: 48px; @media (hover: hover) { background: linear-gradient(270deg, #1574a1 0%, #003d58 100%); diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index f35b9cd7..c5567180 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -886,7 +886,6 @@ export default { grid-area: 1 / 1 / 2 / 5; text-transform: uppercase; font-weight: 300; - letter-spacing: 0.75px; } .legend { grid-area: 1 / 5 / 2 / 8; @@ -1144,6 +1143,7 @@ export default { background: transparent; border: none; font-weight: 500; + letter-spacing: inherit; text-underline-offset: 4px; z-index: 2; } diff --git a/src/digital-components/dropdown-question/dropdown-question.vue b/src/digital-components/dropdown-question/dropdown-question.vue index d2a19a0c..341120a5 100644 --- a/src/digital-components/dropdown-question/dropdown-question.vue +++ b/src/digital-components/dropdown-question/dropdown-question.vue @@ -137,6 +137,7 @@ export default { color: $gray-600; border-radius: 0.5rem; min-height: 3rem; + letter-spacing: inherit; &:focus, &:focus-visible { box-shadow: 0 0 0 2.5px $blue; diff --git a/src/digital-components/textarea-question/textarea-question.vue b/src/digital-components/textarea-question/textarea-question.vue index f63783ea..152b86de 100644 --- a/src/digital-components/textarea-question/textarea-question.vue +++ b/src/digital-components/textarea-question/textarea-question.vue @@ -156,6 +156,7 @@ export default { border: 1px solid $gray-500; border-radius: 0.5rem; padding: 12px 16px; + letter-spacing: inherit; &::placeholder { color: $gray-500; } diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue index 24d18e8a..8b5c6c84 100644 --- a/src/digital-components/textbox-question/textbox-question.vue +++ b/src/digital-components/textbox-question/textbox-question.vue @@ -334,6 +334,7 @@ input::-webkit-date-and-time-value { min-height: 3rem; max-height: 3rem; padding: 0.75rem 1rem; + letter-spacing: inherit; &::placeholder { color: $gray-500; } diff --git a/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue b/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue index f5d0df9d..cdc19315 100644 --- a/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue +++ b/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue @@ -94,6 +94,7 @@ export default { color: $white; justify-content: center; font-weight: $font-weight-bold; + letter-spacing: inherit; @media (hover: hover) { background: linear-gradient(270deg, $blue 0%, $blue-800 100%); } diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss index 66c9534e..bafbe18c 100644 --- a/src/styles/common-styles.scss +++ b/src/styles/common-styles.scss @@ -7,6 +7,7 @@ body { body { font-size: 16px; + letter-spacing: $letter-spacing-primary; background-color: #fff; color: #4d5151; diff --git a/src/styles/common-typography-styles.scss b/src/styles/common-typography-styles.scss index ec2ab98a..f2dd085f 100644 --- a/src/styles/common-typography-styles.scss +++ b/src/styles/common-typography-styles.scss @@ -41,7 +41,6 @@ h5, h6, .h6 { line-height: 1.7; - letter-spacing: .75px; text-transform: uppercase; } diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss index 2d78a6dc..ea7f6110 100644 --- a/src/styles/ux-variables.scss +++ b/src/styles/ux-variables.scss @@ -205,4 +205,7 @@ $modal-fade-transform: translate(0, 100%); $modal-backdrop-opacity: 0; //Disable default !important behavior -$enable-important-utilities: false; \ No newline at end of file +$enable-important-utilities: false; + +// Letter Spacing +$letter-spacing-primary: 0.03em; diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue index 69649e08..6a9f9f1f 100644 --- a/src/ux-components/button-main/button-main.vue +++ b/src/ux-components/button-main/button-main.vue @@ -65,6 +65,7 @@ export default { color: $white; justify-content: center; font-weight: 500; + letter-spacing: inherit; @media (hover: hover) { background: linear-gradient(270deg, $blue 0%, $blue-800 100%); } diff --git a/src/ux-components/modal-button-main/modal-button-main.vue b/src/ux-components/modal-button-main/modal-button-main.vue index ff826f65..e5059065 100644 --- a/src/ux-components/modal-button-main/modal-button-main.vue +++ b/src/ux-components/modal-button-main/modal-button-main.vue @@ -73,6 +73,7 @@ export default { color: $white; justify-content: center; font-weight: 500; + letter-spacing: inherit; @media (hover: hover) { background: linear-gradient(270deg, $blue 0%, $blue-800 100%); }