Merge branch 'develop' into feature/INSR-2205

# Conflicts:
#	src/store/index.js

package-lock.json

@@ -53,7 +53,7 @@
         "eslint-plugin-import": "2.26.0",
         "eslint-plugin-jsdoc": "^46.4.3",
         "eslint-plugin-vue": "^9.15.1",
-        "form-data": "^4.0.2",
+        "form-data": "^4.0.4",
         "jest": "^27.0.5",
         "jest-junit": "^13.0.0",
         "jest-serializer-vue": "^3.1.0",
@@ -6486,15 +6486,6 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
-    "node_modules/body-parser/node_modules/bytes": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
-      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/body-parser/node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -6655,10 +6646,11 @@
       }
     },
     "node_modules/bytes": {
-      "version": "3.0.0",
+      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
-      "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
@@ -7263,17 +7255,18 @@
       }
     },
     "node_modules/compression": {
-      "version": "1.7.4",
+      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
+      "resolved": "https://registry.npmjs.org/compression/-/compression-1.8.1.tgz",
-      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
+      "integrity": "sha512-9mAqGPHLakhCLeNyxPkK4xVo746zQ/czLH1Ky+vkitMnWfWZps8r0qXuwhwizagCRttsL4lfG4pIOvaWLpAP0w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "accepts": "~1.3.5",
+        "bytes": "3.1.2",
-        "bytes": "3.0.0",
+        "compressible": "~2.0.18",
-        "compressible": "~2.0.16",
         "debug": "2.6.9",
-        "on-headers": "~1.0.2",
+        "negotiator": "~0.6.4",
-        "safe-buffer": "5.1.2",
+        "on-headers": "~1.1.0",
+        "safe-buffer": "5.2.1",
         "vary": "~1.1.2"
       },
       "engines": {
@@ -7295,6 +7288,37 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "dev": true
     },
+    "node_modules/compression/node_modules/negotiator": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.4.tgz",
+      "integrity": "sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/compression/node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -10134,15 +10158,16 @@
       }
     },
     "node_modules/form-data": {
-      "version": "4.0.2",
+      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
-      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
         "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
         "mime-types": "^2.1.12"
       },
       "engines": {
@@ -16203,10 +16228,11 @@
       }
     },
     "node_modules/on-headers": {
-      "version": "1.0.2",
+      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.1.0.tgz",
-      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
+      "integrity": "sha512-737ZY3yNnXy37FHkQxPzt4UZ2UWPWiCZWLvFZ4fu5cueciegX0zGPnrlY6bwRg4FdQOe9YU8MkmJwGhoMybl8A==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
@@ -17622,15 +17648,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/raw-body/node_modules/bytes": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
-      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/rc": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",

package.json

@@ -12,6 +12,7 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit --coverage --ci --colors",
+    "test:unit:coverage": "vue-cli-service test:unit --coverage --ci --colors",
     "test:unit:lite": "vue-cli-service test:unit --ci",
     "test:playwright": "playwright test --config=playwright-tests/playwright.config.ts"
   },
@@ -61,7 +62,7 @@
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-jsdoc": "^46.4.3",
     "eslint-plugin-vue": "^9.15.1",
-    "form-data": "^4.0.2",
+    "form-data": "^4.0.4",
     "jest": "^27.0.5",
     "jest-junit": "^13.0.0",
     "jest-serializer-vue": "^3.1.0",

public/css/hop-styling.css

