From a27cc18951effe354b60f4b4e5b790f5a39af67d Mon Sep 17 00:00:00 2001
From: spencerwooo <spencer.woo@outlook.com>
Date: Fri, 17 Dec 2021 14:35:24 +0800
Subject: [PATCH] remove all shadows

---
 README.md                               |  6 +-----
 components/FileListing.tsx              | 14 +++++++-------
 components/Navbar.tsx                   |  5 ++---
 components/previews/AudioPreview.tsx    |  2 +-
 components/previews/CodePreview.tsx     |  6 +++---
 components/previews/EPUBPreview.tsx     |  2 +-
 components/previews/MarkdownPreview.tsx |  2 +-
 components/previews/OfficePreview.tsx   |  2 +-
 components/previews/PDFPreview.tsx      |  2 +-
 components/previews/TextPreview.tsx     |  6 +++---
 components/previews/VideoPreview.tsx    |  2 +-
 config/site.json                        |  6 +++---
 12 files changed, 25 insertions(+), 30 deletions(-)

diff --git a/README.md b/README.md
index c8fa910..8ddad22 100644
--- a/README.md
+++ b/README.md
@@ -10,12 +10,8 @@
 
 ---
 
-> 🩺 *Under quarantine.* PR, issue response, and development is **temporarily on hold.**
-
 ## Features
 
-🚧 **_This is currently a work in progress._**
-
 - [x] File preview (PDF, EPUB, markdown, code, plain text, ...)
 - [x] Image preview in gallery mode
 - [x] Video and audio preview (mp4, mp3, ...)
@@ -25,7 +21,7 @@
 - [x] Dark mode
 - [x] Protected routes (password protection and authentication) through `.password` files
 - [x] Pagination for folders with more than 200 items
-- [ ] Documentation for deployment and FAQs
+- [x] In browser folder download and multiple file download
 
 ## Discussion
 
