Issue 763 remove library (#774)

* Issue-#763: Add search icon

* Issue-#763: Remove material-ui icon library

* Issue-#763: Remove @material-ui/lab library

* Issue-#763: Add custom search box

* Issue-#763: Remove Mui list

* Issue-#763: Remove Mui usage from SearchClient

* Issue-#763: Remove Mui components from SearchResultElement

* Issue-#763: Remove material-ui dependency from package.json

* Issue-#763: Remove double scroll bar

* Issue-#763: Refactor css

* Issue-#763: Rename file

* Issue-#763: Refactor searchButton style in HeaderHome

* Issue-#763: Use simplified search logo

* Issue-#763: Refactor search result element

* Issue-#763: Refactor box style

* Issue-#763: Refactor SerachClient

* Issue-#763: Refactor SerachClient and SearchComponent styles

* Issue-#763: Refactor SearchComponent.module.scss

* Trigger rebuild

package-lock.json

@@ -3142,11 +3142,6 @@
         "to-fast-properties": "^2.0.0"
       }
     },
-    "@emotion/hash": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
-      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
-    },
     "@endemolshinegroup/cosmiconfig-typescript-loader": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@endemolshinegroup/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-3.0.2.tgz",
@@ -4137,108 +4132,6 @@
         "unist-util-visit": "^1.3.0"
       }
     },
-    "@material-ui/core": {
-      "version": "4.12.3",
-      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.3.tgz",
-      "integrity": "sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw==",
-      "requires": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/styles": "^4.11.4",
-        "@material-ui/system": "^4.12.1",
-        "@material-ui/types": "5.1.0",
-        "@material-ui/utils": "^4.11.2",
-        "@types/react-transition-group": "^4.2.0",
-        "clsx": "^1.0.4",
-        "hoist-non-react-statics": "^3.3.2",
-        "popper.js": "1.16.1-lts",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0",
-        "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/lab": {
-      "version": "4.0.0-alpha.60",
-      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.60.tgz",
-      "integrity": "sha512-fadlYsPJF+0fx2lRuyqAuJj7hAS1tLDdIEEdov5jlrpb5pp4b+mRDUqQTUxi4inRZHS1bEXpU8QWUhO6xX88aA==",
-      "requires": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/utils": "^4.11.2",
-        "clsx": "^1.0.4",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0"
-      }
-    },
-    "@material-ui/styles": {
-      "version": "4.11.4",
-      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz",
-      "integrity": "sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==",
-      "requires": {
-        "@babel/runtime": "^7.4.4",
-        "@emotion/hash": "^0.8.0",
-        "@material-ui/types": "5.1.0",
-        "@material-ui/utils": "^4.11.2",
-        "clsx": "^1.0.4",
-        "csstype": "^2.5.2",
-        "hoist-non-react-statics": "^3.3.2",
-        "jss": "^10.5.1",
-        "jss-plugin-camel-case": "^10.5.1",
-        "jss-plugin-default-unit": "^10.5.1",
-        "jss-plugin-global": "^10.5.1",
-        "jss-plugin-nested": "^10.5.1",
-        "jss-plugin-props-sort": "^10.5.1",
-        "jss-plugin-rule-value-function": "^10.5.1",
-        "jss-plugin-vendor-prefixer": "^10.5.1",
-        "prop-types": "^15.7.2"
-      },
-      "dependencies": {
-        "csstype": {
-          "version": "2.6.17",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz",
-          "integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A=="
-        }
-      }
-    },
-    "@material-ui/system": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.1.tgz",
-      "integrity": "sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw==",
-      "requires": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/utils": "^4.11.2",
-        "csstype": "^2.5.2",
-        "prop-types": "^15.7.2"
-      },
-      "dependencies": {
-        "csstype": {
-          "version": "2.6.17",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz",
-          "integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A=="
-        }
-      }
-    },
-    "@material-ui/types": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
-      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A=="
-    },
-    "@material-ui/utils": {
-      "version": "4.11.2",
-      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz",
-      "integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==",
-      "requires": {
-        "@babel/runtime": "^7.4.4",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0"
-      }
-    },
     "@mdx-js/util": {
       "version": "2.0.0-next.8",
       "resolved": "https://registry.npmjs.org/@mdx-js/util/-/util-2.0.0-next.8.tgz",
@@ -4838,14 +4731,6 @@
         "csstype": "^3.0.2"
       }
     },