@@ -2,9 +2,11 @@
 /* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
 /* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
 /* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
+@import url("https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap");
 body {
-  font-family: AvertaRegular;
+  font-family: Urbanist, Roboto, Arial, sans-serif;
   font-weight: 400;
+  letter-spacing: 0.03em;
   color: #000;
   margin: 0;
   background-color: white;
@@ -45,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;
 }
@@ -138,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/index.html

@@ -12,6 +12,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
 
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>

public/scss/hop-styling.scss

@@ -2,9 +2,11 @@
 /* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
 /* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
 /* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
+@import url("https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap");
 body {
-    font-family: AvertaRegular;
+    font-family: Urbanist, Roboto, Arial, sans-serif;
     font-weight: 400;
+    letter-spacing: .03em;
     color: #000;
     margin: 0;
     background-color: white;
@@ -54,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,
@@ -148,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/iss-components/nav-button/nav-button.spec.js

@@ -1,30 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import navButton from '@/iss-components/nav-button/nav-button.vue';
-
-describe('NavButton', () => {
-    it('should display input when type is button', () => {
-        const wrapper = shallowMount(navButton, {
-            propsData: {
-                text: 'Hello',
-                scenario: 'test',
-                type: 'button'
-            }
-        });
-
-        expect(wrapper.find('input').exists()).toBe(true);
-        expect(wrapper.find('p').exists()).toBe(false);
-    });
-
-    it('should display p element when type is text', () => {
-        const wrapper = shallowMount(navButton, {
-            propsData: {
-                text: 'Hello',
-                scenario: 'test',
-                type: 'text'
-            }
-        });
-
-        expect(wrapper.find('input').exists()).toBe(false);
-        expect(wrapper.find('p').exists()).toBe(true);
-    });
-});

src/iss-components/nav-button/nav-button.vue

@@ -1,50 +0,0 @@
-<template>
-    <input
-        v-if="type == 'button'"
-        type="button"
-        class="nav-button"
-        :value="text"
-        @click="navTo" />
-    <p
-        v-else
-        type=""
-        class="nav-text"
-        @click="navTo">
-        {{ text }}
-    </p>
-</template>
-
-<script>
-
-export default ({
-    name: 'nav-button',
-    props: {
-        text: String,
-        scenario: String,
-        type: String
-    },
-    methods: {
-        navTo() {
-            this.$router.navigate(this.scenario, this.$route);
-        }
-    }
-});
-</script>
-
-<style lang="scss" scoped>
-    .nav-button {
-        background-color: lightgray;
-        padding: 2.5px;
-        border-radius: 5px;
-        min-width: 70px;
-        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
-        font-size: 14px;
-    }
-
-    .nav-text {
-        color: blue;
-        cursor: pointer;
-        text-decoration: underline;
-    }
-
-</style>

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/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue

@@ -223,35 +223,13 @@ export default {
             const dateFormat = 'yyyyMMddTHHmmss';
             const outlookComTimeSpanFormat = 'yyyy-MM-ddTHH:mm:ss';
             if (type === calendarOptions.OUTLOOKCOM) {
-                URL = `${applicationConfig.OUTLOOK_CALENDAR}&startdt=${encodeURIComponent(
+                URL = `${applicationConfig.OUTLOOK_CALENDAR}&startdt=${encodeURIComponent(getDateFormat(this.Appointment.StartDate, outlookComTimeSpanFormat))}&enddt=${encodeURIComponent(getDateFormat(this.Appointment.EndDate, outlookComTimeSpanFormat))}&subject=${encodeURIComponent(this.Appointment.Subject)}&body=${encodeURIComponent(this.Appointment.Body)}&location=${encodeURIComponent(this.Appointment.Location)}`;
-                    getDateFormat(this.Appointment.StartDate, outlookComTimeSpanFormat)
-                )}&enddt=${encodeURIComponent(
-                    getDateFormat(this.Appointment.EndDate, outlookComTimeSpanFormat)
-                )}&subject=${encodeURIComponent(
-                    this.Appointment.Subject
-                )}&body=${encodeURIComponent(this.Appointment.Body)}&location=${encodeURIComponent(
-                    this.Appointment.Location
-                )}`;
             }
             if (type === calendarOptions.GOOGLE) {
-                URL = `${applicationConfig.GOOGLE_CALENDAR}&text=${encodeURIComponent(
+                URL = `${applicationConfig.GOOGLE_CALENDAR}&text=${encodeURIComponent(this.Appointment.Subject)}&dates=${encodeURIComponent(getDateFormat(this.Appointment.StartDate, dateFormat))}/${encodeURIComponent(getDateFormat(this.Appointment.EndDate, dateFormat))}&details=${encodeURIComponent(this.Appointment.Body)}&location=${encodeURIComponent(this.Appointment.Location)}&sf=true&output=xml`;
-                    this.Appointment.Subject
-                )}&dates=${encodeURIComponent(
-                    getDateFormat(this.Appointment.StartDate, dateFormat)
-                )}/${encodeURIComponent(
-                    getDateFormat(this.Appointment.EndDate, dateFormat
-                    ))}&details=${encodeURIComponent(
-                    this.Appointment.Body
-                )}&location=${encodeURIComponent(this.Appointment.Location)}&sf=true&output=xml`;
             }
             if (type === calendarOptions.YAHOO) {
-                URL = `${applicationConfig.YAHOO_CALENDAR}&TITLE=${encodeURIComponent(
+                URL = `${applicationConfig.YAHOO_CALENDAR}&TITLE=${encodeURIComponent(this.Appointment.Subject)}&DESC=${encodeURIComponent(this.Appointment.Body)}&ST=${encodeURIComponent(getDateFormat(this.Appointment.StartDate, dateFormat))}&DUR=${this.Appointment.Duration}&in_loc=${encodeURIComponent(this.Appointment.Location)}`;
-                    this.Appointment.Subject
-                )}&DESC=${encodeURIComponent(this.Appointment.Body)}&ST=${encodeURIComponent(
-                    getDateFormat(this.Appointment.StartDate, dateFormat)
-                )}&DUR=${this.Appointment.Duration}&in_loc=${encodeURIComponent(
-                    this.Appointment.Location
-                )}`;
             }
             return {
                 url: URL,
@@ -284,8 +262,6 @@ export default {
     margin: 0 0 0 0.4375rem;
     color: #1574a1;
     vertical-align: middle;
-    font-weight: 500;
-    font-family: "AvertaRegular";
 }
 .add-to-calendar button {
     border: 0;

src/store/index.js

@@ -1011,7 +1011,7 @@ export const useMainStore = defineStore({
         },
 
         getProviders(serviceZipCode) {
-            const { carId } = this.order.vehicle;
+            const { carId, isBigTruck } = this.order.vehicle;
             const damageType = this.damage.isRepair ? 'Repair' : 'Replace';
             const { parentAccountNumber } = this.order;
             const partsWithRecal = getTopLevelGlassPartsWithRecal(this.order.lineItems.glassParts);
@@ -1024,7 +1024,7 @@ export const useMainStore = defineStore({
             if (windshieldPartWithRecal) {
                 url += `/${windshieldPartWithRecal.partNumber}`;
             }
-            url += `/${isHeavyTruck}`;
+            url += `/${isBigTruck}`;
             return globalMethods.callHttpClient({
                 method: endpoints.GetProviders.method,
                 endpoint: url

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;
 }
 
@@ -71,58 +70,58 @@ caption,
   font-weight: 400;
 }
 
-// Averta Fonts
+// Urbanist Fonts
 
 @font-face {
-  font-family: "AvertaBold";
+    font-family: "UrbanistRegular";
-  src:
+    src:
-      url("@/assets/fonts/averta-bold-webfont.woff2") format("woff2"),
+        url("@/assets/fonts/Urbanist-Regular.woff") format("woff2"),
-      url("@/assets/fonts/averta-bold-webfont.woff") format("woff");
+        url("@/assets/fonts/Urbanist-Regular.woff2") format("woff");
-  font-weight: normal;
+    font-weight: normal;
-  font-style: normal;
+    font-style: normal;
 }
 
 @font-face {
-  font-family: "AvertaBold_Italic";
+    font-family: "UrbanistSemibold";
-  src:
+    src:
-      url("@/assets/fonts/averta-bolditalic-webfont.woff2") format("woff2"),
+        url("@/assets/fonts/Urbanist-SemiBold.woff") format("woff2"),
-      url("@/assets/fonts/averta-bolditalic-webfont.woff") format("woff");
+        url("@/assets/fonts/Urbanist-SemiBold.woff2") format("woff");
-  font-weight: normal;
+    font-weight: normal;
-  font-style: normal;
+    font-style: normal;
 }
 
 @font-face {
-  font-family: "AvertaExtraBold";
+    font-family: "UrbanistBold";
-  src:
+    src:
-      url("@/assets/fonts/averta-extrabold-webfont.woff2") format("woff2"),
+        url("@/assets/fonts/Urbanist-Bold.woff") format("woff2"),
-      url("@/assets/fonts/averta-extrabold-webfont.woff") format("woff");
+        url("@/assets/fonts/Urbanist-Bold.woff2") format("woff");
-  font-weight: normal;
+    font-weight: normal;
-  font-style: normal;
+    font-style: normal;
 }
 
 @font-face {
-  font-family: "AvertaRegular";
+    font-family: "UrbanistExtraBold";
-  src:
+    src:
-      url("@/assets/fonts/averta-regular-webfont.woff2") format("woff2"),
+        url("@/assets/fonts/Urbanist-ExtraBold.woff") format("woff2"),
-      url("@/assets/fonts/averta-regular-webfont.woff") format("woff");
+        url("@/assets/fonts/Urbanist-ExtraBold.woff2") format("woff");
-  font-weight: normal;
+    font-weight: normal;
-  font-style: normal;
+    font-style: normal;
 }
 
 @font-face {
-  font-family: "AvertaRegular_Italic";
+    font-family: "UrbanistMedium_Italic";
-  src:
+    src:
-      url("@/assets/fonts/averta-regularitalic-webfont.woff2") format("woff2"),
+        url("@/assets/fonts/Urbanist-MediumItalic.woff") format("woff2"),
-      url("@/assets/fonts/averta-regularitalic-webfont.woff") format("woff");
+        url("@/assets/fonts/Urbanist-MediumItalic.woff2") format("woff");
-  font-weight: normal;
+    font-weight: normal;
-  font-style: normal;
+    font-style: normal;
 }
 
 @font-face {
-  font-family: "AvertaSemibold";
+    font-family: "UrbanistBold_Italic";
-  src:
+    src:
-      url("@/assets/fonts/averta-semibold-webfont.woff2") format("woff2"),
+        url("@/assets/fonts/Urbanist-BoldItalic.woff") format("woff2"),
-      url("@/assets/fonts/averta-semibold-webfont.woff") format("woff");
+        url("@/assets/fonts/Urbanist-BoldItalic.woff2") format("woff");
-  font-weight: normal;
+    font-weight: normal;
-  font-style: normal;
+    font-style: normal;
 }

src/styles/ux-variables.scss

@@ -117,7 +117,7 @@ $theme-colors: (
 $body-color: $gray-600;
 
 //Fonts
-$font-family-sans-serif: AvertaRegular, Arial, Helvetica, sans-serif;
+$font-family-sans-serif: UrbanistRegular, Roboto, Arial, sans-serif;
 $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
     monospace;
 // stylelint-enable value-keyword-case
@@ -206,3 +206,6 @@ $modal-backdrop-opacity: 0;
 
 //Disable default !important behavior
 $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%);
         }