Resolved merge conflicts

client/src/App.jsx

@@ -73,12 +73,11 @@ const App = () => {
                 />
                 <Route
                   path="/programs/edit/:id"
-                  element={<EditProgram />}
-                  // element={
-                  //   <ProtectedRoute
-                  //     element={<EditProgram />}
-                  //   />
-                  // }
+                  element={
+                    <ProtectedRoute
+                      element={<EditProgram />}
+                    />
+                  }
                 />
               </Routes>
             </Router>

client/src/assets/InvoiceIcon.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const InvoiceIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
+      <path fillRule="evenodd" clipRule="evenodd" d="M3.33325 2.79452C3.33325 2.5735 3.42105 2.36154 3.57733 2.20526C3.73361 2.04898 3.94557 1.96118 4.16659 1.96118H15.8333C16.0543 1.96118 16.2662 2.04898 16.4225 2.20526C16.5788 2.36154 16.6666 2.5735 16.6666 2.79452V17.7945C16.6666 17.9538 16.6209 18.1098 16.535 18.2439C16.4491 18.3781 16.3266 18.4848 16.1819 18.5515C16.0372 18.6181 15.8764 18.6419 15.7186 18.62C15.5608 18.5981 15.4126 18.5314 15.2916 18.4278L14.4308 17.6903C14.2797 17.561 14.0875 17.4899 13.8887 17.4899C13.6899 17.4899 13.4976 17.561 13.3466 17.6903L12.4866 18.427C12.3355 18.5566 12.1431 18.6278 11.9441 18.6278C11.7451 18.6278 11.5526 18.5566 11.4016 18.427L10.5424 17.6903C10.3914 17.5608 10.1989 17.4896 9.99992 17.4896C9.80091 17.4896 9.60848 17.5608 9.45742 17.6903L8.59825 18.427C8.44719 18.5566 8.25476 18.6278 8.05575 18.6278C7.85675 18.6278 7.66431 18.5566 7.51325 18.427L6.65325 17.6903C6.50225 17.561 6.30998 17.4899 6.11117 17.4899C5.91235 17.4899 5.72009 17.561 5.56909 17.6903L4.70909 18.427C4.5881 18.5308 4.43989 18.5977 4.28204 18.6197C4.12419 18.6418 3.96332 18.6182 3.8185 18.5516C3.67369 18.485 3.551 18.3783 3.46499 18.2441C3.37899 18.1099 3.33326 17.9539 3.33325 17.7945V2.79452ZM7.49992 5.29452C7.2789 5.29452 7.06694 5.38231 6.91066 5.53859C6.75438 5.69487 6.66659 5.90683 6.66659 6.12785C6.66659 6.34886 6.75438 6.56082 6.91066 6.7171C7.06694 6.87338 7.2789 6.96118 7.49992 6.96118H12.4999C12.7209 6.96118 12.9329 6.87338 13.0892 6.7171C13.2455 6.56082 13.3333 6.34886 13.3333 6.12785C13.3333 5.90683 13.2455 5.69487 13.0892 5.53859C12.9329 5.38231 12.7209 5.29452 12.4999 5.29452H7.49992ZM7.49992 8.62785C7.2789 8.62785 7.06694 8.71565 6.91066 8.87193C6.75438 9.02821 6.66659 9.24017 6.66659 9.46118C6.66659 9.6822 6.75438 9.89416 6.91066 10.0504C7.06694 10.2067 7.2789 10.2945 7.49992 10.2945H12.4999C12.7209 10.2945 12.9329 10.2067 13.0892 10.0504C13.2455 9.89416 13.3333 9.6822 13.3333 9.46118C13.3333 9.24017 13.2455 9.02821 13.0892 8.87193C12.9329 8.71565 12.7209 8.62785 12.4999 8.62785H7.49992ZM8.33325 12.7945C8.33325 12.5735 8.42105 12.3615 8.57733 12.2053C8.73361 12.049 8.94557 11.9612 9.16658 11.9612H12.4999C12.7209 11.9612 12.9329 12.049 13.0892 12.2053C13.2455 12.3615 13.3333 12.5735 13.3333 12.7945C13.3333 13.0155 13.2455 13.2275 13.0892 13.3838C12.9329 13.5401 12.7209 13.6278 12.4999 13.6278H9.16658C8.94557 13.6278 8.73361 13.5401 8.57733 13.3838C8.42105 13.2275 8.33325 13.0155 8.33325 12.7945Z" fill="#474849"/>
+    </svg>
+  );
+};

