From 7ca84f28f4a74157879babe7289ec1a8f412be35 Mon Sep 17 00:00:00 2001
From: Seth Forsgren <forsgren.seth@gmail.com>
Date: Thu, 8 Dec 2022 11:10:01 -0800
Subject: [PATCH] Adding initial back and forth from about page

---
 components/Info.tsx  |  4 ++--
 components/Pause.tsx |  4 ++--
 components/Share.tsx |  4 ++--
 components/ToApp.tsx | 21 +++++++++++++++++++++
 pages/about.tsx      |  4 ++++
 pages/index.tsx      |  4 ++--
 6 files changed, 33 insertions(+), 8 deletions(-)
 create mode 100644 components/ToApp.tsx

diff --git a/components/Info.tsx b/components/Info.tsx
index deb0b0c..8de0684 100644
--- a/components/Info.tsx
+++ b/components/Info.tsx
@@ -20,9 +20,9 @@ export default function Info() {
 
   var classNameCondition = ""
   if (open) {
-    classNameCondition = "fixed z-90 top-48 right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
+    classNameCondition = "fixed z-90 top-44 right-4 sm:top-48 sm:right-8 top-48 right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
   } else {
-    classNameCondition = "fixed z-90 top-48 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:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
+    classNameCondition = "fixed z-90 top-44 right-4 sm:top-48 sm: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:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
   }
 
   return (
diff --git a/components/Pause.tsx b/components/Pause.tsx
index 583d482..f30f06f 100644
--- a/components/Pause.tsx
+++ b/components/Pause.tsx
@@ -22,9 +22,9 @@ export default function Pause({
 
   var classNameCondition = ""
   if (paused) {
-    classNameCondition="animate-pulse fixed z-90 top-8 right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 focus:ring-4 focus:outline-none focus:ring-sky-600 hover:drop-shadow-2xl"
+    classNameCondition="animate-pulse fixed z-90 top-4 right-4 sm:top-8 sm:right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 focus:ring-4 focus:outline-none focus:ring-sky-600 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:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
+    classNameCondition="fixed z-90 top-4 right-4 sm:top-8 sm: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:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
   }
 
   return (
diff --git a/components/Share.tsx b/components/Share.tsx
index 3026542..302aca0 100644
--- a/components/Share.tsx
+++ b/components/Share.tsx
@@ -30,9 +30,9 @@ export default function Share({
 
     var classNameCondition = ""
     if (open) {
-        classNameCondition = "fixed z-90 top-28 right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
+        classNameCondition = "fixed z-90 top-24 right-4 sm:top-28 sm:right-8 top-28 right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white 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:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
+        classNameCondition = "fixed z-90 top-24 right-4 sm:top-28 sm: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:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
     }
 
     // function to copy link to moment in song to the clipboard
diff --git a/components/ToApp.tsx b/components/ToApp.tsx
new file mode 100644
index 0000000..6d4e152
--- /dev/null
+++ b/components/ToApp.tsx
@@ -0,0 +1,21 @@
+export default function ToApp() {
+  return (
+    <>
+      {/* <button
+        type="button"
+        className="fixed z-90 top-8 right-8 text-white bg-gradient-to-br from-purple-600 to-sky-500 hover:bg-gradient-to-bl font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
+        onClick={() => window.location.href = "/"}
+      >
+        Let&apos;s Riff 🎸
+      </button> */}
+
+      <button
+        type="button"
+        className="fixed z-90 top-4 right-4 sm:top-8 sm:right-8 text-white bg-gradient-to-br from-purple-600 to-sky-500 hover:bg-gradient-to-bl w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
+        onClick={() => window.location.href = "/"}
+      >
+        🎸
+      </button>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/pages/about.tsx b/pages/about.tsx
index b9125c3..f420f8b 100644
--- a/pages/about.tsx
+++ b/pages/about.tsx
@@ -8,11 +8,15 @@ import fourierTransformImg from "../public/about/fourier_transform.png";
 import spectrogramLabelImg from "../public/about/spectrogram_label.png";
 import webAppScreenshot from "../public/about/web_app_screenshot.png";
 
+import ToApp from "../components/ToApp";
+
 export default function Home() {
   return (
     <>
       <PageHead />
 
+      <ToApp/>
+
       <main className="bg-white flex flex-row text-black place-content-center">
         <div className="w-3/4 md:w-2/3 lg:w-1/2 text-lg pb-20">
           <h1 className="pt-20 pb-1 text-4xl font-bold">[ RIFFUSION ]</h1>
diff --git a/pages/index.tsx b/pages/index.tsx
index 799b4dd..83eca35 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -229,14 +229,14 @@ export default function Home() {
           }}
         />
 
-        <Info />
+        <Pause paused={paused} setPaused={setPaused} />
 
         <Share
           inferenceResults={inferenceResults}
           nowPlayingResult={nowPlayingResult}
         />
 
-        <Pause paused={paused} setPaused={setPaused} />
+        <Info />
       </div>
     </>
   );