Merged in feat/SW-3577-ui-feedback-from-sas-call (pull request #3035)

feat(SW-3577): Updated UI after feedback

Approved-by: Anton Gunnarsson

apps/partner-sas/components/Menu/FooterMenu/footer-menu.module.css

@@ -19,7 +19,7 @@
   }
 }
 
-.link {
+.links .link {
   text-decoration: none;
   color: var(--SAS-40);
 
@@ -27,4 +27,13 @@
     color: var(--SAS-40);
     text-decoration: underline;
   }
+
+  &:not(:last-child):after {
+    content: "·";
+    display: inline-flex;
+    font-size: var(--Title-Subtitle-md-Size);
+    line-height: 100%;
+    margin-left: var(--Space-x1);
+    text-decoration: none;
+  }
 }

apps/partner-sas/globals.css

@@ -100,17 +100,20 @@ body.partner-sas {
 
   --Component-Button-Brand-Primary-Fill-Default: var(--SAS-50);
   --Component-Button-Brand-Primary-Fill-Hover: var(--SAS-50);
+  --Component-Button-Brand-Secondary-Border-Default: var(--SAS-40);
   --Component-Button-Brand-Tertiary-Fill-Default: var(--SAS-50);
   --Component-Button-Brand-Tertiary-Fill-Hover: var(--SAS-50);
   --Component-Button-Inverted-On-fill-Default: var(--SAS-50);
   --Component-Button-Inverted-On-fill-Hover: var(--SAS-50);
+  --Component-Button-Brand-Secondary-Fill-Hover-Inverted: var(--SAS-50);
   --Component-Button-Brand-Secondary-On-fill-Default: var(--SAS-40);
   --Component-Button-Brand-Secondary-On-fill-Hover: var(--SAS-40);
   --Component-Button-Brand-Secondary-On-fill-Hover-inverted: var(
     --SAS-Gray-100
   );
 
-  --Icon-Interactive-Default: var(--SAS-40);
+  --Icon-Default: var(--SAS-40);
+  --Icon-Interactive-Default: var(--SAS-20);
   --Primary-Dark-Surface-Normal: var(--SAS-Default);
   --Primary-Light-On-Surface-Accent: var(--SAS-50);
   --Primary-Light-On-Surface-Divider-subtle: var(--SAS-Gray-90);
@@ -129,10 +132,11 @@ body.partner-sas {
   --Text-Accent-Primary: var(--SAS-20);
   --Text-Accent-Secondary: var(--SAS-Gray-40);
   --Text-Heading: var(--SAS-Gray-20);
-  --Text-Interactive-Default: var(--SAS-40);
+  --Text-Interactive-Default: var(--SAS-20);
   --Text-Interactive-Hover: var(--SAS-40);
   --Text-Interactive-Secondary: var(--SAS-40);
   --UI-Input-Controls-Border-Normal: var(--SAS-Gray-40);
+  --UI-Input-Controls-Surface-Hover: var(--SAS-Gray-90);
 
   --Scandic-Brand-Burgundy: var(--Text-Default);
   --Scandic-Peach-80: var(--SAS-Gray-40);

packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/index.tsx

@@ -11,7 +11,7 @@ import MagicWandIcon from "@scandic-hotels/design-system/Icons/MagicWandIcon"
 import Modal from "@scandic-hotels/design-system/Modal"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
-import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useRoomContext } from "../../../../contexts/EnterDetails/RoomContext"
 
@@ -56,12 +56,14 @@ export default function MemberPriceModal() {
       <div className={styles.modalContent}>
         <div className={styles.innerModalContent}>
           <MagicWandIcon width="265px" />
-          <Title as="h3" level="h1" textTransform="regular">
+          <Typography variant={"Title/smLowCase"}>
-            {intl.formatMessage({
+            <h3 className={styles.title}>
-              id: "enterDetails.memberPriceModal.title",
+              {intl.formatMessage({
-              defaultMessage: "Member room price activated",
+                id: "enterDetails.memberPriceModal.title",
-            })}
+                defaultMessage: "Member room price activated",
-          </Title>
+              })}
+            </h3>
+          </Typography>
 
           {memberPrice && (
             <span className={styles.newPrice}>

packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/modal.module.css

@@ -11,6 +11,11 @@
   justify-items: center;
 }
 
+.title {
+  color: var(--Text-Heading);
+  text-align: center;
+}
+
 .newPrice {
   display: flex;
   gap: var(--Spacing-x1);