Added styling to search

harrisoncramer · Jan 17, 2022 · a688e12 · a688e12
1 parent e6a3dfb
commit a688e12
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/components/search/index.js b/src/components/search/index.js
@@ -89,13 +89,17 @@ const Search = (props) => {
 
 const ResultList = ({ results, query }) => {
   return (
-    <ul className="search-results absolute z-10 bg-app-white rounded-b-lg rounded-tr-lg mt-1 max-h-80 overflow-scroll">
+    <ul className="search-results absolute z-10 bg-app-background rounded-b-lg rounded-tr-lg mt-1 max-h-80 overflow-scroll shadow-lg">
       {results.length > 0 ? (
         results.map((node, i) => {
           const type = node.__typename === 'ContentfulBlog' ? 'blog' : 'recipe'
+          const isDarker = i % 2 === 0
+          const color = isDarker
+            ? 'bg-app-header bg-opacity-30 md:hover:bg-opacity-40'
+            : 'bg-app-header bg-opacity-10 md:hover:bg-opacity-20'
           return (
             <Link to={`/${type}/${node.slug}`} key={i}>
-              <li className="search-results__item py-3 px-4 md:hover:bg-app-theme md:hover:bg-opacity-5 border border-app-gray">
+              <li className={`search-results__item py-3 px-4 ${color}`}>
                 <h4>{node.title}</h4>
               </li>
             </Link>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -32,6 +32,7 @@ module.exports = {
       'app-header': '#f8b591',
       'app-theme': '#f4473a',
       'app-background': '#fff5e1',
+      'app-background-dark': '#e6ddcc',
       'app-gray': '#ebebf2',
       'app-gray-light': '#f8f8ff',
     },