Refactor notes, style

src/App.tsx

@@ -1,16 +1,14 @@
 import "./App.css";
 
 import { useState, ChangeEvent } from "react";
-import classNames from "classnames";
 
 import DropDown from "./components/DropDown/DropDown";
+import Notes from "./components/Notes/Notes";
 
 import { getAccidentalsCount } from "./utils/helpers";
 
 import data from "./data.json";
 
-import { Note } from "./types";
-
 import { getNotesInActiveScale } from "./utils/helpers";
 
 function App() {
@@ -27,44 +25,23 @@ function App() {
     setActiveScaleID(Number(e.target.value));
   }
 
-  function isNoteInScale(id: number): boolean {
-    if (activeScale?.notes.includes(id)) return true;
-    return false;
-  }
-
-  function getNoteClass(note: Note): string {
-    const { id, is_accidental } = note;
-    return classNames("basis-1/4", {
-      "bg-red-500": is_accidental && isNoteInScale(note.id),
-      "bg-indigo-500": activeScale.root_note_id === id,
-      "bg-indigo-500/50": isNoteInScale(id) && activeScale.root_note_id !== id,
-      "bg-slate-100": !isNoteInScale(id),
-    });
-  }
-
   return (
     <div className="p-4 h-screen flex flex-col justify-center">
       <div>
-        <h1 className="text-xl font-bold text-center mb-16">
+        <h1 className="text-3xl font-bold text-center mb-16 text-sky-500/100">
           Music Theory Practice
         </h1>
         <div className="flex flex-col justify-evenly">
-          <div className="flex flex-row items-baseline mb-8">
-            {activeNotes.map((note) => (
-              <button key={note.id} className={getNoteClass(note)}>
-                {note.string}
-              </button>
-            ))}
-          </div>
+          <Notes activeNotes={activeNotes} activeScale={activeScale} />
           <div className="flex flex-row justify-evenly">
             <div className="flex">
-              <h4 className="text-lg font-semibold underline mb-8 mr-2 font-sans no-underline">
+              <h4 className="text-lg font-semibold underline mb-8 mr-2 font-sans no-underline text-sky-500/100">
                 Active Scale:
               </h4>
               <DropDown scales={data.scales} handleChange={handleChange} />
             </div>
             <div className="">
-              <h4 className="text-lg font-semibold">
+              <h4 className="text-lg font-semibold text-sky-500/100">
                 Total Accidentals: {accidentalsCount}
               </h4>
             </div>

src/components/DropDown/DropDown.tsx

@@ -9,7 +9,7 @@ interface Props {
 
 export default function DropDown({ handleChange, scales }: Props) {
   return (
-    <div className="flex mb-8">
+    <div className="flex mb-8 text-sky-500/100">
       <select
         name="scale"
         id="scale"

src/components/Notes/Notes.tsx

@@ -0,0 +1,43 @@
+import classNames from "classnames";
+
+import { Note, Scale } from "../../types";
+
+interface NotesProps {
+  activeNotes: Note[];
+  activeScale: Scale;
+}
+
+export default function Notes({ activeNotes, activeScale }: NotesProps) {
+  function isNoteInScale(id: number): boolean {
+    if (activeScale?.notes.includes(id)) return true;
+    return false;
+  }
+
+  function mapNotesToLabelsMajor(i: number): string {
+    const help = ["I", "ii", "iii", "IV", "V", "VI", "VII"];
+    const plusOne = i;
+
+    return help[plusOne];
+  }
+
+  function getNoteClass(note: Note): string {
+    const { id, is_accidental } = note;
+    return classNames("rounded-md m-2", {
+      "!bg-orange-400": is_accidental && isNoteInScale(note.id),
+      "bg-sky-500": activeScale.root_note_id === id,
+      "bg-sky-500/50": isNoteInScale(id) && activeScale.root_note_id !== id,
+    });
+  }
+  return (
+    <div className="flex flex-row items-baseline justify-evenly mb-8">
+      {activeNotes.map((note, i) => (
+        <div className="flex flex-col basis-1/4">
+          <button key={note.id} className={getNoteClass(note)}>
+            {note.string}
+          </button>
+          <div className="self-center">{mapNotesToLabelsMajor(i)} </div>
+        </div>
+      ))}
+    </div>
+  );
+}

src/types.ts

@@ -8,4 +8,5 @@ export type Scale = {
   name: string;
   id: number;
   notes: number[];
+  root_note_id: number;
 };

tailwind.config.js

@@ -1,8 +1,29 @@
 /** @type {import('tailwindcss').Config} */
+
+const colors = require("tailwindcss/colors");
+
 export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {},
+    colors: {
+      transparent: "transparent",
+      current: "currentColor",
+      orange: colors.orange,
+      black: colors.black,
+      sky: colors.sky,
+      green: colors.lime,
+      white: colors.white,
+      gray: colors.gray,
+      emerald: colors.emerald,
+      indigo: colors.indigo,
+      red: colors.red,
+      yellow: colors.yellow,
+      amber: colors.amber,
+      stone: colors.stone,
+      slate: colors.slate,
+      lime: colors.lime,
+    },
   },
   plugins: [],
 };