Merge pull request #30 from WildCodeSchool-2024-09/fix-dropdown-menu-css

Fix dropdown menu css

Author: Raphael77850

client/src/App.css

@@ -8,7 +8,10 @@
 
 :root {
   --bgColor: #0d0d0d;
+  --bgColorDarkRed: #7f1000;
+  --bgColorWhite: #f2f2f2;
   --titleColor: #ed0000;
+  --titleColorDark: #f23005;
   --bgRedColor: #7f1000;
   --textColorWhite: #fffef8;
   --titleFont: "Bagel Fat One";

client/src/components/Header/Searchbar/SearchBar.css

@@ -1,3 +1,9 @@
+form {
+  padding: 0.5rem;
+  grid-area: 3 / 1 / 4 / 4;
+  text-align: center;
+}
+
 .searchbar-container {
   position: relative;
   display: flex;
@@ -42,6 +48,12 @@ button.search-button {
   margin-left: 1rem;
 }
 
+button.search-button:hover {
+  background-color: var(--titleColorDark);
+  cursor: pointer;
+  transition: 0.1s ease;
+}
+
 .dropdown-menu {
   position: absolute;
   top: calc(100%);
@@ -115,6 +127,10 @@ button.search-button {
 }
 
 @media screen and (min-width: 768px) {
+  form {
+    grid-area: 2 / 2 / 3 / 3;
+    width: max-content;
+  }
   input.search-input {
     width: 18rem;
     height: 2rem;

client/src/components/Header/Searchbar/index.tsx

@@ -56,7 +56,7 @@ function Searchbar() {
           onClick={handleSubmit}
           aria-label="Valider la recherche"
         >
-          Valider
+          Recherche
         </button>
       </div>