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"> <div class="modal-footer">
<slot name="modal-footer-slot"></slot> <slot name="modal-footer-slot"></slot>
<modalButtonMain <modalButtonMain
isPrimary :isPrimary="isFooterButtonPrimary"
class="w-100 modal-footer-button" class="w-100 modal-footer-button"
:id="modalId + '-modalbtn'" :id="modalId + '-modalbtn'"
ref="modalButtonMain" ref="modalButtonMain"
@ -65,6 +65,7 @@ export default {
suppressPageScroll: Boolean, suppressPageScroll: Boolean,
staticBackdrop: Boolean, staticBackdrop: Boolean,
footerButtonDisabled: Boolean, footerButtonDisabled: Boolean,
isFooterButtonPrimary: Boolean,
onModalOpenedCallback: { onModalOpenedCallback: {
type: Function, 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 { &.btn-secondary {
position: relative; position: relative;
background: transparent; background: transparent;
border: 1px solid $red; border: 1px solid $blue;
color: $blue; color: $blue;
font-weight: 500; font-weight: 500;
transition: all 150ms linear; transition: all 150ms linear;
height: 3rem; height: 3rem;
&:hover { &:hover,
&:active {
color: $white; color: $white;
@include blue-gradient; background: $blue;
border: none;
} }
&:focus, // Mouse, touch, stylus focus &:focus, // Mouse, touch, stylus focus
&:focus-visible { &:focus-visible {
@ -130,16 +132,18 @@ export default {
outline: none; outline: none;
box-shadow: box-shadow:
0 0 0 3px $white, 0 0 0 3px $white,
0 0 0 5.5px $red; 0 0 0 5.5px $blue;
color: $white; color: $blue;
@include blue-gradient; &:active {
color: $white;
}
} }
&:disabled { &:disabled {
background: transparent; background: transparent;
color: $gray-550 !important; color: $gray-550 !important;
font-weight: 400; font-weight: 400;
height: 48px; height: 48px;
border: 1px solid $red; border: 1px solid $blue;
cursor: pointer; cursor: pointer;
pointer-events: all; pointer-events: all;
} }

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

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

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

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

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

@ -123,8 +123,8 @@ $body-color: $gray-600;
//Fonts //Fonts
$font-family-sans-serif: UrbanistRegular, Arial, Helvetica, sans-serif; $font-family-sans-serif: UrbanistRegular, Arial, Helvetica, sans-serif;
$font-family-monospace: UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", $font-family-monospace:
monospace; UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case // stylelint-enable value-keyword-case
$font-family-base: $font-family-sans-serif; $font-family-base: $font-family-sans-serif;
$font-family-code: $font-family-monospace; $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"> <style lang="scss">
.btn { .btn {
&:first-child:active {
background-color: $red;
}
&.btn-primary { &.btn-primary {
position: relative; position: relative;
background: $red; background: $red;
@ -117,8 +114,8 @@ export default {
&.btn-secondary { &.btn-secondary {
position: relative; position: relative;
background: transparent; background: transparent;
border: 1px solid $red; border: 1px solid $blue;
color: $red; color: $blue;
font-weight: 500; font-weight: 500;
transition: all 150ms linear; transition: all 150ms linear;
height: 3rem; height: 3rem;
@ -131,8 +128,11 @@ export default {
outline: none; outline: none;
box-shadow: box-shadow:
0 0 0 3px $white, 0 0 0 3px $white,
0 0 0 5.5px $red; 0 0 0 5.5px $blue;
color: $white; color: $blue;
&:hover {
color: $white;
}
} }
&:disabled { &:disabled {
background: transparent; background: transparent;