From 4ab227afae3ed8ebc5ea27076a09e2a7299b1a45 Mon Sep 17 00:00:00 2001
From: Petromir Petrov <petromirdev@gmail.com>
Date: Tue, 13 Aug 2024 12:27:15 +0300
Subject: [PATCH 1/2] update: extension invite code modal design

---
 .../ExtensionInviteCodeModal.module.scss      | 32 ++++++-------------
 1 file changed, 9 insertions(+), 23 deletions(-)

diff --git a/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss b/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss
index d4e1fc44a..3d204e3ad 100644
--- 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;
-  }
-}

From b7fc05b0612454e5159bc4386714aa688b915901 Mon Sep 17 00:00:00 2001
From: Petromir Petrov <petromirdev@gmail.com>
Date: Tue, 13 Aug 2024 12:36:31 +0300
Subject: [PATCH 2/2] update: ExtensionInviteCodeModal on mobile

---
 .../ExtensionInviteCodeModal.module.scss      | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss b/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss
index 3d204e3ad..fb65ed97d 100644
--- a/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss
+++ b/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss
@@ -251,4 +251,46 @@ $min-modal-height: 34.375rem;
       right: 0.25rem;
     }
   }
+
+  .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;
+    }
+  }
 }