Merge pull request #26 from mathieuher/preview/buttons

refactor(buttons): rework buttons design
mathieuher · Jan 26, 2025 · 6dd0997 · 6dd0997
2 parents 7260448 + 4e8b912
commit 6dd0997
Show file tree

Hide file tree

Showing 12 changed files with 45 additions and 50 deletions.
diff --git a/src/app/common/scss/components.scss b/src/app/common/scss/components.scss
@@ -7,44 +7,36 @@
     background-color: transparent;
     box-shadow: none;
     height: 40px;
-    font-size: var(--text-subtitle);
+    font-size: var(--text-standard);
     font-family: "Kode mono", monospace;
     text-align: center;
     border-radius: var(--border-radius-large);
     cursor: pointer;
-    transition: background-color var(--transition-time) ease-in-out;
+    transition: var(--transition-time) ease-in-out;
+    border: 0px;
 
-    border: 1px solid var(--color-primary);
-    color: var(--color-primary);
+    background-color: var(--color-primary);
+    color: var(--color-surface);
 
     &.placeholder {
         margin-top: 1rem;
     }
 
     &.tertiary {
-        border: 1px solid var(--color-tertiary);
-        color: var(--color-tertiary);
-
-        &:hover:not([disabled]) {
-            background-color: var(--color-tertiary-lightest);
-        }
-    }
-
-    &.error {
-        border: 1px solid var(--color-error);
-        color: var(--color-error);
+        background-color: var(--color-tertiary);
+        color: var(--color-surface);
 
         &:hover:not([disabled]) {
-            background-color: var(--color-error-lightest);
+            background-color: var(--color-tertiary-hover);
         }
     }
 
     &:hover:not([disabled]) {
-        background-color: var(--color-primary-lightest);
+        background-color: var(--color-primary-hover);
     }
 
     &[disabled] {
-        border-color: var(--color-disabled);
+        background-color: var(--color-disabled-lightest);
         color: var(--color-disabled);
         cursor: initial;
     }
@@ -244,8 +236,8 @@
 .retro-input {
     font-size: var(--text-standard);
     border-radius: var(--border-radius-large);
-    border-color: var(--color-tertiary);
-    color: var(--color-tertiary);
+    border-color: var(--color-primary);
+    color: var(--color-primary);
     font-family: var(--text-font-family);
     height: 40px;
     padding: 0 0.5rem;
@@ -287,34 +279,31 @@
         display: flex;
         flex-direction: row;
         padding: 0.5rem;
-        border: 1px solid var(--color-primary);
+        border: 0px;
         border-radius: var(--border-radius);
         font-size: var(--text-standard);
-        color: var(--color-primary);
+        color: var(--color-surface);
+        background-color: var(--color-primary);
         justify-content: space-between;
         align-items: center;
-        transition: background-color var(--transition-time) ease-in-out;
+        transition: var(--transition-time) ease-in-out;
 
         &:hover {
-            background-color: var(--color-primary-lightest);
+            background-color: var(--color-primary-hover);
         }
 
         &.tertiary {
-            border: 1px solid var(--color-tertiary);
-            color: var(--color-tertiary);
+            color: var(--color-surface);
+            background-color: var(--color-tertiary);
 
             &:hover {
-                background-color: var(--color-tertiary-lightest);
+                background-color: var(--color-tertiary-hover);
             }
         }
 
         &.inactive {
-            border: 1px solid var(--color-disabled);
+            background-color: var(--color-disabled-lightest);
             color: var(--color-disabled);
-
-            &:hover {
-                background-color: var(--color-disabled-lightest);
-            }
         }
 
         .icon {

diff --git a/src/app/common/scss/variables.scss b/src/app/common/scss/variables.scss
@@ -2,9 +2,11 @@ html {
     --color-app-background: #1e1e1e;
     --color-surface: #ffffff;
     --color-primary: #22165f;
-    --color-primary-light: #3a249d;
+    --color-primary-hover: #312763;
+    --color-primary-light: #6251af;
     --color-primary-lightest: #ede9ff;
     --color-tertiary: #9747ff;
+    --color-tertiary-hover: #9f5afa;
     --color-tertiary-light: #9f78ca;
     --color-tertiary-lightest: #f2e5ff;
     --color-success: #10c045;

diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
@@ -16,6 +16,8 @@
         <button class="retro-button" routerLink="/ride-local">
             Ride local
         </button>
-        <button class="retro-button" routerLink="/login">Ride online</button>
+        <button class="retro-button tertiary" routerLink="/login">
+            Ride online
+        </button>
     </div>
 </div>
diff --git a/src/app/pages/local-event/local-event.component.html b/src/app/pages/local-event/local-event.component.html
@@ -62,7 +62,7 @@
 <div class="retro-footer">
     @if(event.type !== 'race' || event.incomingRaces.length) {
     <button
-        class="retro-button"
+        class="retro-button tertiary"
         [disabled]="event.type === 'race' && !event.incomingRaces.length"
         (click)="startRace()"
     >
@@ -74,4 +74,4 @@
     </button>
     }
 </div>
-}
+}
diff --git a/src/app/pages/login/login.component.html b/src/app/pages/login/login.component.html
@@ -44,7 +44,7 @@
             <div class="retro-text error">{{ loginError() }}</div>
             }
             <button