-    "@types/react-transition-group": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.2.tgz",
-      "integrity": "sha512-KibDWL6nshuOJ0fu8ll7QnV/LVTo3PzQ9aCPnRUYPfX7eZohHwLIdNHj7pftanREzHNP4/nJa8oeM73uSiavMQ==",
-      "requires": {
-        "@types/react": "*"
-      }
-    },
     "@types/readable-stream": {
       "version": "2.3.9",
       "resolved": "https://registry.npmjs.org/@types/readable-stream/-/readable-stream-2.3.9.tgz",
@@ -7571,11 +7456,6 @@
         "mimic-response": "^1.0.0"
       }
     },
-    "clsx": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
-      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
-    },
     "coa": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
@@ -8339,15 +8219,6 @@
         }
       }
     },
-    "css-vendor": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
-      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
-      "requires": {
-        "@babel/runtime": "^7.8.3",
-        "is-in-browser": "^1.0.2"
-      }
-    },
     "css-what": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz",
@@ -9089,15 +8960,6 @@
         "utila": "~0.4"
       }
     },
-    "dom-helpers": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
-      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-      "requires": {
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^3.0.2"
-      }
-    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -15840,11 +15702,6 @@
       "integrity": "sha512-8yKEWNX4z2YsofXAMT7KvA1g8p+GxtB1ffV8XtpAEGuXNAbCV5wdNKH+qTpw8SM9fh4aMPDR+yQuKfgnreyZlg==",
       "dev": true
     },
-    "hyphenate-style-name": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
-      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
-    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -16489,11 +16346,6 @@
       "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
       "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw=="
     },
-    "is-in-browser": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
-      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
-    },
     "is-installed-globally": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
@@ -17063,84 +16915,6 @@
         "verror": "1.10.0"
       }
     },
-    "jss": {
-      "version": "10.7.1",
-      "resolved": "https://registry.npmjs.org/jss/-/jss-10.7.1.tgz",
-      "integrity": "sha512-5QN8JSVZR6cxpZNeGfzIjqPEP+ZJwJJfZbXmeABNdxiExyO+eJJDy6WDtqTf8SDKnbL5kZllEpAP71E/Lt7PXg==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "csstype": "^3.0.2",
-        "is-in-browser": "^1.1.3",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "jss-plugin-camel-case": {
-      "version": "10.7.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.7.1.tgz",
-      "integrity": "sha512-+ioIyWvmAfgDCWXsQcW1NMnLBvRinOVFkSYJUgewQ6TynOcSj5F1bSU23B7z0p1iqK0PPHIU62xY1iNJD33WGA==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "hyphenate-style-name": "^1.0.3",
-        "jss": "10.7.1"
-      }
-    },
-    "jss-plugin-default-unit": {
-      "version": "10.7.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.7.1.tgz",
-      "integrity": "sha512-tW+dfYVNARBQb/ONzBwd8uyImigyzMiAEDai+AbH5rcHg5h3TtqhAkxx06iuZiT/dZUiFdSKlbe3q9jZGAPIwA==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.7.1"
-      }
-    },
-    "jss-plugin-global": {
-      "version": "10.7.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.7.1.tgz",
-      "integrity": "sha512-FbxCnu44IkK/bw8X3CwZKmcAnJqjAb9LujlAc/aP0bMSdVa3/MugKQRyeQSu00uGL44feJJDoeXXiHOakBr/Zw==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.7.1"
-      }
-    },
-    "jss-plugin-nested": {
-      "version": "10.7.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.7.1.tgz",
-      "integrity": "sha512-RNbICk7FlYKaJyv9tkMl7s6FFfeLA3ubNIFKvPqaWtADK0KUaPsPXVYBkAu4x1ItgsWx67xvReMrkcKA0jSXfA==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.7.1",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "jss-plugin-props-sort": {
-      "version": "10.7.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.7.1.tgz",
-      "integrity": "sha512-eyd5FhA+J0QrpqXxO7YNF/HMSXXl4pB0EmUdY4vSJI4QG22F59vQ6AHtP6fSwhmBdQ98Qd9gjfO+RMxcE39P1A==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.7.1"
-      }
-    },
-    "jss-plugin-rule-value-function": {
-      "version": "10.7.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.7.1.tgz",
-      "integrity": "sha512-fGAAImlbaHD3fXAHI3ooX6aRESOl5iBt3LjpVjxs9II5u9tzam7pqFUmgTcrip9VpRqYHn8J3gA7kCtm8xKwHg==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.7.1",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "jss-plugin-vendor-prefixer": {
-      "version": "10.7.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.7.1.tgz",
-      "integrity": "sha512-1UHFmBn7hZNsHXTkLLOL8abRl8vi+D1EVzWD4WmLFj55vawHZfnH1oEz6TUf5Y61XHv0smdHabdXds6BgOXe3A==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "css-vendor": "^2.0.8",
-        "jss": "10.7.1"
-      }
-    },
     "jsx-ast-utils": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz",
