From 97115ae5e978ed62ef5ade9fddb986377df83dcd Mon Sep 17 00:00:00 2001
From: Jenny <gebauerjenny@yahoo.de>
Date: Tue, 23 Jan 2024 14:26:57 +0100
Subject: [PATCH] 89.redesign search section (#223)

* #89 change color from modal background

* #89 adjust search footer and separator

* #89 recolor separator

* #89 redesign search footer

* #89 redesign search input

* #89 new text color for no search hit text

* #89 redesign search hits
---
 src/components/Search/SearchFooter/styles.css        | 12 +++++++-----
 .../Search/SearchHits/SearchCard/styles.css          |  8 ++++----
 src/components/Search/SearchHits/styles.css          |  1 +
 src/components/Search/SearchInput/styles.css         |  4 ++--
 src/components/Search/styles.css                     | 12 ++++++------
 5 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/components/Search/SearchFooter/styles.css b/src/components/Search/SearchFooter/styles.css
index 4763673..afe6858 100644
--- a/src/components/Search/SearchFooter/styles.css
+++ b/src/components/Search/SearchFooter/styles.css
@@ -1,20 +1,22 @@
 .modal__footer {
     @apply h-10;
-    @apply m-2;
+    @apply my-2;
+    @apply mx-3;
     @apply flex;
-    @apply text-[#FF85AF];
+    @apply text-[#565661];
     @apply justify-between;
     @apply items-center;
 }
 
 .modal__footer__link {
-    @apply hover:text-[#ff3f81];
+    @apply no-underline;
+    @apply hover:text-claret;
 }
 
 .modal__footer__image {
     @apply w-auto;
     @apply h-8;
     @apply rounded-full;
-    @apply bg-[#FF85AF];
-    @apply hover:bg-[#ff3f81];
+    @apply bg-[#565661];
+    @apply hover:bg-claret;
 }
diff --git a/src/components/Search/SearchHits/SearchCard/styles.css b/src/components/Search/SearchHits/SearchCard/styles.css
index 859ec40..78ee0fc 100644
--- a/src/components/Search/SearchHits/SearchCard/styles.css
+++ b/src/components/Search/SearchHits/SearchCard/styles.css
@@ -1,5 +1,7 @@
 .search__card {
-    @apply bg-[#B0CFD4] hover:bg-[#6DA7B0];
+    @apply bg-claret hover:bg-[#61052A];
+    @apply text-gray-400 hover:text-gray-400;
+    @apply no-underline;
 
     @apply mb-2 mr-6 ml-2 first:mt-2;
 
@@ -7,8 +9,6 @@
 
     @apply rounded-md;
 
-    @apply text-[#24282D] hover:text-[#24282D];
-
     @apply leading-5;
 
     @apply flex;
@@ -21,7 +21,7 @@
 }
 
 .card__icon {
-    @apply text-[#508A91];
+    @apply text-gray-400;
     @apply mr-2;
 }
 
diff --git a/src/components/Search/SearchHits/styles.css b/src/components/Search/SearchHits/styles.css
index eb7cb5c..d5221fa 100644
--- a/src/components/Search/SearchHits/styles.css
+++ b/src/components/Search/SearchHits/styles.css
@@ -7,4 +7,5 @@
 .no__search__hit {
     @apply text-center;
     @apply pt-6;
+    @apply text-gray-400;
 }
diff --git a/src/components/Search/SearchInput/styles.css b/src/components/Search/SearchInput/styles.css
index a0849c7..7eec7b7 100644
--- a/src/components/Search/SearchInput/styles.css
+++ b/src/components/Search/SearchInput/styles.css
@@ -8,8 +8,8 @@
 
     border: 2px solid #e0004f;
 
-    @apply placeholder:text-gray-400;
-    @apply text-slate-800;
+    @apply placeholder:text-[#565661];
+    @apply text-gray-400;
 }
 
 .input__icon {
diff --git a/src/components/Search/styles.css b/src/components/Search/styles.css
index 3354d09..a6085ee 100644
--- a/src/components/Search/styles.css
+++ b/src/components/Search/styles.css
@@ -2,8 +2,8 @@
     z-index: 999;
     position: fixed;
 
-    -webkit-tap-highlight-color: #fff;
-    background-color: #cae0e280;
+    -webkit-tap-highlight-color: #131315d9;
+    background-color: #131315d9;
 
     box-sizing: border-box;
     inset: 0;
@@ -18,13 +18,13 @@
     left: 40%;
 
     -webkit-tap-highlight-color: #fff;
-    background-color: #ffebf2;
+    background-color: #26262c;
 
     box-sizing: border-box;
-    border: 1px solid #ffebf2;
+    border: 1px solid #303036;
     @apply rounded-xl;
 
-    @apply drop-shadow-lg;
+    @apply drop-shadow-md;
 
     outline: 0;
     transform: translateX(-50%);
@@ -32,5 +32,5 @@
 }
 
 .separator {
-    @apply border-[#ff3f81]/75;
+    @apply border-[#303036];
 }