Update Senior View (#168)

* Allow color update for assignment * Use initials * Update border * Fix css space * Add color consistency * Remove log * Fix merge conflicts (#169) * Fix merge conflicts * Restore space * fix text color for inputs/text areas --------- Co-authored-by: wkim10 <[email protected]> --------- Co-authored-by: wkim10 <[email protected]>
JumboCode · Apr 19, 2024 · e9f078b · e9f078b
1 parent 3a2312c
commit e9f078b
Show file tree

Hide file tree

Showing 15 changed files with 135 additions and 79 deletions.
diff --git a/src/components/DisplayChapterInfo.tsx b/src/components/DisplayChapterInfo.tsx
@@ -107,7 +107,7 @@ const DisplayChapterInfo = ({
         ].map((value) => (
           <div
             key={value}
-            className="whitespace-nowrap rounded bg-dark-teal p-2.5 font-light text-white"
+            className="whitespace-nowrap rounded-3xl bg-amber-red px-3 py-1 font-light text-white"
           >
             {value}
           </div>

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -6,6 +6,7 @@ import Link from "next/link";
 import { useAuth } from "@hooks";
 import logoicon from "../../public/landing/newlegacy-logo.svg";
 import Image from "next/image";
+import { usePathname } from "next/navigation";
 
 const NAV_ITEMS = [
   {
@@ -27,6 +28,7 @@ const Navbar = () => {
   const handleMenuClick: React.MouseEventHandler = () => {
     setDropdownVisible((visible) => !visible);
   };
+  const path = usePathname();
 
   const { status, onSignIn } = useAuth();
   useEffect(() => {
@@ -91,14 +93,18 @@ const Navbar = () => {
             href={href}
             onClick={() => setDropdownVisible(false)}
           >
-            <div className="m-auto font-bold text-dark-teal duration-150 hover:-translate-y-0.5">
+            <div
+              className={`m-auto font-bold duration-150 hover:-translate-y-0.5 ${
+                path.startsWith(href) ? "text-dark-teal" : ""
+              }`}
+            >
               {name}
             </div>
           </Link>
         ))}
 
         <button onClick={onSignIn}>
-          <div className=" m-auto font-bold text-dark-teal duration-150 hover:-translate-y-0.5">
+          <div className=" m-auto font-bold duration-150 hover:-translate-y-0.5">
             {status === "authenticated" ? "Home" : "Sign In"}
           </div>
         </button>

diff --git a/src/components/NewChapterForm.tsx b/src/components/NewChapterForm.tsx
@@ -55,14 +55,14 @@ const NewChapterForm = () => {
 
   return (
     <div className="grid place-items-center">
-      <div className="w-full rounded-md bg-dark-teal px-9 py-10 text-lg text-white">
+      <div className="w-full rounded-md bg-dark-teal px-9 py-10 text-lg">
         <form onSubmit={handleSubmit(onSubmit)}>
           <div className="grid grid-cols-2 gap-x-10 gap-y-5">
             <div className="col-span-2 flex w-full flex-col gap-y-1 md:col-span-1">
-              <div>First Name</div>
+              <div className="text-white">First Name</div>
               <input
                 {...register("firstName", { onChange: resetForm })}
-                className="h-8 w-full rounded-md px-2 py-2 text-black"
+                className="h-8 w-full rounded-md px-2 py-2"
               />
               <ErrorMessage
                 errors={errors}
@@ -74,16 +74,16 @@ const NewChapterForm = () => {
                       className="text-sunset-orange"
                       size="xs"
                     />
-                    <p>{message}</p>
+                    <p className="text-white">{message}</p>
                   </p>
                 )}
               />
             </div>
             <div className="col-span-2 flex w-full flex-col gap-y-1 md:col-span-1">
-              <div>Last Name</div>
+              <div className="text-white">Last Name</div>
               <input
                 {...register("lastName", { onChange: resetForm })}
-                className="h-8 w-full rounded-md px-2 py-2 text-black"
+                className="h-8 w-full rounded-md px-2 py-2"
               />
               <ErrorMessage
                 errors={errors}
@@ -95,16 +95,16 @@ const NewChapterForm = () => {
                       className="text-sunset-orange"
                       size="xs"
                     />
-                    <p>{message}</p>
+                    <p className="text-white">{message}</p>
                   </p>
                 )}
               />
             </div>
             <div className="col-span-2 flex w-full flex-col gap-y-1 md:col-span-1">
-              <div>University Email</div>
+              <div className="text-white">University Email</div>
               <input
                 {...register("universityEmail", { onChange: resetForm })}
-                className="h-8 w-full rounded-md px-2 py-2 text-black"
+                className="h-8 w-full rounded-md px-2 py-2"
               />
               <ErrorMessage
                 errors={errors}
@@ -116,16 +116,16 @@ const NewChapterForm = () => {
                       className="text-sunset-orange"
                       size="xs"
                     />
-                    <p>{message}</p>
+                    <p className="text-white">{message}</p>
                   </p>
                 )}
               />
             </div>
             <div className="col-span-2 flex w-full flex-col gap-y-1 md:col-span-1">
-              <div>Phone Number</div>
+              <div className="text-white">Phone Number</div>
               <input
                 {...register("phoneNumber", { onChange: resetForm })}
-                className="h-8 w-full rounded-md px-2 py-2 text-black"
+                className="h-8 w-full rounded-md px-2 py-2"
               />
               <ErrorMessage
                 errors={errors}
@@ -137,16 +137,16 @@ const NewChapterForm = () => {
                       className="text-sunset-orange"
                       size="xs"
                     />
-                    <p>{message}</p>
+                    <p className="text-white">{message}</p>
                   </p>
                 )}
               />
             </div>
             <div className="col-span-2 flex w-full flex-col gap-y-1 md:col-span-1">
-              <div>College / University</div>
+              <div className="text-white">College / University</div>
               <input
                 {...register("university", { onChange: resetForm })}
-                className="h-8 w-full rounded-md px-2 py-2 text-black"
+                className="h-8 w-full rounded-md px-2 py-2"
               />
               <ErrorMessage
                 errors={errors}
@@ -158,16 +158,16 @@ const NewChapterForm = () => {
                       className="text-sunset-orange"
                       size="xs"
                     />
-                    <p>{message}</p>
+                    <p className="text-white">{message}</p>
                   </p>
                 )}
               />
             </div>
             <div className="col-span-2 flex w-full flex-col gap-y-1 md:col-span-1">
-              <div>College / University Address</div>
+              <div className="text-white">College / University Address</div>
               <input
                 {...register("universityAddress", { onChange: resetForm })}
-                className="h-8 w-full rounded-md px-2 py-2 text-black"
+                className="h-8 w-full rounded-md px-2 py-2"
               />
               <ErrorMessage
                 errors={errors}
@@ -179,21 +179,21 @@ const NewChapterForm = () => {
                       className="text-sunset-orange"
                       size="xs"
                     />
-                    <p>{message}</p>
+                    <p className="text-white">{message}</p>
                   </p>
                 )}
               />
             </div>
           </div>
           <div className="pt-5">
             <div className="flex flex-col gap-y-1">
-              <div>
+              <div className="text-white">
                 Do you have any experience in student leadership / club
                 organization / storytelling?
               </div>
               <textarea
                 {...register("leadershipExperience", { onChange: resetForm })}
-                className="h-18 w-full resize-none rounded-md px-2 py-2 align-top text-black"
+                className="h-18 w-full resize-none rounded-md px-2 py-2 align-top"
               />
               <ErrorMessage
                 errors={errors}
@@ -205,18 +205,18 @@ const NewChapterForm = () => {
                       className="text-sunset-orange"
                       size="xs"
                     />
-                    <p>{message}</p>
+                    <p className="text-white">{message}</p>
                   </p>
                 )}
               />
             </div>
             <div className="flex flex-col gap-y-1 pt-5">
-              <div>
-                What motivates you to start this initiative in your community?{" "}
+              <div className="text-white">
+                What motivates you to start this initiative in your community?
               </div>
               <textarea
                 {...register("motivation", { onChange: resetForm })}
-                className="h-18 w-full resize-none rounded-md px-2 py-2 align-top text-black"
+                className="h-18 w-full resize-none rounded-md px-2 py-2 align-top"
               />
               <ErrorMessage
                 errors={errors}
@@ -228,19 +228,19 @@ const NewChapterForm = () => {
                       className="text-sunset-orange"
                       size="xs"
                     />
-                    <p>{message}</p>
+                    <p className="text-white">{message}</p>
                   </p>
                 )}
               />
             </div>
             <div className="flex flex-col gap-y-1 pt-5">
-              <div>
+              <div className="text-white">
                 Please list three 1 hour time blocks with your avalibility in
-                the next week{" "}
+                the next week
               </div>
               <input
                 {...register("availabilities", { onChange: resetForm })}
-                className="h-8 w-full rounded-md px-2 py-2 text-black"
+                className="h-8 w-full rounded-md px-2 py-2"
                 placeholder="Include the date (mm-dd-yyyy), time (hh:mm am/pm), and your timezone"
               />
               <ErrorMessage
@@ -253,16 +253,18 @@ const NewChapterForm = () => {
                       className="text-sunset-orange"
                       size="xs"
                     />
-                    <p>{message}</p>
+                    <p className="text-white">{message}</p>
                   </p>
                 )}
               />
             </div>
             <div className="flex flex-col gap-y-1 pt-5">
-              <div>What questions do you have for us? </div>
+              <div className="text-white">
+                What questions do you have for us?
+              </div>
               <textarea
                 {...register("questions", { onChange: resetForm })}
-                className="h-12 w-full resize-none rounded-md px-2 py-1 align-top text-black"
+                className="h-12 w-full resize-none rounded-md px-2 py-1 align-top"
               />
             </div>
           </div>
@@ -276,12 +278,12 @@ const NewChapterForm = () => {
               <Spinner width={12} height={12} />
             )}
             {formSubmitted === FormSubmission.SUBMITTED ? (
-              <div className="pt-5 text-sm">
+              <div className="pt-5 text-sm text-white">
                 Your form has been submitted. Our admin will be in touch with
                 you soon!
               </div>
             ) : formSubmitted === FormSubmission.ERROR ? (
-              <div className="pt-5 text-sm">
+              <div className="pt-5 text-sm text-white">
                 There was an error processing your form. Please try again.
               </div>
             ) : null}