@@ -20155,11 +19929,6 @@
         "ts-pnp": "^1.1.6"
       }
     },
-    "popper.js": {
-      "version": "1.16.1-lts",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
-      "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
-    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -24617,11 +24386,6 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
-    "tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-    },
     "tinycolor2": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",

package.json

@@ -16,9 +16,6 @@
     "test": "npm run lint"
   },
   "dependencies": {
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.60",
     "@oceanprotocol/art": "^3.2.0",
     "axios": "^0.24.0",
     "classnames": "^2.3.1",

src/components/Header.jsx

@@ -48,7 +48,9 @@ const Header = () => (
                   {node.title}
                 </Link>
               ))}
+              <div className={styles.section}>
                 <SearchButton />
+              </div>
             </nav>
           </div>
         </header>

src/components/HeaderHome.jsx

@@ -26,12 +26,10 @@ const HeaderHome = () => (
             <Logo className={styles.headerLogo} />
             <h1 className={styles.headerTitle}>{siteTitle}</h1>
             <p className={styles.headerDescription}>
-              <div style={{ display: 'flex', flexDirection: 'column' }}>
               {siteDescription}
-                <div>
+              <div className={styles.searchButtonContainer}>
                 <SearchButton />
               </div>
-              </div>
             </p>
           </Content>
         </header>

src/components/HeaderHome.module.scss

@@ -46,3 +46,7 @@
     font-size: $font-size-large;
   }
 }
+
+.searchButtonContainer {
+  margin-top: $spacer * 0.5 ;
+}

src/components/Search/SearchButton.jsx

@@ -1,13 +1,16 @@
 import React from 'react'
 import { navigate } from 'gatsby'
+import styles from './SearchComponent.module.scss'
+import { ReactComponent as SearchIcon } from '../../images/search.svg'
 
-import { IconButton } from '@material-ui/core'
-import SearchIcon from '@material-ui/icons/Search'
 const SearchButton = () => {
   return (
-    <IconButton onClick={() => navigate('/search')}>
+    <div className={styles.searchButtonWrapper}>
-      <SearchIcon />
+      <SearchIcon
-    </IconButton>
+        className={styles.searchButton}
+        onClick={() => navigate('/search')}
+      />
+    </div>
   )
 }
 export default SearchButton

src/components/Search/SearchClient.jsx

@@ -1,33 +1,9 @@
 import React, { useState, useEffect } from 'react'
 import * as JsSearch from 'js-search'
 import PropTypes from 'prop-types'
-import { makeStyles } from '@material-ui/core/styles'
-import List from '@material-ui/core/List'
-import ListItem from '@material-ui/core/ListItem'
-import TextField from '@material-ui/core/TextField'
-import InputAdornment from '@material-ui/core/InputAdornment'
-import SearchIcon from '@material-ui/icons/Search'
 import SearchResultElement from './SearchResultElement'
