sprax redesign

broxus · Oct 21, 2024 · 971af3a · 971af3a
1 parent 70266e5
commit 971af3a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 21 deletions.
diff --git a/src/index.html b/src/index.html
@@ -302,8 +302,8 @@ <h2 class="onboarding-sparx__step-title">
             data-action="back"
             class="sparx__btn sparx__btn--secondary"
         >
-            <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
-                <path d="M17.375 10L3.375 10M3.375 10L8.625 4.5M3.375 10L8.625 15.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M10 15.8334L4.16667 10M4.16667 10L10 4.16669M4.16667 10H15.8333" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
             </svg>
             Back
         </button>
@@ -312,8 +312,8 @@ <h2 class="onboarding-sparx__step-title">
             class="sparx__btn sparx__btn--primary"
         >
             Connect
-            <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
-                <path d="M3.375 10L17.375 10M17.375 10L12.125 4.5M17.375 10L12.125 15.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M4.16667 10H15.8333M15.8333 10L10 4.16669M15.8333 10L10 15.8334" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
             </svg>
         </button>
     </div>

diff --git a/src/style.css b/src/style.css
@@ -227,47 +227,46 @@ body {
     cursor: pointer;
     font-family: inherit;
 
-    font-size: 16px;
+    font-size: 14px;
     font-style: normal;
-    font-weight: 600;
-    line-height: 1.2;
-    letter-spacing: -0.64px;
+    font-weight: 500;
+    line-height: 1.3;
 
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
-    height: 56px;
+    height: 48px;
     min-width: 176px;
     padding: 0 24px;
     border-radius: 100px;
 }
 
 .sparx__btn--primary {
-    background-color: #222;
+    background-color: #6347F5;
     color: #fff;
     border-radius: 100px;
 }
 .sparx__btn--primary:hover {
-    background-color: #52b6d3;
+    background-color: #6347F5;
     color: #fff;
 }
 .sparx__btn--primary:active {
-    color: #b3b3b3;
+    color: #7D81A7;
 }
 
 .sparx__btn--secondary {
-    background-color: #fff;
-    color: #222;
+    background-color: #444872;
+    color: #fff;
     border-radius: 100px;
     box-shadow: 0 0 45px 0 rgba(133, 133, 133, 0.1);
 }
 .sparx__btn--secondary:hover {
-    background-color: #52b6d3;
+    background-color: #6347F5;
     color: #fff;
 }
 .sparx__btn--secondary:active {
-    color: #b3b3b3;
+    color: #7D81A7;
 }
 
 .sparx {
@@ -277,12 +276,12 @@ body {
     align-items: center;
     gap: 24px;
     min-height: 100vh;
-    background-color: #f7f7f7;
+    background-color: #10152b;
     padding: 0 16px;
 }
 
 .sparx__title {
-    color: #222;
+    color: #fff;
     text-align: center;
     font-size: 32px;
     font-style: normal;
@@ -293,7 +292,7 @@ body {
 }
 
 .sparx__comment {
-    color: #222;
+    color: #fff;
     text-align: center;
     font-size: 16px;
     font-style: normal;
@@ -349,11 +348,11 @@ body {
     align-items: center;
     gap: 24px;
     min-height: 100vh;
-    background-color: #f7f7f7;
+    background-color: #10152b;
 }
 
 .onboarding-sparx__title {
-    color: #222;
+    color: #fff;
     text-align: center;
     font-size: 32px;
     font-style: normal;