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

style: add style to generators

Browse source
This commit is contained in:
MAZE 2024-09-13 15:58:03 +03:30
parent 2e1fce4669
commit 5c536786ea
4 changed files with 174 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
src/components/modals/binaural/binaural.module.css
View file

@ -1 +1,72 @@
/* WIP */ .header {
margin-bottom: 16px;
& .title {
margin-bottom: 4px;
font-family: var(--font-heading);
font-size: var(--font-md);
font-weight: 600;
}
& .desc {
color: var(--color-foreground-subtle);
}
}
.fieldWrapper {
margin-bottom: 12px;
& label {
display: block;
font-size: var(--font-sm);
font-weight: 500;
color: var(--color-foreground);
& input,
select {
display: block;
width: 100%;
min-width: 0;
height: 45px;
padding: 0 8px;
margin-top: 4px;
color: var(--color-foreground);
background-color: var(--color-neutral-50);
border: 1px solid var(--color-neutral-200);
border-radius: 8px;
outline: none;
}
}
}
.buttons {
display: flex;
column-gap: 8px;
align-items: center;
margin-top: 12px;
& button {
display: flex;
flex-grow: 1;
align-items: center;
justify-content: center;
height: 45px;
font-weight: 500;
color: var(--color-foreground);
cursor: pointer;
background-color: var(--color-neutral-200);
border: none;
border-radius: 8px;
outline: none;
&:disabled {
cursor: not-allowed;
opacity: 0.3;
}
&.primary {
color: var(--color-neutral-50);
background-color: var(--color-neutral-950);
}
}
}

21
src/components/modals/binaural/binaural.tsx
View file

@ -141,9 +141,12 @@ export function BinauralModal({ onClose, show }: BinauralProps) {
return ( return (
<Modal show={show} onClose={onClose}> <Modal show={show} onClose={onClose}>
<h2 className={styles.title}>Binaural Beats</h2> <header className={styles.header}>
<h2 className={styles.title}>Binaural Beat</h2>
<p className={styles.desc}>Binaural beat generator.</p>
</header>
<div> <div className={styles.fieldWrapper}>
<label> <label>
Presets: Presets:
<select value={selectedPreset} onChange={handlePresetChange}> <select value={selectedPreset} onChange={handlePresetChange}>
@ -157,7 +160,7 @@ export function BinauralModal({ onClose, show }: BinauralProps) {
</div> </div>
{selectedPreset === 'Custom' && ( {selectedPreset === 'Custom' && (
<> <>
<div> <div className={styles.fieldWrapper}>
<label> <label>
Base Frequency (Hz): Base Frequency (Hz):
<input <input
@ -170,7 +173,7 @@ export function BinauralModal({ onClose, show }: BinauralProps) {
/> />
</label> </label>
</div> </div>
<div> <div className={styles.fieldWrapper}>
<label> <label>
Beat Frequency (Hz): Beat Frequency (Hz):
<input <input
@ -185,7 +188,7 @@ export function BinauralModal({ onClose, show }: BinauralProps) {
</div> </div>
</> </>
)} )}
<div> <div className={styles.fieldWrapper}>
<label> <label>
Volume: Volume:
<input <input
@ -198,8 +201,12 @@ export function BinauralModal({ onClose, show }: BinauralProps) {
/> />
</label> </label>
</div> </div>
<div> <div className={styles.buttons}>
<button disabled={isPlaying} onClick={startSound}> <button
className={styles.primary}
disabled={isPlaying}
onClick={startSound}
>
Start Start
</button> </button>
<button disabled={!isPlaying} onClick={stopSound}> <button disabled={!isPlaying} onClick={stopSound}>

73
src/components/modals/isochronic/isochornic.module.css
View file

@ -1 +1,72 @@
/* WIP */ .header {
margin-bottom: 16px;
& .title {
margin-bottom: 4px;
font-family: var(--font-heading);
font-size: var(--font-md);
font-weight: 600;
}
& .desc {
color: var(--color-foreground-subtle);
}
}
.fieldWrapper {
margin-bottom: 12px;
& label {
display: block;
font-size: var(--font-sm);
font-weight: 500;
color: var(--color-foreground);
& input,
select {
display: block;
width: 100%;
min-width: 0;
height: 45px;
padding: 0 8px;
margin-top: 4px;
color: var(--color-foreground);
background-color: var(--color-neutral-50);
border: 1px solid var(--color-neutral-200);
border-radius: 8px;
outline: none;
}
}
}
.buttons {
display: flex;
column-gap: 8px;
align-items: center;
margin-top: 12px;
& button {
display: flex;
flex-grow: 1;
align-items: center;
justify-content: center;
height: 45px;
font-weight: 500;
color: var(--color-foreground);
cursor: pointer;
background-color: var(--color-neutral-200);
border: none;
border-radius: 8px;
outline: none;
&:disabled {
cursor: not-allowed;
opacity: 0.3;
}
&.primary {
color: var(--color-neutral-50);
background-color: var(--color-neutral-950);
}
}
}

24
src/components/modals/isochronic/isochronic.tsx
View file

@ -162,8 +162,12 @@ export function IsochronicModal({ onClose, show }: IsochronicProps) {
return ( return (
<Modal show={show} onClose={onClose}> <Modal show={show} onClose={onClose}>
<h2 className={styles.title}>Isochronic Tones</h2> <header className={styles.header}>
<div> <h2 className={styles.title}>Isochronic Tone</h2>
<p className={styles.desc}>Isochronic tone generator.</p>
</header>
<div className={styles.fieldWrapper}>
<label> <label>
Presets: Presets:
<select value={selectedPreset} onChange={handlePresetChange}> <select value={selectedPreset} onChange={handlePresetChange}>
@ -177,7 +181,7 @@ export function IsochronicModal({ onClose, show }: IsochronicProps) {
</div> </div>
{selectedPreset === 'Custom' && ( {selectedPreset === 'Custom' && (
<> <>
<div> <div className={styles.fieldWrapper}>
<label> <label>
Base Frequency (Hz): Base Frequency (Hz):
<input <input
@ -190,7 +194,7 @@ export function IsochronicModal({ onClose, show }: IsochronicProps) {
/> />
</label> </label>
</div> </div>
<div> <div className={styles.fieldWrapper}>
<label> <label>
Tone Frequency (Hz): Tone Frequency (Hz):
<input <input
@ -203,7 +207,7 @@ export function IsochronicModal({ onClose, show }: IsochronicProps) {
/> />
</label> </label>
</div> </div>
<div> <div className={styles.fieldWrapper}>
<label> <label>
Waveform: Waveform:
<select <select
@ -219,7 +223,7 @@ export function IsochronicModal({ onClose, show }: IsochronicProps) {
</div> </div>
</> </>
)} )}
<div> <div className={styles.fieldWrapper}>
<label> <label>
Volume: Volume:
<input <input
@ -232,8 +236,12 @@ export function IsochronicModal({ onClose, show }: IsochronicProps) {
/> />
</label> </label>
</div> </div>
<div> <div className={styles.buttons}>
<button disabled={isPlaying} onClick={startSound}> <button
className={styles.primary}
disabled={isPlaying}
onClick={startSound}
>
Start Start
</button> </button>
<button disabled={!isPlaying} onClick={stopSound}> <button disabled={!isPlaying} onClick={stopSound}>