-                class="retro-button"
+                class="retro-button tertiary"
                 [disabled]="loginForm.invalid"
                 (click)="login()"
             >
@@ -86,7 +86,7 @@
             <div class="retro-text error">{{ registerError() }}</div>
             }
             <button
-                class="retro-button"
+                class="retro-button tertiary"
                 [disabled]="registerForm.invalid"
                 (click)="register()"
             >

diff --git a/src/app/pages/online-event/online-event.component.html b/src/app/pages/online-event/online-event.component.html
@@ -113,7 +113,7 @@
 </div>
 <div class="retro-footer">
     <button
-        class="retro-button"
+        class="retro-button tertiary"
         routerLink="/online-race/{{ event()?.id }}"
         [disabled]="event()?.racesLimit && !remainingRaces()?.length"
     >

diff --git a/src/app/pages/profile/profile.component.html b/src/app/pages/profile/profile.component.html
@@ -1,6 +1,6 @@
 <app-toolbar>
     <ng-container ngProjectAs="left-actions">
-        <app-button-icon icon="close" (click)="goBack()"></app-button-icon>
+        <app-button-icon icon="close" routerLink="/login"></app-button-icon>
     </ng-container>
 </app-toolbar>
 <div class="retro-content">

diff --git a/src/app/pages/race/race.component.scss b/src/app/pages/race/race.component.scss
@@ -117,7 +117,7 @@
         height: 100%;
         top: 0px;
         left: 0px;
-        background-color: rgba(255, 255, 255, 0.9);
+        background-color: rgba(255, 255, 255, 0.95);
         color: var(--color-primary);
 
         .ranking {

diff --git a/src/app/pages/reset-password/reset-password.component.html b/src/app/pages/reset-password/reset-password.component.html
@@ -90,7 +90,7 @@
             />
         </div>
         <button
-            class="retro-button"
+            class="retro-button tertiary"
             [disabled]="email.invalid"
             (click)="sendMail()"
         >

diff --git a/src/app/pages/ride-local/ride-local.component.html b/src/app/pages/ride-local/ride-local.component.html
@@ -18,7 +18,7 @@
             </select>
             }
         </div>
-        <button class="retro-button tertiary" routerLink="/manage-tracks">
+        <button class="retro-button" routerLink="/manage-tracks">
             Manage local tracks
         </button>
     </div>
@@ -31,7 +31,6 @@
                 @if(form.value.riders?.length! > 1) {
                 <app-button-icon
                     icon="delete"
-                    class="tertiary"
                     (click)="removeRider($index)"
                 ></app-button-icon>
                 }
@@ -45,7 +44,7 @@
         </div>
         }
         <button
-            class="retro-button tertiary"
+            class="retro-button"
             (click)="addRider()"
             [disabled]="form.value.riders?.length! >= 4"
         >
@@ -60,7 +59,7 @@
 </div>
 <div class="retro-footer">
     <button
-        class="retro-button"
+        class="retro-button tertiary"
         (click)="startEvent()"
         [disabled]="!form.valid"
     >

diff --git a/src/app/pages/ride-online/ride-online.component.scss b/src/app/pages/ride-online/ride-online.component.scss
@@ -6,9 +6,9 @@
 
     .server-infos {
         padding: 0.25rem;
-        background-color: var(--color-tertiary-lightest);
-        color: var(--color-tertiary);        
+        background-color: var(--color-tertiary);
+        color: var(--color-surface);
         border-radius: var(--border-radius-large);
         font-size: var(--text-small);
     }
-}
+}
diff --git a/src/app/pages/upgrade/upgrade.component.scss b/src/app/pages/upgrade/upgrade.component.scss
@@ -13,6 +13,9 @@
         .retro-button {
             text-align: left;
             font-size: 0.8rem;
+            /* background-color: var(--color-primary-lightest);
+            color: var(--color-primary);
+            */
         }
 
         .button-price {
@@ -25,7 +28,7 @@
                 justify-content: flex-end;
                 font-size: var(--text-small);
                 color: var(--color-surface);
-                background-color: var(--color-tertiary-light);
+                background-color: var(--color-primary);
                 border-radius: var(--border-radius);
             }
         }