hax/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-12-18 01:14:17 +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%; width: 100%;
min-width: 0;
height: 45px; height: 45px;
padding: 0 12px; padding: 0 12px;
margin-top: 8px; margin-top: 8px;
font-size: var(--font-sm); background-color: var(--color-neutral-50);
color: var(--color-foreground);
background-color: var(--color-neutral-100);
border: 1px solid var(--color-neutral-200); border: 1px solid var(--color-neutral-200);
border-radius: 8px; 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> <p className={styles.phase}>{PHASE_LABELS[currentPhase]}</p>
</div> </div>
<select <div className={styles.selectWrapper}>
className={styles.selectBox} <select
value={selectedExercise} className={styles.selectBox}
onChange={e => setSelectedExercise(e.target.value as Exercise)} value={selectedExercise}
> onChange={e => setSelectedExercise(e.target.value as Exercise)}
{Object.keys(EXERCISE_PHASES).map(exercise => ( >
<option key={exercise} value={exercise}> {Object.keys(EXERCISE_PHASES).map(exercise => (
{exercise} <option key={exercise} value={exercise}>
</option> {exercise}
))} </option>
</select> ))}
</select>
</div>
</> </>
); );
} }