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

CASH-1477: Modal cta button color/type

Browse source
This commit is contained in:
Chris Redelinghuys 2025-09-03 13:12:07 -04:00
parent ba0ab06898
commit 5098719644
6 changed files with 24 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -32,7 +32,7 @@
<div class="modal-footer">
<slot name="modal-footer-slot"></slot>
<modalButtonMain
isPrimary
:isPrimary="isFooterButtonPrimary"
class="w-100 modal-footer-button"
:id="modalId + '-modalbtn'"
ref="modalButtonMain"
@ -65,6 +65,7 @@ export default {
suppressPageScroll: Boolean,
staticBackdrop: Boolean,
footerButtonDisabled: Boolean,
isFooterButtonPrimary: Boolean,
onModalOpenedCallback: {
type: Function,
},

18
src/digital-components/modal/ux-components/modal-button-main/modal-button-main.vue
View file

@ -115,14 +115,16 @@ export default {
&.btn-secondary {
position: relative;
background: transparent;
border: 1px solid $red;
border: 1px solid $blue;
color: $blue;
font-weight: 500;
transition: all 150ms linear;
height: 3rem;
&:hover {
&:hover,
&:active {
color: $white;
@include blue-gradient;
background: $blue;
border: none;
}
&:focus, // Mouse, touch, stylus focus
&:focus-visible {
@ -130,16 +132,18 @@ export default {
outline: none;
box-shadow:
0 0 0 3px $white,
0 0 0 5.5px $red;
color: $white;
@include blue-gradient;
0 0 0 5.5px $blue;
color: $blue;
&:active {
color: $white;
}
}
&:disabled {
background: transparent;
color: $gray-550 !important;
font-weight: 400;
height: 48px;
border: 1px solid $red;
border: 1px solid $blue;
cursor: pointer;
pointer-events: all;
}

1
src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
View file

@ -19,6 +19,7 @@
suppressPageScroll
:onModalClosedCallback="onModalClosed"
:footerButtonText="modalButtonText"
:isFooterButtonPrimary="true"
@footer-button-event="saveProgress">
<p class="modal-body-inner" v-html="modalBodyText"></p>
<saveProgressQuestion

1
src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue
View file

@ -6,6 +6,7 @@
suppressPageScroll
:onModalClosedCallback="onModalClosed"
:footerButtonText="modalButtonText"
:isFooterButtonPrimary="true"
@footer-button-event="saveProgress">
<p class="modal-body-inner">{{ modalBodyText }}</p>
<saveProgressQuestion

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

@ -123,8 +123,8 @@ $body-color: $gray-600;
//Fonts
$font-family-sans-serif: UrbanistRegular, Arial, Helvetica, sans-serif;
$font-family-monospace: UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
monospace;
$font-family-monospace:
UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base: $font-family-sans-serif;
$font-family-code: $font-family-monospace;

14
src/ux-components/button-main/button-main.vue
View file

@ -63,9 +63,6 @@ export default {
<style lang="scss">
.btn {
&:first-child:active {
background-color: $red;
}
&.btn-primary {
position: relative;
background: $red;
@ -117,8 +114,8 @@ export default {
&.btn-secondary {
position: relative;
background: transparent;
border: 1px solid $red;
color: $red;
border: 1px solid $blue;
color: $blue;
font-weight: 500;
transition: all 150ms linear;
height: 3rem;
@ -131,8 +128,11 @@ export default {
outline: none;
box-shadow:
0 0 0 3px $white,
0 0 0 5.5px $red;
color: $white;
0 0 0 5.5px $blue;
color: $blue;
&:hover {
color: $white;
}
}
&:disabled {
background: transparent;