fix: header component scss (#1265)

yeul · web-flow · commit 61ea1b3aa7c6 · 2026-01-27T10:42:59.000-05:00
diff --git a/src/components/modal/v2/styles/components/_header.scss b/src/components/modal/v2/styles/components/_header.scss
@@ -1,6 +1,6 @@
-@use "../globals/colors";
-@use "../globals/mixins";
-@use "../globals/variables";
+@use '../globals/colors';
+@use '../globals/mixins';
+@use '../globals/variables';
 
 .header {
     &__container {
@@ -91,7 +91,12 @@
                     black variables.$sticky-header-height-mobile,
                     transparent 100px
                 );
-                mask-image: linear-gradient(to bottom, black, black variables.$sticky-header-height-mobile, transparent 100px);
+                mask-image: linear-gradient(
+                    to bottom,
+                    black,
+                    black variables.$sticky-header-height-mobile,
+                    transparent 100px
+                );
             }
         }
 
@@ -328,7 +333,7 @@
 
             &.headline-gb-preapproved {
                 max-width: 70%;
-                @include @include mixins.mobile {
+                @include mixins.mobile {
                     max-width: 75%;
                 }
             }
@@ -420,23 +425,23 @@
                 @include mixins.mobile {
                     margin: 3px 0px -50px -130px;
                 }
-                @include smallMobile {
+                @include mixins.smallMobile {
                     margin: 3px 0px -50px -60px;
                 }
 
-                @include lander {
+                @include mixins.lander {
                     margin: 30px 0px -50px -70px;
 
-                    @include mobile {
+                    @include mixins.mobile {
                         margin: 5px 0px -50px -130px;
                     }
 
-                    @include smallMobile {
+                    @include mixins.smallMobile {
                         margin: 5px 0px -50px -60px;
                     }
+                }
             }
         }
-    }
 
         &.checkout {
             background-color: colors.$white;
diff --git a/src/components/modal/v2/styles/components/_preapproval-disclaimer.scss b/src/components/modal/v2/styles/components/_preapproval-disclaimer.scss
@@ -1,5 +1,5 @@
-@use "../globals/colors";
-@use "../globals/mixins";
+@use '../globals/colors';
+@use '../globals/mixins';
 
 .preapproval-disclaimer {
     text-align: left;
@@ -144,19 +144,19 @@
         border-radius: 12px;
         margin-bottom: 1rem;
         padding: 6px 16px 6px 16px;
-         @include lander {
+        @include mixins.lander {
             width: 430px;
             margin-bottom: 0;
 
-            @include mobile {
+            @include mixins.mobile {
                 width: auto;
             }
         }
     }
     &__privacy {
         font-size: 14px;
         line-height: 16px;
-        color: $black;
+        color: colors.$black;
         margin-top: 12px;
         margin-bottom: 20px;
 
diff --git a/src/components/modal/v2/styles/globals/_mixins.scss b/src/components/modal/v2/styles/globals/_mixins.scss
@@ -1,4 +1,4 @@
-@use "variables";
+@use 'variables';
 
 // TODO: until PPUI has images for the universal modals, we will be using the tablet view for desktops.
 @mixin desktop {

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`		`-@use "../globals/colors";`
`2`		`-@use "../globals/mixins";`
`3`		`-@use "../globals/variables";`
	`1`	`+@use '../globals/colors';`
	`2`	`+@use '../globals/mixins';`
	`3`	`+@use '../globals/variables';`
`4`	`4`
`5`	`5`	`.header {`
`6`	`6`	`&__container {`
`@@ -91,7 +91,12 @@`
`91`	`91`	`black variables.$sticky-header-height-mobile,`
`92`	`92`	`transparent 100px`
`93`	`93`	`);`
`94`		`- mask-image: linear-gradient(to bottom, black, black variables.$sticky-header-height-mobile, transparent 100px);`
	`94`	`+ mask-image: linear-gradient(`
	`95`	`+ to bottom,`
	`96`	`+ black,`
	`97`	`+ black variables.$sticky-header-height-mobile,`
	`98`	`+ transparent 100px`
	`99`	`+ );`
`95`	`100`	`}`
`96`	`101`	`}`
`97`	`102`
`@@ -328,7 +333,7 @@`
`328`	`333`
`329`	`334`	`&.headline-gb-preapproved {`
`330`	`335`	`max-width: 70%;`
`331`		`- @include @include mixins.mobile {`
	`336`	`+ @include mixins.mobile {`
`332`	`337`	`max-width: 75%;`
`333`	`338`	`}`
`334`	`339`	`}`
`@@ -420,23 +425,23 @@`
`420`	`425`	`@include mixins.mobile {`
`421`	`426`	`margin: 3px 0px -50px -130px;`
`422`	`427`	`}`
`423`		`- @include smallMobile {`
	`428`	`+ @include mixins.smallMobile {`
`424`	`429`	`margin: 3px 0px -50px -60px;`
`425`	`430`	`}`
`426`	`431`
`427`		`- @include lander {`
	`432`	`+ @include mixins.lander {`
`428`	`433`	`margin: 30px 0px -50px -70px;`
`429`	`434`
`430`		`- @include mobile {`
	`435`	`+ @include mixins.mobile {`
`431`	`436`	`margin: 5px 0px -50px -130px;`
`432`	`437`	`}`
`433`	`438`
`434`		`- @include smallMobile {`
	`439`	`+ @include mixins.smallMobile {`
`435`	`440`	`margin: 5px 0px -50px -60px;`
`436`	`441`	`}`
	`442`	`+ }`
`437`	`443`	`}`
`438`	`444`	`}`
`439`		`- }`
`440`	`445`
`441`	`446`	`&.checkout {`
`442`	`447`	`background-color: colors.$white;`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@use "variables";`
	`1`	`+@use 'variables';`
`2`	`2`
`3`	`3`	`// TODO: until PPUI has images for the universal modals, we will be using the tablet view for desktops.`
`4`	`4`	`@mixin desktop {`