From f3d00d28c4312f313f89afc2da05cf3257aad5b7 Mon Sep 17 00:00:00 2001 From: RadValentin Date: Wed, 6 May 2026 14:56:47 +0300 Subject: [PATCH 01/10] Genre badges have different styling --- frontend/src/components/TrackItem.tsx | 4 ++-- frontend/src/index.css | 8 ++++++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/TrackItem.tsx b/frontend/src/components/TrackItem.tsx index bce6655..22d072f 100644 --- a/frontend/src/components/TrackItem.tsx +++ b/frontend/src/components/TrackItem.tsx @@ -64,8 +64,8 @@ export default function TrackItem({ track, onPlay, disabled }: TrackItemProps) { {year && <> • {year}}
- {getRosamericaLabel(track.genre_rosamerica)} · r - {getDortmundLabel(track.genre_dortmund)} · d + {getRosamericaLabel(track.genre_rosamerica)} + {getDortmundLabel(track.genre_dortmund)} {track.submissions} subs
diff --git a/frontend/src/index.css b/frontend/src/index.css index b922590..6ff44ab 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -130,6 +130,14 @@ a { padding: 0.15rem 0.5rem; border-radius: 1rem; box-shadow: 1px 1px 1px var(--bg-secondary-dark); + + &.badge-rosa { + color: var(--accent-cyan); + } + + &.badge-dort { + color: var(--accent-orange); + } } #root { From 289dfb3ce1ed7ac93c43a11487801d3d90a87eef Mon Sep 17 00:00:00 2001 From: RadValentin Date: Wed, 6 May 2026 14:57:43 +0300 Subject: [PATCH 02/10] Make more room in header on mobile to prevent overflow Co-authored-by: Copilot --- frontend/src/components/Header.css | 42 +++++++++++++++++++++++------- frontend/src/components/Header.tsx | 5 +++- 2 files changed, 36 insertions(+), 11 deletions(-) diff --git a/frontend/src/components/Header.css b/frontend/src/components/Header.css index b8c9d3c..efd2e14 100644 --- a/frontend/src/components/Header.css +++ b/frontend/src/components/Header.css @@ -4,34 +4,36 @@ justify-content: space-between; background-color: var(--bg-secondary-dark); 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( + border-style: solid; + border-width: 0 0 2px; + border-image: 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; + ) 1; + & > * { 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); + 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 0 20px var(--accent-cyan-light); text-decoration: none; + + & .logo-line { + display: inline; + } } & .search-box { @@ -92,4 +94,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; + } + } + } } \ No newline at end of file diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index 3e65cf0..4f74680 100644 --- a/frontend/src/components/Header.tsx +++ b/frontend/src/components/Header.tsx @@ -15,7 +15,10 @@ export default function Header({onSearch}: { onSearch: (query: string) => void } return (
- TasteMender + + Taste + Mender +
Date: Thu, 7 May 2026 17:33:18 +0300 Subject: [PATCH 03/10] Apply metal style to buttons --- frontend/src/components/Filters.css | 10 +- frontend/src/components/Filters.tsx | 2 +- frontend/src/components/PlayButton.css | 5 +- frontend/src/components/Player.tsx | 6 +- frontend/src/index.css | 139 +++++++++++++++++++------ 5 files changed, 118 insertions(+), 44 deletions(-) diff --git a/frontend/src/components/Filters.css b/frontend/src/components/Filters.css index 27cdfe1..8bf8d93 100644 --- a/frontend/src/components/Filters.css +++ b/frontend/src/components/Filters.css @@ -3,8 +3,8 @@ & .button { 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: .5em .8em; } @@ -52,7 +52,7 @@ & input { margin: .5em 0 0; - accent-color: var(--accent-orange); + accent-color: var(--led-orange); } & .slider { @@ -61,8 +61,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; } diff --git a/frontend/src/components/Filters.tsx b/frontend/src/components/Filters.tsx index af0108e..be81f60 100644 --- a/frontend/src/components/Filters.tsx +++ b/frontend/src/components/Filters.tsx @@ -213,7 +213,7 @@ export default function Filters({ onChange }: FiltersProps) { ))}
- +
) } \ No newline at end of file diff --git a/frontend/src/components/PlayButton.css b/frontend/src/components/PlayButton.css index ef4836c..6bcc660 100644 --- a/frontend/src/components/PlayButton.css +++ b/frontend/src/components/PlayButton.css @@ -2,6 +2,7 @@ --play-button-glow: rgba(46,211,230,0.5); cursor: pointer; + color: var(--text-primary); display: flex; align-items: center; @@ -12,13 +13,13 @@ border-radius: 50%; background: radial-gradient(circle at 30% 30%, #2b3138, #1b2026); - border: 2px solid var(--accent-cyan); + border: 2px solid var(--led-cyan); box-shadow: 0 0 8px var(--play-button-glow); transition: all 0.2s ease; &:hover { transform: scale(1.08); - box-shadow: 0 0 8px var(--accent-cyan), + box-shadow: 0 0 8px var(--led-cyan), 0 0 10px var(--play-button-glow); } diff --git a/frontend/src/components/Player.tsx b/frontend/src/components/Player.tsx index d2b138a..962e1dc 100644 --- a/frontend/src/components/Player.tsx +++ b/frontend/src/components/Player.tsx @@ -252,16 +252,16 @@ export default function Player({ ref }: PlayerProps) {
- - -
- API + API {/* About */}
diff --git a/frontend/src/components/Player.css b/frontend/src/components/Player.css index ba1cd97..5f17bb0 100644 --- a/frontend/src/components/Player.css +++ b/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; } From 7a9db5aabeea17dd737d00f9d8de325b9b01b897 Mon Sep 17 00:00:00 2001 From: RadValentin Date: Fri, 8 May 2026 14:58:26 +0300 Subject: [PATCH 05/10] Always use vars for font family --- frontend/src/components/Header.css | 4 ++-- frontend/src/index.css | 7 ++++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/Header.css b/frontend/src/components/Header.css index 1b95445..1e2d7fe 100644 --- a/frontend/src/components/Header.css +++ b/frontend/src/components/Header.css @@ -24,7 +24,7 @@ & .logo { display: inline-block; color: var(--text-engraved); - font-family: "Orbitron", sans-serif; + font-family: var(--font-headings); font-size: var(--font-size-app-title); font-weight: 700; letter-spacing: 0.05em; @@ -56,7 +56,7 @@ padding: 0.5em 1em; border: none; border-radius: var(--r-panel); - font-family: "JetBrains Mono", monospace; + font-family: var(--font-mono); font-size: 1rem; background-color: transparent; transition: border-color 0.2s, box-shadow 0.2s; diff --git a/frontend/src/index.css b/frontend/src/index.css index 4c7919e..9d3c2d9 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -40,8 +40,9 @@ --player-height-lg: 80px; /* Fonts */ - --font-display: 'Inter', sans-serif; - --font-mono: 'JetBrains Mono', monospace; + --font-display: "Inter", sans-serif; + --font-headings: "Orbitron", sans-serif; + --font-mono: "JetBrains Mono", monospace; /* Radius */ --r-panel: 6px; @@ -57,7 +58,7 @@ html, body { margin: 0; padding: 0; - font-family: "Inter", sans-serif; + font-family: var(--font-display); color: var(--text-primary); scrollbar-width: thin; scrollbar-color: var(--led-orange) var(--bg-secondary); From 974142faa72614732c855990e1bbc810fa02b6d3 Mon Sep 17 00:00:00 2001 From: RadValentin Date: Fri, 8 May 2026 15:22:38 +0300 Subject: [PATCH 06/10] Ensure all button types have hover and active states --- frontend/src/components/Header.css | 12 +++-------- frontend/src/index.css | 33 +++++++++++++++++++++++++++--- 2 files changed, 33 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/Header.css b/frontend/src/components/Header.css index 1e2d7fe..54a3276 100644 --- a/frontend/src/components/Header.css +++ b/frontend/src/components/Header.css @@ -8,14 +8,8 @@ padding: 0.5em 2em; border-style: solid; - border-width: 0 0 2px; - border-image: linear-gradient( - to left, - var(--bg-secondary-dark), - var(--bg-secondary-light), - var(--bg-secondary-dark) - ) 1; - + border-width: 0 0 1px; + border-bottom-color: #4a4a46; & > * { min-width: 12%; @@ -63,7 +57,7 @@ } & input::placeholder { - color: var(--led-cyan-muted); + color: var(--led-cyan-dim); } & input:placeholder-shown { diff --git a/frontend/src/index.css b/frontend/src/index.css index 9d3c2d9..10422b2 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -7,7 +7,8 @@ /* LED display colors */ --led-cyan: #2ED3E6; /* Main highlight */ - --led-cyan-muted: rgba(46, 211, 230, 0.5); /* Input placeholder */ + --led-cyan-dim: rgba(46, 211, 230, 0.5); /* Input placeholder */ + --led-cyan-glow: rgba(77, 217, 255, 0.55); --led-cyan-light: #7CE7F2; /* Hover / glow */ --led-orange: #F3A23A; /* Secondary highlight */ @@ -65,6 +66,7 @@ html, body { } h1, h2, h3, h4, h5, h6 { + font-family: var(--font-headings); color: var(--text-heading); margin: 0 0 .5em; padding: 0; @@ -109,7 +111,9 @@ a { } } -/* Reusable styles */ +/* Reusable style classes */ + +/* Buttons */ .btn { display: inline-flex; @@ -171,6 +175,21 @@ a { &:hover { color: #3a1d05; + background: linear-gradient(180deg, #ffe49a 0%, #ffc36a 50%, #e69a30 100%); + box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), + inset 0 -1px 0 rgba(0,0,0,0.3), + 0 2px 3px rgba(0,0,0,0.5), + 0 0 0 1px #4a2a08, + 0 0 18px rgba(255,179,71,0.55); + } + + &:active, &.pressed { + background: linear-gradient(180deg, #b07020 0%, #d68a20 50%, #ffb347 100%); + color: #2a1404; + box-shadow: inset 0 2px 4px rgba(0,0,0,0.55), + inset 0 -1px 0 rgba(255,255,255,0.25), + 0 0 0 1px #4a2a08, + 0 0 8px rgba(255,179,71,0.25); } } @@ -181,13 +200,20 @@ a { inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 2px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px #0a0c0e; + + &:hover { + background: linear-gradient(180deg, #5a5d62 0%, #3e4146 50%, #25272a 100%); + color: #f0f0ec; + } + &:active { - text-shadow: 0 0 8px var(--led-cyan-glow); + background: linear-gradient(180deg, #15171a 0%, #2a2d31 50%, #3a3d42 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7), 0 0 0 1px #0a0c0e; } &.pressed { + background: linear-gradient(180deg, #15171a 0%, #2a2d31 50%, #3a3d42 100%); color: var(--led-cyan); text-shadow: 0 0 8px var(--led-cyan-glow); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7), @@ -196,6 +222,7 @@ a { } } +/* Badges */ .badge { cursor: default; font-size: 0.75rem; From d46ea7990d1de609d7d09a03a088eff12fb6bab3 Mon Sep 17 00:00:00 2001 From: RadValentin Date: Fri, 8 May 2026 15:26:30 +0300 Subject: [PATCH 07/10] Remove unused styles --- frontend/src/components/Filters.css | 8 -------- 1 file changed, 8 deletions(-) diff --git a/frontend/src/components/Filters.css b/frontend/src/components/Filters.css index 8bf8d93..95a3405 100644 --- a/frontend/src/components/Filters.css +++ b/frontend/src/components/Filters.css @@ -1,14 +1,6 @@ .filters { padding: 1rem; - & .button { - background-color: var(--bg-secondary-light); - color: var(--led-orange); - border: 1px solid var(--led-orange); - border-radius: 6px; - padding: .5em .8em; - } - & .filters-container { display: flex; flex-wrap: wrap; From ef664512af4d543a2f9c26a1561aa552257f5859 Mon Sep 17 00:00:00 2001 From: RadValentin Date: Fri, 8 May 2026 15:46:14 +0300 Subject: [PATCH 08/10] Ensure player footer doesn't overflow on mobile --- frontend/src/components/Player.css | 38 +++++++++++++----------------- frontend/src/components/Player.tsx | 4 ++-- 2 files changed, 19 insertions(+), 23 deletions(-) diff --git a/frontend/src/components/Player.css b/frontend/src/components/Player.css index 5f17bb0..9ab4ff6 100644 --- a/frontend/src/components/Player.css +++ b/frontend/src/components/Player.css @@ -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: #4a4a46; & .coverart { display: flex; @@ -150,9 +137,18 @@ 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; @@ -160,7 +156,7 @@ 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; } diff --git a/frontend/src/components/Player.tsx b/frontend/src/components/Player.tsx index 962e1dc..45fa9ea 100644 --- a/frontend/src/components/Player.tsx +++ b/frontend/src/components/Player.tsx @@ -238,7 +238,7 @@ export default function Player({ ref }: PlayerProps) { const fallbackText = track.title?.charAt(0)?.toUpperCase() ?? "♪" return ( -
+
@@ -251,7 +251,7 @@ export default function Player({ ref }: PlayerProps) {
-
+