From 1007c6689e7b549f48013d2c29eac9c78f13dfb7 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 7 Jan 2022 19:16:46 +0100
Subject: chore: improve search box and add button interactions on hover/focus

---
 src/components/SearchForm/SearchForm.module.scss |  6 +++++
 src/components/SearchForm/SearchForm.tsx         | 30 +++++++++++++++---------
 2 files changed, 25 insertions(+), 11 deletions(-)
 create mode 100644 src/components/SearchForm/SearchForm.module.scss

(limited to 'src/components/SearchForm')

diff --git a/src/components/SearchForm/SearchForm.module.scss b/src/components/SearchForm/SearchForm.module.scss
new file mode 100644
index 0000000..4debfbb
--- /dev/null
+++ b/src/components/SearchForm/SearchForm.module.scss
@@ -0,0 +1,6 @@
+.title {
+  margin-bottom: var(--spacing-sm);
+  color: var(--color-primary-dark);
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+}
diff --git a/src/components/SearchForm/SearchForm.tsx b/src/components/SearchForm/SearchForm.tsx
index e37ba9e..c1a7ca7 100644
--- a/src/components/SearchForm/SearchForm.tsx
+++ b/src/components/SearchForm/SearchForm.tsx
@@ -1,8 +1,10 @@
 import { ButtonSubmit } from '@components/Buttons';
 import { Form, Input } from '@components/Form';
+import { SearchIcon } from '@components/Icons';
 import { t } from '@lingui/macro';
 import { useRouter } from 'next/router';
 import { FormEvent, useEffect, useRef, useState } from 'react';
+import styles from './SearchForm.module.scss';
 
 const SearchForm = ({ isOpened }: { isOpened: boolean }) => {
   const [query, setQuery] = useState('');
@@ -24,17 +26,23 @@ const SearchForm = ({ isOpened }: { isOpened: boolean }) => {
   };
 
   return (
-    <Form submitHandler={launchSearch} modifier="search">
-      <Input
-        ref={inputRef}
-        id="search-query"
-        name="search-query"
-        type="search"
-        value={query}
-        setValue={setQuery}
-      />
-      <ButtonSubmit>{t`Search`}</ButtonSubmit>
-    </Form>
+    <>
+      <div className={styles.title}>{t`Search`}</div>
+      <Form submitHandler={launchSearch} modifier="search">
+        <Input
+          ref={inputRef}
+          id="search-query"
+          name="search-query"
+          type="search"
+          value={query}
+          setValue={setQuery}
+        />
+        <ButtonSubmit modifier="search">
+          <SearchIcon />
+          <span className="screen-reader-text">{t`Search`}</span>
+        </ButtonSubmit>
+      </Form>
+    </>
   );
 };
 
-- 
cgit v1.2.3