feature - added better accounts and tested subscription with cancellation

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 "
       >
+        <Background>
           <PageHeader title="Account" subtitle={<></>} />
-
           <AccountContent user={user} />
+          <Spacer className="mb-auto h-full w-full" />
+          <Footer />
+        </Background>
       </main>
     )
   );

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}

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 */}

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>