style: update border-radius for loading indicators and enhance global…

… color variables for improved design consistency
MyTonSwap · Nov 16, 2024 · 31bce89 · 31bce89
1 parent c14ccc0
commit 31bce89
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/lib/components/SwapCard/Card.scss b/lib/components/SwapCard/Card.scss
@@ -57,7 +57,7 @@
                 .card-input-loading {
                     height: 1.875rem;
                     width: 6rem;
-                    border-radius: 0.375rem;
+                    border-radius: 0.75rem;
                 }
                 .card-rate {
                     font-family: inherit;
@@ -72,7 +72,7 @@
                 .card-rate-loading {
                     height: 1.25rem;
                     width: 3rem;
-                    border-radius: 0.375rem;
+                    border-radius: 0.75rem;
                 }
             }
             .card-button {
@@ -118,13 +118,15 @@
                     .card-input-loading {
                         height: 1.5rem;
                         width: 7rem;
+                        border-radius: 0.75rem;
                     }
                     .card-rate {
                         font-size: var(--font-size-sm);
                     }
                     .card-rate-loading {
                         height: 1rem;
                         width: 5rem;
+                        border-radius: 0.75rem;
                     }
                 }
                 .card-button {

diff --git a/lib/components/SwapDetails/SwapDetails.tsx b/lib/components/SwapDetails/SwapDetails.tsx
@@ -15,7 +15,6 @@ const SwapDetails = () => {
     const { onePayRoute, bestRoute, isFindingBestRoute, slippage } =
         useSwapStore();
     const [ref, { height }] = useMeasure();
-    console.log(height);
     return (
         <motion.button
             className="detail-accordion-container"

diff --git a/lib/global.css b/lib/global.css
@@ -46,13 +46,19 @@
 }
 
 .mts-ton-jiggle {
-    --swap-container-background-color: #101828;
-    --swap-container-border-color: #1d293900;
     --border-color: #004a6533;
     --primary-color: #177594;
+    --secondary-color: #283241;
     --background-color: #181f34;
+    --modal-background-color: #101828;
+    --swap-container-background-color: #101828;
+    --swap-container-border-color: #1d293900;
+    --input-card-pay-color: #09090b;
+    --input-card-receive-color: #30475b;
     --input-card-color: #181f34;
     --input-token-color: #1d2939;
+    --change-direction-background-color: #101828;
+    --change-direction-icon-color: #177594;
     --light-shade-color: #193349;
     --slippage-box-color: #d1d1e0;
     --text-black-color: #ffffff;