Merge pull request #6 from MyTonSwap/develop

style fix in swap modal and version update to 2.0.11
MyTonSwap · Nov 19, 2024 · f77ac59 · f77ac59
2 parents 5ab6b67 + b0981a2
commit f77ac59
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 18 deletions.
diff --git a/lib/components/SwapButton/ConfirmationModal.scss b/lib/components/SwapButton/ConfirmationModal.scss
@@ -71,6 +71,7 @@
         }
 
         .confirm-modal-detail {
+            height: fit-content;
             width: 100%;
             padding-left: 1rem;
             padding-right: 1rem;

diff --git a/lib/components/SwapButton/Done.scss b/lib/components/SwapButton/Done.scss
@@ -20,38 +20,38 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 2.5rem;
+            font-size: 5rem;
             color: var(--primary-color);
         }
         .done-text {
             color: var(--text-black-color);
             font-size: 1.25rem;
             font-weight: bold;
             text-align: center;
+            margin-bottom: 2rem;
         }
         .done-modal-images {
             display: flex;
             align-items: center;
             padding-top: 0.25rem;
             .pay-image {
-                border-color: var(--background-color);
-                width: 2.25rem;
-                height: 2.25rem;
+                border-color: var(--modal-background-color);
+                width: 4rem;
+                height: 4rem;
                 border-radius: 9999px;
                 background-size: contain !important;
-                transform: translateX(0.2rem);
-                border-width: 1px;
+                transform: translateX(0.75rem);
+                border-width: 5px;
                 border-style: solid;
             }
             .receive-image {
-                border-color: var(--background-color);
-
-                width: 2.25rem;
-                height: 2.25rem;
+                border-color: var(--modal-background-color);
+                width: 4rem;
+                height: 4rem;
                 border-radius: 9999px;
                 background-size: contain !important;
                 transform: translateX(-0.2rem);
-                border-width: 1px;
+                border-width: 5px;
                 border-style: solid;
             }
         }

diff --git a/lib/components/SwapButton/SwapButton.scss b/lib/components/SwapButton/SwapButton.scss
@@ -13,15 +13,17 @@
             border-color: var(--border-color);
             position: fixed;
             width: 100%;
-            height: 80vh;
-            max-height: 400px;
-            padding: 0.25rem;
-            padding-top: 0.5rem;
+            max-height: 430px;
+            height: 100%;
+
+            padding: 0.5rem 0.25rem;
             display: flex;
+            align-items: center;
+            justify-content: center;
             flex-direction: column;
             box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
-            border-top-left-radius: 0.75rem;
-            border-top-right-radius: 0.75rem;
+            border-top-left-radius: 1rem;
+            border-top-right-radius: 1rem;
             bottom: 0;
             left: 0;
 

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@mytonswap/widget",
     "description": "MyTonSwap Widget - Easy to use swap widget for React on TON Blockchain",
-    "version": "2.0.10",
+    "version": "2.0.11",
     "type": "module",
     "author": {
         "name": "MyTonSwap",