client/src/assets/NotificationsIcon.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const NotificationsIcon = () => {
+  return (
+    <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.738 15.8961C12.4106 15.8961 12.766 16.7153 12.3173 17.2305C12.0256 17.5658 11.6684 17.834 11.2691 18.0176C10.8698 18.2012 10.4374 18.2961 10 18.2961C9.56265 18.2961 9.1302 18.2012 8.73091 18.0176C8.33161 17.834 7.97444 17.5658 7.68272 17.2305C7.25348 16.7377 7.55986 15.9673 8.17573 15.9017L8.26127 15.8969L11.738 15.8961ZM10 2.29614C11.056 2.29614 11.9487 3.01854 12.2357 4.00894L12.2714 4.14574L12.2776 4.18014C13.135 4.67751 13.8656 5.37683 14.4095 6.22078C14.9534 7.06473 15.2952 8.02927 15.4068 9.03534L15.4285 9.26494L15.4433 9.49614V11.8409L15.4596 11.9497C15.5661 12.5392 15.8832 13.0663 16.3485 13.4273L16.4783 13.5209L16.6043 13.6001C17.273 13.9897 17.0398 15.0129 16.3111 15.0913L16.2209 15.0961H3.77909C2.9797 15.0961 2.70054 14.0049 3.39573 13.6001C3.69202 13.4276 3.94803 13.1905 4.14577 12.9054C4.34351 12.6203 4.4782 12.2941 4.54038 11.9497L4.55671 11.8353L4.55749 9.45934C4.6049 8.41445 4.90054 7.39743 5.41853 6.49732C5.93652 5.5972 6.66106 4.84143 7.52875 4.29614L7.7216 4.17934L7.72938 4.14494C7.83907 3.66641 8.08897 3.23407 8.44529 2.90642C8.8016 2.57876 9.24714 2.3716 9.72163 2.31294L9.86315 2.29934L10 2.29614Z" fill="#474849"/>
+    </svg>
+  );
+};

client/src/assets/ProgramIcon.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const ProgramIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21">
+      <path d="M12.0833 15.2945C11.5 15.2945 11.0069 15.0931 10.6042 14.6904C10.2014 14.2876 10 13.7945 10 13.2112C10 12.6279 10.2014 12.1348 10.6042 11.732C11.0069 11.3292 11.5 11.1279 12.0833 11.1279C12.6667 11.1279 13.1597 11.3292 13.5625 11.732C13.9653 12.1348 14.1667 12.6279 14.1667 13.2112C14.1667 13.7945 13.9653 14.2876 13.5625 14.6904C13.1597 15.0931 12.6667 15.2945 12.0833 15.2945ZM4.16667 18.6279C3.70833 18.6279 3.31611 18.4648 2.99 18.1387C2.66389 17.8126 2.50056 17.4201 2.5 16.9612V5.29452C2.5 4.83618 2.66333 4.44396 2.99 4.11785C3.31667 3.79174 3.70889 3.62841 4.16667 3.62785H5V2.79452C5 2.55841 5.08 2.36063 5.24 2.20118C5.4 2.04174 5.59778 1.96174 5.83333 1.96118C6.06889 1.96063 6.26694 2.04063 6.4275 2.20118C6.58806 2.36174 6.66778 2.55952 6.66667 2.79452V3.62785H13.3333V2.79452C13.3333 2.55841 13.4133 2.36063 13.5733 2.20118C13.7333 2.04174 13.9311 1.96174 14.1667 1.96118C14.4022 1.96063 14.6003 2.04063 14.7608 2.20118C14.9214 2.36174 15.0011 2.55952 15 2.79452V3.62785H15.8333C16.2917 3.62785 16.6842 3.79118 17.0108 4.11785C17.3375 4.44452 17.5006 4.83674 17.5 5.29452V16.9612C17.5 17.4195 17.3369 17.812 17.0108 18.1387C16.6847 18.4654 16.2922 18.6284 15.8333 18.6279H4.16667ZM4.16667 16.9612H15.8333V8.62785H4.16667V16.9612Z" fill="#474849"/>
+    </svg>
+  );
+};

