From 7bd54359e6840427fd9541ee3a09a1a560fcf4f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Wed, 6 Apr 2022 11:10:28 +0200
Subject: [PATCH] Dashboard v2 lighthouse scores improvements (#1972)

* Metadata improvements

* Accessibility improvements

* Improve performance on mobile
---
 packages/dashboard-v2/gatsby-config.js        |   4 +-
 .../src/components/APIKeyList/APIKey.js       |  14 ++-
 .../dashboard-v2/src/components/CopyButton.js |   4 +-
 .../components/CurrentUsage/CurrentUsage.js   |   1 -
 .../src/components/FileList/FileTable.js      |   6 +-
 .../src/components/Metadata/Metadata.js       |  27 +++++
 .../src/components/Metadata/index.js          |   1 +
 .../src/components/Modal/Modal.js             |   2 +-
 .../src/components/NavBar/NavBar.js           |   1 +
 .../src/components/Slider/Bullets.js          |   1 +
 .../src/components/Uploader/Uploader.js       |   6 +-
 .../src/components/forms/AddAPIKeyForm.js     |   4 +-
 .../components/forms/AddPublicAPIKeyForm.js   |   5 +-
 .../forms/AddSkylinkToAPIKeyForm.js           |   2 +-
 packages/dashboard-v2/src/pages/auth/login.js |  24 +++--
 .../src/pages/auth/reset-password.js          |  54 +++++-----
 .../dashboard-v2/src/pages/auth/signup.js     |   4 +
 packages/dashboard-v2/src/pages/files.js      |  32 +++---
 packages/dashboard-v2/src/pages/index.js      |  98 ++++++++++--------
 .../src/pages/settings/api-keys.js            |   4 +
 .../dashboard-v2/src/pages/settings/export.js |   4 +
 .../dashboard-v2/src/pages/settings/index.js  |   4 +
 .../src/pages/settings/notifications.js       |   6 +-
 packages/dashboard-v2/src/pages/upgrade.js    |   4 +
 .../dashboard-v2/src/pages/user/confirm.js    |  36 ++++---
 .../dashboard-v2/src/pages/user/recover.js    |  60 ++++++-----
 packages/dashboard-v2/static/favicon.ico      | Bin 0 -> 2118 bytes
 27 files changed, 258 insertions(+), 150 deletions(-)
 create mode 100644 packages/dashboard-v2/src/components/Metadata/Metadata.js
 create mode 100644 packages/dashboard-v2/src/components/Metadata/index.js
 create mode 100644 packages/dashboard-v2/static/favicon.ico

diff --git a/packages/dashboard-v2/gatsby-config.js b/packages/dashboard-v2/gatsby-config.js
index ce35de3a..c6096a98 100644
--- a/packages/dashboard-v2/gatsby-config.js
+++ b/packages/dashboard-v2/gatsby-config.js
@@ -2,8 +2,8 @@ const { createProxyMiddleware } = require("http-proxy-middleware");
 
 module.exports = {
   siteMetadata: {
-    title: `Accounts Dashboard`,
-    siteUrl: `https://www.yourdomain.tld`,
+    title: "Skynet Account",
+    siteUrl: `https://account.${process.env.GATSBY_PORTAL_DOMAIN}/`,
   },
   trailingSlash: "never",
   plugins: [
diff --git a/packages/dashboard-v2/src/components/APIKeyList/APIKey.js b/packages/dashboard-v2/src/components/APIKeyList/APIKey.js
index 5cb6680a..3269bb9f 100644
--- a/packages/dashboard-v2/src/components/APIKeyList/APIKey.js
+++ b/packages/dashboard-v2/src/components/APIKeyList/APIKey.js
@@ -83,13 +83,19 @@ export const APIKey = ({ apiKey, onRemoved, onEdited, onRemovalError }) => {
         {isPublic && (
           <button
             title="Add or remove skylinks"
+            aria-label="Add or remove skylinks"
             className="p-1 transition-colors hover:text-primary"
             onClick={promptEdit}
           >
             <CogIcon size={22} />
           </button>
         )}
-        <button title="Delete this API key" className="p-1 transition-colors hover:text-error" onClick={promptRemoval}>
+        <button
+          title="Delete this API key"
+          aria-label="Delete this API key"
+          className="p-1 transition-colors hover:text-error"
+          onClick={promptRemoval}
+        >
           <TrashIcon size={16} />
         </button>
       </span>
@@ -121,7 +127,11 @@ export const APIKey = ({ apiKey, onRemoved, onEdited, onRemovalError }) => {
                   <code className="whitespace-nowrap select-all truncate bg-palette-100 odd:bg-white p-1">
                     {skylink}
                   </code>
-                  <button className="p-1 transition-colors hover:text-error" onClick={() => removeSkylink(skylink)}>
+                  <button
+                    className="p-1 transition-colors hover:text-error"
+                    onClick={() => removeSkylink(skylink)}
+                    aria-label="Remove skylink"
+                  >
                     <TrashIcon size={16} />
                   </button>
                 </li>
diff --git a/packages/dashboard-v2/src/components/CopyButton.js b/packages/dashboard-v2/src/components/CopyButton.js
index 479352d2..9cbf43d2 100644
--- a/packages/dashboard-v2/src/components/CopyButton.js
+++ b/packages/dashboard-v2/src/components/CopyButton.js
@@ -22,7 +22,7 @@ const TooltipContent = styled.div.attrs({
   className: "bg-primary-light/10 text-palette-600 py-2 px-4 ",
 })``;
 
-export const CopyButton = ({ value, className }) => {
+export const CopyButton = ({ value, className, ariaLabel = "Copy" }) => {
   const containerRef = useRef();
   const [copied, setCopied] = useState(false);
   const [timer, setTimer] = useState(null);
@@ -39,7 +39,7 @@ export const CopyButton = ({ value, className }) => {
 
   return (
     <div ref={containerRef} className={`inline-flex relative overflow-visible pr-2 ${className ?? ""}`}>
-      <Button onClick={handleCopy} className={copied ? "text-primary" : ""}>
+      <Button onClick={handleCopy} className={copied ? "text-primary" : ""} aria-label={ariaLabel}>
         <CopyIcon size={16} />
       </Button>
       <TooltipContainer $visible={copied}>
diff --git a/packages/dashboard-v2/src/components/CurrentUsage/CurrentUsage.js b/packages/dashboard-v2/src/components/CurrentUsage/CurrentUsage.js
index 44be79ed..081b9cca 100644
--- a/packages/dashboard-v2/src/components/CurrentUsage/CurrentUsage.js
+++ b/packages/dashboard-v2/src/components/CurrentUsage/CurrentUsage.js
@@ -101,7 +101,6 @@ export default function CurrentUsage() {
             >
               UPGRADE
             </Link>{" "}
-            {/* TODO: proper URL */}
             <span>{usage.filesLimit}</span>
           </span>
         </div>
diff --git a/packages/dashboard-v2/src/components/FileList/FileTable.js b/packages/dashboard-v2/src/components/FileList/FileTable.js
index 90c9600f..c2f133d6 100644
--- a/packages/dashboard-v2/src/components/FileList/FileTable.js
+++ b/packages/dashboard-v2/src/components/FileList/FileTable.js
@@ -84,19 +84,19 @@ export default function FileTable({ items }) {
               <TableCell className="w-[180px]">{date}</TableCell>
               <TableCell className="hidden lg:table-cell pr-6 !overflow-visible">
                 <div className="flex items-center">
-                  <CopyButton value={skylink} className="mr-2" />
+                  <CopyButton value={skylink} className="mr-2" aria-label="Copy skylink" />
                   <span className="w-full inline-block truncate">{skylink}</span>
                 </div>
               </TableCell>
               <TableCell className="w-[100px] !overflow-visible">
                 <div className="flex text-palette-600 gap-4">
                   <PopoverMenu options={buildShareMenu(item)} openClassName="text-primary">
-                    <button>
+                    <button aria-label="Share this skylink">
                       <ShareIcon size={22} />
                     </button>
                   </PopoverMenu>
                   <PopoverMenu options={buildOptionsMenu(item)} openClassName="text-primary">
-                    <button>
+                    <button aria-label="Manage this skylink">
                       <CogIcon />
                     </button>
                   </PopoverMenu>
diff --git a/packages/dashboard-v2/src/components/Metadata/Metadata.js b/packages/dashboard-v2/src/components/Metadata/Metadata.js
new file mode 100644
index 00000000..5bb98330
--- /dev/null
+++ b/packages/dashboard-v2/src/components/Metadata/Metadata.js
@@ -0,0 +1,27 @@
+import { Helmet } from "react-helmet";
+import { graphql, useStaticQuery } from "gatsby";
+
+export const Metadata = ({ children }) => {
+  const { site } = useStaticQuery(
+    graphql`
+      query Q {
+        site {
+          siteMetadata {
+            title
+          }
+        }
+      }
+    `
+  );
+
+  const { title } = site.siteMetadata;
+
+  return (
+    <Helmet htmlAttributes={{ lang: "en" }} titleTemplate={`%s | ${title}`} defaultTitle={title}>
+      <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+      <meta name="description" content="Manage your Skynet uploads, account subscription, settings and API keys" />
+      <link rel="preconnect" href={`https://${process.env.GATSBY_PORTAL_DOMAIN}/`} />
+      {children}
+    </Helmet>
+  );
+};
diff --git a/packages/dashboard-v2/src/components/Metadata/index.js b/packages/dashboard-v2/src/components/Metadata/index.js
new file mode 100644
index 00000000..8abb6696
--- /dev/null
+++ b/packages/dashboard-v2/src/components/Metadata/index.js
@@ -0,0 +1 @@
+export * from "./Metadata";
diff --git a/packages/dashboard-v2/src/components/Modal/Modal.js b/packages/dashboard-v2/src/components/Modal/Modal.js
index c183e190..ac7bd98e 100644
--- a/packages/dashboard-v2/src/components/Modal/Modal.js
+++ b/packages/dashboard-v2/src/components/Modal/Modal.js
@@ -11,7 +11,7 @@ export const Modal = ({ children, className, onClose }) => (
   <ModalPortal>
     <Overlay onClick={onClose}>
       <div className={cn("relative w-modal max-w-modal shadow-sm rounded")}>
-        <button onClick={onClose} className="absolute top-[20px] right-[20px]">
+        <button onClick={onClose} className="absolute top-[20px] right-[20px]" aria-label="Close">
           <PlusIcon size={14} className="rotate-45" />
         </button>
         <Panel className={cn("px-8 py-6 sm:px-12 sm:py-10", className)}>{children}</Panel>
diff --git a/packages/dashboard-v2/src/components/NavBar/NavBar.js b/packages/dashboard-v2/src/components/NavBar/NavBar.js
index f75030bb..6d2cb9eb 100644
--- a/packages/dashboard-v2/src/components/NavBar/NavBar.js
+++ b/packages/dashboard-v2/src/components/NavBar/NavBar.js
@@ -94,6 +94,7 @@ export const NavBar = () => {
                 partiallyActive
               />
               <DropdownMenuLink
+                as="button"
                 onClick={onLogout}
                 activeClassName="text-primary"
                 className="cursor-pointer"
diff --git a/packages/dashboard-v2/src/components/Slider/Bullets.js b/packages/dashboard-v2/src/components/Slider/Bullets.js
index c090cef4..10b0a0ed 100644
--- a/packages/dashboard-v2/src/components/Slider/Bullets.js
+++ b/packages/dashboard-v2/src/components/Slider/Bullets.js
@@ -12,6 +12,7 @@ export default function Bullets({ visibleSlides, activeIndex, allSlides, changeS
         .map((_, index) => (
           <button
             key={index}
+            aria-label={`Slide ${index + 1}`}
             type="button"
             className={`rounded-full w-3 h-3 ${activeIndex === index ? "bg-primary" : "border-2 cursor-pointer"}`}
             onClick={(event) => changeSlide(event, index)}
diff --git a/packages/dashboard-v2/src/components/Uploader/Uploader.js b/packages/dashboard-v2/src/components/Uploader/Uploader.js
index 269d9fbe..ab26d6c6 100644
--- a/packages/dashboard-v2/src/components/Uploader/Uploader.js
+++ b/packages/dashboard-v2/src/components/Uploader/Uploader.js
@@ -105,7 +105,11 @@ const Uploader = ({ mode }) => {
           </div>
         ) : (
           <div className="p-5">
-            <Button $primary className="w-[40px] h-[40px] !p-0 inline-flex justify-center items-center">
+            <Button
+              $primary
+              className="w-[40px] h-[40px] !p-0 inline-flex justify-center items-center"
+              aria-label="Upload new file"
+            >
               <PlusIcon size={12} />
             </Button>
             <span className="ml-4">Add, or drop your files here</span>
diff --git a/packages/dashboard-v2/src/components/forms/AddAPIKeyForm.js b/packages/dashboard-v2/src/components/forms/AddAPIKeyForm.js
index 703d88a0..ccea02a5 100644
--- a/packages/dashboard-v2/src/components/forms/AddAPIKeyForm.js
+++ b/packages/dashboard-v2/src/components/forms/AddAPIKeyForm.js
@@ -44,7 +44,7 @@ export const AddAPIKeyForm = forwardRef(({ onSuccess, type }, ref) => {
             <code className="p-2 rounded border border-palette-200 text-xs selection:bg-primary/30 truncate">
               {generatedKey}
             </code>
-            <CopyButton value={generatedKey} className="whitespace-nowrap" />
+            <CopyButton value={generatedKey} className="whitespace-nowrap" aria-label="Copy the new API key" />
           </div>
         </Alert>
       )}
@@ -94,7 +94,7 @@ export const AddAPIKeyForm = forwardRef(({ onSuccess, type }, ref) => {
               {isSubmitting ? (
                 <CircledProgressIcon size={38} className="text-palette-300 animate-[spin_3s_linear_infinite]" />
               ) : (
-                <Button type="submit" className="px-2.5">
+                <Button type="submit" className="px-2.5" aria-label="Create general API key">
                   <PlusIcon size={14} />
                 </Button>
               )}
diff --git a/packages/dashboard-v2/src/components/forms/AddPublicAPIKeyForm.js b/packages/dashboard-v2/src/components/forms/AddPublicAPIKeyForm.js
index 2184c513..c98daac9 100644
--- a/packages/dashboard-v2/src/components/forms/AddPublicAPIKeyForm.js
+++ b/packages/dashboard-v2/src/components/forms/AddPublicAPIKeyForm.js
@@ -59,7 +59,7 @@ export const AddPublicAPIKeyForm = forwardRef(({ onSuccess }, ref) => {
             <code className="p-2 rounded border border-palette-200 text-xs selection:bg-primary/30 truncate">
               {generatedKey}
             </code>
-            <CopyButton value={generatedKey} className="whitespace-nowrap" />
+            <CopyButton value={generatedKey} className="whitespace-nowrap" aria-label="Copy the new public API key" />
           </div>
         </Alert>
       )}
@@ -137,7 +137,7 @@ export const AddPublicAPIKeyForm = forwardRef(({ onSuccess }, ref) => {
                             touched={skylinksTouched[index]}
                           />
                           <span className="w-[24px] shrink-0 mt-3">
-                            <button type="button" onClick={() => remove(index)}>
+                            <button type="button" onClick={() => remove(index)} aria-label="Remove this skylink">
                               <TrashIcon size={16} />
                             </button>
                           </span>
@@ -160,6 +160,7 @@ export const AddPublicAPIKeyForm = forwardRef(({ onSuccess }, ref) => {
                         />
                         <button
                           type="button"
+                          aria-label="Add this skylink"
                           onClick={() => appendSkylink(values.nextSkylink)}
                           className={cn("shrink-0 mt-1.5 w-[24px] h-[24px]", {
                             "text-palette-300 cursor-not-allowed": isNextSkylinkInvalid,
diff --git a/packages/dashboard-v2/src/components/forms/AddSkylinkToAPIKeyForm.js b/packages/dashboard-v2/src/components/forms/AddSkylinkToAPIKeyForm.js
index 55f27a01..60ed905c 100644
--- a/packages/dashboard-v2/src/components/forms/AddSkylinkToAPIKeyForm.js
+++ b/packages/dashboard-v2/src/components/forms/AddSkylinkToAPIKeyForm.js
@@ -48,7 +48,7 @@ export const AddSkylinkToAPIKeyForm = ({ addSkylink }) => (
           {isSubmitting ? (
             <CircledProgressIcon size={38} className="text-palette-300 animate-[spin_3s_linear_infinite]" />
           ) : (
-            <Button type="submit" className="px-2.5">
+            <Button type="submit" className="px-2.5" aria-label="Add this skylink">
               <PlusIcon size={14} />
             </Button>
           )}
diff --git a/packages/dashboard-v2/src/pages/auth/login.js b/packages/dashboard-v2/src/pages/auth/login.js
index 8b0cfbb5..5812fd8f 100644
--- a/packages/dashboard-v2/src/pages/auth/login.js
+++ b/packages/dashboard-v2/src/pages/auth/login.js
@@ -4,6 +4,7 @@ import { navigate } from "gatsby";
 import AuthLayout from "../../layouts/AuthLayout";
 import { LoginForm } from "../../components/forms";
 import { useUser } from "../../contexts/user";
+import { Metadata } from "../../components/Metadata";
 
 const LoginPage = ({ location }) => {
   const { user, mutate: refreshUserState } = useUser();
@@ -17,16 +18,21 @@ const LoginPage = ({ location }) => {
   }, [user, redirectTo]);
 
   return (
-    <div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
-      <div className="mb-4 md:mb-16">
-        <img src="/images/logo-black-text.svg" alt="Skynet" />
+    <>
+      <Metadata>
+        <title>Sign In</title>
+      </Metadata>
+      <div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
+        <div className="mb-4 md:mb-16">
+          <img src="/images/logo-black-text.svg" alt="Skynet" />
+        </div>
+        <LoginForm
+          onSuccess={async () => {
+            await refreshUserState();
+          }}
+        />
       </div>
-      <LoginForm
-        onSuccess={async () => {
-          await refreshUserState();
-        }}
-      />
-    </div>
+    </>
   );
 };
 
diff --git a/packages/dashboard-v2/src/pages/auth/reset-password.js b/packages/dashboard-v2/src/pages/auth/reset-password.js
index 8ecbfeaa..88db338a 100644
--- a/packages/dashboard-v2/src/pages/auth/reset-password.js
+++ b/packages/dashboard-v2/src/pages/auth/reset-password.js
@@ -4,6 +4,7 @@ import AuthLayout from "../../layouts/AuthLayout";
 
 import { RecoveryForm } from "../../components/forms/RecoveryForm";
 import HighlightedLink from "../../components/HighlightedLink";
+import { Metadata } from "../../components/Metadata";
 
 const State = {
   Pure: "PURE",
@@ -15,31 +16,36 @@ const ResetPasswordPage = () => {
   const [state, setState] = useState(State.Pure);
 
   return (
-    <div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
-      <div className="mb-4 md:mb-16">
-        <img src="/images/logo-black-text.svg" alt="Skynet" />
+    <>
+      <Metadata>
+        <title>Reset Password</title>
+      </Metadata>
+      <div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
+        <div className="mb-4 md:mb-16">
+          <img src="/images/logo-black-text.svg" alt="Skynet" />
+        </div>
+        {state !== State.Success && (
+          <RecoveryForm onSuccess={() => setState(State.Success)} onFailure={() => setState(State.Failure)} />
+        )}
+
+        {state === State.Success && (
+          <p className="text-primary text-center font-semibold">Please check your inbox for further instructions.</p>
+        )}
+
+        {state === State.Failure && (
+          <p className="text-error text-center">Something went wrong, please try again later.</p>
+        )}
+
+        <div className="text-sm text-center mt-8">
+          <p>
+            Suddenly remembered your password? <HighlightedLink to="/auth/login">Sign in</HighlightedLink>
+          </p>
+          <p>
+            Don't actually have an account? <HighlightedLink to="/auth/signup">Create one!</HighlightedLink>
+          </p>
+        </div>
       </div>
-      {state !== State.Success && (
-        <RecoveryForm onSuccess={() => setState(State.Success)} onFailure={() => setState(State.Failure)} />
-      )}
-
-      {state === State.Success && (
-        <p className="text-primary text-center font-semibold">Please check your inbox for further instructions.</p>
-      )}
-
-      {state === State.Failure && (
-        <p className="text-error text-center">Something went wrong, please try again later.</p>
-      )}
-
-      <div className="text-sm text-center mt-8">
-        <p>
-          Suddenly remembered your password? <HighlightedLink to="/auth/login">Sign in</HighlightedLink>
-        </p>
-        <p>
-          Don't actually have an account? <HighlightedLink to="/auth/signup">Create one!</HighlightedLink>
-        </p>
-      </div>
-    </div>
+    </>
   );
 };
 
diff --git a/packages/dashboard-v2/src/pages/auth/signup.js b/packages/dashboard-v2/src/pages/auth/signup.js
index 2af428f9..b6f0e0ac 100644
--- a/packages/dashboard-v2/src/pages/auth/signup.js
+++ b/packages/dashboard-v2/src/pages/auth/signup.js
@@ -9,6 +9,7 @@ import HighlightedLink from "../../components/HighlightedLink";
 import { SignUpForm } from "../../components/forms/SignUpForm";
 import { usePortalSettings } from "../../contexts/portal-settings";
 import { PlansProvider, usePlans } from "../../contexts/plans";
+import { Metadata } from "../../components/Metadata";
 
 const FreePortalHeader = () => {
   const { plans } = usePlans();
@@ -57,6 +58,9 @@ const SignUpPage = () => {
 
   return (
     <PlansProvider>
+      <Metadata>
+        <title>Sign Up</title>
+      </Metadata>
       <div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
         <div className="mb-4 md:mb-16">
           <img src="/images/logo-black-text.svg" alt="Skynet" />
diff --git a/packages/dashboard-v2/src/pages/files.js b/packages/dashboard-v2/src/pages/files.js
index 197cc031..f4a47a1d 100644
--- a/packages/dashboard-v2/src/pages/files.js
+++ b/packages/dashboard-v2/src/pages/files.js
@@ -1,28 +1,34 @@
 import * as React from "react";
+import { useSearchParam } from "react-use";
 
 import DashboardLayout from "../layouts/DashboardLayout";
 
 import { Panel } from "../components/Panel";
 import { Tab, TabPanel, Tabs } from "../components/Tabs";
+import { Metadata } from "../components/Metadata";
 import FileList from "../components/FileList/FileList";
-import { useSearchParam } from "react-use";
 
 const FilesPage = () => {
   const defaultTab = useSearchParam("tab");
 
   return (
-    <Panel title="Files">
-      <Tabs defaultTab={defaultTab || "uploads"}>
-        <Tab id="uploads" title="Uploads" />
-        <Tab id="downloads" title="Downloads" />
-        <TabPanel tabId="uploads" className="pt-4">
-          <FileList type="uploads" />
-        </TabPanel>
-        <TabPanel tabId="downloads" className="pt-4">
-          <FileList type="downloads" />
-        </TabPanel>
-      </Tabs>
-    </Panel>
+    <>
+      <Metadata>
+        <title>My Files</title>
+      </Metadata>
+      <Panel title="Files">
+        <Tabs defaultTab={defaultTab || "uploads"}>
+          <Tab id="uploads" title="Uploads" />
+          <Tab id="downloads" title="Downloads" />
+          <TabPanel tabId="uploads" className="pt-4">
+            <FileList type="uploads" />
+          </TabPanel>
+          <TabPanel tabId="downloads" className="pt-4">
+            <FileList type="downloads" />
+          </TabPanel>
+        </Tabs>
+      </Panel>
+    </>
   );
 };
 
diff --git a/packages/dashboard-v2/src/pages/index.js b/packages/dashboard-v2/src/pages/index.js
index 1fd88651..15edd552 100644
--- a/packages/dashboard-v2/src/pages/index.js
+++ b/packages/dashboard-v2/src/pages/index.js
@@ -13,6 +13,7 @@ import CurrentUsage from "../components/CurrentUsage";
 import Uploader from "../components/Uploader/Uploader";
 import CurrentPlan from "../components/CurrentPlan";
 import { FullScreenLoadingIndicator } from "../components/LoadingIndicator";
+import { Metadata } from "../components/Metadata";
 import useUpgradeRedirect from "../hooks/useUpgradeRedirect";
 
 const IndexPage = () => {
@@ -24,51 +25,60 @@ const IndexPage = () => {
   }
 
   return (
-    <PlansProvider>
-      <div className="w-full">
-        <Slider
-          slides={[
-            <Panel title="Upload" className="h-[330px]">
-              <Tabs variant="fill">
-                <Tab id="files" title="Files" />
-                <Tab id="directory" title="Directory" />
-                <TabPanel tabId="files" className="h-full overflow-y-auto">
-                  <Uploader mode="file" />
-                </TabPanel>
-                <TabPanel tabId="directory" className="h-full overflow-y-auto">
-                  <Uploader mode="directory" />
-                </TabPanel>
-              </Tabs>
-            </Panel>,
-            <Panel
-              title={
-                <>
-                  <ArrowRightIcon /> Usage
-                </>
-              }
-              className="h-[330px]"
-            >
-              <CurrentUsage />
-            </Panel>,
-            <Panel
-              title={
-                <>
-                  <ArrowRightIcon /> Current plan
-                </>
-              }
-              className="h-[330px]"
-            >
-              <CurrentPlan />
-            </Panel>,
-          ]}
-        />
-      </div>
-      {showRecentActivity && (
-        <div className="mt-10">
-          <LatestActivity />
-        </div>
+    <>
+      <Metadata>
+        <title>Dashboard</title>
+      </Metadata>
+      {verifyingSubscription ? (
+        <FullScreenLoadingIndicator />
+      ) : (
+        <PlansProvider>
+          <div className="w-full">
+            <Slider
+              slides={[
+                <Panel title="Upload" className="h-[330px]">
+                  <Tabs variant="fill">
+                    <Tab id="files" title="Files" />
+                    <Tab id="directory" title="Directory" />
+                    <TabPanel tabId="files" className="h-full overflow-y-auto">
+                      <Uploader mode="file" />
+                    </TabPanel>
+                    <TabPanel tabId="directory" className="h-full overflow-y-auto">
+                      <Uploader mode="directory" />
+                    </TabPanel>
+                  </Tabs>
+                </Panel>,
+                <Panel
+                  title={
+                    <>
+                      <ArrowRightIcon /> Usage
+                    </>
+                  }
+                  className="h-[330px]"
+                >
+                  <CurrentUsage />
+                </Panel>,
+                <Panel
+                  title={
+                    <>
+                      <ArrowRightIcon /> Current plan
+                    </>
+                  }
+                  className="h-[330px]"
+                >
+                  <CurrentPlan />
+                </Panel>,
+              ]}
+            />
+          </div>
+          {showRecentActivity && (
+            <div className="mt-10">
+              <LatestActivity />
+            </div>
+          )}
+        </PlansProvider>
       )}
-    </PlansProvider>
+    </>
   );
 };
 
diff --git a/packages/dashboard-v2/src/pages/settings/api-keys.js b/packages/dashboard-v2/src/pages/settings/api-keys.js
index 1f6c93c5..03486248 100644
--- a/packages/dashboard-v2/src/pages/settings/api-keys.js
+++ b/packages/dashboard-v2/src/pages/settings/api-keys.js
@@ -7,6 +7,7 @@ import { AddAPIKeyForm, APIKeyType } from "../../components/forms/AddAPIKeyForm"
 import { APIKeyList } from "../../components/APIKeyList/APIKeyList";
 import { Alert } from "../../components/Alert";
 import { AddPublicAPIKeyForm } from "../../components/forms/AddPublicAPIKeyForm";
+import { Metadata } from "../../components/Metadata";
 
 const APIKeysPage = () => {
   const { data: apiKeys = [], mutate: reloadKeys, error } = useSWR("user/apikeys");
@@ -29,6 +30,9 @@ const APIKeysPage = () => {
 
   return (
     <>
+      <Metadata>
+        <title>API Keys</title>
+      </Metadata>
       <div className="flex flex-col xl:flex-row">
         <div className="flex flex-col gap-10 lg:shrink-0 lg:max-w-[576px] xl:max-w-[524px]">
           <div>
diff --git a/packages/dashboard-v2/src/pages/settings/export.js b/packages/dashboard-v2/src/pages/settings/export.js
index ad05f5ff..7a75bc0c 100644
--- a/packages/dashboard-v2/src/pages/settings/export.js
+++ b/packages/dashboard-v2/src/pages/settings/export.js
@@ -4,6 +4,7 @@ import UserSettingsLayout from "../../layouts/UserSettingsLayout";
 
 import { Switch } from "../../components/Switch";
 import { Button } from "../../components/Button";
+import { Metadata } from "../../components/Metadata";
 
 const useExportOptions = () => {
   const [pinnedFiles, setPinnedFiles] = useState(false);
@@ -29,6 +30,9 @@ const ExportPage = () => {
 
   return (
     <>
+      <Metadata>
+        <title>Export</title>
+      </Metadata>
       <div className="flex flex-col xl:flex-row">
         <div className="flex flex-col gap-10 lg:shrink-0 lg:max-w-[576px] xl:max-w-[524px]">
           <section>
diff --git a/packages/dashboard-v2/src/pages/settings/index.js b/packages/dashboard-v2/src/pages/settings/index.js
index 358a4b28..23a815e2 100644
--- a/packages/dashboard-v2/src/pages/settings/index.js
+++ b/packages/dashboard-v2/src/pages/settings/index.js
@@ -7,6 +7,7 @@ import { AccountSettingsForm } from "../../components/forms/AccountSettingsForm"
 import { Modal } from "../../components/Modal/Modal";
 import { AccountRemovalForm } from "../../components/forms/AccountRemovalForm";
 import { Alert } from "../../components/Alert";
+import { Metadata } from "../../components/Metadata";
 
 const State = {
   Pure: "PURE",
@@ -39,6 +40,9 @@ const AccountPage = () => {
 
   return (
     <>
+      <Metadata>
+        <title>Settings</title>
+      </Metadata>
       <div className="flex flex-col xl:flex-row">
         <div className="flex flex-col gap-10 lg:shrink-0 lg:max-w-[576px] xl:max-w-[524px]">
           <section>
diff --git a/packages/dashboard-v2/src/pages/settings/notifications.js b/packages/dashboard-v2/src/pages/settings/notifications.js
index b46a1da4..447e40c8 100644
--- a/packages/dashboard-v2/src/pages/settings/notifications.js
+++ b/packages/dashboard-v2/src/pages/settings/notifications.js
@@ -1,13 +1,17 @@
 import * as React from "react";
+import { StaticImage } from "gatsby-plugin-image";
 
 import UserSettingsLayout from "../../layouts/UserSettingsLayout";
 
 import { Switch } from "../../components/Switch";
-import { StaticImage } from "gatsby-plugin-image";
+import { Metadata } from "../../components/Metadata";
 
 const NotificationsPage = () => {
   return (
     <>
+      <Metadata>
+        <title>Notifications</title>
+      </Metadata>
       <div className="flex">
         <div className="flex flex-col gap-10 lg:shrink-0 lg:max-w-[576px] xl:max-w-[524px]">
           <h4>Notifications</h4>
diff --git a/packages/dashboard-v2/src/pages/upgrade.js b/packages/dashboard-v2/src/pages/upgrade.js
index 8e47472e..9f69487e 100644
--- a/packages/dashboard-v2/src/pages/upgrade.js
+++ b/packages/dashboard-v2/src/pages/upgrade.js
@@ -13,6 +13,7 @@ import { Button } from "../components/Button";
 import { usePortalSettings } from "../contexts/portal-settings";
 import { Alert } from "../components/Alert";
 import HighlightedLink from "../components/HighlightedLink";
+import { Metadata } from "../components/Metadata";
 
 const PAID_PORTAL_BREAKPOINTS = [
   {
@@ -88,6 +89,9 @@ const PlansSlider = () => {
 
   return (
     <div className="w-full mb-24">
+      <Metadata>
+        <title>Upgrade</title>
+      </Metadata>
       {settings.isSubscriptionRequired && !activePlan && (
         <Alert $variant="info" className="mb-6">
           <p className="font-semibold mt-0">This Skynet portal requires a paid subscription.</p>
diff --git a/packages/dashboard-v2/src/pages/user/confirm.js b/packages/dashboard-v2/src/pages/user/confirm.js
index 9e95e3e3..b4ce6bc1 100644
--- a/packages/dashboard-v2/src/pages/user/confirm.js
+++ b/packages/dashboard-v2/src/pages/user/confirm.js
@@ -5,6 +5,7 @@ import { AllUsersAuthLayout } from "../../layouts/AuthLayout";
 
 import HighlightedLink from "../../components/HighlightedLink";
 import accountsService from "../../services/accountsService";
+import { Metadata } from "../../components/Metadata";
 
 const State = {
   Pure: "PURE",
@@ -52,24 +53,29 @@ const EmailConfirmationPage = ({ location }) => {
   }, [token]);
 
   return (
-    <div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
-      <div className="mb-4 md:mb-16">
-        <img src="/images/logo-black-text.svg" alt="Skynet" />
-      </div>
-      <div className="text-center">
-        {state === State.Pure && <p>Please wait while we verify your account...</p>}
+    <>
+      <Metadata>
+        <title>Confirm E-mail Address</title>
+      </Metadata>
+      <div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
+        <div className="mb-4 md:mb-16">
+          <img src="/images/logo-black-text.svg" alt="Skynet" />
+        </div>
+        <div className="text-center">
+          {state === State.Pure && <p>Please wait while we verify your account...</p>}
 
-        {state === State.Success && (
-          <>
-            <p className="text-primary font-semibold">All done!</p>
-            <p>You will be redirected to your dashboard shortly.</p>
-            <HighlightedLink to="/">Redirect now.</HighlightedLink>
-          </>
-        )}
+          {state === State.Success && (
+            <>
+              <p className="text-primary font-semibold">All done!</p>
+              <p>You will be redirected to your dashboard shortly.</p>
+              <HighlightedLink to="/">Redirect now.</HighlightedLink>
+            </>
+          )}
 
-        {state === State.Failure && <p className="text-error">Something went wrong, please try again later.</p>}
+          {state === State.Failure && <p className="text-error">Something went wrong, please try again later.</p>}
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/packages/dashboard-v2/src/pages/user/recover.js b/packages/dashboard-v2/src/pages/user/recover.js
index 686e677a..d8d02e8a 100644
--- a/packages/dashboard-v2/src/pages/user/recover.js
+++ b/packages/dashboard-v2/src/pages/user/recover.js
@@ -5,6 +5,7 @@ import AuthLayout from "../../layouts/AuthLayout";
 
 import { ResetPasswordForm } from "../../components/forms/ResetPasswordForm";
 import HighlightedLink from "../../components/HighlightedLink";
+import { Metadata } from "../../components/Metadata";
 
 const State = {
   Pure: "PURE",
@@ -19,35 +20,40 @@ const RecoverPage = ({ location }) => {
   const [state, setState] = useState(State.Pure);
 
   return (
-    <div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
-      <div className="mb-4 md:mb-16">
-        <img src="/images/logo-black-text.svg" alt="Skynet" />
-      </div>
-      {state !== State.Success && (
-        <ResetPasswordForm
-          token={token}
-          onSuccess={() => {
-            setState(State.Success);
-            navigate("/");
-          }}
-          onFailure={() => setState(State.Failure)}
-        />
-      )}
+    <>
+      <Metadata>
+        <title>Recover Your Account</title>
+      </Metadata>
+      <div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
+        <div className="mb-4 md:mb-16">
+          <img src="/images/logo-black-text.svg" alt="Skynet" />
+        </div>
+        {state !== State.Success && (
+          <ResetPasswordForm
+            token={token}
+            onSuccess={() => {
+              setState(State.Success);
+              navigate("/");
+            }}
+            onFailure={() => setState(State.Failure)}
+          />
+        )}
 
-      {state === State.Success && (
-        <p className="text-primary text-center font-semibold">
-          All done! You will be redirected to your dashboard shortly.
+        {state === State.Success && (
+          <p className="text-primary text-center font-semibold">
+            All done! You will be redirected to your dashboard shortly.
+          </p>
+        )}
+
+        {state === State.Failure && (
+          <p className="text-error text-center">Something went wrong, please try again later.</p>
+        )}
+
+        <p className="text-sm text-center mt-8">
+          Suddenly remembered your old password? <HighlightedLink to="/auth/login">Sign in</HighlightedLink>
         </p>
-      )}
-
-      {state === State.Failure && (
-        <p className="text-error text-center">Something went wrong, please try again later.</p>
-      )}
-
-      <p className="text-sm text-center mt-8">
-        Suddenly remembered your old password? <HighlightedLink to="/auth/login">Sign in</HighlightedLink>
-      </p>
-    </div>
+      </div>
+    </>
   );
 };
 
diff --git a/packages/dashboard-v2/static/favicon.ico b/packages/dashboard-v2/static/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..9229fbf780c52d9d25e2183c0effe239dd2728dd
GIT binary patch
literal 2118
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

literal 0
HcmV?d00001