From a488d3324e833b35a1b3406d6cc1b158eae1d1f8 Mon Sep 17 00:00:00 2001
From: spencerwooo <spencer.woo@outlook.com>
Date: Sun, 29 Aug 2021 22:31:42 +0100
Subject: [PATCH] colored toast and other minor tweaks

---
 components/Breadcrumb.tsx            |  6 +++---
 components/DownloadBtn.tsx           |  9 ++++++++-
 components/FileListing.tsx           | 26 +++++++++++++++++---------
 components/Navbar.tsx                |  9 ++++++---
 components/previews/VideoPreview.tsx |  9 ++++++++-
 config/site.json                     |  2 +-
 tailwind.config.js                   |  7 ++++++-
 utils/tools.ts                       |  2 +-
 8 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/components/Breadcrumb.tsx b/components/Breadcrumb.tsx
index 8c62816..1935991 100644
--- a/components/Breadcrumb.tsx
+++ b/components/Breadcrumb.tsx
@@ -9,13 +9,13 @@ const Breadcrumb: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =>
     if (Array.isArray(path)) {
       return (
         <div className="pb-4 text-sm text-gray-600 dark:text-gray-300 flex overflow-x-scroll no-scrollbar">
-          <div className="p-1 hover:text-black dark:hover:text-gray-400 transition-all duration-75 flex-shrink-0">
+          <div className="p-1 hover:opacity-80 transition-all duration-75 flex-shrink-0">
             <Link href="/">🚩 Home</Link>
           </div>
           {path.map((q: string, i: number) => (
             <div key={i} className="flex items-center flex-shrink-0">
               <div>/</div>
-              <div className="p-1 hover:text-black dark:hover:text-gray-400 transition-all duration-75">
+              <div className="p-1 hover:opacity-80 transition-all duration-75">
                 <Link
                   href={`/${path
                     .slice(0, i + 1)
@@ -33,7 +33,7 @@ const Breadcrumb: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =>
   }
 
   return (
-    <div className="pb-4 text-sm text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-gray-400 transition-all duration-75">
+    <div className="pb-4 text-sm text-gray-600 dark:text-gray-300 hover:opacity-80 transition-all duration-75">
       <div className="p-1">
         <Link href="/">🚩 Home</Link>
       </div>
diff --git a/components/DownloadBtn.tsx b/components/DownloadBtn.tsx
index 3583506..1a675c4 100644
--- a/components/DownloadBtn.tsx
+++ b/components/DownloadBtn.tsx
@@ -12,7 +12,14 @@ const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }
 
   return (
     <div className="flex flex-wrap space-x-2 justify-center">
-      <Toaster />
+      <Toaster
+        toastOptions={{
+          style: {
+            background: '#316C23',
+            color: '#ffffff',
+          },
+        }}
+      />
       <a
         className="flex-shrink-0 w-36 flex space-x-4 items-center justify-center bg-blue-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 mb-2"
         href={downloadUrl}
diff --git a/components/FileListing.tsx b/components/FileListing.tsx
index d5f2d39..bf413a5 100644
--- a/components/FileListing.tsx
+++ b/components/FileListing.tsx
@@ -170,7 +170,15 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
           <div className="hidden md:block font-bold">Size</div>
           <div className="hidden md:block font-bold">Actions</div>
         </div>
-        <Toaster />
+
+        <Toaster
+          toastOptions={{
+            style: {
+              background: '#316C23',
+              color: '#ffffff',
+            },
+          }}
+        />
 
         {imagesInFolder.length !== 0 && (
           <ReactViewer
@@ -210,7 +218,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
         )}
 
         {children.map((c: any) => (
-          <div className="grid grid-cols-12 hover:bg-gray-100 dark:hover:bg-gray-800" key={c.id}>
+          <div className="grid grid-cols-12 hover:bg-gray-100 dark:hover:bg-gray-850" key={c.id}>
             <div
               className="col-span-11"
               onClick={e => {
@@ -227,33 +235,33 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
               <FileListItem fileContent={c} />
             </div>
             {c.folder ? (
-              <div className="hidden md:block col-span-1 space-x-2 p-3 text-gray-700 dark:text-gray-500">
+              <div className="hidden md:flex p-1 text-gray-700 dark:text-gray-400">
                 <span
                   title="Copy folder permalink"
-                  className="cursor-pointer hover:opacity-80"
+                  className="cursor-pointer p-2 rounded hover:bg-gray-300 dark:hover:bg-gray-600"
                   onClick={() => {
                     clipboard.copy(`${getBaseUrl()}${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`)
-                    toast.success('Copied folder permanent link to clipboard.')
+                    toast.success('Copied folder permalink.')
                   }}
                 >
                   <FontAwesomeIcon icon={['far', 'copy']} />
                 </span>
               </div>
             ) : (
-              <div className="hidden md:block col-span-1 space-x-2 p-3 text-gray-700 dark:text-gray-500">
+              <div className="hidden md:flex p-1 text-gray-700 dark:text-gray-400">
                 <span
                   title="Copy raw file permalink"
-                  className="cursor-pointer hover:opacity-80"
+                  className="cursor-pointer p-2 rounded hover:bg-gray-300 dark:hover:bg-gray-600"
                   onClick={() => {
                     clipboard.copy(`${getBaseUrl()}/api?path=${path === '/' ? '' : path}/${c.name}&raw=true`)
-                    toast.success('Copied permanent raw file link to clipboard.')
+                    toast.success('Copied raw file permalink.')
                   }}
                 >
                   <FontAwesomeIcon icon={['far', 'copy']} />
                 </span>
                 <a
                   title="Download file"
-                  className="cursor-pointer hover:opacity-80"
+                  className="cursor-pointer p-2 rounded hover:bg-gray-300 dark:hover:bg-gray-600"
                   href={c['@microsoft.graph.downloadUrl']}
                 >
                   <FontAwesomeIcon icon={['far', 'arrow-alt-circle-down']} />
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 77a5fd1..057c0b6 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -1,17 +1,20 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import Link from 'next/link'
 
 import siteConfig from '../config/site.json'
 
 const Navbar = () => {
   return (
-    <div className="text-left bg-white dark:bg-gray-900 p-3 sticky top-0 bg-opacity-80 backdrop-blur-md shadow-sm z-[100]">
+    <div className="text-left p-1 bg-white dark:bg-gray-900 sticky top-0 bg-opacity-80 backdrop-blur-md shadow-sm z-[100]">
       <div className="max-w-4xl w-full mx-auto flex items-center justify-between">
-        <h1 className="font-bold text-xl dark:text-white">{siteConfig.title}</h1>
+        <h1 className="font-bold text-xl p-2 rounded dark:text-white hover:opacity-80">
+          <Link href="/">{siteConfig.title}</Link>
+        </h1>
         <a
           href="https://github.com/spencerwooo/onedrive-vercel-index"
           target="_blank"
           rel="noopener noreferrer"
-          className="dark:text-white"
+          className="p-2 rounded dark:text-white hover:opacity-80"
         >
           <FontAwesomeIcon icon={['fab', 'github']} size="lg" />
         </a>
diff --git a/components/previews/VideoPreview.tsx b/components/previews/VideoPreview.tsx
index 43666a1..d10b443 100644
--- a/components/previews/VideoPreview.tsx
+++ b/components/previews/VideoPreview.tsx
@@ -28,7 +28,14 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
       </div>
 
       <div className="flex flex-wrap space-x-2 justify-center mt-4">
-        <Toaster />
+        <Toaster
+          toastOptions={{
+            style: {
+              background: '#316C23',
+              color: '#ffffff',
+            },
+          }}
+        />
         <a
           className="flex-shrink-0 w-36 flex space-x-4 items-center justify-center bg-blue-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 mb-2"
           href={file['@microsoft.graph.downloadUrl']}
diff --git a/config/site.json b/config/site.json
index b61dc5f..a6b64a9 100644
--- a/config/site.json
+++ b/config/site.json
@@ -1,4 +1,4 @@
 {
   "title": "Spencer's OneDrive Index",
-  "footer": "Powered by <a href=\"https://github.com/spencerwooo/onedrive-vercel-index\" target=\"_blank\" rel=\"noopener noreferrer\">onedrive-vercel-index</a>. Made with ❤ by SpencerWoo."
+  "footer": "Powered by <a class=\"hover:underline\" href=\"https://github.com/spencerwooo/onedrive-vercel-index\" target=\"_blank\" rel=\"noopener noreferrer\">onedrive-vercel-index</a>. Made with ❤ by SpencerWoo."
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 3b38874..874c065 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,7 +4,7 @@ const colors = require('tailwindcss/colors')
 module.exports = {
   mode: 'jit',
   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
-  darkMode: 'media', // or 'media' or 'class'
+  darkMode: 'media',
   theme: {
     colors: {
       transparent: 'transparent',
@@ -23,6 +23,11 @@ module.exports = {
     extend: {
       fontFamily: {
         sans: ['Inter', '"Noto Sans SC"', ...defaultTheme.fontFamily.sans]
+      },
+      colors: {
+        gray: {
+          850: '#2E2E34'
+        }
       }
     }
   },
diff --git a/utils/tools.ts b/utils/tools.ts
index a797834..47fb184 100644
--- a/utils/tools.ts
+++ b/utils/tools.ts
@@ -22,7 +22,7 @@ const fetcher = (url: string) => axios.get(url).then(res => res.data)
  */
 export const useStaleSWR = (dataKey: Key) => {
   const revalidationOptions = {
-    revalidateOnMount: !cache.has(dataKey), //here we refer to the SWR cache
+    revalidateOnMount: !cache.has(dataKey),
     revalidateOnFocus: false,
     revalidateOnReconnect: false,
   }