From d8db68e411a7626cd3557756ec74c0d7da9a0f92 Mon Sep 17 00:00:00 2001
From: Wind-Explorer <windexplorer@outlook.com>
Date: Wed, 26 Jun 2024 19:13:37 +0800
Subject: [PATCH] Enhanced account archived screen

---
 client/src/icons.tsx                 | 19 +++++++
 client/src/pages/SpringboardPage.tsx | 78 ++++++++++++++++++++--------
 2 files changed, 74 insertions(+), 23 deletions(-)

diff --git a/client/src/icons.tsx b/client/src/icons.tsx
index da1746a..cb12019 100644
--- a/client/src/icons.tsx
+++ b/client/src/icons.tsx
@@ -35,3 +35,22 @@ export const PencilSquareIcon = () => {
     </svg>
   );
 };
+
+export const LockClosedIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="size-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"
+      />
+    </svg>
+  );
+};
diff --git a/client/src/pages/SpringboardPage.tsx b/client/src/pages/SpringboardPage.tsx
index 8df4f2d..b7f054b 100644
--- a/client/src/pages/SpringboardPage.tsx
+++ b/client/src/pages/SpringboardPage.tsx
@@ -1,8 +1,8 @@
 import { useNavigate, useParams } from "react-router-dom";
 import DefaultLayout from "../layouts/default";
 import { useEffect, useState } from "react";
-import { Button, Link } from "@nextui-org/react";
-import { PencilSquareIcon } from "../icons";
+import { Button, Card, Link } from "@nextui-org/react";
+import { LockClosedIcon, PencilSquareIcon } from "../icons";
 import SpringboardButton from "../components/SpringboardButton";
 import { getTimeOfDay } from "../utilities";
 import { retrieveUserInformation } from "../security/users";
@@ -91,32 +91,64 @@ export default function SpringboardPage() {
       </div>
       <div>
         {accountUnavailable && (
-          <div className="flex flex-col">
-            <div className="flex flex-col gap-8 p-4 justify-center bg-red-500 text-center text-white h-96">
-              <p className="text-9xl">🔒</p>
-              <div className="flex flex-col gap-4">
-                <p className="text-4xl font-bold">Account unavailable.</p>
-                <div className="flex flex-col">
-                  <p className="text-xl">
-                    This account seems to have been archived.
+          <div className="m-8 flex flex-col gap-4">
+            <Card>
+              <div className="flex flex-col m-8 gap-8">
+                <div className="rounded-xl flex flex-col gap-8 p-4 justify-center bg-red-500 text-center text-white">
+                  <div className="pt-10 w-full flex flex-row justify-center scale-150">
+                    <div className="scale-150 pb-2">
+                      <LockClosedIcon />
+                    </div>
+                  </div>
+                  <div className="flex flex-col gap-8">
+                    <div className="flex flex-col">
+                      <p className="text-4xl font-bold">Account unavailable.</p>
+                      <p className="text-xl opacity-70">
+                        This account has been archived.
+                      </p>
+                    </div>
+                    <p>
+                      If you wish to recover the account, please{" "}
+                      <Link className="text-white px-1 rounded-md bg-red-400">
+                        contact us
+                      </Link>
+                    </p>
+                    <div className="w-min mx-auto"></div>
+                  </div>
+                </div>
+                <div className="flex flex-col justify-center">
+                  <div className="w-min mx-auto">
+                    <Button color="primary" onPress={() => navigate("/signin")}>
+                      Sign in with a different account
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </Card>
+            <Card>
+              <div className="p-8 flex flex-col gap-4">
+                <p className="text-2xl font-semibold">Why am I seeing this?</p>
+                <div className="flex flex-col gap-2">
+                  <p>
+                    You have attempted to access an account that has been
+                    archived.
                   </p>
                   <p>
-                    In order to recover the account, please{" "}
-                    <Link className="text-white px-1 rounded-md bg-red-400">
-                      contact us
-                    </Link>
+                    This may due to, either manual operation by the owner of the
+                    account, or administrative decision from the management
+                    team.
+                  </p>
+                  <p>
+                    The information related to this account remains, however the
+                    access to the account will not be available.
+                  </p>
+                  <p>
+                    If you believe that this is incorrect, or would like to
+                    request an unarchive, please <Link>contact us</Link>.
                   </p>
                 </div>
-                <div className="w-min mx-auto"></div>
               </div>
-            </div>
-            <div className="flex flex-col justify-center p-8">
-              <div className="w-min mx-auto">
-                <Button color="primary" onPress={() => navigate("/signin")}>
-                  Sign in with a different account
-                </Button>
-              </div>
-            </div>
+            </Card>
           </div>
         )}
       </div>