From 1d155e45984e9773219d9dc1f1480594f23860cd Mon Sep 17 00:00:00 2001
From: Sarah-Zhang1 <147781368+Sarah-Zhang1@users.noreply.github.com>
Date: Sun, 16 Feb 2025 15:22:30 -0500
Subject: [PATCH] New Search Bar! (#123)

* New Search Bar!

Yay!

* Fix some styles (get rid of that ugly ring)

* lint

---------

Co-authored-by: banushi-a <altonbanushi@icloud.com>
---
 apps/web/public/svg/magnifyingGlass.svg       |  3 ++
 .../{search-bar.tsx => review-search-bar.tsx} | 10 ++--
 .../app/_components/search/search-filter.tsx  | 10 +++-
 .../_components/search/simple-search-bar.tsx  | 47 +++++++++++++++++++
 .../_components/themed/onboarding/input.tsx   |  2 +-
 .../_components/themed/onboarding/select.tsx  |  4 +-
 apps/web/src/app/styles/globals.css           |  2 +-
 packages/ui/src/button.tsx                    |  2 +-
 packages/ui/src/input.tsx                     |  2 +-
 9 files changed, 69 insertions(+), 13 deletions(-)
 create mode 100644 apps/web/public/svg/magnifyingGlass.svg
 rename apps/web/src/app/_components/search/{search-bar.tsx => review-search-bar.tsx} (85%)
 create mode 100644 apps/web/src/app/_components/search/simple-search-bar.tsx

diff --git a/apps/web/public/svg/magnifyingGlass.svg b/apps/web/public/svg/magnifyingGlass.svg
new file mode 100644
index 0000000..7cb952f
--- /dev/null
+++ b/apps/web/public/svg/magnifyingGlass.svg
@@ -0,0 +1,3 @@
+<svg width="45" height="43" viewBox="0 0 45 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.1465 25.107H27.676L27.1547 24.6279C28.3181 23.3396 29.1683 21.8222 29.6446 20.1841C30.1209 18.5461 30.2114 16.8279 29.9098 15.1526C29.0349 10.2197 24.7162 6.28051 19.5039 5.67721C17.6715 5.45624 15.8103 5.63777 14.0628 6.20792C12.3153 6.77807 10.7277 7.72172 9.42168 8.96667C8.11562 10.2116 7.12565 11.7249 6.52751 13.3906C5.92938 15.0564 5.73893 16.8305 5.97076 18.5772C6.60367 23.5455 10.7362 27.6622 15.9112 28.4961C17.6688 28.7837 19.4713 28.6974 21.1897 28.2434C22.9082 27.7894 24.5002 26.9789 25.8517 25.87L26.3543 26.3669V27.7686L34.2657 35.3099C35.0289 36.0374 36.2761 36.0374 37.0393 35.3099C37.8026 34.5824 37.8026 33.3935 37.0393 32.666L29.1465 25.107ZM17.9775 25.107C13.3423 25.107 9.6007 21.5405 9.6007 17.1222C9.6007 12.7039 13.3423 9.13732 17.9775 9.13732C22.6126 9.13732 26.3543 12.7039 26.3543 17.1222C26.3543 21.5405 22.6126 25.107 17.9775 25.107Z" fill="#306794"/>
+</svg>
diff --git a/apps/web/src/app/_components/search/search-bar.tsx b/apps/web/src/app/_components/search/review-search-bar.tsx
similarity index 85%
rename from apps/web/src/app/_components/search/search-bar.tsx
rename to apps/web/src/app/_components/search/review-search-bar.tsx
index 1c0ba5e..c6371d4 100644
--- a/apps/web/src/app/_components/search/search-bar.tsx
+++ b/apps/web/src/app/_components/search/review-search-bar.tsx
@@ -27,7 +27,7 @@ interface SearchBarProps {
  * @param param0 Cycle and Term to be set as default values for their respective dropdowns
  * @returns A search bar which is connected to a parent 'useForm'
  */
-export function SearchBar({ cycle, term }: SearchBarProps) {
+export function ReviewSearchBar({ cycle, term }: SearchBarProps) {
   const form = useFormContext();
 
   const [selectedCycle, setSelectedCycle] = useState<string | undefined>(cycle);
@@ -43,7 +43,7 @@ export function SearchBar({ cycle, term }: SearchBarProps) {
             <FormControl>
               <Input
                 {...field}
-                className="h-14 rounded-b-none rounded-t-lg border border-[#e2e8f0] pl-4 text-lg active:ring-0 lg:rounded-l-lg lg:rounded-r-none"
+                className="h-14 rounded-b-none rounded-t-lg border-2 border-cooper-blue-700 pl-4 text-lg active:ring-0 lg:rounded-l-lg lg:rounded-r-none"
                 placeholder="Search"
               />
             </FormControl>
@@ -66,7 +66,7 @@ export function SearchBar({ cycle, term }: SearchBarProps) {
                 }}
                 value={selectedCycle}
               >
-                <SelectTrigger className="h-14 rounded-none rounded-bl border border-t-0 border-[#e2e8f0] text-lg ring-0 focus:border-2 focus:ring-0 active:ring-0 lg:rounded-none lg:border-b lg:border-l-0 lg:border-r-0 lg:border-t">
+                <SelectTrigger className="h-14 rounded-none rounded-bl border-2 border-t-0 border-cooper-blue-700 text-lg ring-0 focus:border-2 focus:ring-0 active:ring-0 lg:rounded-none lg:border-b-2 lg:border-l-0 lg:border-r-0 lg:border-t-2">
                   <SelectValue placeholder="Cycle" />
                 </SelectTrigger>
                 <SelectContent>
@@ -101,7 +101,7 @@ export function SearchBar({ cycle, term }: SearchBarProps) {
                 }}
                 value={selectedTerm}
               >
-                <SelectTrigger className="h-14 rounded-none border border-l-0 border-t-0 border-[#e2e8f0] text-lg placeholder:opacity-50 focus:border-2 focus:ring-0 active:ring-0 lg:rounded-l-none lg:rounded-r-none lg:border-l lg:border-r-0 lg:border-t">
+                <SelectTrigger className="h-14 rounded-none border-2 border-l-0 border-t-0 border-cooper-blue-700 text-lg placeholder:opacity-50 focus:border-2 focus:ring-0 active:ring-0 lg:rounded-l-none lg:rounded-r-none lg:border-l-2 lg:border-r-0 lg:border-t-2">
                   <SelectValue placeholder="Work Term" />
                 </SelectTrigger>
                 <SelectContent>
@@ -121,7 +121,7 @@ export function SearchBar({ cycle, term }: SearchBarProps) {
         )}
       />
       <Button
-        className="col-span-2 h-14 rounded-none rounded-br border border-l-0 border-t-0 border-[#e2e8f0] bg-white p-0 text-lg hover:bg-cooper-blue-200 focus:border-2 focus:ring-0 active:ring-0 lg:col-span-1 lg:rounded-l-none lg:rounded-r-lg lg:border-l lg:border-t"
+        className="col-span-2 h-14 rounded-none rounded-br border-2 border-l-0 border-t-0 border-cooper-blue-700 bg-white p-0 text-lg hover:bg-cooper-blue-200 focus:border-2 focus:ring-0 active:ring-0 lg:col-span-1 lg:rounded-l-none lg:rounded-r-lg lg:border-l-2 lg:border-t-2"
         type="submit"
       >
         <svg
diff --git a/apps/web/src/app/_components/search/search-filter.tsx b/apps/web/src/app/_components/search/search-filter.tsx
index 0d2224d..5cb5093 100644
--- a/apps/web/src/app/_components/search/search-filter.tsx
+++ b/apps/web/src/app/_components/search/search-filter.tsx
@@ -9,7 +9,8 @@ import { z } from "zod";
 import { WorkEnvironment, WorkTerm } from "@cooper/db/schema";
 import { Form } from "@cooper/ui/form";
 
-import { SearchBar } from "~/app/_components/search/search-bar";
+import { ReviewSearchBar } from "~/app/_components/search/review-search-bar";
+import { SimpleSearchBar } from "./simple-search-bar";
 
 const formSchema = z.object({
   searchText: z.string(),
@@ -32,6 +33,7 @@ interface SearchFilterProps {
   cycle?: "FALL" | "SPRING" | "SUMMER";
   term?: "INPERSON" | "HYBRID" | "REMOTE";
   alternatePathname?: string;
+  searchType?: "REVIEWS" | "SIMPLE";
 }
 
 /**
@@ -45,6 +47,7 @@ export default function SearchFilter({
   cycle,
   term,
   alternatePathname,
+  searchType = "SIMPLE",
 }: SearchFilterProps) {
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -88,7 +91,10 @@ export default function SearchFilter({
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="w-[100vw]">
         <div className="flex justify-center">
-          <SearchBar cycle={cycle} term={term} />
+          {searchType === "SIMPLE" && <SimpleSearchBar />}
+          {searchType === "REVIEWS" && (
+            <ReviewSearchBar cycle={cycle} term={term} />
+          )}
         </div>
       </form>
     </Form>
diff --git a/apps/web/src/app/_components/search/simple-search-bar.tsx b/apps/web/src/app/_components/search/simple-search-bar.tsx
new file mode 100644
index 0000000..0ab110c
--- /dev/null
+++ b/apps/web/src/app/_components/search/simple-search-bar.tsx
@@ -0,0 +1,47 @@
+import Image from "next/image";
+import { useFormContext } from "react-hook-form";
+
+import { Button } from "@cooper/ui/button";
+import { FormControl, FormField, FormItem } from "@cooper/ui/form";
+import { Input } from "@cooper/ui/input";
+
+/**
+ * This Search Bar employs filtering and fuzzy searching.
+ *
+ * NOTE: Cycle and Term only make sense for Roles
+ *
+ * @param param0 Cycle and Term to be set as default values for their respective dropdowns
+ * @returns A search bar which is connected to a parent 'useForm'
+ */
+export function SimpleSearchBar() {
+  const form = useFormContext();
+
+  const newLocal =
+    "h-14 border-2 border-l-0 border-cooper-blue-700 text-lg text-cooper-blue-600 placeholder:text-cooper-blue-400 rounded-r-lg rounded-l-none";
+  return (
+    <div className="flex w-4/5 grid-cols-12 rounded-lg lg:w-3/4">
+      <Button
+        className="h-14 rounded-l-lg rounded-r-none border-l-2 border-r-0 border-t-2 border-cooper-blue-700 bg-white p-0 px-4 text-lg hover:bg-cooper-blue-200 focus:border-r-0 focus:ring-0 active:ring-0"
+        type="submit"
+      >
+        <Image
+          src="svg/magnifyingGlass.svg"
+          width="35"
+          height="35"
+          alt="Magnifying Glass"
+        />
+      </Button>
+      <FormField
+        control={form.control}
+        name="searchText"
+        render={({ field }) => (
+          <FormItem className="w-full">
+            <FormControl>
+              <Input {...field} className={newLocal} placeholder="Search..." />
+            </FormControl>
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+}
diff --git a/apps/web/src/app/_components/themed/onboarding/input.tsx b/apps/web/src/app/_components/themed/onboarding/input.tsx
index c592b03..e68f0a8 100644
--- a/apps/web/src/app/_components/themed/onboarding/input.tsx
+++ b/apps/web/src/app/_components/themed/onboarding/input.tsx
@@ -3,7 +3,7 @@ import { Input as InputPrimitive } from "@cooper/ui/input";
 export function Input(props: React.ComponentProps<typeof InputPrimitive>) {
   return (
     <InputPrimitive
-      className="h-12 rounded-lg border-2 border-cooper-gray-300 text-lg shadow-none"
+      className="h-12 rounded-lg border-2 border-cooper-gray-300 text-lg shadow-none placeholder:text-cooper-gray-400"
       {...props}
     />
   );
diff --git a/apps/web/src/app/_components/themed/onboarding/select.tsx b/apps/web/src/app/_components/themed/onboarding/select.tsx
index feb34ce..ddc5bbe 100644
--- a/apps/web/src/app/_components/themed/onboarding/select.tsx
+++ b/apps/web/src/app/_components/themed/onboarding/select.tsx
@@ -18,12 +18,12 @@ export const Select: React.FC<SelectProps> = ({
     <div className="relative w-full">
       <select
         className={cn(
-          "h-12 w-[275px] appearance-none rounded-lg border-2 border-cooper-gray-300 bg-transparent px-4 pr-10 text-lg text-cooper-gray-400 shadow-none",
+          "h-12 w-[275px] appearance-none rounded-lg border-2 border-cooper-gray-300 bg-transparent px-4 pr-10 text-lg shadow-none placeholder:text-cooper-gray-400",
           className,
         )}
         {...props}
       >
-        {placeholder && <option value="">{placeholder}</option>}
+        {placeholder && <option className="place">{placeholder}</option>}
         {options.map((option) => (
           <option key={option.value} value={option.value}>
             {option.label}
diff --git a/apps/web/src/app/styles/globals.css b/apps/web/src/app/styles/globals.css
index 47d0a9d..4ea50a7 100644
--- a/apps/web/src/app/styles/globals.css
+++ b/apps/web/src/app/styles/globals.css
@@ -20,7 +20,7 @@
     --secondary-foreground: 222.2 47.4% 11.2%;
 
     --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --muted-foreground: 205 69% 36% 0.6;
 
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
diff --git a/packages/ui/src/button.tsx b/packages/ui/src/button.tsx
index d7f8506..055c891 100644
--- a/packages/ui/src/button.tsx
+++ b/packages/ui/src/button.tsx
@@ -6,7 +6,7 @@ import { cva } from "class-variance-authority";
 import { cn } from "@cooper/ui";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-lg font-semibold ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-lg font-semibold ring-offset-background transition-colors focus-visible:bg-cooper-blue-200 focus-visible:text-cooper-blue-700 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
diff --git a/packages/ui/src/input.tsx b/packages/ui/src/input.tsx
index fe75ab4..e810a19 100644
--- a/packages/ui/src/input.tsx
+++ b/packages/ui/src/input.tsx
@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-16 w-full rounded-md border-[3px] border-cooper-blue-600 bg-white px-3 py-2 text-xl font-normal ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-16 w-full rounded-md border-[3px] border-cooper-blue-600 bg-white px-3 py-2 text-xl font-normal file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:border-cooper-gray-300 placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}