ericyd · ericyd · Dec 9, 2022 · Dec 9, 2022 · Dec 9, 2022 · Dec 9, 2022
diff --git a/public/icons/loop-supreme-header.svg b/public/icons/loop-supreme-header.svg
diff --git a/public/index.html b/public/index.html
@@ -46,7 +46,7 @@
       rel="stylesheet"
     />
   </head>
-  <body>
+  <body class="bg-gray-50 dark:bg-zinc-900 text-bg-zinc-900 dark:text-gray-100">
     <div class="container mx-auto pd-2">
       <div class="flex flex-row flex-wrap items-center pb-4">
         <h1>

diff --git a/roadmap.md b/roadmap.md
@@ -98,7 +98,7 @@ A `Track` is a single mono or stereo audio buffer that contains audio data. A `T
 - [x] Allow user to change inputs https://github.com/ericyd/loop-supreme/pull/25
 - [x] clean up TODOs https://github.com/ericyd/loop-supreme/pull/32
 - [x] show alert to user if latency cannot be detected due to their environment
-- [ ] show alert if track latency cannot be detected, or if it seems wildly out of the norm (~100ms +/ 20ms ???). Consider adding a "custom latency" input option???
+- [x] ~show alert if track latency cannot be detected, or if it seems wildly out of the norm (~100ms +/ 20ms ???). Consider adding a "custom latency" input option???~ punting on this until I see the demand
 - [x] remove useInterval hook (not used)
 - [x] investigate network calls to workers. https://github.com/ericyd/loop-supreme/pull/21
 - [x] keyboard bindings should respect certain boundaries. For example, renaming tracks causes all sorts of things to fire, e.g. `a`, `m`, `r`, `c` all do things that probably shouldn't happen. https://github.com/ericyd/loop-supreme/pull/29
@@ -107,9 +107,9 @@ A `Track` is a single mono or stereo audio buffer that contains audio data. A `T
 
 - [ ] Use brand colors for range inputs
 - [ ] Use brand colors for all colors!
-- [ ] Add dark mode capabilities (honor system preferences)
-- [ ] Add dark mode toggle button
-- [ ] allow Track to wrap (controls top, waveform bottom)
+- [x] Add dark mode capabilities (honor system preferences)
+- [x] ~Add dark mode toggle button~ respecting system preferences should be sufficient
+- [x] allow Track to wrap (controls top, waveform bottom)
 - [ ] make Track controls slightly less wide