diff --git a/src/components/PathNav.tsx b/src/components/PathNav.tsx
@@ -30,9 +30,7 @@ const PathNav = ({ pathInfo }: PathNavParams) => {
           {index !== 0 && <div className="px-2">&gt;</div>}
           <Link
             href={getPath(index, currPath.url)}
-            className={
-              index === array.length - 1 ? "text-dark-teal" : "text-black"
-            }
+            className={index === array.length - 1 ? "text-dark-teal" : ""}
           >
             {currPath.display}
           </Link>

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -14,6 +14,7 @@ import Logo from "@public/icons/logo.svg";
 import Image from "next/image";
 import { RoleAlias } from "@constants/RoleAlias";
 import { fullName } from "@utils";
+import { usePathname } from "next/navigation";
 
 interface Button {
   name: string;
@@ -28,13 +29,19 @@ export interface ISideBar {
 const SidebarItem = ({
   label,
   iconName,
+  active,
 }: {
   label: string;
   iconName: IconDefinition;
+  active: boolean;
 }) => {
   return (
-    <div className="flex w-full space-x-4 text-left duration-150 hover:translate-x-1">
-      <div className="flex w-1/6 items-center justify-center">
+    <div
+      className={`flex w-full items-center space-x-4 text-left duration-150 hover:translate-x-1 ${
+        active ? "text-dark-teal" : ""
+      }`}
+    >
+      <div className="flex w-1/6 justify-center">
         <FontAwesomeIcon icon={iconName} size="lg" />
       </div>
       <div className="flex w-5/6 items-center text-xl">{label}</div>
@@ -44,6 +51,8 @@ const SidebarItem = ({
 
 const _Sidebar = ({ buttons }: ISideBar) => {
   const { user } = React.useContext(UserContext);
+  const path = usePathname();
+
   return (
     <nav className="h-screen w-full overflow-y-auto bg-med-tan pb-32 pt-20">
       <div className="flex h-full flex-col items-center justify-between">
@@ -56,7 +65,11 @@ const _Sidebar = ({ buttons }: ISideBar) => {
           <div className="flex w-full flex-col space-y-6">
             {buttons.map((data) => (
               <Link key={data.name} href={data.link}>
-                <SidebarItem label={data.name} iconName={data.icon} />
+                <SidebarItem
+                  label={data.name}
+                  iconName={data.icon}
+                  active={path.startsWith(data.link)}
+                />
               </Link>
             ))}
           </div>
@@ -82,7 +95,11 @@ const _Sidebar = ({ buttons }: ISideBar) => {
             {RoleAlias[user.role]}
           </div>
           <button onClick={() => signOut({ callbackUrl: "/public/" })}>
-            <SidebarItem label="Sign Out" iconName={faArrowRightFromBracket} />
+            <SidebarItem
+              label="Sign Out"
+              iconName={faArrowRightFromBracket}
+              active={false}
+            />
           </button>
         </div>
       </div>

diff --git a/src/components/TabButtons.tsx b/src/components/TabButtons.tsx
@@ -35,7 +35,7 @@ const TabButtons = ({ queries }: TabButtonsProps) => {
               <Link
                 href={href}
                 className={`text-xl uppercase ${
-                  isTabSelected ? "text-dark-teal" : "text-black"
+                  isTabSelected ? "text-dark-teal" : ""
                 }`}
               >
                 {name}