diff --git a/components/FileListing.tsx b/components/FileListing.tsx
index 659a359..9c1c206 100644
--- a/components/FileListing.tsx
+++ b/components/FileListing.tsx
@@ -179,14 +179,14 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
 
   if (error) {
     return (
-      <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
+      <div className="dark:bg-gray-900 p-3 bg-white rounded">
         {error.message.includes('401') ? <Auth redirect={path} /> : <FourOhFour errorMsg={error.message} />}
       </div>
     )
   }
   if (!data) {
     return (
-      <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
+      <div className="dark:bg-gray-900 p-3 bg-white rounded">
         <Loading loadingText="Loading ..." />
       </div>
     )
@@ -334,7 +334,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
     }
 
     return (
-      <div className="dark:bg-gray-900 dark:text-gray-100 bg-white rounded shadow">
+      <div className="dark:bg-gray-900 dark:text-gray-100 bg-white rounded">
         <div className="dark:border-gray-700 grid items-center grid-cols-12 px-3 space-x-2 border-b border-gray-200">
           <div className="md:col-span-6 col-span-12 font-bold">Name</div>
           <div className="md:block hidden col-span-3 font-bold">Last Modified</div>
@@ -551,7 +551,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
       switch (extensions[fileExtension]) {
         case preview.image:
           return (
-            <div className="w-full p-3 bg-white rounded shadow">
+            <div className="w-full p-3 bg-white rounded">
               {/* eslint-disable-next-line @next/next/no-img-element */}
               <img className="mx-auto" src={downloadUrl} alt={fileName} />
             </div>
@@ -582,13 +582,13 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
           return <EPUBPreview file={file} />
 
         default:
-          return <div className="dark:bg-gray-900 bg-white rounded shadow">{fileName}</div>
+          return <div className="dark:bg-gray-900 bg-white rounded">{fileName}</div>
       }
     }
 
     return (
       <>
-        <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
+        <div className="dark:bg-gray-900 p-3 bg-white rounded">
           <FourOhFour
             errorMsg={`Preview for file ${fileName} is not available, download directly with the button below.`}
           />
@@ -601,7 +601,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
   }
 
   return (
-    <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
+    <div className="dark:bg-gray-900 p-3 bg-white rounded">
       <FourOhFour errorMsg={`Cannot preview ${path}`} />
     </div>
   )
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index c5bef6e..513f55e 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -1,5 +1,4 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { IconName } from '@fortawesome/fontawesome-svg-core'
 import { Dialog, Transition } from '@headlessui/react'
 import toast, { Toaster } from 'react-hot-toast'
 
@@ -41,7 +40,7 @@ const Navbar = () => {
   }
 
   return (
-    <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="text-left p-1 bg-white dark:bg-gray-900 sticky top-0 bg-opacity-80 border-b border-gray-900/10 backdrop-blur-md z-[100]">
       <div className="flex items-center justify-between w-full max-w-5xl mx-auto">
         <Toaster />
 
@@ -116,7 +115,7 @@ const Navbar = () => {
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <div className="dark:bg-gray-900 inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white rounded shadow-lg">
+              <div className="dark:bg-gray-900 inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white rounded-lg">
                 <Dialog.Title className="dark:text-gray-100 text-lg font-bold text-gray-900">
                   Clear all tokens?
                 </Dialog.Title>
diff --git a/components/previews/AudioPreview.tsx b/components/previews/AudioPreview.tsx
index 8ed7d11..6d31963 100644
--- a/components/previews/AudioPreview.tsx
+++ b/components/previews/AudioPreview.tsx
@@ -16,7 +16,7 @@ export const AudioPreview: FunctionComponent<{ file: any }> = ({ file }) => {
 
   return (
     <>
-      <div className="dark:bg-gray-900 dark:text-white w-full p-3 bg-white rounded shadow">
+      <div className="dark:bg-gray-900 dark:text-white w-full p-3 bg-white rounded">
         <div className="md:flex-row md:space-x-4 flex flex-col space-y-4">
           <div className="dark:bg-gray-700 h-72 md:w-40 md:h-36 flex items-center justify-center w-full transition-all duration-75 bg-gray-100 rounded">
             {playerStatus === PlayerState.Loading ? (
diff --git a/components/previews/CodePreview.tsx b/components/previews/CodePreview.tsx
index 2085338..710a332 100644
--- a/components/previews/CodePreview.tsx
+++ b/components/previews/CodePreview.tsx
@@ -18,14 +18,14 @@ const CodePreview: FunctionComponent<{ file: any }> = ({ file }) => {
 
   if (error) {
     return (
-      <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
+      <div className="dark:bg-gray-900 p-3 bg-white rounded">
         <FourOhFour errorMsg={error.message} />
       </div>
     )
   }
   if (!data) {
     return (
-      <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
+      <div className="dark:bg-gray-900 p-3 bg-white rounded">
         <Loading loadingText="Loading file content..." />
       </div>
     )
@@ -33,7 +33,7 @@ const CodePreview: FunctionComponent<{ file: any }> = ({ file }) => {
 
   return (
     <>
-      <div className="markdown-body p-3 bg-gray-900 rounded shadow">
+      <div className="markdown-body p-3 bg-gray-900 rounded">
         <pre className={`language-${getExtension(file.name)}`}>
           <code>{data}</code>
         </pre>
diff --git a/components/previews/EPUBPreview.tsx b/components/previews/EPUBPreview.tsx
index 1ec08a8..5c52ec8 100644
--- a/components/previews/EPUBPreview.tsx
+++ b/components/previews/EPUBPreview.tsx
@@ -34,7 +34,7 @@ const EPUBPreview: FunctionComponent<{file: any}> = ({ file }) => {
   return (
     <>
       <div
-        className="dark:bg-gray-900 md:p-3 no-scrollbar flex flex-col w-full overflow-scroll bg-white rounded shadow"
+        className="dark:bg-gray-900 md:p-3 no-scrollbar flex flex-col w-full overflow-scroll bg-white rounded"
         style={{ maxHeight: '90vh' }}
       >
         <div className="no-scrollbar flex-1 w-full overflow-scroll" ref={epubContainer} style={{ minHeight: '70vh' }}>
diff --git a/components/previews/MarkdownPreview.tsx b/components/previews/MarkdownPreview.tsx
index b887ac6..987d977 100644
--- a/components/previews/MarkdownPreview.tsx
+++ b/components/previews/MarkdownPreview.tsx
@@ -85,7 +85,7 @@ const MarkdownPreview: FunctionComponent<{ file: any; path: string; standalone?:
       <div
         className={
           standalone
-            ? 'markdown-body shadow bg-white dark:bg-gray-900 rounded p-3 dark:text-white'
+            ? 'markdown-body bg-white dark:bg-gray-900 rounded p-3 dark:text-white'
             : 'markdown-body p-3 dark:text-white'
         }
       >
diff --git a/components/previews/OfficePreview.tsx b/components/previews/OfficePreview.tsx
index 1f8798e..e94da77 100644
--- a/components/previews/OfficePreview.tsx
+++ b/components/previews/OfficePreview.tsx
@@ -13,7 +13,7 @@ const OfficePreview: FunctionComponent<{ file: any }> = ({ file }) => {
 
   return (
     <>
-      <div className="overflow-scroll shadow" ref={docContainer} style={{ maxHeight: '90vh' }}>
+      <div className="overflow-scroll" ref={docContainer} style={{ maxHeight: '90vh' }}>
         <Preview url={encodeURIComponent(file['@microsoft.graph.downloadUrl'])} width={docContainerWidth.toString()} height="800" />
       </div>
       <div className="mt-4">
diff --git a/components/previews/PDFPreview.tsx b/components/previews/PDFPreview.tsx
index 0576ff6..7f9ca1c 100644
--- a/components/previews/PDFPreview.tsx
+++ b/components/previews/PDFPreview.tsx
@@ -26,7 +26,7 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
   return (
     <>
       <div
-        className="dark:bg-gray-900 md:p-3 no-scrollbar flex flex-col w-full overflow-scroll bg-white rounded shadow"
+        className="dark:bg-gray-900 md:p-3 no-scrollbar flex flex-col w-full overflow-scroll bg-white rounded"
         style={{ maxHeight: '90vh' }}
       >
         <div className="no-scrollbar flex-1 w-full overflow-scroll" ref={pdfContainter} style={{ maxHeight: '80vh' }}>
diff --git a/components/previews/TextPreview.tsx b/components/previews/TextPreview.tsx
index cb53854..d66e8b2 100644
--- a/components/previews/TextPreview.tsx
+++ b/components/previews/TextPreview.tsx
@@ -9,14 +9,14 @@ const TextPreview: FunctionComponent<{ file: any }> = ({ file }) => {
   const { data, error } = useStaleSWR(file['@microsoft.graph.downloadUrl'])
   if (error) {
     return (
-      <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
+      <div className="dark:bg-gray-900 p-3 bg-white rounded">
         <FourOhFour errorMsg={error.message} />
       </div>
     )
   }
   if (!data) {
     return (
-      <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
+      <div className="dark:bg-gray-900 p-3 bg-white rounded">
         <Loading loadingText="Loading file content..." />
       </div>
     )
@@ -24,7 +24,7 @@ const TextPreview: FunctionComponent<{ file: any }> = ({ file }) => {
 
   return (
     <>
-      <div className="dark:bg-gray-900 dark:text-gray-100 p-3 bg-white rounded shadow">
+      <div className="dark:bg-gray-900 dark:text-gray-100 p-3 bg-white rounded">
         <pre className="md:p-3 p-0 overflow-scroll">{data}</pre>
       </div>
       <div className="mt-4">
diff --git a/components/previews/VideoPreview.tsx b/components/previews/VideoPreview.tsx
index 23140e7..49257c1 100644
--- a/components/previews/VideoPreview.tsx
+++ b/components/previews/VideoPreview.tsx
@@ -14,7 +14,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
 
   return (
     <>
-      <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
+      <div className="dark:bg-gray-900 p-3 bg-white rounded">
         <div className="relative" style={{ paddingTop: '56.25%' }}>
           <ReactPlayer
             className="absolute top-0 left-0 w-full h-full"
diff --git a/config/site.json b/config/site.json
index c3ae4e7..ad4af2d 100644
--- a/config/site.json
+++ b/config/site.json
@@ -2,12 +2,12 @@
   "icon": "/icons/128.png",
   "title": "Spencer's OneDrive Index",
   "maxItems": 100,
-  "googleFont": "Rubik",
+  "googleFont": "Inter",
   "googleFontWeights": [
     "400",
-    "600"
+    "700"
   ],
-  "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.",
+  "footer": "Powered by <a class=\"hover:border-b-2\" href=\"https://github.com/spencerwooo/onedrive-vercel-index\" target=\"_blank\" rel=\"noopener noreferrer\">onedrive-vercel-index</a>. Made with ❤ by SpencerWoo.",
   "protectedRoutes": [
     "/🌞 Private folder/u-need-a-password",
     "/🥟 Some test files/Protected route"