feat (wip): update search modal design

src/components/Modal/Modal.tsx

@@ -11,27 +11,36 @@ interface ModalProps {
   children: ReactNode;
 
   showCloseBtn?: boolean;
+  noHeader?: boolean;
+  padding?: string;
 }
 export default function Modal({
   close,
   title,
   children,
   showCloseBtn = true,
+  noHeader = false,
+  padding = "1em 1.5em",
 }: ModalProps) {
   const handleWrapperClick = (event) =>
     event.target.classList?.[0] === styles["modal-wrapper"] && close();
 
   return createPortal(
     <div className={styles["modal-wrapper"]} onClick={handleWrapperClick}>
-      <div className={styles["modal-container"]}>
-        <div className={styles["modal-header"]}>
-          <h3>{title}</h3>
-          {showCloseBtn && (
-            <button onClick={close} className={`${styles["btn-close"]} reset`}>
-              <GrClose />
-            </button>
-          )}
-        </div>
+      <div className={styles["modal-container"]} style={{ padding }}>
+        {!noHeader && (
+          <div className={styles["modal-header"]}>
+            <h3>{title}</h3>
+            {showCloseBtn && (
+              <button
+                onClick={close}
+                className={`${styles["btn-close"]} reset`}
+              >
+                <GrClose />
+              </button>
+            )}
+          </div>
+        )}
         <div className={styles["modal-body"]}>{children}</div>
       </div>
     </div>,

src/components/Modal/modal.module.scss

@@ -12,7 +12,6 @@
   backdrop-filter: blur(0.25em);
   display: flex;
   align-items: center;
-  justify-content: center;
   flex-direction: column;
   animation: opacityin 0.3s both;
 }
@@ -20,13 +19,14 @@
 .modal-container {
   background: $light-grey;
   min-width: 500px;
-  padding: 1em 1.5em;
+  margin-top: 6em;
   border-radius: 3px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   animation: fadeintop 0.3s both;
+  box-shadow: 0 0 1em 0px rgba($black, 0.25);
 }
 
 .modal-header {

src/components/SearchModal/SearchModal.tsx

@@ -1,5 +1,6 @@
 import { FormEvent, useCallback, useMemo, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
+import { BsSearch } from "react-icons/bs";
 
 import useAutoFocus from "hooks/useAutoFocus";
 
@@ -89,33 +90,28 @@ export default function SearchModal({
   );
 
   return (
-    <Modal title="Rechercher" close={close}>
+    <Modal title="Rechercher" close={close} noHeader padding={"0"}>
       <form onSubmit={handleSubmit} className={styles["search-form"]}>
+        <div className={styles["search-input-wrapper"]}>
+          <label htmlFor="search">
+            <BsSearch size={24} />
+          </label>
+          <TextBox
+            name="search"
+            onChangeCallback={handleSearchInputChange}
+            value={search}
+            placeholder="Rechercher"
+            innerRef={autoFocusRef}
+            fieldClass={styles["search-input-field"]}
+            inputClass={"reset"}
+          />
+        </div>
         <SearchFilter
           canSearchLink={canSearchLink}
           setCanSearchLink={setCanSearchLink}
           canSearchCategory={canSearchCategory}
           setCanSearchCategory={setCanSearchCategory}
         />
-        <TextBox
-          name="search"
-          onChangeCallback={handleSearchInputChange}
-          value={search}
-          placeholder="Rechercher"
-          innerRef={autoFocusRef}
-          fieldClass={styles["search-input-field"]}
-        />
-        {search.length === 0 && favorites.length > 0 && (
-          <SearchList
-            items={favorites.map((favorite) => ({
-              id: favorite.id,
-              name: favorite.name,
-              url: favorite.url,
-              type: "link",
-            }))}
-            noItem={<p>ajouter un favoris</p>}
-          />
-        )}
         {search.length > 0 && (
           <SearchList
             items={itemsCompletion.map((item) => ({
@@ -156,7 +152,7 @@ function SearchFilter({
         marginBottom: "1em",
       }}
     >
-      <p>Rechercher</p>
+      {/* à remplacer par des Chips Checkbox */}
       <div style={{ display: "flex", gap: ".25em" }}>
         <input
           type="checkbox"

src/components/SearchModal/search.module.scss

@@ -3,13 +3,28 @@ form.search-form {
   flex: 1;
 }
 
-.search-input-field {
-  width: 100%;
+.search-input-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .search-input-field {
+    width: 100%;
+  }
+
+  & > label {
+    display: flex;
+
+    & svg {
+      padding: 0 1em;
+      box-sizing: content-box;
+    }
+  }
 
   & input {
     width: 100%;
-    border-radius: 1.5em;
-    padding: 1em;
+    font-size: 20px;
+    padding: 0.75em 0;
     border: 1px solid transparent;
   }
 }

src/components/TextBox.tsx

@@ -3,13 +3,11 @@ import { MutableRefObject, useState } from "react";
 interface InputProps {
   name: string;
   label?: string;
-  labelComponent?: JSX.Element;
   disabled?: boolean;
-  type?: string;
-  multiple?: boolean;
   innerRef?: MutableRefObject<any> | ((ref: any) => void);
   placeholder?: string;
   fieldClass?: string;
+  inputClass?: string;
   value?: string;
   onChangeCallback?: (value) => void;
 }
@@ -17,13 +15,11 @@ interface InputProps {
 export default function TextBox({
   name,
   label,
-  labelComponent,
   disabled = false,
-  type = "text",
-  multiple = false,
   innerRef = null,
   placeholder = "Type something...",
   fieldClass = "",
+  inputClass = "",
   value,
   onChangeCallback,
 }: InputProps): JSX.Element {
@@ -43,18 +39,12 @@ export default function TextBox({
           {label}
         </label>
       )}
-      {labelComponent && (
-        <label htmlFor={name} title={`${name} field`}>
-          {labelComponent}
-        </label>
-      )}
       <input
-        id={name}
-        name={name}
-        type={type}
         onChange={onChange}
         value={inputValue}
-        multiple={multiple}
+        className={inputClass}
+        name={name}
+        id={name}
         placeholder={placeholder}
         ref={innerRef}
         disabled={disabled}

src/styles/globals.scss

@@ -130,7 +130,7 @@ button.red-btn {
   }
 }
 
-input:not(.nostyle) {
+input:not(.reset) {
   color: $black;
   background: $white;
   padding: 10px;