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

@@ -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;
 }

src/components/Search/SearchHits/SearchCard/styles.css

@@ -1,14 +1,14 @@
 .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;
 
     @apply h-14;
 
     @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;
 }
 

src/components/Search/SearchHits/styles.css

@@ -7,4 +7,5 @@
 .no__search__hit {
     @apply text-center;
     @apply pt-6;
+    @apply text-gray-400;
 }

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 {

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,19 +18,19 @@
     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%);
     overflow-y: auto;
 }
 
 .separator {
-    @apply border-[#ff3f81]/75;
+    @apply border-[#303036];
 }