From 619c181a101760a49764ee6e7818ac5b88173055 Mon Sep 17 00:00:00 2001
From: Akshay <akshay.ap95@gmail.com>
Date: Sun, 12 Sep 2021 23:10:29 +0200
Subject: [PATCH] WIP: Improve UI

---
 gatsby-node.js                                    |  2 +-
 package-lock.json                                 |  8 ++++++++
 package.json                                      |  1 +
 src/components/{ => Search}/SearchComponent.jsx   | 13 ++++++++-----
 src/components/Search/SearchComponent.module.scss | 10 ++++++++++
 5 files changed, 28 insertions(+), 6 deletions(-)
 rename src/components/{ => Search}/SearchComponent.jsx (91%)
 create mode 100644 src/components/Search/SearchComponent.module.scss

diff --git a/gatsby-node.js b/gatsby-node.js
index 374f4b1b..721146a7 100755
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -210,7 +210,7 @@ const createDeploymentsPage = async (createPage) => {
 }
 
 const createSearchPage = async (createPage, searchContext) => {
-  const template = path.resolve('./src/components/SearchComponent.jsx')
+  const template = path.resolve('./src/components/Search/SearchComponent.jsx')
   const slug = `/concepts/search/`
 
   createPage({
diff --git a/package-lock.json b/package-lock.json
index 2693100c..90c37bac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4156,6 +4156,14 @@
         "react-transition-group": "^4.4.0"
       }
     },
+    "@material-ui/icons": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz",
+      "integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.4"
+      }
+    },
     "@material-ui/styles": {
       "version": "4.11.4",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz",
diff --git a/package.json b/package.json
index df494419..c9f0ae77 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.12.3",
+    "@material-ui/icons": "^4.11.2",
     "@oceanprotocol/art": "^3.2.0",
     "axios": "^0.21.4",
     "classnames": "^2.3.1",
diff --git a/src/components/SearchComponent.jsx b/src/components/Search/SearchComponent.jsx
similarity index 91%
rename from src/components/SearchComponent.jsx
rename to src/components/Search/SearchComponent.jsx
index c3eda496..8ce867b4 100644
--- a/src/components/SearchComponent.jsx
+++ b/src/components/Search/SearchComponent.jsx
@@ -8,6 +8,9 @@ import Backdrop from '@material-ui/core/Backdrop'
 import Fade from '@material-ui/core/Fade'
 import List from '@material-ui/core/List'
 import ListItem from '@material-ui/core/ListItem'
+import styles from './SearchComponent.module.scss'
+import Button from '@material-ui/core/Button'
+import SearchIcon from '@material-ui/icons/Search'
 
 const useStyles = makeStyles((theme) => ({
   modal: {
@@ -107,9 +110,9 @@ const ClientSearch = ({ searchableData }) => {
 
   return (
     <div>
-      <button type="button" onClick={handleOpen}>
+      <Button onClick={handleOpen} startIcon={<SearchIcon />}>
         Search
-      </button>
+      </Button>
       <Modal
         className={classes.modal}
         open={open}
@@ -122,19 +125,19 @@ const ClientSearch = ({ searchableData }) => {
       >
         <Fade in={open}>
           <div className={classes.paper}>
-            <h2>Search</h2>
             <div>
               <div style={{ margin: '0 auto' }}>
-                <form onSubmit={handleSubmit}>
+                <form onSubmit={handleSubmit} className={styles.searchform}>
                   <input
                     id="Search"
                     value={searchState.searchQuery}
                     onChange={searchData}
-                    placeholder="Enter your search here"
+                    placeholder="Search..."
                     style={{
                       margin: '0 auto',
                       width: '400px'
                     }}
+                    type="text"
                   />
                 </form>
               </div>
diff --git a/src/components/Search/SearchComponent.module.scss b/src/components/Search/SearchComponent.module.scss
new file mode 100644
index 00000000..7be7c8f9
--- /dev/null
+++ b/src/components/Search/SearchComponent.module.scss
@@ -0,0 +1,10 @@
+@import 'variables';
+
+.searchform input[type=text] {
+    float: right;
+    padding: 6px;
+    border: none;
+    margin-top: 8px;
+    margin-right: 16px;
+    font-size: 17px;
+}
\ No newline at end of file