From b27f24d37484a04495a043170ccaf4b4923b31ac Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Sat, 31 Aug 2024 13:26:10 +0430
Subject: [PATCH] style: minor changes

---
 .../breathing/exercise/exercise.module.css    | 39 ++++++++++++++++---
 .../modals/breathing/exercise/exercise.tsx    | 24 ++++++------
 2 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/src/components/modals/breathing/exercise/exercise.module.css b/src/components/modals/breathing/exercise/exercise.module.css
index 05b9baa..8d93916 100644
--- a/src/components/modals/breathing/exercise/exercise.module.css
+++ b/src/components/modals/breathing/exercise/exercise.module.css
@@ -33,15 +33,44 @@
   }
 }
 
-.selectBox {
+.selectWrapper {
+  position: relative;
   width: 100%;
-  min-width: 0;
   height: 45px;
   padding: 0 12px;
   margin-top: 8px;
-  font-size: var(--font-sm);
-  color: var(--color-foreground);
-  background-color: var(--color-neutral-100);
+  background-color: var(--color-neutral-50);
   border: 1px solid var(--color-neutral-200);
   border-radius: 8px;
+
+  &::before {
+    position: absolute;
+    top: -1px;
+    left: 50%;
+    width: 80%;
+    height: 1px;
+    content: '';
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--color-neutral-300),
+      transparent
+    );
+    transform: translateX(-50%);
+  }
+
+  & .selectBox {
+    width: 100%;
+    min-width: 0;
+    height: 100%;
+    font-size: var(--font-sm);
+    color: var(--color-foreground);
+    background-color: transparent;
+    border: none;
+    outline: none;
+
+    & option {
+      color: var(--color-neutral-50);
+    }
+  }
 }
diff --git a/src/components/modals/breathing/exercise/exercise.tsx b/src/components/modals/breathing/exercise/exercise.tsx
index 14e07fb..14c569b 100644
--- a/src/components/modals/breathing/exercise/exercise.tsx
+++ b/src/components/modals/breathing/exercise/exercise.tsx
@@ -93,17 +93,19 @@ export function Exercise() {
         <p className={styles.phase}>{PHASE_LABELS[currentPhase]}</p>
       </div>
 
-      <select
-        className={styles.selectBox}
-        value={selectedExercise}
-        onChange={e => setSelectedExercise(e.target.value as Exercise)}
-      >
-        {Object.keys(EXERCISE_PHASES).map(exercise => (
-          <option key={exercise} value={exercise}>
-            {exercise}
-          </option>
-        ))}
-      </select>
+      <div className={styles.selectWrapper}>
+        <select
+          className={styles.selectBox}
+          value={selectedExercise}
+          onChange={e => setSelectedExercise(e.target.value as Exercise)}
+        >
+          {Object.keys(EXERCISE_PHASES).map(exercise => (
+            <option key={exercise} value={exercise}>
+              {exercise}
+            </option>
+          ))}
+        </select>
+      </div>
     </>
   );
 }