From e9f078b98e22f24ecad48e2c383ffff4ca05c169 Mon Sep 17 00:00:00 2001
From: Nick Doan <nickbar01234@gmail.com>
Date: Thu, 18 Apr 2024 22:56:25 -0400
Subject: [PATCH] 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 <wkim10@tufts.edu>

---------

Co-authored-by: wkim10 <wkim10@tufts.edu>
---
 src/components/DisplayChapterInfo.tsx         |  2 +-
 src/components/Navbar.tsx                     | 10 ++-
 src/components/NewChapterForm.tsx             | 70 ++++++++++---------
 src/components/PathNav.tsx                    |  4 +-
 src/components/Sidebar.tsx                    | 25 +++++--
 src/components/TabButtons.tsx                 |  2 +-
 src/components/TileGrid/UserTile.tsx          | 29 +++-----
 src/components/container/HeaderContainer.tsx  |  2 +-
 src/components/selector/Dropdown.tsx          | 32 ++++++---
 .../index.tsx => selector/assignment.tsx}     |  8 ++-
 src/components/selector/index.tsx             |  1 +
 src/components/senior/DisplaySenior.tsx       | 11 ++-
 src/components/user/DisplayUserSeniors.tsx    |  3 +-
 src/styles/globals.css                        |  6 ++
 src/utils/index.tsx                           |  9 +++
 15 files changed, 135 insertions(+), 79 deletions(-)
 rename src/components/{senior/assignment/index.tsx => selector/assignment.tsx} (86%)

diff --git a/src/components/DisplayChapterInfo.tsx b/src/components/DisplayChapterInfo.tsx
index 4b94caa1..01aa4c14 100644
--- 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
index 8ce36b3b..fc20d302 100644
--- 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
index b8edffd6..1eb54433 100644
--- 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,7 +179,7 @@ const NewChapterForm = () => {
                       className="text-sunset-orange"
                       size="xs"
                     />
-                    <p>{message}</p>
+                    <p className="text-white">{message}</p>
                   </p>
                 )}
               />
@@ -187,13 +187,13 @@ const NewChapterForm = () => {
           </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
index d630fe1f..1f86b49e 100644
--- 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
index 55c1e052..33e02cf8 100644
--- 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
index 77befadd..223e4bf3 100644
--- 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}
diff --git a/src/components/TileGrid/UserTile.tsx b/src/components/TileGrid/UserTile.tsx
index 84522ca3..70d90941 100644
--- a/src/components/TileGrid/UserTile.tsx
+++ b/src/components/TileGrid/UserTile.tsx
@@ -1,11 +1,10 @@
 "use client";
 
 import { Senior, User } from "@prisma/client";
-import Image from "next/legacy/image";
 import Link from "next/link";
 import React, { ReactNode } from "react";
 import "@fontsource/merriweather";
