From ac2529e50de1438184c94285aac7b589e5cf63e8 Mon Sep 17 00:00:00 2001
From: Kari Salminen <kari.salminen@anders.com>
Date: Tue, 17 Dec 2024 14:16:55 +0200
Subject: [PATCH] fix: Sass nested rule deprecation warnings by moving CSS
 parts

fix all of the following warnings when building (i.e. "yarn build"):
```
Deprecation Warning: Sass's behavior for declarations that appear after
nested rules will be changing to match the behavior specified by CSS in
an upcoming version. To keep the existing behavior, move the declaration
above the nested rule. To opt into the new behavior, wrap the
declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls
```
by moving CSS parts around, I checked that there were no dependencies
between the moved CSS parts that would make the end result functionally
different if they were moved.

refs KK-1372
---
 src/domain/app/layout/listPageLayout.module.scss     |  3 +--
 .../utilityComponents/infoTemplate.module.scss       |  9 ++++-----
 .../utilityComponents/simpleFormTemplate.module.scss |  8 ++++----
 src/domain/app/notFound/notFound.module.scss         | 10 +++++-----
 src/domain/event/event.module.scss                   |  7 ++++---
 src/domain/home/form/homePreliminaryForm.module.scss |  2 +-
 src/domain/home/hero/hero.module.scss                |  8 ++++----
 src/domain/home/partners/partnerLogoList.module.scss |  2 +-
 .../profile/modal/editProfileModal.module.scss       | 12 +++++-------
 .../form/partial/childFormFields.module.scss         |  2 +-
 .../registration/form/registrationForm.module.scss   |  2 +-
 .../registration/notEligible/notEligible.module.scss |  8 ++++----
 12 files changed, 35 insertions(+), 38 deletions(-)

diff --git a/src/domain/app/layout/listPageLayout.module.scss b/src/domain/app/layout/listPageLayout.module.scss
index e42900c4..cc8ac727 100644
--- a/src/domain/app/layout/listPageLayout.module.scss
+++ b/src/domain/app/layout/listPageLayout.module.scss
@@ -39,6 +39,7 @@ $backButtonAsideBreakpoint: $backButtonWidth + variables.$breakpoint-xl;
     'content content'
     'actions actions';
   row-gap: variables.$spacing-layout-xs;
+  margin-top: variables.$spacing-layout-s;
   align-items: center;
 
   @include layout.respond-above(m) {
@@ -71,8 +72,6 @@ $backButtonAsideBreakpoint: $backButtonWidth + variables.$breakpoint-xl;
     grid-area: actions;
   }
 
