From 73e4a15718fed26fc8f1552ab1fbc97fb911878a Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Sun, 2 Jun 2024 21:42:12 +0200
Subject: [PATCH] style: add label to auxiliary timer

---
 .../playback/aux-timer/AuxTimer.module.scss   | 11 +++-
 .../control/playback/aux-timer/AuxTimer.tsx   | 55 ++++++++++---------
 2 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/apps/client/src/features/control/playback/aux-timer/AuxTimer.module.scss b/apps/client/src/features/control/playback/aux-timer/AuxTimer.module.scss
index 26b827438..d72e218d4 100644
--- a/apps/client/src/features/control/playback/aux-timer/AuxTimer.module.scss
+++ b/apps/client/src/features/control/playback/aux-timer/AuxTimer.module.scss
@@ -1,5 +1,12 @@
-.extraRow {
+.label {
+  display: block;
+  margin-top: 2rem;
+  font-size: $inner-section-text-size;
+  color: $label-gray;
+}
+
+.controls {
+  margin-top: 0.25rem;
   display: flex;
   gap: 0.5rem;
-  margin-top: 2rem;
 }
diff --git a/apps/client/src/features/control/playback/aux-timer/AuxTimer.tsx b/apps/client/src/features/control/playback/aux-timer/AuxTimer.tsx
index f0f40bacf..084d6d322 100644
--- a/apps/client/src/features/control/playback/aux-timer/AuxTimer.tsx
+++ b/apps/client/src/features/control/playback/aux-timer/AuxTimer.tsx
@@ -29,33 +29,36 @@ export function AuxTimer() {
   };
 
   return (
-    <div className={style.extraRow}>
-      <AuxTimerInput />
-      <TapButton onClick={toggleDirection} aspect='tight'>
-        {direction === SimpleDirection.CountDown && <IoArrowDown data-testid='aux-timer-direction' />}
-        {direction === SimpleDirection.CountUp && <IoArrowUp data-testid='aux-timer-direction' />}
-      </TapButton>
+    <label className={style.label}>
+      Auxiliary Timer
+      <div className={style.controls}>
+        <AuxTimerInput />
+        <TapButton onClick={toggleDirection} aspect='tight'>
+          {direction === SimpleDirection.CountDown && <IoArrowDown data-testid='aux-timer-direction' />}
+          {direction === SimpleDirection.CountUp && <IoArrowUp data-testid='aux-timer-direction' />}
+        </TapButton>
 
-      <TapButton
-        onClick={start}
-        theme={Playback.Play}
-        active={playback === SimplePlayback.Start}
-        disabled={!userCan.start}
-      >
-        <IoPlay data-testid='aux-timer-start' />
-      </TapButton>
-      <TapButton
-        onClick={pause}
-        theme={Playback.Pause}
-        active={playback === SimplePlayback.Pause}
-        disabled={!userCan.pause}
-      >
-        <IoPause data-testid='aux-timer-pause' />
-      </TapButton>
-      <TapButton onClick={stop} theme={Playback.Stop} disabled={!userCan.stop}>
-        <IoStop data-testid='aux-timer-stop' />
-      </TapButton>
-    </div>
+        <TapButton
+          onClick={start}
+          theme={Playback.Play}
+          active={playback === SimplePlayback.Start}
+          disabled={!userCan.start}
+        >
+          <IoPlay data-testid='aux-timer-start' />
+        </TapButton>
+        <TapButton
+          onClick={pause}
+          theme={Playback.Pause}
+          active={playback === SimplePlayback.Pause}
+          disabled={!userCan.pause}
+        >
+          <IoPause data-testid='aux-timer-pause' />
+        </TapButton>
+        <TapButton onClick={stop} theme={Playback.Stop} disabled={!userCan.stop}>
+          <IoStop data-testid='aux-timer-stop' />
+        </TapButton>
+      </div>
+    </label>
   );
 }