fix(SW-2681): Fixed position of scripted text and using design system components

Approved-by: Matilda Landström

apps/scandic-web/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css

@@ -1,14 +1,14 @@
 .container {
   border-radius: var(--Corner-radius-lg);
-  background-color: var(--Main-Brand-WarmWhite);
-  padding: 0 var(--Spacing-x2);
+  background-color: var(--Surface-Primary-OnSurface-Default);
+  padding: 0 var(--Space-x2);
   display: flex;
-  gap: var(--Spacing-x5);
+  gap: var(--Space-x5);
 }
 
 @media screen and (min-width: 900px) {
   .container {
-    padding: 0 var(--Spacing-x4) 0 0;
+    padding: 0 var(--Space-x4) 0 0;
   }
 }
 
@@ -18,38 +18,51 @@
 
 @media screen and (min-width: 900px) {
   .iconContainer {
-    flex: 0 1 384;
+    flex: 0 1 337px;
     display: flex; /* gets rid of whitespace */
   }
 }
+@media screen and (min-width: 1367px) {
+  .iconContainer {
+    flex-basis: 367px;
+  }
+}
 
 .content {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x3);
-  padding: var(--Spacing-x3) 0;
+  gap: var(--Space-x3);
+  padding: var(--Space-x3) 0;
   flex: 1;
 }
 
 .textContent {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
+  color: var(--Text-Default);
 }
 
 .header {
   display: grid;
-  gap: var(--Spacing-x-quarter);
+  gap: var(--Space-x025);
 }
 
 .scriptedText {
-  display: inline-block;
+  transform: rotate(-3deg);
+  color: var(--Text-Accent-Primary);
+  transform-origin: bottom left;
+  margin-top: var(--Space-x3);
+}
+
+.heading {
+  color: var(--Text-Heading);
 }
 
 .usp {
   list-style: none;
   display: grid;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 @media screen and (min-width: 768px) {
@@ -57,7 +70,7 @@
     grid-template-rows: repeat(3, auto);
     grid-template-columns: repeat(3, 1fr);
     grid-auto-flow: column;
-    padding: var(--Spacing-x-one-and-half) 0;
+    padding: var(--Space-x15) 0;
   }
 }
 
@@ -77,7 +90,7 @@
 
 .usp li {
   display: flex;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 .usp li:before {
@@ -86,9 +99,7 @@
   top: 3px;
 }
 
-@media screen and (min-width: 768px) {
-  .buttonContainer {
-    display: flex;
-    width: 180px;
-  }
+.primaryButton {
+  min-width: 180px;
+  width: fit-content;
 }