a flat design with narrower lists

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>

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']} />

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>
   )

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>

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>
   )