style: 💄 basic styling

src/components/SearchBar/SearchBar.scss

@@ -0,0 +1,75 @@
+.searchBarContainer {
+  display: flex;
+  flex-direction: column;
+  width: 34em;
+  height: 3.8em;
+  background-color: #ccc;
+  border-radius: 6px;
+  box-shadow: 0px 2px 12px 3px rgba(0, 0, 0, 0.14)
+}
+
+.searchInputContainer {
+  width: 100%;
+  min-height: 4em;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 2px 15px;
+}
+
+.inputClass {
+  width: 100%;
+  height: 100%;
+  outline: none;
+  border: none;
+  font-size: 21px;
+  color: #12112e;
+  font-weight: 500;
+  border-radius: 6px;
+  background-color: transparent;
+
+  &:focus {
+    outline: none;
+    &::placeholder {
+      opacity: 0;
+    }
+  }
+
+  &::placeholder {
+    color: #bebebe;
+    transition: all 250ms ease-in-out;
+  }
+}
+
+.searchIcon {
+  color: #bebebe;
+  font-size: 27px;
+  margin-right: 10px;
+  margin-top: 6px;
+  vertical-align: middle;
+}
+
+.searchContent {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 1em;
+  overflow-y: auto;
+}
+
+.loadingWrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.warningMessage {
+  color: #a1a1a1;
+  font-size: 14px;
+  display: flex;
+  align-self: center;
+  justify-self: center;
+}

src/components/SearchBar/index.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useFlexSearch } from 'react-use-flexsearch';
-import { AnimatePresence, AnimatePresense, motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 import { useClickOutside } from 'react-click-outside-hook';
 import { graphql, Link, useStaticQuery } from 'gatsby';
 import MoonLoader from 'react-spinners/MoonLoader';
-import config from '../../config.json';
+// import config from '../../config.json';
 import { SearchResult } from '../../types';
+import './SearchBar.scss';
 
 const containerTransition = { type: 'spring', damping: 22, stiffness: 150 };
 const containerVariants = {
@@ -58,9 +59,6 @@ const SearchBar = (): JSX.Element => {
     setQuery('');
     setLoading(false);
     setNoResults(false);
-    if (inputRef.current) {
-      inputRef.current.value = '';
-    }
   };
 
   useEffect(() => {
@@ -70,34 +68,28 @@ const SearchBar = (): JSX.Element => {
   }, [isClickedOutside]);
 
   return (
-    <div
+    <motion.div
       className="searchBarContainer"
       animate={isExpanded ? 'expanded' : 'collapsed'}
       variants={containerVariants}
       transition={containerTransition}
       ref={parentRef}
     >
-      <div className="SearchInputContainer">
+      <div className="searchInputContainer">
         <div className="searchIcon"></div>
-        {/* <input
-          type="text"
-          placeholder="search"
-          onFocus={expandContainer}
-          ref={inputRef}
-          value={e => setQuery(e.target.value)}
-          onChange={changeHandler}
-        /> */}
         <input
+          autoComplete="false"
+          autoCorrect="false"
+          className="inputClass"
           name="query"
           value={query}
           onChange={changeHandler}
           placeholder="search"
           onFocus={expandContainer}
-          ref={inputRef}
         />
         <AnimatePresence>
           {isExpanded && (
-            <span
+            <motion.span
               className="material-icons"
               key="close-icon"
               initial={{ opacity: 0 }}
@@ -107,12 +99,11 @@ const SearchBar = (): JSX.Element => {
               transition={{ duration: 0.2 }}
             >
               close
-            </span>
+              </motion.span>
           )}
         </AnimatePresence>
       </div>
 
-      {/* results  data*/}
       {isExpanded && (
         <div className="searchContent">
           {/* loading state with spinner displaying */}
@@ -148,7 +139,7 @@ const SearchBar = (): JSX.Element => {
           )}
         </div>
       )}
-    </div>
+    </motion.div>
   );
 };
 export default SearchBar;