Reskin header

Author: RadValentin

frontend/src/components/Header.css

@@ -2,7 +2,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background-color: coral;
+    background-color: var(--bg-secondary-dark);
     flex: 0 0 var(--player-height-lg);
     padding: 0.5em 2em;
 
@@ -13,34 +13,46 @@
 
   & .logo {
     display: inline-block;
-    color: #fff;
+    color: var(--text-primary);
     font-family: "Orbitron", sans-serif;
     font-size: var( --font-size-app-title);
     font-weight: 700;
     letter-spacing: 0.05em;
-    text-shadow: 2px 2px #a13c2f;
+    text-shadow: 0px 0px 20px var(--accent-cyan-light);
     text-decoration: none;
   }
 
-  & input {
-    border-radius: 6px;
-  }
+  & .search-box {
+    & input {
+      height: 2.6rem;
+      padding: 0.5em 1em;
+      border: 1px solid var(--bg-secondary-light);
+      border-radius: 6px 0 0 6px;
+      font-size: 1em;
+      background: var(--bg-secondary-light);
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }
 
-  & input {
-    padding: 0.5em 1em;
-    border: 1px solid #ccc;
-    font-size: 1em;
-    background: #fff;
-    transition: border-color 0.2s, box-shadow 0.2s;
-  }
+    & input:focus {
+      outline: none;
+      box-shadow: var(--shadow-outline);
+    };
+
+    & .button-search {
+      height: 2.6rem;
+      border: 1px solid var(--bg-secondary);
+      border-radius: 0 6px 6px 0;
+      background: var(--bg-secondary);
+    }
 
-  & input:focus {
-    outline: 2px solid #3b82f6;
-    outline-offset: 2px;
+    & .button-search:focus {
+      outline: none;
+      box-shadow: var(--shadow-outline);
+    }
   }
 
   & a {
-    color: #fff;
+    font-weight: bold;
   }
 
   & a + a {

frontend/src/components/Header.tsx

@@ -9,20 +9,24 @@ export default function Header({onSearch}: { onSearch: (query: string) => void }
 
   function onInputKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
     if (e.key === "Enter") {
-      onSearch(searchQuery)
+      onSearch(searchQuery);
     }
   }
 
   return (
     <div className="header">
       <a className="logo" href="/">TasteMender</a>
-      <div>
+      <div className="search-box">
         <input
+          name="search"
           value={searchQuery}
           placeholder={inputPlaceholder}
           onChange={(e) => setSearchQuery(e.target.value)}
           onKeyDown={onInputKeyDown}
         />
+        <button type="button" className="button button-search" aria-label="Search" onClick={() => {onSearch(searchQuery)}}>
+          <i className="fa-solid fa-magnifying-glass"></i>
+        </button>
       </div>
       <div style={{textAlign: "right"}}>
         <a href={API_BASE_URL}>API</a>

frontend/src/index.css

@@ -2,7 +2,8 @@
   /* Background colors */
   --bg-primary: #1C1F23; /* Main app background */
   --bg-secondary: #262A2F; /* Cards, containers */
-  --bg-secondary-dark: #1A1D21; /* Sidebar */
+  --bg-secondary-light: rgb(77, 81, 86); /* Inputs */
+  --bg-secondary-dark: #12151b; /* Sidebar */
 
   /* Accent colors */
   --accent-cyan: #2ED3E6; /* Main highlight */
@@ -21,7 +22,8 @@
   --font-size-ui-label: 0.75rem; /* 12px - UI labels */
 
   /* Effects */
-  --shadow-glow: 0 0 8px rgba(46,211,230,0.5);
+  --shadow-glow: 0 0 8px rgba(46, 211, 230, 0.5);
+  --shadow-outline: 0 0 0 .25rem rgba(46, 211, 230, 0.8);
 
   /* UI element sizes */
   --header-height-lg: 80px;
@@ -36,6 +38,31 @@ html, body {
   margin: 0;
   padding: 0;
   font-family: "Inter", sans-serif;
+  color: var(--text-primary);
+}
+
+input {
+  background: var(--bg-secondary-light);
+  border: 1px solid var(--bg-secondary-light);
+  color: var(--text-primary);
+
+  &::placeholder {
+    color: var(--text-secondary);
+  }
+}
+
+button {
+  color: var(--text-primary);
+}
+
+input:focus {
+  outline: 2px solid var(--accent-cyan);
+  outline-offset: 2px;
+}
+
+a {
+  color: var(--accent-cyan);
+  text-decoration: none;
 }
 
 /* Reusable styles */