Doan frontend

src/individuals/pages/Saved.tsx

@@ -123,4 +123,4 @@ export default function SavedPage() {
             )}
         </section>
     );
-};
+};

src/opportunities/components/FiltersField.tsx

@@ -13,42 +13,57 @@ interface FiltersFieldProps {
   setPopUpMenu: () => void;
 }
 
-export default function FiltersField({ resetFilters, deleteFilter, filters, setPopUpMenu }: FiltersFieldProps) {
+export default function FiltersField({
+  resetFilters,
+  deleteFilter,
+  filters,
+  setPopUpMenu,
+}: FiltersFieldProps) {
   return (
-    <div>
-      <hr />
+    <div className="text-gray-800 dark:text-gray-200">
+      <hr className="border-gray-300 dark:border-gray-700" />
+
       <div className="px-3 max-h-20 flex">
         <div className="flex gap-2 w-full">
+          {/* Make sure SearchBar forwards className to the actual <input> */}
           <SearchBar />
 
-          <SmallTextButton className="" onClick={setPopUpMenu} special={true}>
+          <SmallTextButton
+
+            onClick={setPopUpMenu}
+            special={true}
+          >
             <PiSlidersHorizontal className="pr-1" />
             Change Filters
             <PiSlidersHorizontal className="pl-1" />
           </SmallTextButton>
 
-          {/* Fix rendering with new filters = [ [],[],[] ]*/}
+          {/* Filter “chips” */}
           <GroupedComponents gap={2}>
-            {filters.map((filter) => {
-              return (
-                <HorizontalIconButton
-                  onClick={deleteFilter}
-                  icon={<MdCancel />}
-                  key={filter}
-                  special={false}
-                >
-                  {filter}
-                </HorizontalIconButton>
-              )
-            })}
+            {filters.map((filter) => (
+              <HorizontalIconButton
+                key={filter}
+                onClick={deleteFilter}
+                icon={<MdCancel />}
+                special={false}
+
+              >
+                {filter}
+              </HorizontalIconButton>
+            ))}
           </GroupedComponents>
         </div>
 
-        <SmallTextButton className="flex flex-right" onClick={resetFilters} special={true}>
+        <SmallTextButton
+          onClick={resetFilters}
+          special={true}
+        >
           Reset
         </SmallTextButton>
       </div>
-      <hr />
+
+      <hr className="border-gray-300 dark:border-gray-700" />
     </div>
   );
-};
+}
+

src/opportunities/components/OpportunitiesDetails.tsx

