Start Updating Styles / New Header (Not Mobile Yet) with Michael

apps/web/next.config.js

@@ -30,6 +30,12 @@ const config = {
         port: "",
         pathname: "/**",
       },
+      {
+        protocol: "https",
+        hostname: "lh3.googleusercontent.com",
+        port: "",
+        pathname: "/**",
+      },
     ],
   },
 };

apps/web/src/app/(pages)/(dashboard)/roles/page.tsx → apps/web/src/app/(pages)/(dashboard)/(roles)/page.tsx

@@ -27,8 +27,8 @@ export default function Roles() {
   return (
     <>
       {roles.isSuccess && roles.data.length > 0 && (
-        <div className="flex h-[100dvh] w-[95%] gap-4 divide-x divide-[#474747] pl-4 pr-4 lg:w-[95%]">
-          <div className="w-[28%] gap-3">
+        <div className="flex h-[86dvh] w-full gap-4 divide-x divide-[#474747] pl-4 lg:h-[92dvh]">
+          <div className="w-[28%] gap-3 overflow-auto p-1">
             {roles.data.map((role, i) => {
               return (
                 <div key={role.id} onClick={() => setSelectedRole(role)}>

apps/web/src/app/(pages)/(dashboard)/companies/page.tsx

@@ -2,7 +2,6 @@ import { unstable_noStore as noStore } from "next/cache";
 
 import NoResults from "~/app/_components/no-results";
 import { RoleReviewCard } from "~/app/_components/reviews/role-review-card";
-import SearchFilter from "~/app/_components/search/search-filter";
 import { api } from "~/trpc/server";
 
 export default async function Companies() {
@@ -20,9 +19,8 @@ export default async function Companies() {
 
   return (
     <>
-      <SearchFilter />
       {roles.length > 0 ? (
-        <div className="mb-8 grid h-[70dvh] w-3/4 grid-cols-1 gap-4 overflow-y-scroll md:grid-cols-2 xl:grid-cols-3">
+        <div className="grid grid-cols-1 gap-4 overflow-y-scroll md:grid-cols-2 xl:grid-cols-3">
           {roles.map((role) => {
             return (
               <RoleReviewCard key={role.id} roleObj={role} className="mb-4" />

apps/web/src/app/_components/auth/login-button.tsx

@@ -5,7 +5,7 @@ export default function LoginButton() {
   return (
     <form>
       <Button
-        className="rounded-xl border-cooper-blue-400 bg-cooper-blue-400 px-5 py-2.5 text-sm font-semibold text-white hover:border-cooper-blue-200 hover:bg-cooper-blue-200 hover:text-cooper-blue-600 focus:outline-none focus:ring-4 focus:ring-white"
+        className="rounded-lg border-none bg-cooper-yellow-500 px-5 py-2.5 text-sm font-semibold text-white hover:bg-cooper-yellow-300 hover:text-white focus:outline-none focus:ring-4 focus:ring-white"
         formAction={async () => {
           "use server";
           await signIn("google", { redirectTo: "/" });

apps/web/src/app/_components/auth/logout-button.tsx

@@ -5,7 +5,7 @@ export default function LogoutButton() {
   return (
     <form>
       <Button
-        className="rounded-xl border-cooper-blue-400 bg-cooper-blue-400 px-5 py-2.5 text-sm font-semibold text-white hover:border-cooper-blue-200 hover:bg-cooper-blue-200 hover:text-cooper-blue-600 focus:outline-none focus:ring-4 focus:ring-white"
+        className="rounded-lg border-none bg-cooper-yellow-500 px-5 py-2.5 text-sm font-semibold text-white hover:bg-cooper-yellow-300 hover:text-white focus:outline-none focus:ring-4 focus:ring-white"
         formAction={async () => {
           "use server";
           await signOut({ redirectTo: "/" });

apps/web/src/app/_components/cooper-logo.tsx

@@ -7,9 +7,9 @@ interface CooperLogoProps {
 export default function CooperLogo({ width }: CooperLogoProps) {
   return (
     <Image
-      src="/svg/hidingLogo.svg"
-      width={width ?? 137}
-      height={width ? width / 2.28 : 60} // 2.28 is the approximate ratio in the hidingLogo.svg file
+      src="/svg/logoOutline.svg"
+      width={width ?? 80}
+      height={width ? width / 1.17 : 70}
       alt="Logo Picture"
     />
   );

apps/web/src/app/_components/header-layout.tsx

@@ -4,8 +4,9 @@ import { auth } from "@cooper/auth";
 
 import Header from "~/app/_components/header";
 import LoginButton from "./auth/login-button";
-import LogoutButton from "./auth/logout-button";
 import Footer from "./footer";
+import ProfileButton from "./profile/profile-button";
+import SearchFilter from "./search/search-filter";
 
 /**
  * This should be used when placing content under the header, standardizes how children are placed under a header.
@@ -18,16 +19,21 @@ export default async function HeaderLayout({
   children: ReactNode;
 }) {
   const session = await auth();
-  const button = session ? <LogoutButton /> : <LoginButton />;
+  const button = session ? (
+    <ProfileButton session={session} />
+  ) : (
+    <LoginButton />
+  );
 
   return (
-    <div className="flex min-h-screen flex-col justify-between">
-      <div>
-        <Header session={session} auth={button} />
-        <article className="mt-16 flex w-[100vw] flex-col items-center justify-center gap-16">
-          {children}
-        </article>
-      </div>
+    <div className="flex h-screen flex-col justify-between">
+      <Header auth={button} />
+      <article className="mt-4 flex h-[92dvh] w-screen flex-col items-center justify-center">
+        <div className="m-4 mt-0 flex h-[6dvh] justify-center lg:hidden">
+          <SearchFilter searchClassName="w-screen px-4" />
+        </div>
+        {children}
+      </article>
       <Footer />
     </div>
   );

apps/web/src/app/_components/header.tsx

@@ -3,91 +3,66 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
-import type { Session } from "@cooper/auth";
 import { cn } from "@cooper/ui";
 
-import { NewReviewDialog } from "~/app/_components/reviews/new-review-dialogue";
-import { altivoFont } from "~/app/styles/font";
-import { api } from "~/trpc/react";
 import CooperLogo from "./cooper-logo";
+import SearchFilter from "./search/search-filter";
 
 interface HeaderProps {
-  session: Session | null;
   auth: React.ReactNode;
 }
 
 /**
  * This is the header component. (Probably) should use header-layout instead
  * @returns The header component for the website
  */
-export default function Header({ session, auth }: HeaderProps) {
+export default function Header({ auth }: HeaderProps) {
   const pathname = usePathname();
 
-  const profile = api.profile.getCurrentUser.useQuery(undefined, {
-    refetchOnWindowFocus: false,
-  });
-  const profileId = profile.data?.id;
-
-  const reviews = api.review.getByProfile.useQuery(
-    { id: profileId ?? "" },
-    {
-      enabled: !!profileId,
-    },
-  );
-
-  const showButton = !!profileId && (reviews.data?.length ?? 0) < 5;
-
-  const outerWidth = "w-40";
+  const outerWidth = "min-w-40";
 
   return (
-    <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">
+    <header className="flex min-h-[8dvh] w-full items-center justify-between gap-4 bg-white outline outline-2 outline-cooper-blue-600">
       {/* Logo + Cooper */}
-      <Link href="/" className={cn("flex flex-grow items-end", outerWidth)}>
-        <div className="mx-4 flex h-20 items-end">
-          <CooperLogo />
-        </div>
-        <h1
-          className={cn(
-            "mb-2 hidden text-5xl font-semibold text-cooper-blue-600 lg:block",
-            altivoFont.className,
-          )}
+      <div>
+        <Link
+          href="/"
+          className={cn("flex w-fit items-center justify-center", outerWidth)}
         >
-          cooper
-        </h1>
-      </Link>
-      {/* Centered Links */}
-      <div className="flex min-h-20 flex-shrink grid-cols-2 items-end justify-start gap-4 lg:gap-12">
-        <Link href="/roles">
+          <div className="z-0 mx-4 hidden min-w-[80px] items-end sm:flex">
+            <CooperLogo />
+          </div>
+          <h1 className="text-3xl font-bold text-cooper-blue-600 xl:text-4xl">
+            cooper
+          </h1>
+        </Link>
+      </div>
+
+      <div className="hidden lg:block">
+        <SearchFilter searchClassName="max-w-[50vw]" />
+      </div>
+
+      <div className="mr-6 flex flex-shrink grid-cols-2 items-center justify-start gap-8">
+        <Link href="/companies">
           <h2
             className={cn(
-              "mb-[1.375rem] font-semibold",
-              pathname.includes("roles") &&
-                "mb-0 after:mt-4 after:block after:h-1.5 after:w-full after:rounded-t-full after:bg-cooper-pink-500",
+              pathname.includes("companies") &&
+                "text-cooper-blue-600 underline underline-offset-8",
             )}
           >
-            Jobs
+            Companies
           </h2>
         </Link>
-        <Link href="/companies">
+        <Link href="/">
           <h2
             className={cn(
-              "mb-[1.375rem] font-semibold",
-              pathname.includes("companies") &&
-                "mb-0 after:mt-4 after:block after:h-1.5 after:w-full after:rounded-t-full after:bg-cooper-green-500",
+              !pathname.includes("companies") &&
+                "text-cooper-blue-600 underline underline-offset-8",
             )}
           >
-            Companies
+            Jobs
           </h2>
         </Link>
-      </div>
-      {/* New Review + Profile */}
-      <div
-        className={cn(
-          "mb-8 flex min-h-20 flex-shrink flex-grow items-end justify-end gap-4",
-          outerWidth,
-        )}
-      >
-        {session && showButton && <NewReviewDialog />}
         {auth}
       </div>
     </header>

apps/web/src/app/_components/profile/profile-button.tsx

@@ -0,0 +1,39 @@
+import Image from "next/image";
+
+import { Session, signOut } from "@cooper/auth";
+
+interface ProfileButtonProps {
+  session: Session;
+}
+
+export default function ProfileButton({ session }: ProfileButtonProps) {
+  return (
+    <form className="flex h-[2.25rem] w-[2.25rem] items-center justify-center">
+      {/* TODO: make this link to a profile page */}
+      <button
+        formAction={async () => {
+          "use server";
+          await signOut({ redirectTo: "/" });
+        }}
+      >
+        {session.user.image ? (
+          <Image
+            src={session.user.image}
+            width="36"
+            height="36"
+            alt="Logout"
+            className="rounded-full"
+          />
+        ) : (
+          <Image
+            src={"/svg/defaultProfile.svg"}
+            width="36"
+            height="36"
+            alt="Logout"
+            className="rounded-full"
+          />
+        )}
+      </button>
+    </form>
+  );
+}

apps/web/src/app/_components/search/search-filter.tsx

@@ -7,6 +7,7 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 import { WorkEnvironment, WorkTerm } from "@cooper/db/schema";
+import { cn } from "@cooper/ui";
 import { Form } from "@cooper/ui/form";
 
 import { ReviewSearchBar } from "~/app/_components/search/review-search-bar";
@@ -33,6 +34,7 @@ interface SearchFilterProps {
   cycle?: "FALL" | "SPRING" | "SUMMER";
   term?: "INPERSON" | "HYBRID" | "REMOTE";
   alternatePathname?: string;
+  searchClassName?: string;
   searchType?: "REVIEWS" | "SIMPLE";
 }
 
@@ -47,6 +49,7 @@ export default function SearchFilter({
   cycle,
   term,
   alternatePathname,
+  searchClassName,
   searchType = "SIMPLE",
 }: SearchFilterProps) {
   const form = useForm<z.infer<typeof formSchema>>({
@@ -89,8 +92,11 @@ export default function SearchFilter({
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="w-[100vw]">
-        <div className="flex justify-center">
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className={cn("w-[100vw]", searchClassName)}
+      >
+        <div className={cn("flex justify-center")}>
           {searchType === "SIMPLE" && <SimpleSearchBar />}
           {searchType === "REVIEWS" && (
             <ReviewSearchBar cycle={cycle} term={term} />