From b451f09aeb7185d42317b1d10f69a32f25fa8e3f Mon Sep 17 00:00:00 2001
From: spencerwooo <spencer.woo@outlook.com>
Date: Thu, 6 Jan 2022 21:10:16 +0800
Subject: [PATCH] a flat design with narrower lists

---
 components/Breadcrumb.tsx          |  8 +++----
 components/FileListing.tsx         | 36 +++++++++++++++++-------------
 components/Footer.tsx              |  2 +-
 components/Navbar.tsx              |  6 ++---
 components/previews/Containers.tsx |  4 ++--
 pages/[...path].tsx                |  2 +-
 pages/index.tsx                    |  2 +-
 tailwind.config.js                 |  2 +-
 8 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/components/Breadcrumb.tsx b/components/Breadcrumb.tsx
index a952d7e..13386e5 100644
--- a/components/Breadcrumb.tsx
+++ b/components/Breadcrumb.tsx
@@ -7,14 +7,14 @@ const Breadcrumb: React.FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
     const { path } = query
     if (Array.isArray(path)) {
       return (
-        <div className="dark:text-gray-300 no-scrollbar flex pb-4 overflow-x-scroll text-sm text-gray-600">
-          <div className="hover:opacity-80 flex-shrink-0 p-1 transition-all duration-75">
+        <div className="dark:text-gray-300 no-scrollbar flex pb-4 overflow-x-scroll text-sm text-gray-600 -mx-1">
+          <div className="hover:opacity-80 flex-shrink-0 px-1 transition-all duration-75">
             <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="hover:opacity-80 p-1 transition-all duration-75">
+              <div className="hover:opacity-80 px-1 transition-all duration-75">
                 <Link
                   href={`/${path
                     .slice(0, i + 1)
@@ -33,7 +33,7 @@ const Breadcrumb: React.FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
 
   return (
     <div className="dark:text-gray-300 hover:opacity-80 pb-4 text-sm text-gray-600 transition-all duration-75">
-      <div className="p-1">
+      <div className="px-1">
         <Link href="/">🚩 Home</Link>
       </div>
     </div>
diff --git a/components/FileListing.tsx b/components/FileListing.tsx
index 31200f3..62be03a 100644
--- a/components/FileListing.tsx
+++ b/components/FileListing.tsx
@@ -76,7 +76,7 @@ const FileListItem: FC<{
   const renderEmoji = emojiIcon && !emojiIcon.index
 
   return (
-    <div className="grid items-center grid-cols-10 p-3 space-x-2 cursor-pointer">
+    <div className="grid items-center grid-cols-10 px-3 py-2.5 space-x-2 cursor-pointer">
       <div className="md:col-span-6 flex items-center col-span-10 space-x-2 truncate">
         {/* <div>{c.file ? c.file.mimeType : 'folder'}</div> */}
         <div className="flex-shrink-0 w-5 text-center">
@@ -342,14 +342,18 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
 
     return (
       <>
-        <div className="dark:bg-gray-900 dark:text-gray-100 bg-white rounded border border-gray-899/10">
-          <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 py-3">Name</div>
-            <div className="md:block hidden col-span-3 font-bold">Last Modified</div>
-            <div className="md:block hidden font-bold">Size</div>
-            <div className="md:block hidden font-bold">Actions</div>
-            <div className="md:block hidden font-bold">
-              <div className="md:flex dark:text-gray-400 hidden p-1 text-gray-700">
+        <div className="dark:bg-gray-900 dark:text-gray-100 bg-white rounded">
+          <div className="dark:border-gray-500/30 grid items-center grid-cols-12 px-3 space-x-2 border-b border-gray-900/10">
+            <div className="md:col-span-6 col-span-12 font-bold py-2 text-gray-600 dark:text-gray-300 uppercase tracking-widest text-xs">
+              Name
+            </div>
+            <div className="md:block hidden col-span-3 font-bold text-gray-600 dark:text-gray-300 uppercase tracking-widest text-xs">
+              Last Modified
+            </div>
+            <div className="md:block hidden font-bold text-gray-600 dark:text-gray-300 uppercase tracking-widest text-xs">Size</div>
+            <div className="md:block hidden font-bold text-gray-600 dark:text-gray-300 uppercase tracking-widest text-xs">Actions</div>
+            <div className="md:block hidden font-bold text-gray-600 dark:text-gray-300 uppercase tracking-widest text-xs">
+              <div className="md:flex dark:text-gray-400 hidden px-1.5 py-1 text-gray-700">
                 <Checkbox
                   checked={totalSelected}
                   onChange={toggleTotalSelected}
@@ -365,7 +369,7 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
                     disabled={totalSelected === 0}
                     onClick={handleSelectedDownload}
                   >
-                    <FontAwesomeIcon icon={['far', 'arrow-alt-circle-down']} />
+                    <FontAwesomeIcon icon={['far', 'arrow-alt-circle-down']} size="lg" />
                   </button>
                 )}
               </div>
@@ -429,10 +433,10 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
                 <FileListItem fileContent={c} />
               </div>
               {c.folder ? (
-                <div className="md:flex dark:text-gray-400 hidden p-1 text-gray-700">
+                <div className="md:flex dark:text-gray-400 hidden p-1.5 text-gray-700">
                   <span
                     title="Copy folder permalink"
-                    className="hover:bg-gray-300 dark:hover:bg-gray-600 p-2 rounded cursor-pointer"
+                    className="hover:bg-gray-300 dark:hover:bg-gray-600 px-1.5 py-1 rounded cursor-pointer"
                     onClick={() => {
                       clipboard.copy(`${getBaseUrl()}${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`)
                       toast('Copied folder permalink.', { icon: '👌' })
@@ -445,7 +449,7 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
                   ) : (
                     <span
                       title="Download folder"
-                      className="hover:bg-gray-300 dark:hover:bg-gray-600 p-2 rounded cursor-pointer"
+                      className="hover:bg-gray-300 dark:hover:bg-gray-600 px-1.5 py-1 rounded cursor-pointer"
                       onClick={() => {
                         const p = `${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`
                         handleFolderDownload(p, c.id, c.name)()
@@ -456,10 +460,10 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
                   )}
                 </div>
               ) : (
-                <div className="md:flex dark:text-gray-400 hidden p-1 text-gray-700">
+                <div className="md:flex dark:text-gray-400 hidden px-1.5 py-1 text-gray-700">
                   <span
                     title="Copy raw file permalink"
-                    className="hover:bg-gray-300 dark:hover:bg-gray-600 p-2 rounded cursor-pointer"
+                    className="hover:bg-gray-300 dark:hover:bg-gray-600 px-1.5 py-1 rounded cursor-pointer"
                     onClick={() => {
                       clipboard.copy(
                         `${getBaseUrl()}/api?path=${path === '/' ? '' : path}/${encodeURIComponent(c.name)}&raw=true`
@@ -471,7 +475,7 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
                   </span>
                   <a
                     title="Download file"
-                    className="hover:bg-gray-300 dark:hover:bg-gray-600 p-2 rounded cursor-pointer"
+                    className="hover:bg-gray-300 dark:hover:bg-gray-600 p-1 rounded cursor-pointer"
                     href={c['@microsoft.graph.downloadUrl']}
                   >
                     <FontAwesomeIcon icon={['far', 'arrow-alt-circle-down']} />
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 36d8165..df251fc 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -9,7 +9,7 @@ const createFooterMarkup = () => {
 const Footer = () => {
   return (
     <div
-      className="p-4 text-sm text-gray-400 w-full text-center border-t border-gray-900/10"
+      className="p-4 text-sm text-gray-400 w-full text-center border-t border-gray-900/10 dark:border-gray-500/30"
       dangerouslySetInnerHTML={createFooterMarkup()}
     ></div>
   )
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 22bb1c6..955e7cf 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -41,11 +41,11 @@ const Navbar = () => {
   }
 
   return (
-    <div className="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="bg-white dark:bg-gray-900 dark:border-gray-500/30 sticky top-0 bg-opacity-80 border-b border-gray-900/10 backdrop-blur-md z-[100]">
       <Toaster />
 
-      <div className="flex items-center justify-between w-full max-w-5xl mx-auto pr-4 py-1">
-        <Link href="/">
+      <div className="flex items-center justify-between w-full mx-auto px-4 py-1">
+        <Link href="/" passHref>
           <a className="dark:text-white hover:opacity-80 flex items-center p-2 space-x-2">
             <Image src={siteConfig.icon} alt="icon" width="25" height="25" priority />
             <span className="sm:block hidden font-bold">{siteConfig.title}</span>
diff --git a/components/previews/Containers.tsx b/components/previews/Containers.tsx
index d24ff39..277a945 100644
--- a/components/previews/Containers.tsx
+++ b/components/previews/Containers.tsx
@@ -1,10 +1,10 @@
 export function PreviewContainer({ children }): JSX.Element {
-  return <div className="dark:bg-gray-900 p-3 bg-white rounded border border-gray-900/10">{children}</div>
+  return <div className="dark:bg-gray-900 p-3 bg-white rounded dark:text-white">{children}</div>
 }
 
 export function DownloadBtnContainer({ children }): JSX.Element {
   return (
-    <div className="mt-4 border rounded border-gray-900/10 p-2 sticky bottom-0 left-0 right-0 z-10 bg-white bg-opacity-80 backdrop-blur-md dark:bg-gray-900">
+    <div className="border-t rounded border-gray-900/10 dark:border-gray-500/30 p-2 sticky bottom-0 left-0 right-0 z-10 bg-white bg-opacity-80 backdrop-blur-md dark:bg-gray-900">
       {children}
     </div>
   )
diff --git a/pages/[...path].tsx b/pages/[...path].tsx
index f4a1a81..44810e9 100644
--- a/pages/[...path].tsx
+++ b/pages/[...path].tsx
@@ -16,7 +16,7 @@ export default function Folders() {
         <title>{siteConfig.title}</title>
       </Head>
 
-      <main className=" flex flex-col flex-1 w-full">
+      <main className="bg-gray-50 dark:bg-gray-800 flex flex-col flex-1 w-full">
         <Navbar />
         <div className="w-full max-w-5xl p-4 mx-auto">
           <Breadcrumb query={query} />
diff --git a/pages/index.tsx b/pages/index.tsx
index 40e62a1..e5b7d71 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -13,7 +13,7 @@ export default function Home() {
         <title>{siteConfig.title}</title>
       </Head>
 
-      <main className="flex flex-col flex-1 w-full">
+      <main className="bg-gray-50 dark:bg-gray-800 flex flex-col flex-1 w-full">
         <Navbar />
         <div className="w-full max-w-5xl p-4 mx-auto">
           <Breadcrumb />
diff --git a/tailwind.config.js b/tailwind.config.js
index c88d993..b06616c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -30,7 +30,7 @@ module.exports = {
       },
       colors: {
         gray: {
-          850: '#2E2E34'
+          850: '#222226'
         }
       }
     }