-
+import { ReactComponent as SearchIcon } from '../../images/search.svg'
-const useStyles = makeStyles((theme) => ({
+import styles from './SearchComponent.module.scss'
-  parent: {
-    overflow: 'hidden',
-    position: 'relative',
-    width: '100%'
-  },
-  child: {
-    background: 'green',
-    height: '100%',
-    width: '50%',
-    position: 'absolute',
-    right: 0,
-    top: 0
-  },
-  root: {
-    margin: 'auto',
-    width: '50%'
-  }
-}))
 
 const SearchClient = ({ searchableData }) => {
   const [searchState, setSearchState] = useState({
@@ -43,19 +19,11 @@ const SearchClient = ({ searchableData }) => {
     touched: false
   })
 
-  const classes = useStyles()
-
   useEffect(() => {
     rebuildIndex(searchableData)
   }, [])
 
   const rebuildIndex = (searchableData) => {
-    // const {
-    //   removeStopWords,
-    //   selectedStrategy,
-    //   selectedSanitizer,
-    //   termFrequency
-    // } = searchState
     const dataToSearch = new JsSearch.Search('title')
     dataToSearch.addIndex('title')
     dataToSearch.addIndex('description')
@@ -84,40 +52,25 @@ const SearchClient = ({ searchableData }) => {
   }
 
   return (
-    <div style={{ height: '100%' }}>
+    <div>
       <form onSubmit={handleSubmit}>
-        <TextField
+        <div id="search-container" className={styles.searchTextboxContainer}>
-          variant="outlined"
+          <SearchIcon className={styles.searchBoxImg} />
+          <input
+            className={styles.searchTextInput}
             placeholder="Search"
-          style={{
+            type="text"
-            margin: '10px auto',
-            width: '100%'
-          }}
             autoFocus
             value={searchState.searchQuery}
             onChange={searchData}
-          InputProps={{
-            startAdornment: (
-              <InputAdornment position="start">
-                <SearchIcon />
-              </InputAdornment>
-            )
-          }}
           />
+        </div>
       </form>
 
-      <div
-        id="result-list-conatiner"
-        style={{ overflowY: 'auto', height: '100%' }}
-        className={classes.parent}
-      >
       {searchState.touched ? (
-          <div>
         <ResultList searchResults={searchState.searchResults} />
-          </div>
       ) : null}
     </div>
-    </div>
   )
 }
 
@@ -127,18 +80,15 @@ SearchClient.propTypes = {
 
 const ResultList = ({ searchResults }) => {
   return (
-    <div style={{ maxHeight: '100%' }}>
-      <div>Total results found: {searchResults.length}</div>
-
     <div>
-        <List style={{ maxHeight: '100%' }}>
+      <p>Total results found: {searchResults.length}</p>
+      <ul>
         {searchResults.map((element) => (
-            <ListItem style={{ before: { content: null } }} key={element.id}>
+          <li className={styles.resultListElement} key={element.id}>
             <SearchResultElement element={element} />
-            </ListItem>
+          </li>
         ))}
-        </List>
+      </ul>
-      </div>
     </div>
   )
 }

src/components/Search/SearchComponent.jsx

@@ -6,6 +6,7 @@ import SearchClient from './SearchClient'
 import Layout from '../../components/Layout'
 import HeaderSection from '../../components/HeaderSection'
 import PropTypes from 'prop-types'
+import styles from './SearchComponent.module.scss'
 
 const SearchComponent = ({ location }) => {
   const data = useStaticQuery(graphql`
@@ -64,18 +65,8 @@ const SearchComponent = ({ location }) => {
     <Layout location={location}>
       <HeaderSection title="Search" />
       <main>
-        <article style={{ height: '700px' }}>
+        <article className={styles.searchPage}>
-          <div
-            id="search-client-container"
-            style={{
-              margin: 'auto',
-              width: '50%',
-              height: '100%',
-              paddingBottom: '50px'
-            }}
-          >
           <SearchClient searchableData={searchableData} />
-          </div>
         </article>
       </main>
     </Layout>

src/components/Search/SearchComponent.module.scss

@@ -1,10 +1,65 @@
 @import 'variables';
 
-.searchform input[type='text'] {
+.searchButtonWrapper {
-  float: right;
+  display: 'flex';
-  padding: 6px;
+  align-items: 'center';
-  border: none;
+}
-  margin-top: 8px;
+
-  margin-right: 16px;
+.searchButton {
-  font-size: 17px;
+  cursor: pointer;
+}
+
+.searchPage {
+  min-height: $spacer * 50;
+  width: 50%;
+  margin: auto;
+}
+
+.searchTextboxContainer {
+  display: flex;
+  border: $brand-border-width solid;
+  width: 100%;
+  margin-bottom: $spacer * 0.5;
+  border-radius: $border-radius;
+}
+
+.searchTextInput {
+  width: 100%;
+  padding: $spacer * 0.1;
+  border: none;
+  outline: none;
+  font-size: medium;
+}
+
+.searchBoxImg {
+  padding: 0.75rem;
+  min-width: $spacer * 1.25;
+  text-align: center;
+}
+
+.resultListElement {
+  &:before {
+    content: '';
+  }
+}
+
+.resultBox {
+  composes: box from '../../styles/box.module.scss';
+
+  .section {
+    margin: 0;
+    font-size: $font-size-small;
+    color: $brand-grey-dark;
+  }
+
+  .title {
+    font-size: $font-size-large;
+    margin: 0;
+  }
+
+  .content {
+    font-size: $font-size-small;
+    margin: 0;
+    color: $brand-grey-dark;
+  }
 }

src/components/Search/SearchResultElement.jsx

@@ -1,49 +1,22 @@
 import React from 'react'
 import { Link } from 'gatsby'
 import PropTypes from 'prop-types'
-import Card from '@material-ui/core/Card'
+import styles from './SearchComponent.module.scss'
-import CardContent from '@material-ui/core/CardContent'
-import Typography from '@material-ui/core/Typography'
-import { makeStyles } from '@material-ui/core/styles'
-
-const useStyles = makeStyles({
-  root: {
-    minWidth: 275
-  },
-  bullet: {
-    display: 'inline-block',
-    margin: '0 2px',
-    transform: 'scale(0.8)'
-  },
-  title: {
-    fontSize: 14
-  },
-  pos: {
-    marginBottom: 12
-  }
-})
 
 const SearchResultElement = ({ element }) => {
-  const classes = useStyles()
   const { slug, title, section, description } = element
   return (
-    <Card container alignItems="center" style={{ width: '100%' }}>
+    <Link to={slug}>
-      <CardContent>
+      <div className={styles.resultBox}>
-        <Typography
+        <header>
-          className={classes.title}
+          <div className={styles.section}>{section}</div>
-          color="textSecondary"
+          <h1 className={styles.title}>{title}</h1>
-          gutterBottom
+        </header>
-        >
+        {description && (
-          {section}
+          <div className={styles.content}>{description.substring(0, 100)}</div>
-        </Typography>
+        )}
-        <Typography variant="h6" component="h2">
+      </div>
-          <Link to={slug}>{title}</Link>
+    </Link>
-        </Typography>
-        <Typography className={classes.pos} color="textSecondary">
-          {description ? description.substring(0, 100) + '...' : null}
-        </Typography>
-      </CardContent>
-    </Card>
   )
 }
 

src/images/search.svg

@@ -0,0 +1,3 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="search" fill-rule="evenodd" clip-rule="evenodd" d="M11.5846 12.6731C10.3622 13.6572 8.81213 14.2501 7.12507 14.2501C3.19599 14.2501 0 11.0534 0 7.12507C0 3.19599 3.19599 0 7.12507 0C11.0542 0 14.2501 3.19599 14.2501 7.12507C14.2501 8.7963 13.6675 10.3329 12.6993 11.549L18.7698 17.6496C19.0778 17.9591 19.077 18.4603 18.7667 18.769C18.4555 19.0778 17.9552 19.077 17.6472 18.7667L11.5846 12.6731ZM12.6668 7.12507C12.6668 4.06921 10.1801 1.58335 7.12507 1.58335C4.06921 1.58335 1.58335 4.06921 1.58335 7.12507C1.58335 10.1801 4.06921 12.6668 7.12507 12.6668C10.1801 12.6668 12.6668 10.1801 12.6668 7.12507Z" fill="black"/>
+</svg>

src/styles/_variables.scss

@@ -65,3 +65,7 @@ $brand-border-width: 1px;
 $border-radius: 0.2rem;
 
 $narrowWidth: 35rem;
+
+$box-shadow-color: rgba(0, 0, 0, 0.2);
+$border-color: #e2e2e2;
+$background-content: #fff;

src/styles/box.module.scss

@@ -0,0 +1,23 @@
+@import 'variables';
+
+.box {
+    display: block;
+    background: $background-content;
+    border-radius: $border-radius;
+    border: 1px solid $border-color;
+    box-shadow: 0 6px 17px 0 $box-shadow-color;
+    padding: $spacer * 0.5;
+  }
+  
+  @media (min-width: 40rem) {
+    .box {
+      padding: var($spacer);
+    }
+  }
+  
+  a.box:hover,
+  a.box:focus {
+    outline: 0;
+    transform: translate3d(0, -0.1rem, 0);
+    box-shadow: 0 10px 25px 0 $box-shadow-color;
+  }