Begin Rework Search Filter + Bar, Adjust Styles on Header (#93)

sandboxnu · Nov 24, 2024 · 1b42a44 · 1b42a44
1 parent 65750da
commit 1b42a44
Show file tree

Hide file tree

Showing 9 changed files with 456 additions and 98 deletions.
diff --git a/apps/web/public/svg/hidingLogo.svg b/apps/web/public/svg/hidingLogo.svg
diff --git a/apps/web/src/app/(pages)/(dashboard)/page.tsx b/apps/web/src/app/(pages)/(dashboard)/page.tsx
@@ -4,7 +4,7 @@ export default function Home() {
   return (
     <div className="flex h-[85vh] flex-col">
       <div className="flex h-full flex-col items-center justify-center">
-        <SearchFilter />
+        <SearchFilter alternatePathname="/roles" />
       </div>
     </div>
   );

diff --git a/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx b/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx
@@ -47,45 +47,39 @@ export default function Roles({
   useEffect(() => {
     setMounted(true);
   }, []);
+
   useEffect(() => {
-    if (!mounted) {
-      return;
-    }
-    if (!validationResult.success) {
+    if (mounted && !validationResult.success) {
       toast({
-        title: "Invalid search params",
+        title: "Invalid Search Parameters",
         description: validationResult.error.issues
           .map((issue) => issue.message)
           .join(", "),
         variant: "destructive",
       });
+      setMounted(false);
     }
-  }, [
-    toast,
-    mounted,
-    validationResult.success,
-    validationResult.error?.issues,
-  ]);
+  }, [toast, mounted, validationResult]);
 
   const reviews = api.review.list.useQuery({
     search: searchParams?.search,
     options: validationResult.success ? validationResult.data : {},
   });
 
   const [selectedReview, setSelectedReview] = useState<ReviewType | undefined>(
-    reviews.data ? reviews.data[0] : undefined,
+    reviews.isSuccess ? reviews.data[0] : undefined,
   );
 
   useEffect(() => {
-    if (reviews.data) {
+    if (reviews.isSuccess) {
       setSelectedReview(reviews.data[0]);
     }
-  }, [reviews.data]);
+  }, [reviews.isSuccess, reviews.data]);
 
   return (
     <>
-      <SearchFilter search={searchParams?.search} />
-      {reviews.data && (
+      <SearchFilter search={searchParams?.search} {...validationResult.data} />
+      {reviews.isSuccess && (
         <div className="mb-8 grid h-[70dvh] w-4/5 grid-cols-5 gap-4 lg:w-3/4">
           <div className="col-span-2 gap-3 overflow-scroll pr-4">
             {reviews.data.map((review, i) => {

diff --git a/apps/web/src/app/_components/header.tsx b/apps/web/src/app/_components/header.tsx
@@ -28,12 +28,12 @@ export default function Header({ session, auth }: HeaderProps) {
     <header className="flex h-20 w-full grid-cols-3 items-center justify-between border-b border-b-[#9A9A9A] bg-white pr-2 drop-shadow-sm">
       {/* Logo + Cooper */}
       <Link href="/" className={cn("flex flex-grow items-end", outerWidth)}>
-        <div className="mx-4 flex min-h-20 items-end">
+        <div className="mx-4 flex h-20 items-end">
           <Image
             src="/svg/hidingLogo.svg"
-            height={150}
-            width={150}
             alt="Logo Picture"
+            width={137}
+            height={60}
           />
         </div>
         <h1
@@ -46,25 +46,24 @@ export default function Header({ session, auth }: HeaderProps) {
         </h1>
       </Link>
       {/* Centered Links */}
-      <div className="lg: mb-8 flex min-h-20 flex-shrink grid-cols-2 items-end justify-start gap-4 lg:gap-12">
+      <div className="flex min-h-20 flex-shrink grid-cols-2 items-end justify-start gap-4 lg:gap-12">
         <Link href="/roles">
           <h2
             className={cn(
-              "font-semibold",
+              "mb-[1.375rem] font-semibold",
               pathname.includes("roles") &&
-                "underline decoration-cooper-pink-500 decoration-[3px] underline-offset-[6px]",
+                "mb-0 after:mt-4 after:block after:h-1.5 after:w-full after:rounded-t-full after:bg-cooper-pink-500",
             )}
           >
-            {" "}
-            Jobs{" "}
+            Jobs
           </h2>
         </Link>
         <Link href="/companies">
           <h2
             className={cn(
-              "font-semibold",
+              "mb-[1.375rem] font-semibold",
               pathname.includes("companies") &&
-                "underline decoration-cooper-green-500 decoration-[3px] underline-offset-[6px]",
+                "mb-0 after:mt-4 after:block after:h-1.5 after:w-full after:rounded-t-full after:bg-cooper-green-500",
             )}
           >
             Companies