style: enhance SwapCard and Header components with improved styling a…

…nd responsiveness
MyTonSwap · Nov 13, 2024 · 2c4816f · 2c4816f
1 parent e135554
commit 2c4816f
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 15 deletions.
diff --git a/lib/components/Header/Header.scss b/lib/components/Header/Header.scss
@@ -4,7 +4,8 @@
         align-items: center;
         justify-content: space-between;
         padding: 0 0.5rem;
-        font-size: var(--font-size-base);
+        font-weight: 600;
+        font-size: var(--font-size-lg);
         color: var(--text-black-color);
     }
     .header-setting {
@@ -13,14 +14,14 @@
         align-items: center;
 
         .loading-container {
-            width: 1rem;
-            height: 1rem;
+            width: 1.25rem;
+            height: 1.25rem;
         }
 
         .setting-icon {
             color: var(--text-black-color);
 
-            font-size: var(--font-size-xl);
+            font-size: var(--font-size-2xl);
             opacity: 0.5;
         }
     }

diff --git a/lib/components/SwapCard/Card.scss b/lib/components/SwapCard/Card.scss
@@ -30,9 +30,14 @@
             display: grid;
             grid-template-columns: 1fr auto;
             width: 100%;
-            border-radius: 1rem;
-            padding: 0.5rem 1rem;
-
+            border-radius: 0.75rem;
+            padding: 1rem 1rem;
+            &.pay {
+                background: var(--input-card-pay-color);
+            }
+            &.receive {
+                background: var(--input-card-receive-color);
+            }
             margin-top: 0.5rem;
             .card-inputs {
                 display: flex;
@@ -48,7 +53,7 @@
                     font-weight: 700;
                 }
                 .card-input-loading {
-                    height: 1rem;
+                    height: 1.25rem;
                     width: 6rem;
                     border-radius: 0.375rem;
                 }
@@ -103,9 +108,22 @@
             }
             .card-content {
                 .card-inputs {
+                    gap: 0.5rem;
                     .card-input {
                         font-size: var(--font-size-xl);
                     }
+                    .card-input-loading {
+                        height: 1.25rem;
+                        width: 7rem;
+                    }
+                    .card-rate {
+                        font-size: var(--font-size-sm);
+                    }
+                    .card-rate-loading {
+                        margin-top: 0.5rem;
+                        height: 1rem;
+                        width: 5rem;
+                    }
                 }
                 .card-button {
                     .selection-box {

diff --git a/lib/components/SwapCard/Card.tsx b/lib/components/SwapCard/Card.tsx
@@ -188,7 +188,7 @@ const Card: FC<CardProps> = ({ type }) => {
                         ""
                     )}
                 </div>
-                <div className="card-content">
+                <div className={`card-content ${type}`}>
                     <div className="card-inputs">
                         {((type === "receive" && !isFindingBestRoute) ||
                             type === "pay") && (

diff --git a/lib/components/SwapCard/SwapCard.scss b/lib/components/SwapCard/SwapCard.scss
@@ -18,15 +18,15 @@
         }
         .change-direction-button {
             margin: 0.75rem 0;
-            color: var(--text-white-color);
-            background: var(--primary-color);
-            padding: 0.75rem 4rem;
+            color: var(--change-direction-icon-color);
+            background: var(--change-direction-background-color);
+            padding: 0.75rem 3.5rem;
             display: flex;
             position: relative;
             z-index: 1;
             align-items: center;
             justify-content: center;
-            font-size: var(--font-size-xl);
+            font-size: var(--font-size-2xl);
             border-radius: 99999px;
             .rotate-90 {
                 transform: rotate(90deg);

diff --git a/lib/components/SwapDetails/SwapDetails.scss b/lib/components/SwapDetails/SwapDetails.scss
@@ -52,7 +52,7 @@
                 background: var(--slippage-box-color);
                 color: var(--text-white-color);
                 border-radius: 0.375rem;
-                padding: 0.1rem 0.25rem;
+                padding: 0.25rem 0.5rem;
             }
             .route-container {
                 display: flex;

diff --git a/lib/global.css b/lib/global.css
@@ -7,7 +7,11 @@
     --swap-container-background: #f4f4f5;
     --swap-container-border-color: #ffffff;
     --input-card-color: #ffffff;
+    --input-card-pay-color: #ffffff;
+    --input-card-receive-color: #d0d5dd;
     --input-token-color: #f4f4f5;
+    --change-direction-background-color: #22c55e;
+    --change-direction-icon-color: #f4f4f5;
     --light-shade-color: #f4f4f5;
     --slippage-box-color: #71717a;
     --text-black-color: #000000;
@@ -23,10 +27,14 @@
     --background-color: #101828;
     --swap-container-background-color: #101828;
     --swap-container-border-color: #1d293900;
+    --input-card-pay-color: #09090b;
+    --input-card-receive-color: #344054;
     --input-card-color: #101828;
     --input-token-color: #1d2939;
+    --change-direction-background-color: #101828;
+    --change-direction-icon-color: #16a34a;
     --light-shade-color: #1d2939;
-    --slippage-box-color: #3d4557;
+    --slippage-box-color: #101828;
     --text-black-color: #ffffff;
     --text-white-color: #ffffff;
     --text-fade-color: #6b7280;