From 5c536786ea64e9722a67289ab2d7e56e7a259404 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Fri, 13 Sep 2024 15:58:03 +0330
Subject: [PATCH] style: add style to generators

---
 .../modals/binaural/binaural.module.css       | 73 ++++++++++++++++++-
 src/components/modals/binaural/binaural.tsx   | 21 ++++--
 .../modals/isochronic/isochornic.module.css   | 73 ++++++++++++++++++-
 .../modals/isochronic/isochronic.tsx          | 24 ++++--
 4 files changed, 174 insertions(+), 17 deletions(-)

diff --git a/src/components/modals/binaural/binaural.module.css b/src/components/modals/binaural/binaural.module.css
index fdbd99d..5eaf762 100644
--- a/src/components/modals/binaural/binaural.module.css
+++ b/src/components/modals/binaural/binaural.module.css
@@ -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);
+    }
+  }
+}
diff --git a/src/components/modals/binaural/binaural.tsx b/src/components/modals/binaural/binaural.tsx
index 98cfc03..050a719 100644
--- a/src/components/modals/binaural/binaural.tsx
+++ b/src/components/modals/binaural/binaural.tsx
@@ -141,9 +141,12 @@ export function BinauralModal({ onClose, show }: BinauralProps) {
 
   return (
     <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>
           Presets:
           <select value={selectedPreset} onChange={handlePresetChange}>
@@ -157,7 +160,7 @@ export function BinauralModal({ onClose, show }: BinauralProps) {
       </div>
       {selectedPreset === 'Custom' && (
         <>
-          <div>
+          <div className={styles.fieldWrapper}>
             <label>
               Base Frequency (Hz):
               <input
@@ -170,7 +173,7 @@ export function BinauralModal({ onClose, show }: BinauralProps) {
               />
             </label>
           </div>
-          <div>
+          <div className={styles.fieldWrapper}>
             <label>
               Beat Frequency (Hz):
               <input
@@ -185,7 +188,7 @@ export function BinauralModal({ onClose, show }: BinauralProps) {
           </div>
         </>
       )}
-      <div>
+      <div className={styles.fieldWrapper}>
         <label>
           Volume:
           <input
@@ -198,8 +201,12 @@ export function BinauralModal({ onClose, show }: BinauralProps) {
           />
         </label>
       </div>
-      <div>
-        <button disabled={isPlaying} onClick={startSound}>
+      <div className={styles.buttons}>
+        <button
+          className={styles.primary}
+          disabled={isPlaying}
+          onClick={startSound}
+        >
           Start
         </button>
         <button disabled={!isPlaying} onClick={stopSound}>
diff --git a/src/components/modals/isochronic/isochornic.module.css b/src/components/modals/isochronic/isochornic.module.css
index fdbd99d..5eaf762 100644
--- a/src/components/modals/isochronic/isochornic.module.css
+++ b/src/components/modals/isochronic/isochornic.module.css
@@ -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);
+    }
+  }
+}
diff --git a/src/components/modals/isochronic/isochronic.tsx b/src/components/modals/isochronic/isochronic.tsx
index d99eaa9..0d12fe7 100644
--- a/src/components/modals/isochronic/isochronic.tsx
+++ b/src/components/modals/isochronic/isochronic.tsx
@@ -162,8 +162,12 @@ export function IsochronicModal({ onClose, show }: IsochronicProps) {
 
   return (
     <Modal show={show} onClose={onClose}>
-      <h2 className={styles.title}>Isochronic Tones</h2>
-      <div>
+      <header className={styles.header}>
+        <h2 className={styles.title}>Isochronic Tone</h2>
+        <p className={styles.desc}>Isochronic tone generator.</p>
+      </header>
+
+      <div className={styles.fieldWrapper}>
         <label>
           Presets:
           <select value={selectedPreset} onChange={handlePresetChange}>
@@ -177,7 +181,7 @@ export function IsochronicModal({ onClose, show }: IsochronicProps) {
       </div>
       {selectedPreset === 'Custom' && (
         <>
-          <div>
+          <div className={styles.fieldWrapper}>
             <label>
               Base Frequency (Hz):
               <input
@@ -190,7 +194,7 @@ export function IsochronicModal({ onClose, show }: IsochronicProps) {
               />
             </label>
           </div>
-          <div>
+          <div className={styles.fieldWrapper}>
             <label>
               Tone Frequency (Hz):
               <input
@@ -203,7 +207,7 @@ export function IsochronicModal({ onClose, show }: IsochronicProps) {
               />
             </label>
           </div>
-          <div>
+          <div className={styles.fieldWrapper}>
             <label>
               Waveform:
               <select
@@ -219,7 +223,7 @@ export function IsochronicModal({ onClose, show }: IsochronicProps) {
           </div>
         </>
       )}
-      <div>
+      <div className={styles.fieldWrapper}>
         <label>
           Volume:
           <input
@@ -232,8 +236,12 @@ export function IsochronicModal({ onClose, show }: IsochronicProps) {
           />
         </label>
       </div>
-      <div>
-        <button disabled={isPlaying} onClick={startSound}>
+      <div className={styles.buttons}>
+        <button
+          className={styles.primary}
+          disabled={isPlaying}
+          onClick={startSound}
+        >
           Start
         </button>
         <button disabled={!isPlaying} onClick={stopSound}>