New Search Bar! (#123)

* New Search Bar!

Yay!

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

* lint

---------

Co-authored-by: banushi-a <[email protected]>

apps/web/src/app/_components/search/search-bar.tsx → 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

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>

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>
+  );
+}

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}
     />
   );

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}

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%;

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: {

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}