-  margin-top: variables.$spacing-layout-s;
-
   // Remove margin from text elements so that we can control them with
   // gaps.
   & * {
diff --git a/src/domain/app/layout/utilityComponents/infoTemplate.module.scss b/src/domain/app/layout/utilityComponents/infoTemplate.module.scss
index 10ed75f4..05a7273c 100644
--- a/src/domain/app/layout/utilityComponents/infoTemplate.module.scss
+++ b/src/domain/app/layout/utilityComponents/infoTemplate.module.scss
@@ -2,15 +2,10 @@
 @use '~styles/variables';
 
 .infoPageLayout {
-  @include layout.respond-below(l) {
-    margin: 0 variables.$baseMargin variables.$largeMargin variables.$baseMargin;
-  }
-
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-
   color: variables.$color-black-90;
 
   .infoPageLayoutFace {
@@ -31,6 +26,10 @@
     font-size: variables.$fontsize-body-l;
     text-align: center;
   }
+
+  @include layout.respond-below(l) {
+    margin: 0 variables.$baseMargin variables.$largeMargin variables.$baseMargin;
+  }
 }
 
 .callToActionButton {
diff --git a/src/domain/app/layout/utilityComponents/simpleFormTemplate.module.scss b/src/domain/app/layout/utilityComponents/simpleFormTemplate.module.scss
index 9e47b5f7..9bc54b51 100644
--- a/src/domain/app/layout/utilityComponents/simpleFormTemplate.module.scss
+++ b/src/domain/app/layout/utilityComponents/simpleFormTemplate.module.scss
@@ -2,10 +2,6 @@
 @use '~styles/variables';
 
 .simpleFormPageLayout {
-  @include layout.respond-below(l) {
-    margin: 0 variables.$baseMargin variables.$largeMargin variables.$baseMargin;
-  }
-
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -36,4 +32,8 @@
     width: min-content;
     max-width: variables.$container-width-s;
   }
+
+  @include layout.respond-below(l) {
+    margin: 0 variables.$baseMargin variables.$largeMargin variables.$baseMargin;
+  }
 }
diff --git a/src/domain/app/notFound/notFound.module.scss b/src/domain/app/notFound/notFound.module.scss
index 76e1621b..71117bec 100644
--- a/src/domain/app/notFound/notFound.module.scss
+++ b/src/domain/app/notFound/notFound.module.scss
@@ -6,11 +6,6 @@
   align-self: center;
 
   .returnLink {
-    width: 50%;
-    @include layout.respond-below(m) {
-      width: 80%;
-    }
-
     display: block;
     margin: variables.$largeMargin auto auto auto;
     background: variables.$color-summer;
@@ -18,6 +13,11 @@
     text-decoration: none;
     padding: variables.$basePadding;
     color: variables.$color-black;
+
+    width: 50%;
+    @include layout.respond-below(m) {
+      width: 80%;
+    }
   }
 }
 