-import { fullName, seniorFullName } from "@utils";
+import { fullName, seniorFullName, seniorInitial, userInitial } from "@utils";
 
 interface UserTileProps {
   student?: User;
@@ -30,23 +29,15 @@ export function UserTile({
           }
         >
           <div className="h-full w-full object-cover">
-            {student ? (
-              <Image
-                src={
-                  (student && student.image) ?? "/profile/genericprofile.png"
-                }
-                alt="Placeholder profile image"
-                layout="fill"
-                className="max-h-full max-w-full rounded-lg"
-              />
-            ) : (
-              <Image
-                src={"/profile/seniorprofile_icon.png"}
-                alt="Placeholder profile image"
-                layout="fill"
-                className="max-h-full max-w-full rounded-lg"
-              />
-            )}
+            <div className="flex h-full w-full items-center justify-center rounded-lg bg-dark-teal">
+              <span className="text-3xl text-white">
+                {senior != undefined
+                  ? seniorInitial(senior)
+                  : student != undefined
+                  ? userInitial(student)
+                  : null}
+              </span>
+            </div>
           </div>
         </Link>
       </div>
diff --git a/src/components/container/HeaderContainer.tsx b/src/components/container/HeaderContainer.tsx
index 6f5814da..786eeb3c 100644
--- a/src/components/container/HeaderContainer.tsx
+++ b/src/components/container/HeaderContainer.tsx
@@ -15,7 +15,7 @@ const HeaderContainer = (props: IHeaderContainer) => {
     <div className="h-full w-full">
       <div className="flex w-full items-center space-x-4">
         <FontAwesomeIcon className="h-6 w-6" icon={headerIcon} />
-        <h1 className="text-xl text-black">{header}</h1>
+        <h1 className="text-xl">{header}</h1>
       </div>
       {showHorizontalLine && (
         <hr className="mt-6 w-full border-t border-black" />
diff --git a/src/components/selector/Dropdown.tsx b/src/components/selector/Dropdown.tsx
index bc1466df..35675651 100644
--- a/src/components/selector/Dropdown.tsx
+++ b/src/components/selector/Dropdown.tsx
@@ -13,10 +13,11 @@ interface DropdownProps<T extends IdentifiableObject> {
   setSelected: React.Dispatch<React.SetStateAction<T[]>>;
   onSave: () => Promise<any>;
   multipleChoice?: boolean;
+  tagColor?: string;
 }
 
 const Dropdown = <T extends IdentifiableObject>(props: DropdownProps<T>) => {
-  const { header, display, elements, selected, setSelected } = props;
+  const { header, display, elements, selected, setSelected, tagColor } = props;
   const multipleChoice = props.multipleChoice ?? true;
   const [displayDropdown, setDisplayDropdown] = React.useState(false);
   const [loading, setLoading] = React.useState(false);
@@ -54,35 +55,47 @@ const Dropdown = <T extends IdentifiableObject>(props: DropdownProps<T>) => {
   };
 
   // TODO(nickbar01234) - Handle click outside
+
+  const hexColor = tagColor ?? "#22555A";
+
   return (
     <div className="relative w-full">
       <div
-        className="flex cursor-pointer items-center justify-between rounded-lg border border-dark-teal bg-tan px-4 py-1.5"
+        className={`flex cursor-pointer items-center justify-between rounded-lg border bg-tan px-4 py-1.5`}
         onClick={onDisplayDropdown}
+        style={{ borderColor: tagColor ?? "#22555A" }}
       >
-        <span className="text-dark-teal">{header}</span>
-        <FontAwesomeIcon icon={faCaretDown} className="text-dark-teal" />
+        <span style={{ color: hexColor }}>{header}</span>
+        <FontAwesomeIcon icon={faCaretDown} style={{ color: hexColor }} />
       </div>
       {displayDropdown && (
-        <div className="absolute z-50 mt-2 inline-block w-full rounded border border-dark-teal bg-tan p-4">
+        <div
+          className="absolute z-50 mt-2 inline-block w-full rounded border bg-tan p-4"
+          style={{ borderColor: hexColor }}
+        >
           <div className="flex min-h-[128px] flex-col justify-between gap-y-3">
             <div className="flex max-h-[128px] flex-col gap-y-3 overflow-y-auto">
               {elements.map((element, idx) => (
                 <div
                   key={idx}
-                  className="flex cursor-pointer items-center gap-1.5 text-dark-teal"
+                  className="flex cursor-pointer items-center gap-1.5"
                   onClick={(e) => onCheck(e, element)}
+                  style={{ color: hexColor }}
                 >
                   <button
-                    className={`flex h-4 w-4 items-center justify-center border-2 border-dark-teal ${
+                    className={`flex h-4 w-4 items-center justify-center border-2 ${
                       !multipleChoice && "rounded-full"
                     }`}
+                    style={{ borderColor: hexColor }}
                   >
                     {selected.some((other) => element.id === other.id) &&
                       (multipleChoice ? (
                         <FontAwesomeIcon icon={faCheck} size="xs" />
                       ) : (
-                        <div className="h-full w-full bg-dark-teal" />
+                        <div
+                          className="h-full w-full"
+                          style={{ backgroundColor: hexColor }}
+                        />
                       ))}
                   </button>
                   <span className="overflow-hidden truncate">
@@ -97,8 +110,9 @@ const Dropdown = <T extends IdentifiableObject>(props: DropdownProps<T>) => {
               </div>
             ) : (
               <button
-                className="rounded bg-dark-teal px-6 py-2.5 text-white"
+                className="rounded px-6 py-2.5 text-white"
                 onClick={onSave}
+                style={{ backgroundColor: hexColor }}
               >
                 Save Changes
               </button>
diff --git a/src/components/senior/assignment/index.tsx b/src/components/selector/assignment.tsx
similarity index 86%
rename from src/components/senior/assignment/index.tsx
rename to src/components/selector/assignment.tsx
index 2c6aa13a..0aa39148 100644
--- a/src/components/senior/assignment/index.tsx
+++ b/src/components/selector/assignment.tsx
@@ -13,6 +13,7 @@ interface AssignmentProps<T extends IdentifiableObject> {
   setSelected: React.Dispatch<React.SetStateAction<T[]>>;
   onSave: () => Promise<any>;
   multipleChoice?: boolean;
+  tagColor?: string;
 }
 
 const Assignment = <T extends IdentifiableObject>(
@@ -27,6 +28,7 @@ const Assignment = <T extends IdentifiableObject>(
     setSelected,
     onSave,
     multipleChoice,
+    tagColor,
   } = props;
   const router = useRouter();
 
@@ -45,13 +47,17 @@ const Assignment = <T extends IdentifiableObject>(
               await onSave();
               router.refresh();
             }}
+            tagColor={tagColor}
           />
         </div>
       )}
       {selected.map((elem) => (
         <div
           key={elem.id}
-          className="rounded-3xl bg-dark-teal px-4 py-1.5 text-white"
+          className={`flex items-center rounded-3xl px-3 py-1 text-white`}
+          style={{
+            background: tagColor ?? "#22555A",
+          }}
         >
           {display(elem)}
         </div>
diff --git a/src/components/selector/index.tsx b/src/components/selector/index.tsx
index 915a928d..3617f28e 100644
--- a/src/components/selector/index.tsx
+++ b/src/components/selector/index.tsx
@@ -1 +1,2 @@
 export { default as Dropdown } from "./Dropdown";
+export { default as Assignment } from "./assignment";
diff --git a/src/components/senior/DisplaySenior.tsx b/src/components/senior/DisplaySenior.tsx
index cff63eaf..6837fb77 100644
--- a/src/components/senior/DisplaySenior.tsx
+++ b/src/components/senior/DisplaySenior.tsx
@@ -6,11 +6,10 @@ import { compareUser, formatFileDate, fullName, seniorFullName } from "@utils";
 import { File } from "@components/file";
 import AddFile from "@components/file/AddFile";
 import { v4 as uuid } from "uuid";
-import Assignment from "./assignment";
+import { Assignment } from "@components/selector";
 import { patchSenior } from "@api/senior/[id]/route.client";
 import React from "react";
 import { useApiThrottle } from "@hooks";
-import { UserContext } from "@context/UserProvider";
 
 interface DisplayProps {
   editable: boolean;
@@ -23,7 +22,6 @@ interface DisplayProps {
 const DisplaySenior = (props: DisplayProps) => {
   const { editable, canAddFile, senior } = props;
   const addFileId = uuid();
-  const userContext = React.useContext(UserContext);
 
   const students = React.useMemo(
     () => senior.chapter.students.sort(compareUser),
@@ -56,6 +54,12 @@ const DisplaySenior = (props: DisplayProps) => {
       <h1 className="text-4xl font-bold text-[#000022]">
         {seniorFullName(senior)}
       </h1>
+      {senior.location.length > 0 && (
+        <p>
+          <b>Meeting Location: </b>
+          <span>{senior.location}</span>
+        </p>
+      )}
       <p>{senior.description}</p>
       <Assignment
         header="Assign members"
@@ -65,6 +69,7 @@ const DisplaySenior = (props: DisplayProps) => {
         selected={assigned}
         setSelected={setAssigned}
         onSave={onSave}
+        tagColor="#A96257"
       />
       <SearchableContainer
         display={(file) => (
diff --git a/src/components/user/DisplayUserSeniors.tsx b/src/components/user/DisplayUserSeniors.tsx
index 2bb2726d..2fdf2c21 100644
--- a/src/components/user/DisplayUserSeniors.tsx
+++ b/src/components/user/DisplayUserSeniors.tsx
@@ -3,7 +3,7 @@
 import { editSeniorIDs } from "@api/user/[uid]/edit-seniors/route.client";
 import { UserTile } from "@components/TileGrid";
 import { CardGrid } from "@components/container";
-import Assignment from "@components/senior/assignment";
+import { Assignment } from "@components/selector";
 import { RoleToUrlSegment } from "@constants/RoleAlias";
 import { useApiThrottle } from "@hooks";
 import { Prisma, Senior } from "@prisma/client";
@@ -58,6 +58,7 @@ const DisplayUserSenior = (props: DisplayProps) => {
         selected={assigned}
         setSelected={setAssigned}
         onSave={onSave}
+        tagColor="#A96257"
       />
       <CardGrid
         tiles={assigned.map((eachSenior) => (
diff --git a/src/styles/globals.css b/src/styles/globals.css
index b5c61c95..3f3921a0 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  html {
+    @apply text-[#000022];
+  }
+}
diff --git a/src/utils/index.tsx b/src/utils/index.tsx
index 6dfe7871..97c8e523 100644
--- a/src/utils/index.tsx
+++ b/src/utils/index.tsx
@@ -48,9 +48,18 @@ export const formatFileDate = (date: Date) =>
 
 export const fullName = (user: User) => `${user.firstName} ${user.lastName}`;
 
+const initials = (firstName: string, lastName: string) =>
+  `${firstName[0] ?? ""}${lastName[0] ?? ""}`;
+
+export const userInitial = (user: User) =>
+  initials(user.firstName, user.lastName);
+
 export const seniorFullName = (senior: Senior) =>
   `${senior.firstname} ${senior.lastname}`;
 
+export const seniorInitial = (senior: Senior) =>
+  initials(senior.firstname, senior.lastname);
+
 export const sortedStudents = (students: User[]) => {
   const positionOrder: PositionOrder = {
     "Social Coordinator": 0,