feat: upd shuffle quiz button

Author: hardsoncore

src/app/quiz/quiz.page.html

@@ -1,9 +1,18 @@
-<ion-header class="quiz-header">
+<ion-header class="quiz-header" [translucent]="true">
   <ion-toolbar>
-    <div class="quiz-header__toggle">
-      <span class="quiz-header__label">{{ 'QUIZ.RANDOMIZE' | translate }}</span>
-      <ion-toggle [checked]="isRandomized" (ionChange)="toggleQuiz($event)"></ion-toggle>
-    </div>
+    <ion-title>{{ 'TABS.QUIZ' | translate }}</ion-title>
+    <ion-buttons slot="end">
+      <button
+        type="button"
+        class="quiz-header__shuffle"
+        [class.quiz-header__shuffle--active]="isRandomized"
+        [attr.aria-pressed]="isRandomized"
+        [attr.aria-label]="'QUIZ.RANDOMIZE' | translate"
+        [title]="'QUIZ.RANDOMIZE' | translate"
+        (click)="toggleRandom()">
+        <ion-icon name="shuffle-outline" aria-hidden="true"></ion-icon>
+      </button>
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 

src/app/quiz/quiz.page.scss

@@ -4,34 +4,31 @@
 
 /* ---------- Header ---------- */
 .quiz-header {
-  ion-toolbar {
-    --padding-start: 0;
-    --padding-end: 0;
-  }
-
-  .quiz-header__toggle {
-    display: flex;
+  .quiz-header__shuffle {
+    display: inline-flex;
     align-items: center;
-    justify-content: space-between;
-    gap: 0.75rem;
-    width: 100%;
-    padding-inline: var(--quiz-gutter);
-    box-sizing: border-box;
-    font-size: 0.95rem;
-    font-weight: 600;
-    letter-spacing: 0.01em;
-    color: var(--ion-text-color);
-  }
-
-  .quiz-header__label {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  ion-toggle {
-    flex: 0 0 auto;
+    justify-content: center;
+    width: 2.3rem;
+    height: 2.3rem;
+    margin-inline-end: 0.4rem;
+    padding: 0;
+    border: 0;
+    border-radius: 999px;
+    font-size: 1.2rem;
+    color: var(--ion-color-medium);
+    background: rgba(var(--ion-color-medium-rgb), 0.12);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
+
+    &:active {
+      transform: scale(0.9);
+    }
+
+    &--active {
+      color: var(--ion-color-primary);
+      background: rgba(var(--ion-color-primary-rgb), 0.14);
+    }
   }
 }
 
@@ -280,8 +277,4 @@
   .quiz__body {
     justify-content: center;
   }
-
-  .quiz-header__toggle {
-    font-size: 0.8rem;
-  }
 }

src/app/quiz/quiz.page.spec.ts

@@ -139,9 +139,10 @@ describe('QuizPage', () => {
     }));
   });
 
-  describe('toggleQuiz', () => {
+  describe('toggleRandom', () => {
     it('should persist the randomize flag and load a new question', fakeAsync(() => {
-      component.toggleQuiz({ detail: { checked: true } } as CustomEvent<{ checked: boolean }>);
+      component.isRandomized = false;
+      component.toggleRandom();
 
       expect(component.isRandomized).toBeTrue();
       expect(localStorage.getItem('isRandomized')).toBe('true');

src/app/quiz/quiz.page.ts

@@ -84,8 +84,8 @@ export class QuizPage implements OnInit, OnDestroy {
     this.router.navigate(['tabs/quiz/answer-structure'], navigationExtras);
   }
 
-  public toggleQuiz(event: CustomEvent<{ checked: boolean }>): void {
-    this.isRandomized = event.detail.checked;
+  public toggleRandom(): void {
+    this.isRandomized = !this.isRandomized;
     localStorage.setItem('isRandomized', JSON.stringify(this.isRandomized));
 
     this.getNextQuestion();