refactor: simplified css classes, added favicon (#8)

nikarh · Mar 17, 2024 · 3bce8f7 · 3bce8f7
1 parent 100651c
commit 3bce8f7
Show file tree

Hide file tree

Showing 20 changed files with 181 additions and 229 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
 node_modules
 dist
 media
+Mother Project.RPP-bak
+.vscode
diff --git a/biome.json b/biome.json
@@ -13,6 +13,9 @@
     "rules": {
       "a11y": {
         "noSvgWithoutTitle": "off"
+      },
+      "nursery": {
+        "useSortedClasses": "off"
       }
     }
   }

diff --git a/index.html b/index.html
@@ -1,11 +1,11 @@
 <!doctype html>
-<html class="dark h-full" lang="en">
+<html class="h-full" lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Band control</title>
   </head>
-  <body class="bg-white dark:bg-gray-900" style="height: 100%" id="root">
+  <body class="bg-gray-900 h-full" id="root">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <script src="/src/index.tsx" type="module"></script>
   </body>

diff --git a/src/App.tsx b/src/App.tsx
@@ -19,7 +19,7 @@ function App() {
 
   return (
     <ReaperProvider interval={50} subscriptions={SUBSCRIPTIONS}>
-      <div class="flex flex-col h-full justify-between">
+      <div class="flex h-full flex-col justify-between">
         <div class="grow overflow-y-scroll">
           {section() === Section.Control && <Control />}
           {section() === Section.Mix && <Mix />}

diff --git a/src/Components/BottomNav.tsx b/src/Components/BottomNav.tsx
@@ -11,17 +11,17 @@ export function BottomNav(p: {
   onSelected: Setter<Section>;
 }) {
   const selectableClass =
-    "inline-flex flex-col items-center justify-center px-5 hover:bg-gray-100 dark:hover:bg-gray-700 group";
+    "inline-flex flex-col items-center justify-center px-5 hover:bg-gray-100 hover:bg-gray-700 group";
   const selectedClass =
-    "inline-flex flex-col items-center justify-center px-5 bg-gray-50 dark:bg-gray-800 group";
+    "inline-flex flex-col items-center justify-center px-5 bg-gray-50 bg-gray-800 group";
 
   const textSelectableClass =
-    "text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500";
+    "text-gray-500 text-gray-400 group-hover:text-blue-600 group-hover:text-blue-500";
   const textSelectedClass = "text-blue-600 text-blue-500";
 
   return (
-    <div class="shrink-0 w-full h-16 bg-white border-t border-gray-200 dark:bg-gray-700 dark:border-gray-600">
-      <div class="grid h-full max-w-lg grid-cols-2 mx-auto">
+    <div class="h-16 w-full shrink-0 border-gray-600 border-t bg-gray-700">
+      <div class="mx-auto grid h-full max-w-lg grid-cols-2">
         <button
           type="button"
           onClick={() => p.onSelected(Section.Mix)}
@@ -35,7 +35,7 @@ export function BottomNav(p: {
             }
           />
           <span
-            class={`text-sm  ${
+            class={`text-sm ${
               p.section === Section.Mix
                 ? textSelectedClass
                 : textSelectableClass
@@ -59,7 +59,7 @@ export function BottomNav(p: {
             }
           />
           <span
-            class={`text-sm  ${
+            class={`text-sm ${
               p.section === Section.Control
                 ? textSelectedClass
                 : textSelectableClass

diff --git a/src/Components/Control/Playback.tsx b/src/Components/Control/Playback.tsx
@@ -14,7 +14,7 @@ export function MainControl() {
         <button
           type="button"
           onClick={play}
-          class={`btn-primary rounded-l w-14 ${
+          class={`btn-primary w-14 rounded-l ${
             state() === PlayState.Playing && "selected"
           }`}
         >

diff --git a/src/Components/Control/Regions.tsx b/src/Components/Control/Regions.tsx
@@ -15,6 +15,7 @@ import {
   type RegionMeta,
 } from "../../Data/State";
 import { Icons } from "../UI/Icons";
+import { Toggle } from "../UI/Toggle";
 
 function progress(region: Region, currentTime: number): number {
   return Math.max(
@@ -41,12 +42,12 @@ function Progress(p: { region: Region; currentTime: CurrentTime }) {
   return (
     <>
       <div
-        class="absolute bottom-0 left-0 top-0 right-0 bg-black opacity-40"
-        style={`width: ${progress(p.region, p.currentTime.seconds)}%`}
+        class="absolute top-0 right-0 bottom-0 left-0 bg-black opacity-40"
+        style={{ width: `${progress(p.region, p.currentTime.seconds)}%` }}
       />
 
-      <div class="absolute top-0 bottom-0 right-0 flex items-center opacity-90 px-1">
-        <p class="text-xs text-gray-300 bg-neutral-900/40 rounded-lg p-1 font-mono">
+      <div class="absolute top-0 right-0 bottom-0 flex items-center px-1 opacity-90">
+        <p class="rounded-lg bg-neutral-900/40 p-1 font-mono text-gray-300 text-xs">
           {time(p.currentTime.seconds - p.region.startTime)} /{" "}
           {time(p.region.endTime - p.region.startTime)}
         </p>
@@ -105,21 +106,20 @@ function RegionList() {
         {(region) => (
           <button
             type="button"
-            class={`
-              hover:brightness-125 relative grow flex h-10 overflow-clip btn-outlined my-1 px-3 
-              ${isPlaying(region) && `selected ${playStateClass(playState())}`}
-            `}
-            style={`${
-              region.color != null ? `background-color: ${region.color};` : ""
+            class={`btn-outlined relative my-1 flex h-10 grow overflow-clip px-3 hover:brightness-125 ${
+              isPlaying(region) && `selected ${playStateClass(playState())}`
             }`}
+            style={
+              region.color != null ? { "background-color": region.color } : {}
+            }
             onClick={() => moveToRegion(region)}
           >
             {isPlaying(region) && (
               <Progress region={region} currentTime={currentTime()} />
             )}
 
-            <div class="absolute bottom-0 left-0.5 top-1 opacity-90">
-              <div class="text-base font-normal text-gray-700 dark:text-gray-200 bg-neutral-900/40 rounded-lg p-1">
+            <div class="absolute top-1 bottom-0 left-0.5 opacity-90">
+              <div class="rounded-lg bg-neutral-900/40 p-1 font-normal text-base text-gray-200">
                 {region.id}. {region.name}
               </div>
             </div>
@@ -219,10 +219,9 @@ function RegionEditor() {
             </button>
             <button
               type="button"
-              class={`
-                relative grow flex h-10 overflow-clip btn-outlined btn-checkbox my-1 px-3
-                ${!region.meta?.disabled && "selected"}
-              `}
+              class={`btn-outlined hover:text-gray-200 hover:bg-gray-600 relative my-1 flex h-10 grow overflow-clip px-3 ${
+                !region.meta?.disabled && "selected"
+              }`}
               onclick={() =>
                 updateRegionMeta(toggleEnabled(processedRegions(), i()))
               }
@@ -232,8 +231,8 @@ function RegionEditor() {
               </span>
 
               {!region.meta?.disabled && (
-                <div class="absolute top-0 bottom-0 right-0 items-center opacity-70 px-3 flex content-center">
-                  <Icons.Checked class="w-6 h-6 mr-1" />
+                <div class="absolute top-0 right-0 bottom-0 flex content-center items-center px-3 opacity-70">
+                  <Icons.Checked class="mr-1 h-6 w-6" />
                 </div>
               )}
             </button>
@@ -244,39 +243,17 @@ function RegionEditor() {
   );
 }
 
-interface ToggleProps {
-  value: boolean;
-  onChange(value: boolean): void;
-}
-
-function Toggle(p: ToggleProps) {
-  return (
-    <label class="inline-flex items-center cursor-pointer">
-      <input
-        type="checkbox"
-        checked={p.value}
-        onChange={(e) => p.onChange(e.currentTarget.checked)}
-        class="sr-only peer"
-      />
-      <span class="me-2 text-sm font-medium text-gray-900 dark:text-gray-300">
-        Edit
-      </span>
-      <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600" />
-    </label>
-  );
-}
-
 export function Regions() {
   const [isEditing, setEditing] = createSignal(false);
 
   return (
     <div>
-      <h2 class="mb-2 text-m font-extrabold leading-none tracking-tight text-gray-900 dark:text-white flex items-center">
+      <h2 class="mb-2 flex items-center font-extrabold text-m text-white leading-none tracking-tight">
         <span class="grow">
           {isEditing() && "Regions"}
           {!isEditing() && "Move to Region"}
         </span>
-        <Toggle value={isEditing()} onChange={setEditing} />
+        <Toggle label="Edit" value={isEditing()} onChange={setEditing} />
       </h2>
 
       {isEditing() && <RegionEditor />}

diff --git a/src/Components/Mix/Mix.tsx b/src/Components/Mix/Mix.tsx
@@ -15,8 +15,10 @@ import { OutputControl, SendControl } from "./SendControl";
 
 function NoOutputsFound() {
   return (
-    <div class="max-w-md w-full p-4 font-medium text-left text-gray-500 border border-gray-200 rounded-xl dark:border-gray-700 dark:text-gray-400 bg-gray-100 dark:bg-gray-800">
-      No output tracks
+    <div class="flex justify-center grow">
+      <div class="w-full max-w-md rounded-xl border border-gray-700 bg-gray-800 p-4 text-left font-medium text-gray-400 mt-2">
+        No output tracks
+      </div>
     </div>
   );
 }

diff --git a/src/Components/Mix/SendControl.tsx b/src/Components/Mix/SendControl.tsx
@@ -23,10 +23,14 @@ function dbToNormalized(level: number): number {
 
 function Level(p: { level: number; color: string }) {
   return (
-    <div class="w-full bg-gray-200 h-1 dark:bg-gray-600/50">
+    <div class="h-1 w-full bg-gray-200 bg-gray-600/50">
       <div
         class="h-full rounded-full"
-        style={`width: ${p.level}%; background-color: ${p.color}; filter: invert(0.9);`}
+        style={{
+          width: `${p.level}%`,
+          "background-color": p.color,
+          filter: "invert(0.9)",
+        }}
       />
     </div>
   );
@@ -44,7 +48,7 @@ function Slider(p: SliderProps) {
   const [input, setInput] = createSignal<number | undefined>(undefined);
 
   return (
-    <div class="relative grow flex rounded-lg overflow-clip">
+    <div class="relative flex grow overflow-clip rounded-lg">
       <Range
         min={0}
         max={1}
@@ -58,25 +62,25 @@ function Slider(p: SliderProps) {
         color={p.color}
       />
       {p.label != null && (
-        <div class="absolute bottom-0 left-0.5 top-0.5 pointer-events-none opacity-70">
-          <div class="font-normal text-gray-700 dark:text-gray-200 bg-neutral-900/40 rounded-lg p-1">
+        <div class="pointer-events-none absolute top-0.5 bottom-0 left-0.5 opacity-70">
+          <div class="rounded-lg bg-neutral-900/40 p-1 font-normal text-gray-200">
             {p.label}
           </div>
         </div>
       )}
 
-      <div class="absolute right-2 top-0 bottom-0 pointer-events-none flex items-center opacity-70">
+      <div class="pointer-events-none absolute top-0 right-2 bottom-0 flex items-center opacity-70">
         <p
-          class={`text-xs text-white ${
+          class={`text-white text-xs ${
             input() != null ? "text-gray-400" : ""
-          } bg-neutral-900/40 rounded-lg p-1 font-mono`}
+          } rounded-lg bg-neutral-900/40 p-1 font-mono`}
         >
           {input() == null && normalizedToDb(p.value).toFixed(2)}
           {input() != null && normalizedToDb(input() ?? 0).toFixed(2)} dB
         </p>
       </div>
 
-      <div class="absolute left-0 bottom-0 right-0 pointer-events-none">
+      <div class="pointer-events-none absolute right-0 bottom-0 left-0">
         <Level level={p.peak} color={p.color ?? "red"} />
       </div>
     </div>
@@ -92,12 +96,11 @@ interface SendControlProps {
 
 export function SendControl(p: SendControlProps) {
   return (
-    <div class="my-3 p-2 bg-white rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 flex">
+    <div class="my-3 flex rounded-lg border-gray-700 bg-gray-800 p-2 shadow">
       <Slider
         label={
           <>
-            {p.track.name}{" "}
-            <span class="dark:text-gray-400">({p.track.id})</span>
+            {p.track.name} <span class="text-gray-400">({p.track.id})</span>
           </>
         }
         value={p.send.volume}
@@ -107,9 +110,9 @@ export function SendControl(p: SendControlProps) {
       />
       <button
         type="button"
-        class={`text-xs ml-5 px-7 py-2 ${
+        class={`${
           p.send.mute ? "btn-mute-red" : "btn-mute"
-        }`}
+        } ml-5 px-7 py-2 text-xs`}
         onClick={p.onMuteToggle}
       >
         M
@@ -125,13 +128,13 @@ interface OutputControlProps {
 
 export function OutputControl(p: OutputControlProps) {
   return (
-    <div class="p-2 mb-3 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-700 dark:border-gray-700">
-      <div class="flex mb-1 font-normal text-gray-700 dark:text-gray-400">
+    <div class="mb-3 rounded-lg border border-gray-700 bg-gray-700 p-2 shadow">
+      <div class="mb-1 flex font-normal text-gray-400">
         <div class="flex-1">
           <b>Output:</b> {p.track.name}{" "}
-          <span class="dark:text-gray-500">({p.track.id})</span>
+          <span class="text-gray-500">({p.track.id})</span>
         </div>
-        <div class="font-small text-gray-500 dark:text-gray-500">
+        <div class="font-small text-gray-500">
           Peak: {(p.track.peakVolume / 10).toFixed(2)} dB
         </div>
       </div>

diff --git a/src/Components/UI/BottomNavigation.css b/src/Components/UI/BottomNavigation.css
@@ -9,18 +9,14 @@
       w-full 
       h-16
       flex
-    bg-white
-      border-t 
-    border-gray-200
-    dark:bg-gray-700
-    dark:border-gray-600;
+      border-t
+    bg-gray-700
+    border-gray-600;
   }
 
   .bottom-navigation button:not(.selected) {
-    @apply text-gray-500
-      dark:text-gray-400
-      hover:text-blue-600
-      dark:hover:text-blue-500;
+    @apply text-gray-400
+      hover:text-blue-500;
   }
 
   .bottom-navigation button {
@@ -29,7 +25,6 @@
 
   .bottom-navigation button.selected {
     @apply text-blue-500
-    bg-gray-50
-    dark:bg-gray-800;
+    bg-gray-800;
   }
 }
diff --git a/src/Components/UI/BottomNavigation.tsx b/src/Components/UI/BottomNavigation.tsx
@@ -11,8 +11,8 @@ interface BottomNavigationProps<Item> {
 export function BottomNavigation<Item>(p: BottomNavigationProps<Item>) {
   return (
     <div class="bottom-navigation">
-      <div class="max-w-lg mx-auto grow h-full">
-        <div class="grid grid-flow-col auto-cols-auto h-full">
+      <div class="mx-auto h-full max-w-lg grow">
+        <div class="grid h-full auto-cols-auto grid-flow-col">
           <For each={p.items}>
             {(item) => (
               <button