WIP: Improve UI

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({

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",

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",

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>

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;
+}