Adjust the styling of the searchbar

Co-authored-by: Francine Melo Pêpe <[email protected]>
Co-authored-by: [email protected] <[email protected]>

Author: 3 people

app/components/CoachList.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
 export default function CoachList({ children }: { children: ReactNode }) {
   return (
     <div className="bg-slate-100">
-      <section className="mx-auto block max-w-7xl gap-x-6 py-12 px-4 columns-sm">
+      <section className="mx-auto block max-w-7xl gap-x-6 px-4 columns-sm">
         {children}
       </section>
     </div>

app/components/CoachSearch.tsx

@@ -1,9 +1,9 @@
-import SearchBar from "./SearchBar";
+import SearchBar from "./SearchBar";
 
 
 function CoachSearch() { 
      return (
-         <div className="flex flex-row-reverse py-5 max-w-7xl mx-auto">
+         <div className="flex flex-row flex-grow w-full lg:w-10 ">
              <SearchBar />
          </div>
      );

app/components/SearchBar.tsx

@@ -1,6 +1,4 @@
-import { Form } from "@remix-run/react";
-import React, { ChangeEvent, RefObject, useRef, useState }  from 'react';
-import SearchIcon from "./icons/SearchIcon";
+import React, { ChangeEvent, useRef }  from 'react';
 
 
 const SearchBar = () => {
@@ -22,13 +20,13 @@ const SearchBar = () => {
 
 
     return (
-        <div className="inline-flex gap-2">
+        <div className="inline-flex gap-2 w-full lg:w-96">
                 <input
                     name="search"
                     type="text"
 
                     placeholder="Suche..."
-                    className="text-[1rem] px-2 py-1 rounded-full hover:text-vsp-900 border border-vsp-400 active:border-vsp-900 focus:border-vsp-900 disabled:border-vsp-200"
+                    className="text-[1rem] px-2 py-1 rounded-full hover:text-vsp-900 border border-vsp-400 active:border-vsp-900 focus:border-vsp-900 disabled:border-vsp-200 w-full"
                     value={inputValue}
                     onChange={(e) => {handleInputChange(e)}}
                 > 

app/components/SpeakingTimeContent.tsx

@@ -87,9 +87,9 @@ export default function SpeakingTimeContent({
           ref={formRef}
           method="get"
           id="filter-form"
-          className=""
+          className="bg-slate-100"
         >
-      <details open={false} className="mx-auto max-w-7xl py-8 px-4">
+      <details open={false} className="mx-auto max-w-7xl pt-6 px-4">
         <summary
           className="inline-flex  cursor-pointer items-center hover:text-vsp-500"
           onClick={() => setIsActive(!isActive)}
@@ -186,12 +186,16 @@ export default function SpeakingTimeContent({
             </noscript>
           </div>
       </details>
-      <CoachSearch />
-      </Form>
+      <div className="py-6 px-4 max-w-7xl mx-auto flex justify-end lg:justify-between items-center flex-wrap">
 
-      <div className="text-m mx-auto max-w-7xl py-4 px-4 font-semibold text-slate-700">
+      <CoachSearch />
+      <div className="text-m font-semibold text-slate-700">
         {coachesAmount ? `${coachesAmount} ${t("result")}` : t("noResult")}
       </div>
+      </div>
+      </Form>
+
+
 
       <div className="relative">
         {state.state === "loading" && (