feat(WEB-304): remaning UI from design system primitives

components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css

@@ -1,54 +1,21 @@
 .container {
+  background-color: var(--Main-Grey-White);
   display: grid;
-  font-weight: 600;
-  background-color: var(--Base-Background-Elevated);
 }
 
 .wrapper {
   display: flex;
   align-items: center;
   flex-direction: column;
-  gap: 2rem;
-  padding: 6rem 2rem;
+  gap: var(--Spacing-x5);
+  padding: var(--Spacing-x4) var(--Spacing-x2) var(--Spacing-x5);
 }
 
-.preamble {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: 1.6rem;
-  font-weight: 400;
-  line-height: 2.4rem;
-  text-align: center;
-  margin: 0;
-}
-
-.loginLink {
-  text-decoration: none;
-  color: var(--some-black-color, #2e2e2e);
-  font-size: 1.2rem;
-}
-
-.linkContainer {
-  text-align: center;
-}
-
-.contactContainer {
-  display: none;
-}
-
-@media screen and (min-width: 1367px) {
-  .container {
-    border-radius: 32px 4px 4px 32px;
-  }
-
-  .wrapper {
-    gap: 3rem;
-  }
-
-  .contactContainer {
-    display: block;
-    border-top: 0.5px solid var(--UI-Grey-30);
-    display: flex;
-    justify-content: center;
-    padding: 3.4rem;
-  }
+/* TODO: Remove when we get proper button variables */
+.link {
+  font-family: var(--typography-Body-Bold-fontFamily);
+  font-size: var(--typography-Body-Bold-fontSize);
+  font-weight: var(--typography-Body-Bold-fontWeight);
+  letter-spacing: var(--typography-Body-Bold-letterSpacing);
+  line-height: var(--typography-Body-Bold-lineHeight);
 }