update: extension invite code modal design

AmbireTech · Aug 13, 2024 · 4ab227a · 4ab227a
1 parent 98a47d4
commit 4ab227a
Showing 1 changed file with 9 additions and 23 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 {
@@ -260,9 +252,3 @@ $min-modal-height: 34.375rem;
     }
   }
 }
-
-@media screen and (max-width: 350px) {
-  .codeWrapper .code {
-    font-size: 1.5rem;
-  }
-}