Rework header

frontend/index.html

@@ -12,6 +12,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Orbitron:wght@400..900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
     <!-- Google tag (gtag.js) -->

frontend/src/components/Filters.css

@@ -1,14 +1,6 @@
 .filters {
   padding: 1rem;
 
-  & .button {
-    background-color: var(--bg-secondary-light);
-    color: var(--accent-orange);
-    border: 1px solid var(--accent-orange);
-    border-radius: 6px;
-    padding: .5em .8em;
-  }
-
   & .filters-container {
     display: flex;
     flex-wrap: wrap;
@@ -52,7 +44,7 @@
 
     & input {
       margin: .5em 0 0;
-      accent-color: var(--accent-orange);
+      accent-color: var(--led-orange);
     }
 
     & .slider {
@@ -61,8 +53,8 @@
 
     & select {
       background-color: var(--bg-secondary-light);
-      color: var(--accent-orange);
-      border: 1px solid var(--accent-orange);
+      color: var(--led-orange);
+      border: 1px solid var(--led-orange);
       border-radius: 6px;
       padding: .3em;
     }

frontend/src/components/Filters.tsx

@@ -213,7 +213,7 @@ export default function Filters({ onChange }: FiltersProps) {
         ))}
       </div>
 
-      <button className="button" onClick={resetState}>RESET</button>
+      <button className="btn btn-amber" onClick={resetState}>RESET</button>
     </div>
   )
 }

frontend/src/components/Header.css

