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 http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <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> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <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%; width: 100%;
bottom: 0; bottom: 0;
z-index: 5; z-index: 5;
background-color: $gray-100;
} }
&.modal-component { &.modal-component {
.modal-dialog { .modal-dialog {

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

@ -94,7 +94,7 @@ export default {
} }
.logo-image { .logo-image {
max-width: 114px; width: auto;
height: auto; height: 1.1875rem;
} }
</style> </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"; return this.leftAlignHeader ? "justify-content-start" : "justify-content-center";
}, },
subText() { subText() {
return this.getCmsContent(this.cmsWidgetName, "SubheaderText"); return this.getCmsContent(this.cmsWidgetName, "HeaderSubText");
}, },
backButtonAccessibleText() { backButtonAccessibleText() {
return this.getCmsContent(this.cmsWidgetName, "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> </ul>
<!-- End of body text parsing --> <!-- End of body text parsing -->
<div <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-if="this.buttonFooterCopy"
v-html="this.buttonFooterCopy"></div> v-html="this.buttonFooterCopy"></div>
</div> </div>
@ -166,14 +166,14 @@ export default {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
padding: 1rem; padding: 0.75rem;
border: 1px solid $gray-300; border: 1px solid $gray-300;
box-shadow: box-shadow:
0px 4px 8px -4px rgba(0, 0, 0, 0.15), 0px 4px 8px -4px rgba(0, 0, 0, 0.15),
0px 4px 24px -8px rgba(0, 0, 0, 0.2); 0px 4px 24px -8px rgba(0, 0, 0, 0.2);
border-radius: 0.5rem; border-radius: 0.5rem;
overflow: hidden; overflow: hidden;
min-height: 60px; min-height: 52px;
max-height: 126px; max-height: 126px;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
max-height: 500px; max-height: 500px;
@ -182,14 +182,14 @@ export default {
transition: max-height 0.25s ease-in; transition: max-height 0.25s ease-in;
&.has-subheader { &.has-subheader {
min-height: 80px; min-height: 72px;
} }
&:before { &:before {
content: ""; content: "";
position: relative; position: relative;
top: 5px; top: 5px;
margin-right: 1rem; margin-right: 0.5rem;
border-radius: 50%; border-radius: 50%;
border: 1px solid $gray-500; border: 1px solid $gray-500;
width: 16px; width: 16px;
@ -200,8 +200,8 @@ export default {
&:after { &:after {
content: ""; content: "";
position: absolute; position: absolute;
left: 19px; left: 15px;
top: 24px; top: 20px;
border-radius: 50%; border-radius: 50%;
width: 10px; width: 10px;
height: 10px; height: 10px;
@ -280,6 +280,7 @@ export default {
font-weight: 600; font-weight: 600;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
span { span {
&.pricing-info { &.pricing-info {
color: $green; color: $green;
@ -341,7 +342,7 @@ export default {
} }
} }
ul { ul {
margin: 1rem 0 0 -15px; margin: 1rem 0 0 -5px;
padding: 0; padding: 0;
li { li {
font-size: 0.875rem; font-size: 0.875rem;

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

@ -76,68 +76,53 @@ caption,
font-weight: 500; font-weight: 500;
} }
// Poppins styles from Google Fonts // Averta Fonts
// Regular styles @font-face {
font-family: 'AvertaBold';
.poppins-light { src: url('@/assets/fonts/averta-bold-webfont.woff2') format('woff2'),
font-family: "Poppins", sans-serif; url('@/assets/fonts/averta-bold-webfont.woff') format('woff');
font-weight: 300; font-weight: normal;
font-style: normal; font-style: normal;
} }
.poppins-regular { @font-face {
font-family: "Poppins", sans-serif; font-family: 'AvertaBold_Italic';
font-weight: 400; 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-style: normal;
} }
.poppins-medium { @font-face {
font-family: "Poppins", sans-serif; font-family: 'AvertaExtraBold';
font-weight: 500; 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-style: normal;
} }
.poppins-semibold { @font-face {
font-family: "Poppins", sans-serif; font-family: 'AvertaRegular';
font-weight: 600; 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-style: normal;
} }
.poppins-bold { @font-face {
font-family: "Poppins", sans-serif; font-family: 'AvertaRegular_Italic';
font-weight: 700; 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-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; $body-color: $gray-600;
//Fonts //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", $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
monospace; monospace;
// stylelint-enable value-keyword-case // 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"> v-model="selectedValue">
<div <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"> <span class="m-0" :class="textPosition">
{{ buttonLabel }} {{ buttonLabel }}
</span> </span>
@ -105,7 +105,7 @@ export default {
span { span {
font-size: 1rem; 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"> v-model="selectedValue">
<div <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"> :class="labelClasses">
<img <img
v-if="buttonImage" v-if="buttonImage"