Fix some font in hop, add letter spacing change

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) {

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%);

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;
 }

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;

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;
         }

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;
         }

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%);
         }

src/styles/common-styles.scss

@@ -7,6 +7,7 @@ body {
 
 body {
     font-size: 16px;
+    letter-spacing: $letter-spacing-primary;
     background-color: #fff;
     color: #4d5151;
 

src/styles/common-typography-styles.scss

@@ -41,7 +41,6 @@ h5,
 h6,
 .h6 {
   line-height: 1.7;
-  letter-spacing: .75px;
   text-transform: uppercase;
 }
 

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;
+$enable-important-utilities: false;
+
+// Letter Spacing
+$letter-spacing-primary: 0.03em;

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%);
         }

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%);
         }