Fix: FAQ Icon(?) on Navbar, Cancel Button to Clear Password & Max Length of Bio Message

src/app/(auth-routes)/register/organisation/page.tsx

@@ -263,7 +263,7 @@ function Organisation() {
               </Button>
               <div className="flex justify-center gap-2">
                 <p className="text-sm">Already Have An Account?</p>
-                <Link className="text-sm text-orange-500" href={"#"}>
+                <Link className="text-sm text-orange-500" href={"/login"}>
                   Login
                 </Link>
               </div>

src/app/(landing-routes)/contact-us/page.tsx

@@ -1,4 +1,5 @@
 import { ArrowRight } from "lucide-react";
+import Link from "next/link";
 
 import ContactForm from "~/components/common/contact-us-form";
 import { bizTime, contactInfo } from "./constants";
@@ -40,19 +41,22 @@ const Contact = () => {
                 ))}
               </div>
             </div>
-            <div className="gap-2 max-lg:grid">
-              <div className="flex justify-between">
-                <h2 className="text-xl font-semibold text-primary underline underline-offset-2">
-                  FAQ
-                </h2>
-                <div>
-                  <ArrowRight className="text-primary" />
+
+            <Link href={"/faqs"}>
+              <div className="gap-2 max-lg:grid">
+                <div className="flex justify-between">
+                  <h2 className="text-xl font-semibold text-primary underline underline-offset-2">
+                    FAQ
+                  </h2>
+                  <div>
+                    <ArrowRight className="text-primary" />
+                  </div>
                 </div>
+                <p className="texl-lg">
+                  See and get answers to the most frequent asked questions
+                </p>
               </div>
-              <p className="texl-lg">
-                See and get answers to the most frequent asked questions
-              </p>
-            </div>
+            </Link>
           </div>
         </div>
       </section>

src/app/dashboard/(admin)/_components/layout/navbar/index.tsx

@@ -2,6 +2,7 @@
 
 import { BellIcon, HelpCircle, SearchIcon } from "lucide-react";
 import { useSession } from "next-auth/react";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 
@@ -109,10 +110,12 @@ const DashboardNavbar = () => {
               <span className="absolute right-1 top-0 h-[6px] w-[6px] rounded-full bg-error"></span>
             </div>
             <div>
-              <HelpCircle
-                data-testid="help"
-                className="h-6 w-6 text-neutral-dark-2 transition-colors duration-300 hover:cursor-pointer hover:text-neutral-dark-1"
-              />
+              <Link href={"/help-center"}>
+                <HelpCircle
+                  data-testid="help"
+                  className="h-6 w-6 text-neutral-dark-2 transition-colors duration-300 hover:cursor-pointer hover:text-neutral-dark-1"
+                />
+              </Link>
             </div>
             <div className="hover:bg-black-1 flex w-full max-w-[64px] cursor-pointer items-center justify-between gap-2">
               <UserCard />

src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx

@@ -11,7 +11,7 @@ import CustomButton from "~/components/common/common-button/common-button";
 import PasswordSuccessfulModal from "~/components/common/modals/password-successful";
 import { toast } from "~/components/ui/use-toast";
 import { cn } from "~/lib/utils";
-import { passwordSchema, type PasswordFormData } from "./schema";
+import { PasswordFormData, passwordSchema } from "./schema";
 
 const Password = () => {
   const { data } = useSession();
@@ -29,6 +29,10 @@ const Password = () => {
     mode: "all",
   });
 
+  const clearPassword = () => {
+    reset();
+  };
+
   const submitHandler = async (values: PasswordFormData) => {
     try {
       setIsPending(true);
@@ -142,11 +146,7 @@ const Password = () => {
           </div>
         </div>
         <div className="flex items-center justify-start gap-6">
-          <CustomButton
-            type="button"
-            variant="outline"
-            onClick={() => setOpen(false)}
-          >
+          <CustomButton variant="outline" onClick={clearPassword}>
             Cancel
           </CustomButton>
           <CustomButton

src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx

@@ -36,6 +36,8 @@ export default function SettingsPage() {
   const [isPending, setIsPending] = useState(false);
 
   const [pronoun, setPronoun] = useState("");
+  const [bioCharacterLeft, setBioCharacterLeft] = useState(64);
+  const [isbioCharacterExceeded, setIsBioCharacterExceeded] = useState(false);
 
   const [profilePicture, setProfilePicture] = useState<string | undefined>();
 
@@ -45,6 +47,11 @@ export default function SettingsPage() {
     linkedin: "",
   });
 
+  const checkCharacterLeft = () => {
+    const bioLength: number = formData.bio.length;
+    setBioCharacterLeft(64 - bioLength);
+    setIsBioCharacterExceeded(bioLength > 50);
+  };
   const linksDataHandler = (
     event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
@@ -317,13 +324,17 @@ export default function SettingsPage() {
           </label>
           <Textarea
             name="bio"
+            maxLength={64}
+            onKeyUp={checkCharacterLeft}
             value={formData.bio}
             onChange={formDataHandler}
             className="resize-none bg-white text-[#020817]"
           />
           <div className="border-b-[1px] border-b-[#e4e2e2]">
-            <p className="pb-[24px] pt-2 text-[14px] text-[#64748B]">
-              Maximum of 64 characters
+            <p
+              className={`pb-[24px] pt-2 text-[14px] ${isbioCharacterExceeded ? "text-red-400" : "text-[#64748B]"} `}
+            >
+              Maximum of 64 characters (character left : {bioCharacterLeft})
             </p>
           </div>
         </div>

src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { BellIcon, HelpCircle } from "lucide-react";
+import Link from "next/link";
 
 import UnreadNotificationCard from "~/app/dashboard/(admin)/_components/unread-notification-card/UnreadNotificationCard";
 import { MobileNavlinks } from "~/app/dashboard/(user-dashboard)/_components/layout/navbar/mobile-navlinks";
@@ -67,11 +68,12 @@ const UserNavbar = () => {
             )}
           </div>
           <div className="max-sm:hidden">
-            <HelpCircle
-              data-testid="help"
-              aria-label="Help"
-              className="h-6 w-6 text-neutral-dark-2 transition-colors duration-300 hover:cursor-pointer hover:text-neutral-dark-1"
-            />
+            <Link href={"/help-center"}>
+              <HelpCircle
+                data-testid="help"
+                className="h-6 w-6 text-neutral-dark-2 transition-colors duration-300 hover:cursor-pointer hover:text-neutral-dark-1"
+              />
+            </Link>
           </div>
           <div className="pr-1">
             <UserCard />

src/components/layouts/footer/index.tsx

@@ -157,7 +157,7 @@ const Footer = () => {
   ];
 
   return (
-    <footer className="bg-background dark:bg-default">
+    <footer className="bg-[#FAFAFA] dark:bg-default">
       <div className="px-4">
         <div className="mx-auto w-full max-w-[1200px] items-start justify-between gap-[60px] pb-[130px] pt-[28px] sm:grid-cols-2 md:gap-4 md:pb-[46px] md:pt-[72px] lg:flex">
           <div className="mb-[100px] max-w-[272px] shrink-0 px-2.5 lg:mb-0">