Reformat filters

src/app/[locale]/(main)/tournaments/TournamentTable.tsx

@@ -18,11 +18,9 @@ import {
   filteredTournamentsListAtom,
   hoveredMapIdAtom,
   normsOnlyAtom,
-  regionFilterAtom,
 } from "@/atoms";
 import { RegionSelect } from "@/components/RegionSelect";
 import SearchBar from "@/components/SearchBar";
-import { Select } from "@/components/form/Select";
 import { useBreakpoint } from "@/hooks/tailwind";
 import useDatePickerWidth from "@/hooks/useDatePickerWidth";
 import { DatePickerDirection } from "@/types";
@@ -80,14 +78,22 @@ const TournamentTable = () => {
       id="listing"
     >
       <div className="z-10 flex w-full flex-wrap items-center justify-start gap-3 p-3">
-        <SearchBar />
+        <div className="flex w-full flex-col gap-3 sm:flex-row">
+          <SearchBar className="w-full sm:w-auto" />
+          <RegionSelect
+            syncTitle={t("syncWithMapOption")}
+            classNameOverrides={{
+              container: () => "flex flex-1",
+            }}
+          />
+        </div>
 
         <BsCalendar2Date
           className={`cursor-pointer text-3xl ${datePickerColour}`}
           onClick={handleDatePickerClick}
         />
 
-        <div className="flex flex-col gap-0 text-gray-900 dark:text-white">
+        <div className="flex text-gray-900 dark:text-white">
           <label>
             <input
               type="checkbox"
@@ -102,8 +108,6 @@ const TournamentTable = () => {
         <div className="hidden lg:block">
           <TimeControlFilters />
         </div>
-
-        <RegionSelect syncTitle={t("syncWithMapOption")} />
       </div>
 
       <div className="flex justify-center" ref={datePickerRef}>

src/components/SearchBar.tsx

@@ -3,10 +3,15 @@ import { useTransition } from "react";
 import { useAtom } from "jotai/index";
 import { useTranslations } from "next-intl";
 import { IoCloseOutline } from "react-icons/io5";
+import { twMerge } from "tailwind-merge";
 
 import { searchStringAtom } from "@/atoms";
 
-const SearchBar = () => {
+type SearchBarProps = {
+  className?: string;
+};
+
+const SearchBar = ({ className }: SearchBarProps) => {
   const t = useTranslations("Tournaments");
   const [searchString, setSearchString] = useAtom(searchStringAtom);
   const [isPending, startTransition] = useTransition();
@@ -22,7 +27,7 @@ const SearchBar = () => {
       <label htmlFor="table-search" className="sr-only">
         {t("searchLabel")}
       </label>
-      <div className="relative mt-1">
+      <div className="relative">
         <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
           <svg
             className="h-5 w-5 text-gray-500 dark:text-gray-400"
@@ -49,7 +54,10 @@ const SearchBar = () => {
         <input
           type="search"
           id="table-search"
-          className="block rounded-lg border border-gray-300 bg-gray-50 p-2.5 px-10 text-gray-900 focus:border-blue-500 focus:ring-blue-500  dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+          className={twMerge(
+            "block rounded-lg border border-gray-300 bg-gray-50 p-2.5 px-10 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500  dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-primary-500",
+            className,
+          )}
           placeholder={t("searchPlaceholder")}
           value={searchString}
           onChange={(e) => updateSearchString(e.target.value)}

src/components/form/Select.tsx

@@ -26,13 +26,13 @@ export const classNames = <Option, IsMulti extends boolean = false>(
   indicatorSeparator: () => "w-px text-gray-900 dark:text-white",
   control: (state) =>
     twMerge(
-      "group flex w-full items-center justify-between rounded-lg border p-3 text-sm",
+      "group flex w-full items-center justify-between rounded-lg border p-2.5 text-sm",
-      "border-gray-300 bg-gray-50  text-gray-900 shadow-sm focus-within:border-primary-500 focus-within:ring-primary-500",
+      "border-gray-300 bg-gray-50 text-gray-900 focus-within:border-primary-500 focus-within:ring-primary-500",
       "dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500",
 
       hasError && "ring-1 ring-error",
       state.isDisabled && "cursor-not-allowed",
-      state.isFocused && "border-primary ring ring-primary ring-opacity-50",
+      state.isFocused && "border-primary ring-1 ring-primary ring-opacity-50",
     ),
   multiValue: () => "bg-fieldGray border rounded-lg flex space-x-1 pl-1 m-1",
   multiValueLabel: () => "",