)
}
@@ -127,18 +80,15 @@ SearchClient.propTypes = {
const ResultList = ({ searchResults }) => {
return (
-
-
Total results found: {searchResults.length}
-
-
-
- {searchResults.map((element) => (
-
-
-
- ))}
-
-
+
+
Total results found: {searchResults.length}
+
+ {searchResults.map((element) => (
+ -
+
+
+ ))}
+
)
}
diff --git a/src/components/Search/SearchComponent.jsx b/src/components/Search/SearchComponent.jsx
index 696fbce3..fd4d7f5e 100644
--- a/src/components/Search/SearchComponent.jsx
+++ b/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 }) => {
-
-
-
-
+
+
diff --git a/src/components/Search/SearchComponent.module.scss b/src/components/Search/SearchComponent.module.scss
index d627429d..3c4a0cc7 100644
--- a/src/components/Search/SearchComponent.module.scss
+++ b/src/components/Search/SearchComponent.module.scss
@@ -1,10 +1,65 @@
@import 'variables';
-.searchform input[type='text'] {
- float: right;
- padding: 6px;
- border: none;
- margin-top: 8px;
- margin-right: 16px;
- font-size: 17px;
+.searchButtonWrapper {
+ display: 'flex';
+ align-items: 'center';
+}
+
+.searchButton {
+ 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;
+ }
}
diff --git a/src/components/Search/SearchResultElement.jsx b/src/components/Search/SearchResultElement.jsx
index 466b2ae6..a9718f11 100644
--- a/src/components/Search/SearchResultElement.jsx
+++ b/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 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
- }
-})
+import styles from './SearchComponent.module.scss'
const SearchResultElement = ({ element }) => {
- const classes = useStyles()
const { slug, title, section, description } = element
return (
-
-
-
- {section}
-
-
- {title}
-
-
- {description ? description.substring(0, 100) + '...' : null}
-
-
-
+
+
+
+ {description && (
+
{description.substring(0, 100)}
+ )}
+
+
)
}
diff --git a/src/images/search.svg b/src/images/search.svg
new file mode 100644
index 00000000..5daf1b33
--- /dev/null
+++ b/src/images/search.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index d77f70d0..385a08d5 100644
--- a/src/styles/_variables.scss
+++ b/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;
\ No newline at end of file
diff --git a/src/styles/box.module.scss b/src/styles/box.module.scss
new file mode 100644
index 00000000..5a53046a
--- /dev/null
+++ b/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;
+ }