From 984c099dc662c1b07f24fd12abb21be9ca7a8b94 Mon Sep 17 00:00:00 2001
From: zomo <admin@zomo.dev>
Date: Thu, 27 Nov 2025 19:26:23 -0600
Subject: [PATCH] rearranged css

---
 src/ButtonNew.tsx  |  2 +-
 src/ButtonOld.tsx  |  2 +-
 src/buttonNew.scss | 38 +++++++++++++-------------
 src/buttonOld.scss | 68 +++++++++++++++++++++++-----------------------
 4 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/src/ButtonNew.tsx b/src/ButtonNew.tsx
index 9a1d760..dcdeccf 100644
--- a/src/ButtonNew.tsx
+++ b/src/ButtonNew.tsx
@@ -9,7 +9,7 @@ function ButtonNew() {
                 <div>Join with the</div>
                 <div>New Client</div>
             </div>
-            <div className="new-button">Start</div>
+            <div className="button">Start</div>
         </div>
     )
 }
diff --git a/src/ButtonOld.tsx b/src/ButtonOld.tsx
index 2a72f1c..89a6ac0 100644
--- a/src/ButtonOld.tsx
+++ b/src/ButtonOld.tsx
@@ -10,7 +10,7 @@ function ButtonOld() {
                     <div>JOIN WITH THE</div>
                     <div>OLD CLIENT</div>
                 </div>
-                <div className="old-button">START</div>
+                <div className="button">START</div>
             </div>
         </div>
     )
diff --git a/src/buttonNew.scss b/src/buttonNew.scss
index 46820eb..d2e8831 100644
--- a/src/buttonNew.scss
+++ b/src/buttonNew.scss
@@ -29,32 +29,32 @@
 
         text-align: center;
     }
-}
 
-.new-button {
-    display: inline-block;
-    user-select: none;
+    .button {
+        display: inline-block;
+        user-select: none;
 
-    font-size: 18px;
+        font-size: 18px;
 
-    width: 226px;
-    height: 58px;
-    line-height: 58px;
-    box-sizing: border-box;
-    margin: 20px;
+        width: 226px;
+        height: 58px;
+        line-height: 58px;
+        box-sizing: border-box;
+        margin: 20px;
 
-    border-radius: 8px;
+        border-radius: 8px;
 
-    background: #22a4f3;
-    background: linear-gradient(-180deg, #22a4f3 0%, #004093 100%);
+        background: #22a4f3;
+        background: linear-gradient(-180deg, #22a4f3 0%, #004093 100%);
 
-    box-shadow:
-        0 3px 0 0 rgba(0, 82, 175, 0.4),
-        inset 0 2px 0 0 rgba(255, 255, 255, 0.4);
+        box-shadow:
+            0 3px 0 0 rgba(0, 82, 175, 0.4),
+            inset 0 2px 0 0 rgba(255, 255, 255, 0.4);
 
-    border: 1px solid #003f72;
+        border: 1px solid #003f72;
 
-    &:hover {
-        background: linear-gradient(-180deg, #004093 0%, #22a4f3 100%);
+        &:hover {
+            background: linear-gradient(-180deg, #004093 0%, #22a4f3 100%);
+        }
     }
 }
diff --git a/src/buttonOld.scss b/src/buttonOld.scss
index 5307de9..9da4675 100644
--- a/src/buttonOld.scss
+++ b/src/buttonOld.scss
@@ -48,47 +48,47 @@
             text-align: center;
         }
     }
-}
 
-.old-button {
-    display: inline-block;
-    user-select: none;
+    .button {
+        display: inline-block;
+        user-select: none;
 
-    font-size: 40px;
-    -webkit-text-stroke: 6px black;
-    paint-order: stroke fill;
+        font-size: 40px;
+        -webkit-text-stroke: 6px black;
+        paint-order: stroke fill;
 
-    width: 250px;
-    height: 100px;
-    line-height: 100px;
-    box-sizing: border-box;
-    margin: 20px;
+        width: 250px;
+        height: 100px;
+        line-height: 100px;
+        box-sizing: border-box;
+        margin: 20px;
 
-    border-radius: 22px / 28px;
+        border-radius: 22px / 28px;
 
-    background: #0396e5;
-    background: linear-gradient(
-        0deg,
-        rgb(3, 150, 229) 0%,
-        rgb(1, 100, 199) 25%,
-        rgb(0, 83, 175) 50%,
-        rgb(77, 176, 243) 100%
-    );
-
-    box-shadow:
-        #00ccff 3px 1px 0px -1px inset,
-        #003366 0px 2px 0px 4px,
-        #00ccff 2.5px 6px 0px 4px,
-        #00529b -1px -2.5px 0px 5.5px;
-
-    &:hover {
-        background: #0054b0;
+        background: #0396e5;
         background: linear-gradient(
             0deg,
-            rgb(0, 84, 176) 0%,
-            rgb(0, 82, 174) 53%,
-            rgb(0, 90, 180) 54%,
-            rgb(30, 125, 191) 100%
+            rgb(3, 150, 229) 0%,
+            rgb(1, 100, 199) 25%,
+            rgb(0, 83, 175) 50%,
+            rgb(77, 176, 243) 100%
         );
+
+        box-shadow:
+            #00ccff 3px 1px 0px -1px inset,
+            #003366 0px 2px 0px 4px,
+            #00ccff 2.5px 6px 0px 4px,
+            #00529b -1px -2.5px 0px 5.5px;
+
+        &:hover {
+            background: #0054b0;
+            background: linear-gradient(
+                0deg,
+                rgb(0, 84, 176) 0%,
+                rgb(0, 82, 174) 53%,
+                rgb(0, 90, 180) 54%,
+                rgb(30, 125, 191) 100%
+            );
+        }
     }
 }