From a83a6d64c0711e9ab47d1da6f82f16c2eeed3cd6 Mon Sep 17 00:00:00 2001
From: James Wyndham <samwyn@xam.com.au>
Date: Thu, 22 Feb 2024 12:22:16 +0800
Subject: [PATCH] feature - added better accounts and tested subscription with
 cancellation

---
 Frontend/app/(auth)/account/page.tsx | 12 +++++++++---
 Frontend/components/Header.tsx       |  5 +++--
 Frontend/components/Navigation.tsx   |  9 +++++++--
 Frontend/sections/AccountContent.tsx |  8 +++++---
 4 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/Frontend/app/(auth)/account/page.tsx b/Frontend/app/(auth)/account/page.tsx
index 492ca7a..16a28f2 100644
--- a/Frontend/app/(auth)/account/page.tsx
+++ b/Frontend/app/(auth)/account/page.tsx
@@ -6,6 +6,9 @@ import { User } from "@/types";
 import AccountContent from "@/sections/AccountContent";
 import { redirect } from "next/navigation";
 import pb from "@/lib/pocketbase";
+import Background from "@/components/Utilities/Background";
+import Footer from "@/components/Footer";
+import Spacer from "@/components/Utilities/Spacer";
 
 export default async function AccountPage() {
   const user = (await getUserFromCookie(cookies())) as User;
@@ -20,9 +23,12 @@ export default async function AccountPage() {
         role="main"
         className="h-full flex flex-col min-h-screen mx-auto w-screen overflow-hidden bg-base-100 "
       >
-        <PageHeader title="Account" subtitle={<></>} />
-
-        <AccountContent user={user} />
+        <Background>
+          <PageHeader title="Account" subtitle={<></>} />
+          <AccountContent user={user} />
+          <Spacer className="mb-auto h-full w-full" />
+          <Footer />
+        </Background>
       </main>
     )
   );
diff --git a/Frontend/components/Header.tsx b/Frontend/components/Header.tsx
index 83d39d1..da41582 100644
--- a/Frontend/components/Header.tsx
+++ b/Frontend/components/Header.tsx
@@ -47,11 +47,12 @@ export default function Header({ isUserLoggedIn }: HeaderProps) {
               >
                 light
               </button> */}
-              <label className="swap swap-rotate">
+              <label className="swap swap-rotate" aria-label="theme-toggle">
                 {/* this hidden checkbox controls the state */}
                 <input
                   type="checkbox"
                   className="opacity-0"
+                  aria-label="theme-toggle-input"
                   onClick={() =>
                     theme === "light" ? setTheme("dark") : setTheme("light")
                   }
@@ -130,7 +131,7 @@ export default function Header({ isUserLoggedIn }: HeaderProps) {
                     className="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
                   >
                     <li>
-                      <Link href="/account">
+                      <Link href="/account" aria-label="profile">
                         <div className=" capitalize flex flex-row gap-x-2">
                           <Icon name="Person24Filled" />
                           {user?.displayName}
diff --git a/Frontend/components/Navigation.tsx b/Frontend/components/Navigation.tsx
index c2082c5..0669a20 100644
--- a/Frontend/components/Navigation.tsx
+++ b/Frontend/components/Navigation.tsx
@@ -16,13 +16,14 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
         id="my-drawer-3"
         type="checkbox"
         className="drawer-toggle "
+        aria-label="menu-toggle"
         checked={checked}
       />
       <div className="drawer-content flex flex-col max-w-fit sm:max-w-full sm:w-full">
         {/* Navbar */}
         <div className="flex-grow navbar ">
           <div className="flex-none lg:hidden">
-            <label htmlFor="my-drawer-3">
+            <label htmlFor="my-drawer-3" aria-label="menu-icon">
               <Menu
                 size={36}
                 className="self-center flex-grow h-full cursor-pointer fill-primary"
@@ -68,7 +69,11 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
         {/* Page content here */}
       </div>
       <div className="drawer-side z-20">
-        <label htmlFor="my-drawer-3" className="drawer-overlay"></label>
+        <label
+          htmlFor="my-drawer-3"
+          className="drawer-overlay"
+          aria-label="drawer-navigation"
+        ></label>
 
         <ul className="menu w-80 h-full bg-base-100 text-base-content">
           {/* Sidebar content here */}
diff --git a/Frontend/sections/AccountContent.tsx b/Frontend/sections/AccountContent.tsx
index 5d9b058..f6b9ab8 100644
--- a/Frontend/sections/AccountContent.tsx
+++ b/Frontend/sections/AccountContent.tsx
@@ -145,15 +145,17 @@ function AccountContent({ user }: ManageSubscriptionProps) {
           <h3 className="font-accent text-xl text-secondary mb-2">
             Your Subscription
           </h3>
-          {subscription ? (
+          {subscription && subscription.status != "canceled" ? (
             <>
-              <h2 className="text-3xl mb-3 ">{subscription?.product?.name}</h2>
+              <h2 className="text-3xl mb-3 font-heading font-bold">
+                {subscription?.product?.name}
+              </h2>
               <p className="text-lg  mb-4">
                 {subscription.product?.description}
               </p>
               <button
                 onClick={manageSubscription}
-                className="btn text-base-content capitalize !rounded-md text-base-300 bg-secondary hover:bg-secondary/60 w-full sm:w-auto mt-8"
+                className="btn text-base-content capitalize !rounded-md bg-secondary hover:bg-secondary/60 w-full sm:w-auto mt-8"
               >
                 Manage Subscription
               </button>