chore: improve search box and add button interactions on hover/focus

1 files changed, 13 insertions, 2 deletions

diff --git a/src/components/Buttons/ButtonSubmit/ButtonSubmit.tsx b/src/components/Buttons/ButtonSubmit/ButtonSubmit.tsx
index a2e493a..4725cad 100644
--- a/src/components/Buttons/ButtonSubmit/ButtonSubmit.tsx
+++ b/src/components/Buttons/ButtonSubmit/ButtonSubmit.tsx
@@ -1,8 +1,19 @@
+import { ReactNode } from 'react';
 import styles from '../Buttons.module.scss';
 
-const ButtonSubmit: React.FunctionComponent = ({ children }) => {
+type Modifier = 'search' | 'submit';
+
+const ButtonSubmit = ({
+  children,
+  modifier = 'submit',
+}: {
+  children: ReactNode;
+  modifier?: Modifier;
+}) => {
+  const withModifier = modifier === 'search' ? styles.search : styles.primary;
+
   return (
-    <button type="submit" className={`${styles.btn} ${styles.primary}`}>
+    <button type="submit" className={`${styles.btn} ${withModifier}`}>
       {children}
     </button>
   );