Issue-#545: Change location of serach button on home page

src/components/HeaderHome.jsx

@@ -3,6 +3,7 @@ import { StaticQuery, graphql } from 'gatsby'
 import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
 import Content from '../components/Content'
 import styles from './HeaderHome.module.scss'
+import SearchButton from '../components/Search/SearchButton'
 
 const HeaderHome = () => (
   <StaticQuery
@@ -24,7 +25,14 @@ const HeaderHome = () => (
           <Content>
             <Logo className={styles.headerLogo} />
             <h1 className={styles.headerTitle}>{siteTitle}</h1>
-            <p className={styles.headerDescription}>{siteDescription}</p>
+            <p className={styles.headerDescription}>
+              <div style={{ display: 'flex', flexDirection: 'column' }}>
+                {siteDescription}
+                <div>
+                  <SearchButton />
+                </div>
+              </div>
+            </p>
           </Content>
         </header>
       )

src/components/Search/SearchClient.jsx

@@ -108,22 +108,11 @@ const SearchClient = ({ searchableData }) => {
 
       <div
         id="result-list-conatiner"
-        style={{ overflowY: 'scroll', height: '100%' }}
+        style={{ overflowY: 'auto', height: '100%' }}
         className={classes.parent}
       >
         {searchState.touched ? (
           <div>
-            {/* <List>
-              {searchState.searchResults.map((element) => (
-                <ListItem
-                  style={{ before: { content: null } }}
-                  key={element.id}
-                >
-                  <Link to={element.slug}>{element.title} </Link>
-                </ListItem>
-              ))}
-              
-            </List> */}
             <ResultList searchResults={searchState.searchResults} />
           </div>
         ) : null}
@@ -137,8 +126,6 @@ SearchClient.propTypes = {
 }
 
 const ResultList = ({ searchResults }) => {
-  const url = typeof window !== 'undefined' ? window.location.host : ''
-  console.log('url', url)
   return (
     <div style={{ maxHeight: '100%' }}>
       <div>Total results found: {searchResults.length} </div>

src/components/Search/SearchComponent.jsx

@@ -46,10 +46,15 @@ const SearchComponent = ({ location }) => {
     <Layout location={location}>
       <HeaderSection title="Search" />
       <main>
-        <article style={{ height: '500px' }}>
+        <article style={{ height: '700px' }}>
           <div
             id="search-client-container"
-            style={{ margin: 'auto', width: '50%', height: '100%' }}
+            style={{
+              margin: 'auto',
+              width: '50%',
+              height: '100%',
+              paddingBottom: '50px'
+            }}
           >
             <SearchClient searchableData={searchableData} />
           </div>

src/pages/index.jsx

@@ -9,7 +9,6 @@ import HeaderHome from '../components/HeaderHome'
 import Repositories from '../components/Repositories'
 import { ReactComponent as Arrow } from '../images/arrow.svg'
 import styles from './index.module.scss'
-import SearchButton from '../components/Search/SearchButton'
 
 const SectionBox = ({ to, children, ...props }) =>
   to ? (
@@ -67,9 +66,6 @@ const IndexPage = ({ data, location }) => (
             </li>
           ))}
         </ul>
-        <div className={styles.searchButton}>
-          <SearchButton />
-        </div>
         <Repositories />
       </Content>
     </Layout>