-- [ ] add track ID indicator so keyboard controls make sense
-- [ ] make beat counter sticky so you can see it even when you scroll
+- [x] add track ID indicator so keyboard controls make sense
+- [x] make beat counter sticky so you can see it even when you scroll
diff --git a/src/ButtonBase/index.tsx b/src/ButtonBase/index.tsx
@@ -50,6 +50,7 @@ function ButtonBase(
     <button
       onClick={props.onClick}
       className={`border-zinc-900 border-solid rounded-full flex-initial mr-2
+                  dark:border-gray-100 dark:fill-gray-100
                   hover:shadow-button focus:shadow-button
                   ${h} ${w} ${p} ${b} ${props.className ?? ''}`}
       ref={forwardRef}

diff --git a/src/Metronome/controls/TimeSignatureControl.tsx b/src/Metronome/controls/TimeSignatureControl.tsx
@@ -32,7 +32,7 @@ export function TimeSignatureControl(props: TimeSignatureProps) {
       <select
         onChange={handleChange}
         value={`${props.beatsPerMeasure}/${props.beatUnit}`}
-        className="text-xl bg-white border border-solid border-zinc-400 rounded-full p-2"
+        className="text-xl border border-solid border-zinc-400 dark:border-gray-600 bg-gray-50 dark:bg-zinc-900 rounded-full p-2"
       >
         <option value="4/4">4/4</option>
         <option value="7/8">7/8</option>

diff --git a/src/Metronome/index.tsx b/src/Metronome/index.tsx
@@ -157,7 +157,7 @@ export const Metronome: React.FC<Props> = ({ clock }) => {
   })
 
   return (
-    <div className="flex mb-12 items-end justify-between">
+    <div className="flex mb-8 items-end justify-between sticky top-0 bg-gray-50 dark:bg-zinc-900 py-4">
       <div className="flex items-start content-center mb-2 mr-2">
         <PlayPause onClick={togglePlaying} playing={playing} />
 

diff --git a/src/Scene/index.tsx b/src/Scene/index.tsx
@@ -83,10 +83,11 @@ export const Scene: React.FC<Props> = ({ clock }) => {
 
   return (
     <>
-      {tracks.map(({ id, selected }) => (
+      {tracks.map(({ id, selected }, index) => (
         <Track
           key={id}
           id={id}
+          index={index}
           selected={selected}
           onRemove={handleRemoveTrack(id)}
           clock={clock}

diff --git a/src/Start/index.tsx b/src/Start/index.tsx
@@ -112,7 +112,7 @@ export const Start: React.FC = () => {
         {!latencySupported && <LatencyNotSupportedAlert />}
         <button
           onClick={handleClick}
-          className="px-10 py-5 border-4 border-solid border-black rounded-full text-xl bg-blue-200"
+          className="px-10 py-5 border-4 border-solid border-zinc-900 rounded-full text-xl bg-blue-200 dark:text-zinc-900"
         >
           Start
         </button>
@@ -123,7 +123,7 @@ export const Start: React.FC = () => {
 
 function LatencyNotSupportedAlert() {
   return (
-    <div className="mb-5 font-bold bg-red-200 p-2 rounded-md">
+    <div className="mb-5 font-bold bg-red-200 dark:text-zinc-900 p-2 rounded-md">
       <p>Heads up!</p>
       <p>Your browser does not appear to report recording latency 😢.</p>
       <p>

diff --git a/src/Track/controls/Mute.tsx b/src/Track/controls/Mute.tsx
@@ -11,12 +11,7 @@ export function Mute(props: Props) {
       onClick={props.onClick}
       className={props.muted ? 'bg-red-400' : ''}
     >
-      <svg
-        version="1.1"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-        className="fill-black"
-      >
+      <svg version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
         <g aria-label="M">
           <path d="m5.5382 20.822v-16.811h2.7254l3.7777 7.7174 3.7777-7.7444h2.6984v16.838h-2.7254v-11.846l-3.1031 6.2602h-1.5111l-2.9412-6.2333v11.819z" />
         </g>

diff --git a/src/Track/controls/RemoveTrack.tsx b/src/Track/controls/RemoveTrack.tsx
@@ -27,7 +27,11 @@ export function RemoveTrack(props: Props) {
       onClick={handleRemove}
       ref={removeButtonRef}
     >
-      {confirmRemoval ? <div className="text-xs">Delete?</div> : <X />}
+      {confirmRemoval ? (
+        <div className="text-xs dark:text-zinc-900">Delete?</div>
+      ) : (
+        <X />
+      )}
     </ButtonBase>
   )
 }
diff --git a/src/Track/controls/SelectInput.tsx b/src/Track/controls/SelectInput.tsx
@@ -55,7 +55,7 @@ export function SelectInput({ setStream }: Props) {
 
   return (
     <select
-      className="rounded-full bg-white border border-zinc-400 px-2 max-w-[50%] text-xs"
+      className="rounded-full border border-zinc-400 dark:border-gray-600 bg-gray-50 dark:bg-zinc-900 px-2 max-w-[50%] text-xs"
       onChange={handleChange}
       value={selected}
     >

diff --git a/src/Track/index.tsx b/src/Track/index.tsx
@@ -42,6 +42,7 @@ type Props = {
   clock: Worker
   selected: boolean
   exportTarget: EventTarget
+  index: number
 }
 
 type RecordingProperties = {
@@ -82,6 +83,7 @@ export const Track: React.FC<Props> = ({
   clock,
   selected,
   exportTarget,
+  index,
 }) => {
   const { audioContext } = useAudioContext()
   // stream is initialized in SelectInput
@@ -407,12 +409,15 @@ export const Track: React.FC<Props> = ({
         <div className="flex flex-col">
           {/* Title, Record, Monitor */}
           <div className="flex items-stretch content-center">
+            <span className="w-4 h-4 text-xs pl-1 mr-2 rounded-full">
+              {index + 1}
+            </span>
             <input
               ref={titleRef}
               value={title}
               onChange={handleChangeTitle}
               onFocus={rename}
-              className="pl-2 -pr-2 flex-initial mr-2 rounded-full"
+              className="pl-2 -pr-2 flex-initial mr-2 rounded-full bg-gray-50 dark:bg-zinc-900"
             />
             <ArmTrackRecording
               toggleArmRecording={toggleArmRecording}