Merge pull request #1634 from AmbireTech/update/extension-invite-code…

…-modal Update/ Extension invite code modal design
AmbireTech · Aug 13, 2024 · d6b7604 · d6b7604
2 parents 98a47d4 + b7fc05b
commit d6b7604
Showing 1 changed file with 49 additions and 21 deletions.
diff --git a/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss b/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss
@@ -119,11 +119,11 @@ $min-modal-height: 34.375rem;
     display: block;
     color: #bbbde4;
     font-size: 1rem;
-    margin-bottom: 1rem;
+    margin-bottom: 0.5rem;
   }
   .code {
     display: block;
-    margin-bottom: 2rem;
+    margin-bottom: 1rem;
     border: none;
     width: 18ch;
     background: repeating-linear-gradient(
@@ -134,8 +134,8 @@ $min-modal-height: 34.375rem;
         transparent 1.5ch
       )
       0 100%/98% 1px no-repeat;
-    color: $c-turquoise; // font: 36px monospace;
-    font-size: 2.5rem;
+    color: #bbbde4;
+    font-size: 1.5rem;
     font-family: monospace;
     letter-spacing: 0.5ch;
   }
@@ -150,7 +150,7 @@ $min-modal-height: 34.375rem;
 
     svg,
     span {
-      color: #bbbde4;
+      color: $c-turquoise;
       transition: $basic-transition;
     }
 
@@ -208,18 +208,16 @@ $min-modal-height: 34.375rem;
   }
   .storeWrapper .storeText,
   .textWrapper .text {
-    font-size: 0.875rem;
+    font-size: 1rem;
+    margin-bottom: 0.75rem;
   }
   .storeWrapper .storeText {
-    margin-bottom: 1rem;
+    margin-bottom: 1.25rem;
   }
   .codeWrapper {
     .codeTitle {
       font-size: 0.875rem;
-      margin-bottom: 0.5rem;
-    }
-    .code {
-      margin-bottom: 1.5rem;
+      margin-bottom: 0.25rem;
     }
   }
 }
@@ -234,12 +232,6 @@ $min-modal-height: 34.375rem;
   .content {
     padding: 1.5rem;
   }
-
-  .codeWrapper {
-    .code {
-      font-size: 2rem;
-    }
-  }
 }
 
 @include xs-breakpoint {
@@ -259,10 +251,46 @@ $min-modal-height: 34.375rem;
       right: 0.25rem;
     }
   }
-}
 
-@media screen and (max-width: 350px) {
-  .codeWrapper .code {
-    font-size: 1.5rem;
+  .wrapper {
+    min-height: 30rem;
+  }
+
+  .content {
+    gap: 1rem;
+  }
+  .storeWrapper .storeText,
+  .textWrapper .text {
+    font-size: 0.75rem;
+    margin-bottom: 0.5rem;
+  }
+  .codeWrapper {
+    margin-bottom: 0.5rem;
+
+    .codeTitle {
+      font-size: 0.75rem;
+    }
+    .code {
+      font-size: 1.25rem;
+      margin-bottom: 0.75rem;
+    }
+    .copyButton {
+      padding: 0.5rem 1rem;
+      font-size: 0.75rem;
+      gap: 0.25rem;
+
+      svg {
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+  }
+  .storeWrapper {
+    .storeText {
+      margin-bottom: 1rem;
+    }
+    .storeLink {
+      padding: 0.75rem 2.5rem;
+    }
   }
 }