From f68d44352d3f8cd4f668649fb86fca2bc103e8b4 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Thu, 22 Aug 2019 16:43:50 +0300
Subject: [PATCH] SearchBar component styles and logic improved for
 accessibility

---
 src/common/NavBar/SearchBar/SearchBar.js | 20 ++++++++++++--------
 src/common/NavBar/SearchBar/styles.less  |  8 ++------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/common/NavBar/SearchBar/SearchBar.js b/src/common/NavBar/SearchBar/SearchBar.js
index 20e7e1e62..af4d744ca 100644
--- a/src/common/NavBar/SearchBar/SearchBar.js
+++ b/src/common/NavBar/SearchBar/SearchBar.js
@@ -21,19 +21,23 @@ const SearchBar = ({ className }) => {
         const query = (active && queryParams.has('q')) ? queryParams.get('q') : '';
         return [active, query];
     }, [locationHash]);
-    const navigateToSearch = React.useCallback(() => {
-        window.location = '#/search';
-    }, []);
+    const searchBarOnClick = React.useCallback(() => {
+        if (!active) {
+            window.location = '#/search';
+        }
+    }, [active]);
     const queryInputOnSubmit = React.useCallback(() => {
-        window.location.replace(`#/search?q=${searchInputRef.current.value}`);
-    }, []);
+        if (active) {
+            window.location.replace(`#/search?q=${searchInputRef.current.value}`);
+        }
+    }, [active]);
     React.useEffect(() => {
         if (active && focusable) {
             searchInputRef.current.focus();
         }
     }, [active, focusable]);
     return (
-        <label className={classnames(className, styles['search-bar-container'], { 'active': active })} onClick={!active ? navigateToSearch : null}>
+        <label className={classnames(className, styles['search-bar-container'], { 'active': active })} onClick={searchBarOnClick}>
             {
                 active ?
                     <TextInput
@@ -55,8 +59,8 @@ const SearchBar = ({ className }) => {
                         <div className={styles['placeholder']}>Search</div>
                     </div>
             }
-            <Button className={styles['submit-button']} tabIndex={-1} onClick={active ? queryInputOnSubmit : null}>
-                <Icon className={styles['submit-icon']} icon={'ic_search'} />
+            <Button className={styles['submit-button']} tabIndex={-1} onClick={queryInputOnSubmit}>
+                <Icon className={styles['icon']} icon={'ic_search'} />
             </Button>
         </label>
     );
diff --git a/src/common/NavBar/SearchBar/styles.less b/src/common/NavBar/SearchBar/styles.less
index bf219ec09..8472e5dd6 100644
--- a/src/common/NavBar/SearchBar/styles.less
+++ b/src/common/NavBar/SearchBar/styles.less
@@ -30,13 +30,10 @@
         cursor: text;
 
         &::placeholder, .placeholder {
+            max-height: 1.2em;
             opacity: 1;
             color: var(--color-surfacelight);
         }
-
-        .placeholder {
-            max-height: 1.2em;
-        }
     }
 
     .submit-button {
@@ -48,9 +45,8 @@
         width: 3.2rem;
         height: 3.2rem;
         background-color: var(--color-secondarylight60);
-        cursor: pointer;
 
-        .submit-icon {
+        .icon {
             flex: none;
             width: 1.1rem;
             height: 1.1rem;