Merged in feat/sw-1291-show-sas-membership-data (pull request #1503)

Show SAS membership data in Linked Accounts

* Rip out old styling

* Desktop version of new linked accounts design

* Use new design system tokens

* Refactor SASLinkedAccount to handle all states

* Improve small screen styling

* Add intl etc

* Skeletons

* Tiny fixes

* Add i18n keys to all languages


Approved-by: Linus Flood

apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/linkedAccounts.module.css

@@ -1,9 +1,13 @@
-.divider {
-  margin-top: var(--Spacing-x2);
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x3);
 }
 
-@media screen and (min-width: 768px) {
-  .divider {
+.divider {
+  margin-top: var(--Spacing-x2);
+
+  @media screen and (min-width: 768px) {
     display: none;
   }
 }
@@ -21,11 +25,117 @@
 
 .mutationSection {
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: column;
+  justify-content: space-between;
   gap: var(--Spacing-x2);
-  align-items: center;
+  align-items: flex-end;
 
   @media screen and (min-width: 768px) {
+    align-items: center;
     flex-direction: row;
   }
 }
+
+.matchedAccountSection {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x3);
+  padding: var(--Spacing-x4) var(--Spacing-x-one-and-half);
+  width: 100%;
+  background-color: var(--Surface-Primary-On-Surface-Default);
+  border: 1px solid var(--Border-Default);
+  border-radius: var(--Corner-radius-Medium);
+  box-shadow:
+    0px 0px 4px 2px rgba(0, 0, 0, 0.1),
+    0px 4px 4px 0px rgba(255, 255, 255, 0.29) inset;
+
+  @media screen and (min-width: 768px) {
+    padding: var(--Spacing-x4) var(--Spacing-x3);
+  }
+}
+
+.accountDetails {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  gap: var(--Spacing-x1);
+
+  @media screen and (min-width: 768px) {
+    gap: var(--Spacing-x7);
+  }
+}
+
+.accountMemberNumber {
+  @media screen and (min-width: 768px) {
+    margin-left: auto;
+  }
+}
+
+.tierMatchStatus {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+  width: 100%;
+  justify-content: space-between;
+  border: 1px solid var(--Border-Divider-Accent);
+  border-radius: var(--Corner-radius-Small);
+  padding: var(--Spacing-x2);
+  background:
+    linear-gradient(
+      0deg,
+      var(--Surface-Brand-Primary-1-Default, --Scandic-Peach-10),
+      var(--Surface-Brand-Primary-1-Default, --Scandic-Peach-10)
+    ),
+    linear-gradient(
+      180deg,
+      rgba(242, 236, 230, 0.05) 0%,
+      rgba(143, 67, 80, 0.05) 100%
+    );
+
+  @media screen and (min-width: 768px) {
+    flex-direction: row;
+    gap: var(--Spacing-x1);
+  }
+}
+
+.textRight {
+  text-align: right;
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-half);
+}
+
+.caption {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-half);
+  color: var(--Text-Tertiary);
+  align-self: flex-start;
+}
+
+.sasMark {
+  color: var(--Scandic-Blue-70);
+}
+
+.scandicMark {
+  color: var(--Scandic-Red-Default);
+}
+
+.tierMatchText {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x1);
+}
+
+.label {
+  color: var(--Text-Tertiary);
+  text-transform: uppercase;
+}
+
+.iconWrapper {
+  display: flex;
+  align-items: center;
+}