From e48a885309840e48506901bc1b5b667aea6e5578 Mon Sep 17 00:00:00 2001
From: Seth Forsgren <forsgren.seth@gmail.com>
Date: Thu, 24 Nov 2022 20:58:44 -0800
Subject: [PATCH] Better buttons and color consistency

---
 components/Info.tsx        | 12 +++++++++---
 components/Pause.tsx       | 11 +++++++++--
 components/PromptPanel.tsx |  2 +-
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/components/Info.tsx b/components/Info.tsx
index 19bb538..f7ddd56 100644
--- a/components/Info.tsx
+++ b/components/Info.tsx
@@ -18,12 +18,18 @@ justify-content: center;
 export default function Info(){
   const [open, setOpen] = useState(false);
 
+  var classNameCondition = ""
+  if (open) {
+    classNameCondition="fixed z-90 top-8 right-8 bg-sky-300 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
+  } else {
+    classNameCondition="fixed z-90 top-8 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
+  }
+
   return (
     <>
       <button
         title="Info"
-        className="fixed z-90 top-8 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg
-          flex justify-center items-center text-black text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
+        className= {classNameCondition}
         onClick={() => setOpen(true)}
       >
         <FiInfo />
@@ -83,7 +89,7 @@ export default function Info(){
                   <div className="mt-4">
                     <button
                       type="button"
-                      className="inline-flex justify-center rounded-md border border-transparent bg-sky-100 px-4 py-2 text-sm font-medium text-sky-800 hover:bg-sky-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2"
+                      className="inline-flex justify-center rounded-md border border-transparent bg-sky-300 px-4 py-2 text-sm font-medium text-sky-900 hover:bg-sky-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2"
                       onClick={() => setOpen(false)}
                     >
                       Let&apos;s Riff 🎸
diff --git a/components/Pause.tsx b/components/Pause.tsx
index 0db18ec..192b432 100644
--- a/components/Pause.tsx
+++ b/components/Pause.tsx
@@ -9,12 +9,19 @@ export default function Pause({
   paused,
   setPaused,
 }: PauseProps) {
+
+  var classNameCondition = ""
+  if (paused) {
+    classNameCondition="fixed z-90 top-28 right-8 bg-sky-300 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
+  } else {
+    classNameCondition="fixed z-90 top-28 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
+  }
+
   return (
     <>
       <button
         title="Pause"
-        className="fixed z-90 top-28 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg
-          flex justify-center items-center text-black text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
+        className= {classNameCondition}
         onClick={() => setPaused(!paused)}
       >
         {paused ? <FiPlay /> : <FiPause />}
diff --git a/components/PromptPanel.tsx b/components/PromptPanel.tsx
index 20b4505..595142d 100644
--- a/components/PromptPanel.tsx
+++ b/components/PromptPanel.tsx
@@ -47,7 +47,7 @@ export default function PromptPanel({
             }}
           >
             <input
-              className="fixed z-90 bottom-20 w-1/2 h-12 pl-3 text-xl text-black rounded-lg border-sky-400 border-4 focus:outline-none focus:border-sky-500"
+              className="fixed w-1/2 h-12 pl-3 text-xl text-sky-900 rounded-lg border-sky-300 border-4 focus:outline-none focus:border-sky-500"
               ref={inputPrompt}
               type="text"
               id="prompt"