From c6fba24f97c5d2a3803f3590ddb4da53c5f06791 Mon Sep 17 00:00:00 2001
From: spencerwooo <spencer.woo@outlook.com>
Date: Fri, 17 Dec 2021 15:28:11 +0800
Subject: [PATCH] minor style changes to input and button hover effects

---
 components/Auth.tsx                  | 47 ++++++++++++++--------------
 components/DownloadBtn.tsx           |  4 +--
 components/Navbar.tsx                |  2 +-
 components/previews/VideoPreview.tsx | 19 ++++-------
 4 files changed, 33 insertions(+), 39 deletions(-)

diff --git a/components/Auth.tsx b/components/Auth.tsx
index 515612e..fc27997 100644
--- a/components/Auth.tsx
+++ b/components/Auth.tsx
@@ -25,30 +25,31 @@ const Auth: FunctionComponent<{ redirect: string }> = ({ redirect }) => {
         enter it below.
       </p>
 
-      <input
-        className="bg-blue-50 dark:bg-gray-600 dark:text-white focus:ring focus:ring-blue-300 dark:focus:ring-blue-700 focus:outline-none p-2 font-mono rounded"
-        autoFocus
-        type="text"
-        placeholder="************"
-        value={token}
-        onChange={e => {
-          setToken(e.target.value)
-        }}
-        onKeyPress={e => {
-          if (e.key === 'Enter' || e.key === 'NumpadEnter') {
+      <div className="flex items-center space-x-2">
+        <input
+          className="flex-1 border border-gray-600/10 dark:bg-gray-600 dark:text-white focus:ring focus:ring-blue-300 dark:focus:ring-blue-700 focus:outline-none p-2 font-mono rounded"
+          autoFocus
+          type="text"
+          placeholder="************"
+          value={token}
+          onChange={e => {
+            setToken(e.target.value)
+          }}
+          onKeyPress={e => {
+            if (e.key === 'Enter' || e.key === 'NumpadEnter') {
+              router.reload()
+            }
+          }}
+        />
+        <button
+          className="focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-400 px-4 py-2 text-white bg-blue-500 rounded"
+          onClick={() => {
             router.reload()
-          }
-        }}
-      />
-      <button
-        className="focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 inline-flex items-center justify-center px-4 py-2 space-x-2 text-white bg-blue-500 rounded"
-        onClick={() => {
-          router.reload()
-        }}
-      >
-        <span>Lemme in</span>
-        <FontAwesomeIcon icon="arrow-right" />
-      </button>
+          }}
+        >
+          <FontAwesomeIcon icon="arrow-right" />
+        </button>
+      </div>
     </div>
   )
 }
diff --git a/components/DownloadBtn.tsx b/components/DownloadBtn.tsx
index 66798a7..2aacb53 100644
--- a/components/DownloadBtn.tsx
+++ b/components/DownloadBtn.tsx
@@ -21,7 +21,7 @@ const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }
         }}
       />
       <a
-        className="w-36 focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 flex items-center justify-center flex-shrink-0 px-4 py-2 mb-2 space-x-4 text-white bg-blue-500 rounded"
+        className="w-36 focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-400 flex items-center justify-center flex-shrink-0 px-4 py-2 mb-2 space-x-4 text-white bg-blue-500 rounded"
         href={downloadUrl}
         target="_blank"
         rel="noopener noreferrer"
@@ -30,7 +30,7 @@ const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }
         <span>Download</span>
       </a>
       <button
