Merged in feature/sas-mypages (pull request #1302)

Feature/sas mypages * feat: Add SAS partner page under my pages * fix: feature toggle SAS Partner page in my pages * add translations for SAS account page * use 'flex-start' instead of 'start' * fix: flatten css * fix: don't use <SectionContainer /> on linkedAccounts page
2025-02-11 12:55:00 +00:00
parent 98e3afe9db
commit 3d11cfb50a
37 changed files with 875 additions and 20 deletions
@@ -0,0 +1,93 @@
+.tierlevelcard {
+  display: flex;
+  flex-direction: column;
+
+  justify-content: space-between;
+
+  border-radius: var(--Corner-radius-Medium);
+  background: white;
+  box-shadow: 0px 0px 8px 3px #0000001a;
+
+  overflow: hidden;
+
+  width: 100%;
+  min-height: 176px;
+
+  @media screen and (min-width: 768px) {
+    max-width: 335px;
+  }
+
+  &.scandic {
+    background: white;
+    color: var(--Main-Brand-Burgundy);
+
+    .boostedInfo {
+      background: linear-gradient(86.64deg, #faf6f2 0%, #f4d5c8 100.91%);
+      border-radius: var(--Corner-radius-Medium);
+    }
+  }
+
+  &.sas {
+    background: #f0f4ff;
+    color: var(--Main-Brand-DarkBlue);
+
+    .boostedInfo {
+      background: linear-gradient(90deg, #f0f4ff 0%, #bdcdff 100%);
+      border-radius: var(--Corner-radius-Medium);
+    }
+  }
+}
+
+.boostedInfo {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-half);
+  box-shadow: 0px 0px 4px 2px #0000001a;
+
+  flex: 0;
+  padding: var(--Spacing-x2) var(--Spacing-x-one-and-half);
+}
+
+.boostedTier {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.baseInfo {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-one-and-half);
+
+  padding: var(--Spacing-x2) var(--Spacing-x-one-and-half);
+
+  justify-content: space-between;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
+
+.tierInfo {
+  display: flex;
+  justify-content: space-between;
+  text-transform: uppercase;
+  gap: var(--Spacing-x1);
+}
+
+.logoContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--Spacing-x1);
+}
+
+.footnote {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--Spacing-x1);
+}