@@ -1,5 +1,5 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import { OpportunityList } from "../../types/opportunities.ts";
 
 interface OpportunitiesListProps {
@@ -8,54 +8,77 @@
 
 export default function OpportunitiesList({ opportunities }: OpportunitiesListProps) {
   return (
-    <div className="p-4">
+    <div className="p-4 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
       <div className="overflow-x-auto">
         <table className="w-full border-collapse">
-          <thead>
-            {/* Column Headers */}
-            <tr className="bg-gray-100">
-              <th className="p-3 text-left border">Position</th>
-              <th className="p-3 text-left border">Description</th>
-              <th className="p-3 text-left border">Location</th>
-              <th className="p-3 text-left border">Pay</th>
-              <th className="p-3 text-left border">Credits</th>
-              <th className="p-3 text-left border">Lab Managers</th>
-              <th className="p-3 text-left border">Term</th>
-              <th className="p-3 text-left border">View</th>
-              <th className="p-3 text-left border">Save</th>
+          <thead className="top-0 z-10">
+            <tr className="bg-gray-100 dark:bg-gray-800/80 backdrop-blur">
+              <th className="p-3 text-left border border-gray-300 dark:border-gray-600">Position</th>
+              <th className="p-3 text-left border border-gray-300 dark:border-gray-600">Description</th>
+              <th className="p-3 text-left border border-gray-300 dark:border-gray-600">Location</th>
+              <th className="p-3 text-left border border-gray-300 dark:border-gray-600">Pay</th>
+              <th className="p-3 text-left border border-gray-300 dark:border-gray-600">Credits</th>
+              <th className="p-3 text-left border border-gray-300 dark:border-gray-600">Lab Managers</th>
+              <th className="p-3 text-left border border-gray-300 dark:border-gray-600">Term</th>
+              <th className="p-3 text-left border border-gray-300 dark:border-gray-600">View</th>
+              <th className="p-3 text-left border border-gray-300 dark:border-gray-600">Save</th>
             </tr>
           </thead>
-          <tbody>
-            {/* Info about the opportunities */}
+
+          <tbody className="[&_tr:nth-child(even)]:bg-transparent dark:[&_tr:nth-child(even)]:bg-gray-800/30">
             {opportunities.length > 0 ? (
               opportunities.map((opportunity) => (
-                <tr key={opportunity.id} className="hover:bg-gray-50">
-                  <td className="p-3 border font-medium">{opportunity.name}</td>
-                  <td className="p-3 border">{opportunity.description}</td>
-                  <td className="p-3 border">{opportunity.location}</td>
-                  <td className="p-3 border">{opportunity.pay ? `$${opportunity.pay}/hr` : ""}</td>
-                  <td className="p-3 border">{opportunity.credits}</td>
-                  <td className="p-3 border">{opportunity.lab_managers}</td>
-                  <td className="p-3 border">
+                <tr
+                  key={opportunity.id}
+                  className="hover:bg-gray-50 dark:hover:bg-gray-800/60 transition-colors"
+                >
+                  <td className="p-3 border border-gray-300 dark:border-gray-600 font-medium">
+                    {opportunity.name}
+                  </td>
+                  <td className="p-3 border border-gray-300 dark:border-gray-600">
+                    {opportunity.description}
+                  </td>
+                  <td className="p-3 border border-gray-300 dark:border-gray-600">
+                    {opportunity.location}
+                  </td>
+                  <td className="p-3 border border-gray-300 dark:border-gray-600">
+                    {opportunity.pay ? `$${opportunity.pay}/hr` : ""}
+                  </td>
+                  <td className="p-3 border border-gray-300 dark:border-gray-600">
+                    {opportunity.credits}
+                  </td>
+                  <td className="p-3 border border-gray-300 dark:border-gray-600">
+                    {opportunity.lab_managers}
+                  </td>
+                  <td className="p-3 border border-gray-300 dark:border-gray-600">
                     {opportunity.semester} {opportunity.year}
                   </td>
-                  <td className="p-3 border">
-                    <Link to={`/post/${opportunity.id}`}>
-                      <button className="bg-blue-500 text-white px-4 py-1 rounded hover:bg-blue-600 mr-2">
-                        View
-                      </button>
-                    </Link>
+                  <td className="p-3 border border-gray-300 dark:border-gray-600">
+                    <button
+                      className="bg-blue-600 dark:bg-blue-700 text-white px-4 py-1 rounded
+                                 hover:bg-blue-700 dark:hover:bg-blue-800
+                                 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    >
+                      View
+                    </button>
                   </td>
-                  <td className="p-3 border">
-                    <button className="bg-blue-500 text-white px-4 py-1 rounded hover:bg-blue-600">
+                  <td className="p-3 border border-gray-300 dark:border-gray-600">
+                    <button
+                      className="bg-blue-600 dark:bg-blue-700 text-white px-4 py-1 rounded
+                                 hover:bg-blue-700 dark:hover:bg-blue-800
+                                 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    >
                       {opportunity.saved ? "Unsave" : "Save"}
                     </button>
                   </td>
                 </tr>
               ))
             ) : (
               <tr>
-                <td colSpan={9} className="p-3 border text-center">
+                <td
+                  colSpan={9}
+                  className="p-3 border border-gray-300 dark:border-gray-600 text-center text-gray-500 dark:text-gray-400"
+                >
                   No results found.
                 </td>
               </tr>
@@ -65,4 +88,4 @@
       </div>
     </div>
   );
-};
+}

src/opportunities/pages/Opportunities.tsx

@@ -8,43 +8,47 @@ interface PageNavigationType {
 }
 
 const Opportunities: React.FC = () => {
-
   // navigation bar
   const [pages, switchPage] = usePageNavigation(["Search", "Saved"], "Search") as [
     PageNavigationType,
     (page: string) => void
   ];
 
-  const activeLink = "text-black py-3 border-b-2 border-black text-lg";
-  const normalLink = "text-gray-600 py-3 text-lg border-black hover:border-b-2 hover:text-black";
+  // Tailwind classes with dark variants
+  const activeLink =
+    "py-3 text-lg font-semibold border-b-2 " +
+    "text-black dark:text-gray-100 " +
+    "border-black dark:border-gray-100";
+
+  const normalLink =
+    "py-3 text-lg font-semibold border-b-2 border-transparent " +
+    "text-gray-600 dark:text-gray-300 " +
+    "hover:text-black dark:hover:text-white " +
+    "hover:border-black dark:hover:border-gray-100";
 
-  // displaying opportunities list component
   return (
-    <section className="flex flex-col h-screen justify-between gap-3">
+    <section className="flex flex-col h-screen justify-between gap-3 text-gray-900 dark:text-gray-100">
       <section className="flex flex-col gap-3">
         <section>
-          <div className="flex gap-5" style={{ alignItems: "center" }}>
-            <h1 className="text-2xl font-bold">Opportunities</h1>
-
-            <nav className="text-base flex gap-4 justify-items-center font-semibold" style={{ alignItems: "center" }}>
-              {pages.pages.map((page) => {
-                return (
-                  <button
-                    key={page}
-                    onClick={() => {
-                      switchPage(page);
-                    }}
-                    className={page === pages.activePage ? activeLink : normalLink}
-                  >
-                    {page}
-                  </button>
-                );
-              })}
+          <div className="flex gap-5 items-center">
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+              Opportunities
+            </h1>
+
+            <nav className="text-base flex gap-4 items-center">
+              {pages.pages.map((page) => (
+                <button
+                  key={page}
+                  onClick={() => switchPage(page)}
+                  className={page === pages.activePage ? activeLink : normalLink}
+                >
+                  {page}
+                </button>
+              ))}
             </nav>
           </div>
 
           {pages.activePage === "Search" && <Posts />}
-
         </section>
       </section>
     </section>

src/staff/pages/CreatePost.tsx

@@ -12,13 +12,26 @@ export default function CreatePost({ edit }: CreatePostProps) {
 
   if (!auth.isAuthenticated) {
     window.location.href = "/login";
+    return null;
   }
 
   return (
-    <div className="w-9/12 mx-auto">
-      <SEO title={edit === true ? "Edit Research Opportunity" : "Create Research Opportunity"} description={edit === true ? "Edit Research Opportunity Page" : "Create Research Opportunity Page"} />
-      <h1 className="text-center my-8 text-3xl font-bold">{edit === true ? "Edit Research Opportunity" : "Create Research Opportunity"}</h1>
-      <CreationForms edit={edit} />
-    </div>
+    <section className="min-h-[calc(100vh-8rem)] bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
+      <SEO
+        title={edit ? "Edit Research Opportunity" : "Create Research Opportunity"}
+        description={edit ? "Edit Research Opportunity Page" : "Create Research Opportunity Page"}
+      />
+
+      <div className="w-11/12 md:w-9/12 mx-auto py-8">
+        <h1 className="text-center my-8 text-3xl font-bold text-gray-900 dark:text-gray-100">
+          {edit ? "Edit Research Opportunity" : "Create Research Opportunity"}
+        </h1>
+
+        {/* subtle card so fields pop in dark mode */}
+        <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-6 shadow-sm">
+          <CreationForms edit={edit} />
+        </div>
+      </div>
+    </section>
   );
-};
+}