client/src/assets/SettingsIcon.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const SettingsIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21">
+      <path d="M9.02082 18.6278C8.64582 18.6278 8.32304 18.5028 8.05248 18.2528C7.78193 18.0028 7.6186 17.6973 7.56248 17.3362L7.37498 15.9612C7.19443 15.8917 7.02443 15.8084 6.86498 15.7112C6.70554 15.614 6.54915 15.5098 6.39582 15.3987L5.10415 15.9403C4.75693 16.0931 4.40971 16.107 4.06248 15.982C3.71526 15.857 3.44443 15.6348 3.24998 15.3153L2.27082 13.607C2.07637 13.2876 2.02082 12.9473 2.10415 12.5862C2.18748 12.2251 2.37498 11.9265 2.66665 11.6903L3.77082 10.857C3.75693 10.7598 3.74998 10.6659 3.74998 10.5753V10.0128C3.74998 9.92285 3.75693 9.82924 3.77082 9.73202L2.66665 8.89868C2.37498 8.66257 2.18748 8.36396 2.10415 8.00285C2.02082 7.64174 2.07637 7.30146 2.27082 6.98202L3.24998 5.27368C3.44443 4.95424 3.71526 4.73202 4.06248 4.60702C4.40971 4.48202 4.75693 4.4959 5.10415 4.64868L6.39582 5.19035C6.5486 5.07924 6.70832 4.97507 6.87498 4.87785C7.04165 4.78063 7.20832 4.69729 7.37498 4.62785L7.56248 3.25285C7.61804 2.89174 7.78137 2.58618 8.05248 2.33618C8.3236 2.08618 8.64637 1.96118 9.02082 1.96118H10.9792C11.3542 1.96118 11.6772 2.08618 11.9483 2.33618C12.2194 2.58618 12.3825 2.89174 12.4375 3.25285L12.625 4.62785C12.8055 4.69729 12.9758 4.78063 13.1358 4.87785C13.2958 4.97507 13.4519 5.07924 13.6042 5.19035L14.8958 4.64868C15.243 4.4959 15.5903 4.48202 15.9375 4.60702C16.2847 4.73202 16.5555 4.95424 16.75 5.27368L17.7292 6.98202C17.9236 7.30146 17.9792 7.64174 17.8958 8.00285C17.8125 8.36396 17.625 8.66257 17.3333 8.89868L16.2292 9.73202C16.243 9.82924 16.25 9.92313 16.25 10.0137V10.5753C16.25 10.6659 16.2361 10.7598 16.2083 10.857L17.3125 11.6903C17.6042 11.9265 17.7917 12.2251 17.875 12.5862C17.9583 12.9473 17.9028 13.2876 17.7083 13.607L16.7083 15.3153C16.5139 15.6348 16.243 15.857 15.8958 15.982C15.5486 16.107 15.2014 16.0931 14.8542 15.9403L13.6042 15.3987C13.4514 15.5098 13.2917 15.614 13.125 15.7112C12.9583 15.8084 12.7916 15.8917 12.625 15.9612L12.4375 17.3362C12.3819 17.6973 12.2189 18.0028 11.9483 18.2528C11.6778 18.5028 11.3547 18.6278 10.9792 18.6278H9.02082ZM10.0417 13.2112C10.8472 13.2112 11.5347 12.9265 12.1041 12.357C12.6736 11.7876 12.9583 11.1001 12.9583 10.2945C12.9583 9.48896 12.6736 8.80146 12.1041 8.23202C11.5347 7.66257 10.8472 7.37785 10.0417 7.37785C9.22221 7.37785 8.5311 7.66257 7.96832 8.23202C7.40554 8.80146 7.12443 9.48896 7.12498 10.2945C7.12554 11.1001 7.40693 11.7876 7.96915 12.357C8.53137 12.9265 9.22221 13.2112 10.0417 13.2112Z" fill="#474849"/>
+    </svg>
+  );
+};

client/src/components/navbar/Navbar.css

@@ -17,4 +17,13 @@
   margin-left: 3%;
   width: 90%;
   font-size: 150%;
+  color: #474849;
+}
+
+.navLink, .navText, .navIcon, .navItem {
+  color: #474849;
+}
+
+.navItem:hover .navLink, .navItem:hover .navText, .navItem:hover .navIcon {
+  color: #4E4AE7;
 }

client/src/components/navbar/Navbar.jsx

@@ -25,7 +25,6 @@ export const Navbar = ({ children }) => {
       boxShadow="lg"
       bgColor="#F6F6F6"
     >
-      {/* Logo Section */}
       <Flex
         justify="center"
         p={10}
@@ -34,25 +33,23 @@ export const Navbar = ({ children }) => {
         <Logo></Logo>
       </Flex>
 
-      {/* Navigation Links */}
       <VStack
         spacing={2}
         align="stretch"
         px={4}
       >
         {menuItems.map((item) => (
-          <div key={item.name} className="navItem" color="#474849" _hover={{ color: "#4E4AE7" }}>
+          <div key={item.name} className="navItem">
             <Link
               href={item.path}
               display="flex"
               alignItems="center"
               px={4}
               py={3}
               rounded="lg"
-              _hover={{ color: "#4E4AE7" }}
               className="navLink"
             >
-              <Icon className="navIcon"  fontSize="2xl">{item.icon}</Icon>
+              <Icon className="navIcon" fontSize="2xl">{item.icon}</Icon>
               <Text className="navText">{item.name}</Text>
             </Link>
           </div>

client/src/components/programs/EditProgram.css

@@ -54,7 +54,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 #innerBody {
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  gap: 2.5rem;
 }
 
 #leftCancel {
@@ -95,7 +95,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   color: white;
   justify-content: center;
   align-items: center;
-  border-radius: 30px; /* CHANGE LATER */
+  border-radius: 30px;
 }
 
 #popTrigger {
@@ -186,27 +186,23 @@ flex: 1;
   font-size: 1.2rem;
 }
 
-
-
 #instructorTags, #payeeTags {
   height: 2rem;
   width: 73%;
   position: absolute;
   left: 0;
   top: 0;
-  margin: 0;
+  margin: 0 0 3% 27%;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  margin-left: 27%;
 }
 
 .instructorTag, .payeeTag {
   height: 2rem;
   border: 1px lightgrey solid;
   border-radius: 20px;
-  margin-right: 3%;
-  margin-bottom: 2%;
+  margin: .5% 3% 0 0;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -246,6 +242,13 @@ flex: 1;
   width: 100%!important;
 }
 
+#instructorInputContainer, #payeeInputContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-right: 3%;
+}
+
 #instructorInput, #payeeInput {
   border-radius: 5px 5px 0 0!important;
   border: none!important;