-        className="focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-600 flex items-center justify-center flex-shrink-0 w-48 px-4 py-2 mb-2 space-x-4 text-white bg-yellow-500 rounded"
+        className="focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-400 flex items-center justify-center flex-shrink-0 w-48 px-4 py-2 mb-2 space-x-4 text-white bg-yellow-500 rounded"
         onClick={() => {
           clipboard.copy(`${getBaseUrl()}/api?path=${asPath}&raw=true`)
           toast.success('Copied direct link to clipboard.')
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 513f55e..bfcd2d8 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -137,7 +137,7 @@ const Navbar = () => {
 
                 <div className="flex items-center justify-end mt-8">
                   <button
-                    className="focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 inline-flex items-center justify-center px-4 py-2 mr-3 space-x-2 text-white bg-blue-500 rounded"
+                    className="focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-400 inline-flex items-center justify-center px-4 py-2 mr-3 space-x-2 text-white bg-blue-500 rounded"
                     onClick={() => setIsOpen(false)}
                   >
                     Cancel
diff --git a/components/previews/VideoPreview.tsx b/components/previews/VideoPreview.tsx
index 49257c1..ccaa249 100644
--- a/components/previews/VideoPreview.tsx
+++ b/components/previews/VideoPreview.tsx
@@ -28,16 +28,9 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
       </div>
 
       <div className="flex flex-wrap justify-center mt-4 space-x-2">
-        <Toaster
-          toastOptions={{
-            style: {
-              background: '#316C23',
-              color: '#ffffff',
-            },
-          }}
-        />
+        <Toaster />
         <a
-          className="w-36 focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 flex items-center justify-center flex-shrink-0 px-4 py-2 mb-2 space-x-4 text-white bg-blue-500 rounded"
+          className="w-36 focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-400 flex items-center justify-center flex-shrink-0 px-4 py-2 mb-2 space-x-4 text-white bg-blue-500 rounded"
           href={file['@microsoft.graph.downloadUrl']}
           target="_blank"
           rel="noopener noreferrer"
@@ -47,7 +40,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
         </a>
 
         <button
-          className="focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-600 flex items-center justify-center flex-shrink-0 w-48 px-4 py-2 mb-2 space-x-4 text-white bg-yellow-500 rounded"
+          className="focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-400 flex items-center justify-center flex-shrink-0 w-48 px-4 py-2 mb-2 space-x-4 text-white bg-yellow-500 rounded"
           onClick={() => {
             clipboard.copy(`${getBaseUrl()}/api?path=${asPath}&raw=true`)
             toast.success('Copied direct link to clipboard.')
@@ -58,7 +51,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
         </button>
 
         <a
-          className="focus:outline-none focus:ring focus:ring-blue-300 hover:bg-gray-600 flex items-center justify-center px-4 py-2 mb-2 space-x-2 text-white bg-gray-700 rounded"
+          className="focus:outline-none focus:ring focus:ring-gray-300 hover:bg-gray-600 flex items-center justify-center px-4 py-2 mb-2 space-x-2 text-white bg-gray-700 rounded"
           href={`iina://weblink?url=${file['@microsoft.graph.downloadUrl']}`}
           target="_blank"
           rel="noopener noreferrer"
@@ -67,7 +60,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
           <span>IINA</span>
         </a>
         <a
-          className="focus:outline-none focus:ring focus:ring-blue-300 hover:bg-yellow-500 flex items-center justify-center px-4 py-2 mb-2 space-x-2 text-white bg-yellow-600 rounded"
+          className="focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-500 flex items-center justify-center px-4 py-2 mb-2 space-x-2 text-white bg-yellow-600 rounded"
           href={`vlc://${file['@microsoft.graph.downloadUrl']}`}
           target="_blank"
           rel="noopener noreferrer"
@@ -76,7 +69,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
           <span>VLC</span>
         </a>
         <a
-          className="focus:outline-none focus:ring focus:ring-blue-300 hover:bg-yellow-300 flex items-center justify-center px-4 py-2 mb-2 space-x-2 text-white bg-yellow-400 rounded"
+          className="focus:outline-none focus:ring focus:ring-yellow-100 hover:bg-yellow-400 flex items-center justify-center px-4 py-2 mb-2 space-x-2 text-white bg-yellow-400 rounded"
           href={`potplayer://${file['@microsoft.graph.downloadUrl']}`}
           target="_blank"
           rel="noopener noreferrer"