hax/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-12-17 00:44:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: minor changes

Browse source
This commit is contained in:
MAZE 2024-08-31 13:26:10 +04:30
parent 5c9a2aa23a
commit b27f24d374
2 changed files with 47 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/components/modals/breathing/exercise/exercise.module.css
View file

@ -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);
}
}
}

24
src/components/modals/breathing/exercise/exercise.tsx
View file

@ -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>
</>
);
}