@@ -2,74 +2,77 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background-color: var(--bg-secondary-dark);
+    background: linear-gradient(180deg, #c9c9c4 0%, #a8a8a4 50%, #6e6e6a 100%);
     flex: 0 0 var(--header-height-lg);
+    gap: 1em;
     padding: 0.5em 2em;
 
-    border: 2px solid;
-    border-image-slice: 1;
-    border-image-source: linear-gradient(
-      to left,
-      var(--bg-secondary-dark),
-      var(--bg-secondary-light),
-      var(--bg-secondary-dark)
-    );
-    border-top: 0;
-    border-left: 0;
-    border-right: 0;
+    border-style: solid;
+    border-width: 0 0 1px;
+    border-bottom-color: var(--text-engraved-soft);
 
   & > * {
     min-width: 12%;
-    margin: 0 0.5em;
   }
 
   & .logo {
     display: inline-block;
-    color: var(--text-primary);
-    font-family: "Orbitron", sans-serif;
-    font-size: var( --font-size-app-title);
+    color: var(--text-engraved);
+    font-family: var(--font-headings);
+    font-size: var(--font-size-app-title);
     font-weight: 700;
     letter-spacing: 0.05em;
-    text-shadow: 0px 0px 20px var(--accent-cyan-light);
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
     text-decoration: none;
+
+    & .logo-line {
+      display: inline;
+    }
+
+    & .logo-mender {
+      color: #006289;
+    }
   }
 
   & .search-box {
     flex: 0 1 600px;
     display: flex;
+    height: 2.6rem;
+    background: var(--bg-secondary);
+    border: 1px solid var(--bg-secondary-light);
+    border-radius: var(--r-panel);
 
     & input {
+      color: var(--led-cyan);
+      width: 100%;
       flex: 1;
-      height: 2.6rem;
+      height: 100%;
       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);
+      border: none;
+      border-radius: var(--r-panel);
+      font-family: var(--font-mono);
+      font-size: 1rem;
+      background-color: transparent;
       transition: border-color 0.2s, box-shadow 0.2s;
     }
 
-    & input:focus {
-      outline: none;
-      box-shadow: var(--shadow-outline);
+    & input::placeholder {
+      color: var(--led-cyan-dim);
     }
 
-    & .button-search {
-      height: 2.6rem;
-      padding: 0.45rem 0.7rem;
-      border: 1px solid var(--bg-secondary);
-      border-radius: 0 6px 6px 0;
-      background: var(--bg-secondary);
+    & input:placeholder-shown {
+      text-overflow: ellipsis;
     }
 
-    & .button-search:hover {
-      border-color: var(--bg-secondary-light);
-      background: var(--bg-secondary-light);
+    & input:focus {
+      outline: none;
+      box-shadow: var(--shadow-glow-inset);
     }
 
-    & .button-search:focus {
-      outline: none;
-      box-shadow: var(--shadow-outline);
+    & .btn-search {
+      margin: 3px;
+      font-size: 1rem;
+      box-shadow: none;
     }
   }
 
@@ -92,4 +95,24 @@
       flex: 1 1 auto;
     }
   }
+}
+
+@media (width < 768px) {
+  .header {
+    gap: .5em;
+    padding: 0.5em 1em;
+
+    & > * {
+      min-width: initial;
+    }
+
+    & .logo {
+      line-height: 1;
+      font-size: calc(var(--font-size-app-title) * .75);
+
+      & .logo-line {
+        display: block;
+      }
+    }
+  }
 }

frontend/src/components/Header.tsx

@@ -15,7 +15,10 @@ export default function Header({onSearch}: { onSearch: (query: string) => void }
 
   return (
     <div className="header">
-      <a className="logo" href="/">TasteMender</a>
+      <a className="logo" href="/" aria-label="TasteMender">
+        <span className="logo-line">Taste</span>
+        <span className="logo-line logo-mender">Mender</span>
+      </a>
       <div className="search-box">
         <input
           name="search"
@@ -27,15 +30,15 @@ export default function Header({onSearch}: { onSearch: (query: string) => void }
         />
         <button
           type="button"
-          className="button button-search"
+          className="btn btn-metal btn-search"
           aria-label="Search"
           onClick={() => {onSearch(searchQuery)}}
         >
           <i className="fa-solid fa-magnifying-glass"></i>
         </button>
       </div>
       <div className="links">
-        <a href={API_BASE_URL}>API</a>
+        <a className="btn btn-amber" href={API_BASE_URL}>API</a>
         {/* <a href="#">About</a> */}
       </div>
     </div>

frontend/src/components/PlayButton.css

@@ -1,7 +1,6 @@
 .button-play {
-  --play-button-glow: rgba(46,211,230,0.5);
-
   cursor: pointer;
+  color: var(--text-primary);
 
   display: flex;
   align-items: center;
@@ -12,14 +11,14 @@
   border-radius: 50%;
 
   background: radial-gradient(circle at 30% 30%, #2b3138, #1b2026);
-  border: 2px solid var(--accent-cyan);
-  box-shadow: 0 0 8px var(--play-button-glow);
+  border: 2px solid var(--led-cyan);
+  box-shadow: 0 0 8px var(--led-cyan-dim);
   transition: all 0.2s ease;
 
   &:hover {
     transform: scale(1.08);
-    box-shadow: 0 0 8px var(--accent-cyan),
-                0 0 10px var(--play-button-glow);
+    box-shadow: 0 0 8px var(--led-cyan),
+                0 0 10px var(--led-cyan-dim);
   }
 
   &:focus {
@@ -30,6 +29,6 @@
   &:active {
     outline: none;
     transform: scale(0.95);
-    box-shadow: 0 0 6px var(--play-button-glow);
+    box-shadow: 0 0 6px var(--led-cyan-dim);
   }
 }

frontend/src/components/Player.css

@@ -1,6 +1,6 @@
 .player {
   position: relative;
-  background-color: var(--bg-secondary);
+  background: linear-gradient(180deg, #b8b3a8 0%, #8a847a 55%, #5a564e 100%);
   flex: 0 0 var(--player-height-lg);
 
   &.empty {
@@ -18,7 +18,7 @@
     left: 0;
     right: 0;
     bottom: 100%;
-    background-color: var(--bg-primary);
+    background: linear-gradient(180deg, #4a4d52 0%, #2e3136 50%, #1a1c1f 100%);
     transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     overflow: hidden;
   }
@@ -98,29 +98,16 @@
     }
   }
 
-  & .content {
+  & .footer-bar {
     padding: 10px;
     display: flex;
     gap: 1rem;
     justify-content: space-between;
     align-items: center;
 
-    /* Gradient border for footer top */
-    border: 2px solid;
-    border-image-slice: 1;
-    border-image-source: linear-gradient(
-      to left,
-      var(--bg-secondary),
-      var(--bg-secondary-light),
-      var(--bg-secondary)
-    );
-    border-bottom: 0;
-    border-left: 0;
-    border-right: 0;
-
-    & .meta {
-      flex: 1;
-    }
+    border-style: solid;
+    border-width: 1px 0 0;
+    border-top-color: var(--text-engraved-soft);
 
     & .coverart {
       display: flex;
@@ -150,17 +137,26 @@
         color: var( --text-secondary);
       }
     }
+
+    & .meta {
+      flex: 1 1;
+      overflow: hidden;
+    }
+
+    & .controls {
+      flex-shrink: 0;
+    }
   }
 
-  & .content .title {
+  & .footer-bar .meta .title {
     font-weight: 600;
     line-height: 1.2;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
-  & .content .artist-album {
+  & .footer-bar .meta .artist-album {
     margin-top: 0.15rem;
     font-size: 0.92rem;
     white-space: nowrap;
@@ -172,11 +168,11 @@
     }
   }
 
-  & .content button {
+  & .footer-bar .controls button {
     font-size: 1.4rem;
   }
 
-  & .content button + button {
+  & .footer-bar .controls button + button {
     margin-left: .5rem;
   }
 

frontend/src/components/Player.tsx

@@ -238,7 +238,7 @@ export default function Player({ ref }: PlayerProps) {
     const fallbackText = track.title?.charAt(0)?.toUpperCase() ?? "♪"
 
     return (
-      <div className="content">
+      <div className="footer-bar">
         <div className="coverart" aria-hidden="true">
           <ImageLoader src={artUrl} alt="cover art" fallback={fallbackText} />
         </div>
@@ -251,17 +251,17 @@ export default function Player({ ref }: PlayerProps) {
           </div>
         </div>
 
-        <div>
-          <button type="button" className="button" aria-label="Play/Pause" onClick={togglePlayback}>
+        <div className="controls">
+          <button type="button" className="btn btn-metal" aria-label="Play/Pause" onClick={togglePlayback}>
             { playerState.isPlaying
               ? <i className="fa-solid fa-pause"></i>
               : <i className="fa-solid fa-play"></i>
             }
           </button>
-          <button type="button" className="button" aria-label="Next Track" onClick={() => { playTrack(recListRef.current[0]) }}>
+          <button type="button" className="btn btn-amber" aria-label="Next Track" onClick={() => { playTrack(recListRef.current[0]) }}>
             <i className="fa-solid fa-forward"></i>
           </button>
-          <button type="button" className="button" aria-label="Minimize/Maximize" onClick={toggleMaximize}>
+          <button type="button" className="btn btn-dark" aria-label="Minimize/Maximize" onClick={toggleMaximize}>
             { playerState.isMaximized
               ? <i className="fa-solid fa-caret-down"></i>
               : <i className="fa-solid fa-caret-up"></i>

frontend/src/components/TrackItem.tsx

@@ -64,8 +64,8 @@ export default function TrackItem({ track, onPlay, disabled }: TrackItemProps) {
           {year && <> • <span className="year">{year}</span></>}
         </div>
         <div className="badges">
-          <span className="badge" title="Genre in Rosamerica system">{getRosamericaLabel(track.genre_rosamerica)} &middot; r</span>
-          <span className="badge" title="Genre in Dortmund system">{getDortmundLabel(track.genre_dortmund)} &middot; d</span>
+          <span className="badge badge-rosa" title="Genre in Rosamerica system">{getRosamericaLabel(track.genre_rosamerica)}</span>
+          <span className="badge badge-dort" title="Genre in Dortmund system">{getDortmundLabel(track.genre_dortmund)}</span>
           <span className="badge" title="Submissions">{track.submissions} subs</span>
         </div>
       </div>