various style issues, fix #218, #223

components/Auth.tsx

@@ -12,12 +12,12 @@ const Auth: FunctionComponent<{ redirect: string }> = ({ redirect }) => {
 
   const router = useRouter()
   const [token, setToken] = useState('')
-  const [persistedToken, setPersistedToken] = useLocalStorage(authTokenPath, '')
+  const [_, setPersistedToken] = useLocalStorage(authTokenPath, '')
 
   return (
     <div className="md:my-10 flex flex-col max-w-sm mx-auto space-y-4">
       <div className="md:w-5/6 w-3/4 mx-auto">
-        <Image src={'/images/fabulous-wapmire-weekdays.png'} alt="authenticate" width={912} height={912} />
+        <Image src={'/images/fabulous-wapmire-weekdays.png'} alt="authenticate" width={912} height={912} priority />
       </div>
       <div className="dark:text-gray-100 text-lg font-bold text-gray-900">Enter Password</div>
 

components/DownloadBtnGtoup.tsx

@@ -53,7 +53,7 @@ export const DownloadButton = ({
       onClick={onClickCallback}
     >
       {btnIcon && <FontAwesomeIcon icon={btnIcon} />}
-      {btnImage && <Image src={btnImage} alt={btnImage} width={20} height={20} />}
+      {btnImage && <Image src={btnImage} alt={btnImage} width={20} height={20} priority />}
       <span>{btnText}</span>
     </button>
   )

components/FileListing.tsx

@@ -359,7 +359,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
               ) : (
                 <button
                   title="Download selected files"
-                  className="hover:bg-gray-300 dark:hover:bg-gray-600 p-2 rounded cursor-pointer disabled:text-gray-400 disabled:dark:text-gray-600 disabled:hover:bg-white disabled:hover:dark:bg-gray-900"
+                  className="hover:bg-gray-300 dark:hover:bg-gray-600 p-2 rounded cursor-pointer disabled:text-gray-400 disabled:dark:text-gray-600 disabled:hover:bg-white disabled:hover:dark:bg-gray-900 disabled:cursor-not-allowed"
                   disabled={totalSelected === 0}
                   onClick={handleSelectedDownload}
                 >
@@ -496,7 +496,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
               - showing {size} page{size > 1 ? 's' : ''} of {isLoadingMore ? '...' : children.length} files -
             </div>
             <button
-              className={`flex items-center justify-center w-full p-3 space-x-2 ${
+              className={`flex items-center justify-center w-full p-3 space-x-2 disabled:cursor-not-allowed ${
                 isLoadingMore || isReachingEnd ? 'opacity-60' : 'hover:bg-gray-100 dark:hover:bg-gray-850'
               }`}
               onClick={() => setSize(size + 1)}

components/FourOhFour.tsx

@@ -5,7 +5,7 @@ const FourOhFour: FunctionComponent<{ errorMsg: string }> = ({ errorMsg }) => {
   return (
     <div className="my-12">
       <div className="w-1/3 mx-auto">
-        <Image src='/images/fabulous-rip-2.png' alt="404" width={912} height={912} />
+        <Image src='/images/fabulous-rip-2.png' alt="404" width={912} height={912} priority />
       </div>
       <div className="mt-6 text-gray-500 max-w-xl mx-auto">
         <div className="text-xl font-bold mb-8">

components/Navbar.tsx

@@ -47,24 +47,25 @@ const Navbar = () => {
       <div className="flex items-center justify-between w-full max-w-5xl mx-auto pr-4 py-1">
         <Link href="/">
           <a className="dark:text-white hover:opacity-80 flex items-center p-2 space-x-2">
-            <Image src={siteConfig.icon} alt="icon" width="28" height="28" priority />
-            <span className="sm:block hidden text-lg font-bold">{siteConfig.title}</span>
+            <Image src={siteConfig.icon} alt="icon" width="25" height="25" priority />
+            <span className="sm:block hidden font-bold">{siteConfig.title}</span>
           </a>
         </Link>
 
         <div className="flex items-center space-x-4 text-gray-700">
-          {siteConfig.links.map(l => (
-            <a
-              key={l.name}
-              href={l.link}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center space-x-2 dark:text-white hover:opacity-80"
-            >
-              <FontAwesomeIcon icon={['fab', l.name.toLowerCase() as IconName]} />
-              <span className="text-sm font-medium hidden md:inline-block">{l.name}</span>
-            </a>
-          ))}
+          {siteConfig.links.length !== 0 &&
+            siteConfig.links.map((l: { name: string; link: string }) => (
+              <a
+                key={l.name}
+                href={l.link}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center space-x-2 dark:text-white hover:opacity-80"
+              >
+                <FontAwesomeIcon icon={['fab', l.name.toLowerCase() as IconName]} />
+                <span className="text-sm font-medium hidden md:inline-block">{l.name}</span>
+              </a>
+            ))}
 
           {siteConfig.email && (
             <a href={siteConfig.email} className="flex items-center space-x-2 dark:text-white hover:opacity-80">
@@ -75,7 +76,7 @@ const Navbar = () => {
 
           {tokenPresent && (
             <button
-              className="hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 flex items-center p-2 space-x-2 rounded"
+              className="dark:text-white flex items-center p-2 space-x-2 hover:opacity-80"
               onClick={() => setIsOpen(true)}
             >
               <span className="text-sm font-medium">Logout</span>

pages/onedrive-vercel-index-oauth/step-1.tsx

@@ -23,7 +23,7 @@ export default function OAuthStep1() {
         <div className="w-full max-w-5xl p-4 mx-auto">
           <div className="dark:bg-gray-900 dark:text-gray-100 bg-white rounded p-3">
             <div className="mx-auto w-52">
-              <Image src="/images/fabulous-fireworks.png" width={912} height={912} alt="fabulous fireworks" />
+              <Image src="/images/fabulous-fireworks.png" width={912} height={912} alt="fabulous fireworks" priority />
             </div>
             <h3 className="font-medium text-xl mb-4 text-center">Welcome to your new onedrive-vercel-index 🎉</h3>
 

pages/onedrive-vercel-index-oauth/step-2.tsx

@@ -36,6 +36,7 @@ export default function OAuthStep2() {
                 width={912}
                 height={912}
                 alt="fabulous come back later"
+                priority
               />
             </div>
             <h3 className="font-medium text-xl mb-4 text-center">Welcome to your new onedrive-vercel-index 🎉</h3>

pages/onedrive-vercel-index-oauth/step-3.tsx

@@ -85,7 +85,13 @@ export default function OAuthStep3({ accessToken, expiryTime, refreshToken, erro
         <div className="w-full max-w-5xl p-4 mx-auto">
           <div className="dark:bg-gray-900 dark:text-gray-100 bg-white rounded p-3">
             <div className="mx-auto w-52">
-              <Image src="/images/fabulous-celebration.png" width={912} height={912} alt="fabulous celebration" />
+              <Image
+                src="/images/fabulous-celebration.png"
+                width={912}
+                height={912}
+                alt="fabulous celebration"
+                priority
+              />
             </div>
             <h3 className="font-medium text-xl mb-4 text-center">Welcome to your new onedrive-vercel-index 🎉</h3>