diff --git a/src/domain/event/event.module.scss b/src/domain/event/event.module.scss
index b757c7c2..822b7d0b 100644
--- a/src/domain/event/event.module.scss
+++ b/src/domain/event/event.module.scss
@@ -80,18 +80,18 @@
 }
 
 .eventWrapper {
+  display: grid;
   @include layout.respond-above(l) {
     z-index: 1;
   }
-  display: grid;
   .event {
+    background-color: var(--color-white);
     @include layout.respond-above(l) {
       padding: variables.$largePadding;
       h1 {
         margin-top: 0;
       }
     }
-    background-color: var(--color-white);
   }
   @include layout.respond-below(l) {
     padding: 0 variables.$basePadding;
@@ -111,12 +111,13 @@
   background: variables.$color-fog-medium-light;
   box-sizing: border-box;
   padding: variables.$spacing-2-xs;
+  display: block;
 
   width: 100%;
   @include layout.respond-above(l) {
     width: auto;
   }
-  display: block;
+
   .label {
     display: inline-flex;
     width: min-content;
diff --git a/src/domain/home/form/homePreliminaryForm.module.scss b/src/domain/home/form/homePreliminaryForm.module.scss
index 130c5988..50f6d946 100644
--- a/src/domain/home/form/homePreliminaryForm.module.scss
+++ b/src/domain/home/form/homePreliminaryForm.module.scss
@@ -28,11 +28,11 @@
 }
 
 .submitButton {
+  justify-self: center;
   width: 80%;
   @include layout.respond-above(m) {
     width: 60%;
   }
-  justify-self: center;
 }
 
 .heading {
diff --git a/src/domain/home/hero/hero.module.scss b/src/domain/home/hero/hero.module.scss
index 5330add4..45112474 100644
--- a/src/domain/home/hero/hero.module.scss
+++ b/src/domain/home/hero/hero.module.scss
@@ -24,14 +24,14 @@
 
 .kidsImage {
   grid-column: 2;
-  min-height: calc(0.265 * 100vw);
-  @media (min-width: map.get(layout.$breakpoints, xl-minus)) {
-    min-height: 0.265 * variables.$containerMaxWidth;
-  }
   background-image: url('/images/Culture_kids@2x.jpg');
   background-repeat: no-repeat;
   background-position: center bottom -2px;
   background-size: 100% auto;
+  min-height: calc(0.265 * 100vw);
+  @media (min-width: map.get(layout.$breakpoints, xl-minus)) {
+    min-height: 0.265 * variables.$containerMaxWidth;
+  }
 }
 
 .heroContainer {
diff --git a/src/domain/home/partners/partnerLogoList.module.scss b/src/domain/home/partners/partnerLogoList.module.scss
index 5d4adf29..d1f18dbb 100644
--- a/src/domain/home/partners/partnerLogoList.module.scss
+++ b/src/domain/home/partners/partnerLogoList.module.scss
@@ -3,6 +3,7 @@
 
 .big {
   display: grid;
+  margin-bottom: variables.$largeMargin;
   @include layout.respond-below(l) {
     justify-content: center;
     gap: 2em;
@@ -11,7 +12,6 @@
     grid-template-columns: repeat(2, 1fr);
     gap: variables.$xlargeMargin;
   }
-  margin-bottom: variables.$largeMargin;
 
   .container {
     @include layout.respond-above(m) {
diff --git a/src/domain/profile/modal/editProfileModal.module.scss b/src/domain/profile/modal/editProfileModal.module.scss
index 7526cd56..116ebf20 100644
--- a/src/domain/profile/modal/editProfileModal.module.scss
+++ b/src/domain/profile/modal/editProfileModal.module.scss
@@ -35,30 +35,28 @@
 
 .buttonsWrapper {
   display: grid;
-  @include layout.respond-above(m) {
-    grid-template-columns: 1fr 1fr;
-  }
   grid-gap: variables.$baseMargin;
   margin: variables.$largeMargin 0;
   button: {
     width: 100%;
   }
+  @include layout.respond-above(m) {
+    grid-template-columns: 1fr 1fr;
+  }
 }
 
 .cancelButton {
+  width: 100%;
   @include layout.respond-below(m) {
     grid-row: 2;
   }
-
-  width: 100%;
 }
 
 .submitButton {
+  width: 100%;
   @include layout.respond-below(m) {
     grid-row: 1;
   }
-
-  width: 100%;
 }
 
 .profileName {
diff --git a/src/domain/registration/form/partial/childFormFields.module.scss b/src/domain/registration/form/partial/childFormFields.module.scss
index 20f8a7cb..54f2d579 100644
--- a/src/domain/registration/form/partial/childFormFields.module.scss
+++ b/src/domain/registration/form/partial/childFormFields.module.scss
@@ -17,12 +17,12 @@ $childIconHeight: 4rem;
 
 .childName,
 .childFixedInfo {
+  padding: variables.$baseMargin 0;
   @include layout.respond-above(l) {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: variables.$baseMargin;
   }
-  padding: variables.$baseMargin 0;
 }
 
 .childBirthyear,
diff --git a/src/domain/registration/form/registrationForm.module.scss b/src/domain/registration/form/registrationForm.module.scss
index 1ac6d8be..723476f8 100644
--- a/src/domain/registration/form/registrationForm.module.scss
+++ b/src/domain/registration/form/registrationForm.module.scss
@@ -59,10 +59,10 @@ $plusIconHeight: 2rem;
 }
 
 .registrationGrayContainer {
+  margin: variables.$baseMargin;
   > * {
     grid-column: 2;
   }
-  margin: variables.$baseMargin;
 }
 
 .guardianInfo {
diff --git a/src/domain/registration/notEligible/notEligible.module.scss b/src/domain/registration/notEligible/notEligible.module.scss
index 8bee785d..84420cb9 100644
--- a/src/domain/registration/notEligible/notEligible.module.scss
+++ b/src/domain/registration/notEligible/notEligible.module.scss
@@ -2,16 +2,16 @@
 @use '~styles/variables';
 
 .notEligible {
-  @include layout.respond-below(l) {
-    margin: 0 variables.$baseMargin variables.$largeMargin variables.$baseMargin;
-  }
-
   font-weight: bold;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 
+  @include layout.respond-below(l) {
+    margin: 0 variables.$baseMargin variables.$largeMargin variables.$baseMargin;
+  }
+
   .notEligibleFace {
     height: 4rem;
     width: 4rem;