From f6e8099bc2a6acd9b52eb617641f802e25aca5fa Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Thu, 16 May 2019 19:29:08 +0300
Subject: [PATCH] SearchBar static placeholder rendered on non search routes

---
 src/common/NavBar/SearchBar/SearchBar.js | 48 +++++++++++++-----------
 src/common/NavBar/SearchBar/styles.less  |  9 ++++-
 2 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/src/common/NavBar/SearchBar/SearchBar.js b/src/common/NavBar/SearchBar/SearchBar.js
index 3b989a70c..0d10a784a 100644
--- a/src/common/NavBar/SearchBar/SearchBar.js
+++ b/src/common/NavBar/SearchBar/SearchBar.js
@@ -18,11 +18,9 @@ const SearchBar = React.memo(({ className }) => {
         const query = (active && queryParams.has('q')) ? queryParams.get('q') : '';
         return [active, query];
     }, [locationHash]);
-    const onQueryInputFocus = React.useCallback(() => {
-        if (!active) {
-            window.location = '#/search';
-        }
-    }, [active]);
+    const navigateToSearch = React.useCallback(() => {
+        window.location = '#/search';
+    }, []);
     const onQueryInputSubmit = React.useCallback(() => {
         window.location.replace(`#/search?q=${searchInputRef.current.value}`);
     }, []);
@@ -32,23 +30,29 @@ const SearchBar = React.memo(({ className }) => {
         }
     }, [active, focusable]);
     return (
-        <label className={classnames(className, styles['search-label'], { 'active': active })}>
-            <Input
-                key={query}
-                ref={searchInputRef}
-                className={styles['search-input']}
-                defaultValue={query}
-                tabIndex={-1}
-                size={1}
-                type={'text'}
-                placeholder={'Search'}
-                autoCorrect={'off'}
-                autoCapitalize={'off'}
-                spellCheck={false}
-                onFocus={onQueryInputFocus}
-                onSubmit={onQueryInputSubmit}
-            />
-            <Input className={styles['submit-button']} type={'button'} tabIndex={-1} onClick={onQueryInputSubmit}>
+        <label className={classnames(className, styles['search-label'], { 'active': active })} onClick={!active ? navigateToSearch : null}>
+            {
+                active ?
+                    <Input
+                        key={query}
+                        ref={searchInputRef}
+                        className={styles['search-input']}
+                        defaultValue={query}
+                        tabIndex={-1}
+                        size={1}
+                        type={'text'}
+                        placeholder={'Search'}
+                        autoCorrect={'off'}
+                        autoCapitalize={'off'}
+                        spellCheck={false}
+                        onSubmit={onQueryInputSubmit}
+                    />
+                    :
+                    <div className={styles['search-input']}>
+                        <div className={styles['placeholder']}>Search</div>
+                    </div>
+            }
+            <Input className={styles['submit-button']} type={'button'} tabIndex={-1} onClick={active ? onQueryInputSubmit : null}>
                 <Icon className={styles['submit-icon']} icon={'ic_search'} />
             </Input>
         </label>
diff --git a/src/common/NavBar/SearchBar/styles.less b/src/common/NavBar/SearchBar/styles.less
index c4a0aad9a..16cf2137f 100644
--- a/src/common/NavBar/SearchBar/styles.less
+++ b/src/common/NavBar/SearchBar/styles.less
@@ -22,11 +22,16 @@
 
     .search-input {
         flex: 1;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
         padding: 0 0.8em;
         color: var(--color-surfacelighter);
+        cursor: text;
 
-        &::placeholder {
-            color: var(--color-surfacelighter);
+        &::placeholder, .placeholder {
+            opacity: 1;
+            color: var(--color-surfacelight);
         }
     }