jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update UI with spacing & layout tweaks and new fonts.

Browse source 
Replaced Poppnis font with Averta.
This commit is contained in:
Bryan Mauger 2024-11-06 12:17:22 -05:00
parent 9a3038c66c
commit e5afc93ef3
21 changed files with 49 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
public/index.html
View file

@ -10,9 +10,6 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<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=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>

BIN
src/assets/fonts/averta-bold-webfont.woff Normal file
View file

Binary file not shown.

BIN
src/assets/fonts/averta-bold-webfont.woff2 Normal file
View file

Binary file not shown.

BIN
src/assets/fonts/averta-bolditalic-webfont.woff Normal file
View file

Binary file not shown.

BIN
src/assets/fonts/averta-bolditalic-webfont.woff2 Normal file
View file

Binary file not shown.

BIN
src/assets/fonts/averta-extrabold-webfont.woff Normal file
View file

Binary file not shown.

BIN
src/assets/fonts/averta-extrabold-webfont.woff2 Normal file
View file

Binary file not shown.

BIN
src/assets/fonts/averta-regular-webfont.woff Normal file
View file

Binary file not shown.

BIN
src/assets/fonts/averta-regular-webfont.woff2 Normal file
View file

Binary file not shown.

BIN
src/assets/fonts/averta-regularitalic-webfont.woff Normal file
View file

Binary file not shown.

BIN
src/assets/fonts/averta-regularitalic-webfont.woff2 Normal file
View file

Binary file not shown.

BIN
src/assets/fonts/averta-semibold-webfont.woff Normal file
View file

Binary file not shown.

BIN
src/assets/fonts/averta-semibold-webfont.woff2 Normal file
View file

Binary file not shown.

1
src/digital-components/modal/modal.vue
View file

@ -156,7 +156,6 @@ export default {
width: 100%;
bottom: 0;
z-index: 5;
background-color: $gray-100;
}
&.modal-component {
.modal-dialog {

4
src/fmg-components/funnel-header/funnel-header.vue
View file

@ -94,7 +94,7 @@ export default {
}
.logo-image {
max-width: 114px;
height: auto;
width: auto;
height: 1.1875rem;
}
</style>

2
src/fmg-components/funnel-sub-header/funnel-sub-header.vue
View file

@ -53,7 +53,7 @@ export default {
return this.leftAlignHeader ? "justify-content-start" : "justify-content-center";
},
subText() {
return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
return this.getCmsContent(this.cmsWidgetName, "HeaderSubText");
},
backButtonAccessibleText() {
return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText");

17
src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
View file

@ -71,7 +71,7 @@
</ul>
<!-- End of body text parsing -->
<div
class="package-footer fw-bold caption ms-n6 mt-4"
class="package-footer fw-bold caption ms-n4 mt-4"
v-if="this.buttonFooterCopy"
v-html="this.buttonFooterCopy"></div>
</div>
@ -166,14 +166,14 @@ export default {
position: relative;
cursor: pointer;
width: 100%;
padding: 1rem;
padding: 0.75rem;
border: 1px solid $gray-300;
box-shadow:
0px 4px 8px -4px rgba(0, 0, 0, 0.15),
0px 4px 24px -8px rgba(0, 0, 0, 0.2);
border-radius: 0.5rem;
overflow: hidden;
min-height: 60px;
min-height: 52px;
max-height: 126px;
@include media-breakpoint-up(md) {
max-height: 500px;
@ -182,14 +182,14 @@ export default {
transition: max-height 0.25s ease-in;
&.has-subheader {
min-height: 80px;
min-height: 72px;
}
&:before {
content: "";
position: relative;
top: 5px;
margin-right: 1rem;
margin-right: 0.5rem;
border-radius: 50%;
border: 1px solid $gray-500;
width: 16px;
@ -200,8 +200,8 @@ export default {
&:after {
content: "";
position: absolute;
left: 19px;
top: 24px;
left: 15px;
top: 20px;
border-radius: 50%;
width: 10px;
height: 10px;
@ -280,6 +280,7 @@ export default {
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
span {
&.pricing-info {
color: $green;
@ -341,7 +342,7 @@ export default {
}
}
ul {
margin: 1rem 0 0 -15px;
margin: 1rem 0 0 -5px;
padding: 0;
li {
font-size: 0.875rem;

81
src/styles/common-typography-styles.scss
View file

@ -76,68 +76,53 @@ caption,
font-weight: 500;
}
// Poppins styles from Google Fonts
// Averta Fonts
// Regular styles
.poppins-light {
font-family: "Poppins", sans-serif;
font-weight: 300;
@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;
}
.poppins-regular {
font-family: "Poppins", sans-serif;
font-weight: 400;
@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;
}
.poppins-medium {
font-family: "Poppins", sans-serif;
font-weight: 500;
@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;
}
.poppins-semibold {
font-family: "Poppins", sans-serif;
font-weight: 600;
@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;
}
.poppins-bold {
font-family: "Poppins", sans-serif;
font-weight: 700;
@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;
}
// Italic styles
@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;
.poppins-light-italic {
font-family: "Poppins", sans-serif;
font-weight: 300;
font-style: italic;
}
.poppins-regular-italic {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: italic;
}
.poppins-medium-italic {
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: italic;
}
.poppins-semibold-italic {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-style: italic;
}
.poppins-bold-italic {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-style: italic;
}
}

2
src/styles/ux-variables.scss
View file

@ -115,7 +115,7 @@ $theme-colors: (
$body-color: $gray-600;
//Fonts
$font-family-sans-serif: Poppins, Arial, Helvetica, sans-serif;
$font-family-sans-serif: AvertaRegular, Arial, Helvetica, sans-serif;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
monospace;
// stylelint-enable value-keyword-case

4
src/ux-components/list-button-horizontal/list-button-horizontal.vue
View file

@ -7,7 +7,7 @@
]"
v-model="selectedValue">
<div
class="button-content list-button-horizontal-content d-flex flex-column justify-content-center p-3">
class="button-content list-button-horizontal-content d-flex flex-column justify-content-center p-2">
<span class="m-0" :class="textPosition">
{{ buttonLabel }}
</span>
@ -105,7 +105,7 @@ export default {
span {
font-size: 1rem;
font-weight: 500;
font-weight: 600;
}
}

2
src/ux-components/list-card/list-card.vue
View file

@ -7,7 +7,7 @@
]"
v-model="selectedValue">
<div
class="d-flex w-100 align-items-center px-2 h-100 list-card-content button-content rounded-3"
class="d-flex w-100 align-items-center px-1 h-100 list-card-content button-content rounded-3"
:class="labelClasses">
<img
v-if="buttonImage"