diff --git a/package-lock.json b/package-lock.json index 6b9c1537..ae1819e7 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", - "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", + "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.8" } @@ -7263,17 +7255,18 @@ } }, "node_modules/compression": { - "version": "1.7.4", - "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz", - "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==", + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/compression/-/compression-1.8.1.tgz", + "integrity": "sha512-9mAqGPHLakhCLeNyxPkK4xVo746zQ/czLH1Ky+vkitMnWfWZps8r0qXuwhwizagCRttsL4lfG4pIOvaWLpAP0w==", "dev": true, + "license": "MIT", "dependencies": { - "accepts": "~1.3.5", - "bytes": "3.0.0", - "compressible": "~2.0.16", + "bytes": "3.1.2", + "compressible": "~2.0.18", "debug": "2.6.9", - "on-headers": "~1.0.2", - "safe-buffer": "5.1.2", + "negotiator": "~0.6.4", + "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", - "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz", - "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz", + "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", - "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz", - "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.1.0.tgz", + "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", diff --git a/package.json b/package.json index 41b094d9..20cbd751 100644 --- a/package.json +++ b/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", diff --git a/public/css/hop-styling.css b/public/css/hop-styling.css index dda9d35e..6b99fe79 100644 --- a/public/css/hop-styling.css +++ b/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) { diff --git a/public/index.html b/public/index.html index ae1b046e..d3c8d677 100644 --- a/public/index.html +++ b/public/index.html @@ -12,6 +12,7 @@ + <%= htmlWebpackPlugin.options.title %> diff --git a/public/scss/hop-styling.scss b/public/scss/hop-styling.scss index 6f80d3c7..b238bada 100644 --- a/public/scss/hop-styling.scss +++ b/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%); diff --git a/src/assets/fonts/Urbanist-Bold.woff b/src/assets/fonts/Urbanist-Bold.woff new file mode 100644 index 00000000..1c45f014 Binary files /dev/null and b/src/assets/fonts/Urbanist-Bold.woff differ diff --git a/src/assets/fonts/Urbanist-Bold.woff2 b/src/assets/fonts/Urbanist-Bold.woff2 new file mode 100644 index 00000000..c044da47 Binary files /dev/null and b/src/assets/fonts/Urbanist-Bold.woff2 differ diff --git a/src/assets/fonts/Urbanist-BoldItalic.woff b/src/assets/fonts/Urbanist-BoldItalic.woff new file mode 100644 index 00000000..080a51a9 Binary files /dev/null and b/src/assets/fonts/Urbanist-BoldItalic.woff differ diff --git a/src/assets/fonts/Urbanist-BoldItalic.woff2 b/src/assets/fonts/Urbanist-BoldItalic.woff2 new file mode 100644 index 00000000..fbb881aa Binary files /dev/null and b/src/assets/fonts/Urbanist-BoldItalic.woff2 differ diff --git a/src/assets/fonts/Urbanist-ExtraBold.woff b/src/assets/fonts/Urbanist-ExtraBold.woff new file mode 100644 index 00000000..a8a5bc90 Binary files /dev/null and b/src/assets/fonts/Urbanist-ExtraBold.woff differ diff --git a/src/assets/fonts/Urbanist-ExtraBold.woff2 b/src/assets/fonts/Urbanist-ExtraBold.woff2 new file mode 100644 index 00000000..5912be2a Binary files /dev/null and b/src/assets/fonts/Urbanist-ExtraBold.woff2 differ diff --git a/src/assets/fonts/Urbanist-MediumItalic.woff b/src/assets/fonts/Urbanist-MediumItalic.woff new file mode 100644 index 00000000..e55471a0 Binary files /dev/null and b/src/assets/fonts/Urbanist-MediumItalic.woff differ diff --git a/src/assets/fonts/Urbanist-MediumItalic.woff2 b/src/assets/fonts/Urbanist-MediumItalic.woff2 new file mode 100644 index 00000000..6b56e516 Binary files /dev/null and b/src/assets/fonts/Urbanist-MediumItalic.woff2 differ diff --git a/src/assets/fonts/Urbanist-Regular.woff b/src/assets/fonts/Urbanist-Regular.woff new file mode 100644 index 00000000..7efe9bc4 Binary files /dev/null and b/src/assets/fonts/Urbanist-Regular.woff differ diff --git a/src/assets/fonts/Urbanist-Regular.woff2 b/src/assets/fonts/Urbanist-Regular.woff2 new file mode 100644 index 00000000..bade4562 Binary files /dev/null and b/src/assets/fonts/Urbanist-Regular.woff2 differ diff --git a/src/assets/fonts/Urbanist-SemiBold.woff b/src/assets/fonts/Urbanist-SemiBold.woff new file mode 100644 index 00000000..92949770 Binary files /dev/null and b/src/assets/fonts/Urbanist-SemiBold.woff differ diff --git a/src/assets/fonts/Urbanist-SemiBold.woff2 b/src/assets/fonts/Urbanist-SemiBold.woff2 new file mode 100644 index 00000000..1321abca Binary files /dev/null and b/src/assets/fonts/Urbanist-SemiBold.woff2 differ 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/iss-components/nav-button/nav-button.spec.js b/src/iss-components/nav-button/nav-button.spec.js deleted file mode 100644 index 3f5ace6e..00000000 --- a/src/iss-components/nav-button/nav-button.spec.js +++ /dev/null @@ -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); - }); -}); diff --git a/src/iss-components/nav-button/nav-button.vue b/src/iss-components/nav-button/nav-button.vue deleted file mode 100644 index 8bc801bb..00000000 --- a/src/iss-components/nav-button/nav-button.vue +++ /dev/null @@ -1,50 +0,0 @@ - - - - - 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/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue b/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue index e5ee1da0..502337a6 100644 --- a/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue +++ b/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( - 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 - )}`; + 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)}`; } if (type === calendarOptions.GOOGLE) { - 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`; + 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`; } if (type === calendarOptions.YAHOO) { - 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 - )}`; + 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)}`; } 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; diff --git a/src/store/index.js b/src/store/index.js index d0bd9b29..1959a140 100644 --- a/src/store/index.js +++ b/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 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 7945802e..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; } @@ -71,58 +70,58 @@ caption, font-weight: 400; } -// Averta Fonts +// Urbanist Fonts @font-face { - font-family: "AvertaBold"; - src: - url("@/assets/fonts/averta-bold-webfont.woff2") format("woff2"), - url("@/assets/fonts/averta-bold-webfont.woff") format("woff"); - font-weight: normal; - font-style: normal; + font-family: "UrbanistRegular"; + src: + url("@/assets/fonts/Urbanist-Regular.woff") format("woff2"), + url("@/assets/fonts/Urbanist-Regular.woff2") format("woff"); + font-weight: normal; + font-style: normal; } @font-face { - font-family: "AvertaBold_Italic"; - src: - url("@/assets/fonts/averta-bolditalic-webfont.woff2") format("woff2"), - url("@/assets/fonts/averta-bolditalic-webfont.woff") format("woff"); - font-weight: normal; - font-style: normal; + font-family: "UrbanistSemibold"; + src: + url("@/assets/fonts/Urbanist-SemiBold.woff") format("woff2"), + url("@/assets/fonts/Urbanist-SemiBold.woff2") format("woff"); + font-weight: normal; + font-style: normal; } @font-face { - font-family: "AvertaExtraBold"; - src: - url("@/assets/fonts/averta-extrabold-webfont.woff2") format("woff2"), - url("@/assets/fonts/averta-extrabold-webfont.woff") format("woff"); - font-weight: normal; - font-style: normal; + font-family: "UrbanistBold"; + src: + url("@/assets/fonts/Urbanist-Bold.woff") format("woff2"), + url("@/assets/fonts/Urbanist-Bold.woff2") format("woff"); + font-weight: normal; + font-style: normal; } @font-face { - font-family: "AvertaRegular"; - src: - url("@/assets/fonts/averta-regular-webfont.woff2") format("woff2"), - url("@/assets/fonts/averta-regular-webfont.woff") format("woff"); - font-weight: normal; - font-style: normal; + font-family: "UrbanistExtraBold"; + src: + url("@/assets/fonts/Urbanist-ExtraBold.woff") format("woff2"), + url("@/assets/fonts/Urbanist-ExtraBold.woff2") format("woff"); + font-weight: normal; + font-style: normal; } @font-face { - font-family: "AvertaRegular_Italic"; - src: - url("@/assets/fonts/averta-regularitalic-webfont.woff2") format("woff2"), - url("@/assets/fonts/averta-regularitalic-webfont.woff") format("woff"); - font-weight: normal; - font-style: normal; + font-family: "UrbanistMedium_Italic"; + src: + url("@/assets/fonts/Urbanist-MediumItalic.woff") format("woff2"), + url("@/assets/fonts/Urbanist-MediumItalic.woff2") format("woff"); + font-weight: normal; + font-style: normal; } @font-face { - font-family: "AvertaSemibold"; - src: - url("@/assets/fonts/averta-semibold-webfont.woff2") format("woff2"), - url("@/assets/fonts/averta-semibold-webfont.woff") format("woff"); - font-weight: normal; - font-style: normal; + font-family: "UrbanistBold_Italic"; + src: + url("@/assets/fonts/Urbanist-BoldItalic.woff") format("woff2"), + url("@/assets/fonts/Urbanist-BoldItalic.woff2") format("woff"); + font-weight: normal; + font-style: normal; } diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss index b0917c12..409fc9e5 100644 --- a/src/styles/ux-variables.scss +++ b/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 @@ -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%); }