Modernize the UI and fix the equalizer sizing bug
Bug fix
- EqualizerIcon: the SVG was rendering at the wrong size (filling
its parent) because it had no explicit width/height attributes.
Now it accepts a size prop with a 24px default and the SVG element
carries the size as width/height attributes, with the className
on top. Can't accidentally balloon.
Design
- Stripped the light-mode CSS — the app is dark-only now, and the
theme toggle was a no-op (clicking it just toggled a class that
had no matching rules). ThemeToggle.tsx and lib/theme.ts are
gone; initTheme() call removed from main.tsx.
- Reworked the input form:
• brand row is now small + refined (icon + wordmark, no huge
gradient title)
• Options is a single subtle collapsible card with a chevron and
a count badge showing how many options are non-default
• Vocals is now a segmented pill (single rounded container, two
flat segments) instead of two full-width grid buttons
• Generate button is slightly smaller (py-3.5, text-sm) and
uses a softer shadow (shadow-violet-900/20)
- Empty state in the results panel: dashed-border card, soft
gradient blur behind the music icon, cleaner copy.
- Results header: smaller heading, the 'Regenerate All' and
'Cancel' buttons are now tiny ghost-style pills in the top-right.
- Sticky ZIP bar: softer shadow, more refined copy.
- Result cards: smaller icon, single-line title, the Regenerate
button is now an inline pill that fits next to Revert + Copy.
- Home page header now has a tiny equalizer icon + 'MelodyMuse'
wordmark on the left (was just text). Settings page header has
the back arrow on the left and the title, no theme toggle.
- Global CSS: added modern focus-visible ring, custom selection
color, subtle scrollbar thumb, slightly tweaked the gradient
text to a softer violet-300 → cyan-300 instead of the loud
violet-400 → fuchsia-400 → cyan-400.
This commit is contained in:
+103
-112
@@ -3,147 +3,138 @@
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
}
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html:not(.dark) {
|
||||
color-scheme: light;
|
||||
}
|
||||
body {
|
||||
@apply bg-bg text-fg antialiased font-sans;
|
||||
margin: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-feature-settings: "cv11", "ss01", "ss03";
|
||||
}
|
||||
|
||||
html, body, #root {
|
||||
height: 100%;
|
||||
}
|
||||
/* Subtle, modern focus ring — keyboard only */
|
||||
:focus-visible {
|
||||
outline: 2px solid theme("colors.accent.primary");
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-bg text-fg antialiased font-sans;
|
||||
margin: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
html:not(.dark) body {
|
||||
@apply bg-bgLight text-fg-dark;
|
||||
}
|
||||
/* Custom selection color */
|
||||
::selection {
|
||||
background: rgba(124, 58, 237, 0.3);
|
||||
color: #f1f5f9;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.card {
|
||||
@apply bg-bg-card border border-border rounded-2xl;
|
||||
}
|
||||
.card {
|
||||
@apply bg-bg-card border border-border rounded-2xl;
|
||||
}
|
||||
|
||||
html:not(.dark) .card {
|
||||
@apply bg-bgLight-card border-borderLight;
|
||||
}
|
||||
.card-hover {
|
||||
@apply hover:bg-bg-hover transition-colors duration-150;
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
@apply hover:bg-bg-hover transition-colors duration-150;
|
||||
}
|
||||
|
||||
html:not(.dark) .card-hover:hover {
|
||||
@apply bg-slate-50;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium text-white
|
||||
.btn-primary {
|
||||
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium text-white
|
||||
bg-accent-primary hover:bg-violet-500 active:bg-violet-700
|
||||
transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium
|
||||
bg-bg-hover border border-border text-fg hover:bg-bg
|
||||
.btn-secondary {
|
||||
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium
|
||||
bg-bg-card border border-border text-fg hover:bg-bg-hover
|
||||
transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
html:not(.dark) .btn-secondary {
|
||||
@apply bg-white border-borderLight text-fg-dark hover:bg-slate-50;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
@apply inline-flex items-center justify-center gap-1.5 px-2.5 py-1.5 rounded-md text-sm
|
||||
.btn-ghost {
|
||||
@apply inline-flex items-center justify-center gap-1.5 px-2.5 py-1.5 rounded-md text-sm
|
||||
text-fg-muted hover:text-fg hover:bg-bg-hover
|
||||
transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
html:not(.dark) .btn-ghost {
|
||||
@apply text-slate-500 hover:text-fg-dark hover:bg-slate-100;
|
||||
}
|
||||
.input {
|
||||
@apply w-full bg-bg-card border border-border rounded-lg px-3 py-2 text-[14px] text-fg
|
||||
placeholder-fg-muted/70
|
||||
focus:outline-none focus:border-accent-primary/60
|
||||
focus:ring-1 focus:ring-accent-primary/20
|
||||
transition-colors duration-150;
|
||||
}
|
||||
|
||||
.input {
|
||||
@apply w-full bg-bg-card border border-border rounded-lg px-3 py-2 text-fg
|
||||
placeholder-fg-muted focus:outline-none focus:border-accent-primary
|
||||
focus:ring-1 focus:ring-accent-primary/40 transition-colors duration-150;
|
||||
}
|
||||
.textarea {
|
||||
@apply input resize-y;
|
||||
}
|
||||
|
||||
html:not(.dark) .input {
|
||||
@apply bg-white border-borderLight text-fg-dark placeholder:text-slate-400;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
@apply input resize-y;
|
||||
}
|
||||
|
||||
.chip {
|
||||
@apply inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-border
|
||||
.chip {
|
||||
@apply inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-border
|
||||
bg-bg-card text-sm font-medium text-fg hover:bg-bg-hover
|
||||
transition-colors duration-150;
|
||||
}
|
||||
}
|
||||
|
||||
html:not(.dark) .chip {
|
||||
@apply bg-white border-borderLight text-fg-dark hover:bg-slate-50;
|
||||
}
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #c4b5fd 0%, #67e8f9 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
@apply bg-gradient-to-r from-violet-400 via-fuchsia-400 to-cyan-400 bg-clip-text text-transparent;
|
||||
}
|
||||
.gradient-bg {
|
||||
background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
|
||||
}
|
||||
|
||||
.gradient-bg {
|
||||
background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
|
||||
}
|
||||
.gradient-bg-soft {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(124, 58, 237, 0.18) 0%,
|
||||
rgba(6, 182, 212, 0.12) 50%,
|
||||
rgba(8, 8, 16, 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.gradient-bg-soft {
|
||||
background: linear-gradient(135deg, rgba(124, 58, 237, 0.18) 0%, rgba(6, 182, 212, 0.12) 50%, rgba(8, 8, 16, 0) 100%);
|
||||
}
|
||||
|
||||
.animated-gradient-bg {
|
||||
background: linear-gradient(135deg, rgba(124, 58, 237, 0.25) 0%, rgba(6, 182, 212, 0.20) 35%, rgba(8, 8, 16, 0) 70%, rgba(124, 58, 237, 0.15) 100%);
|
||||
background-size: 200% 200%;
|
||||
animation: gradient-shift 8s ease infinite;
|
||||
}
|
||||
|
||||
.stagger-0 { animation-delay: 0ms; }
|
||||
.stagger-1 { animation-delay: 80ms; }
|
||||
.stagger-2 { animation-delay: 160ms; }
|
||||
.stagger-3 { animation-delay: 240ms; }
|
||||
.stagger-4 { animation-delay: 320ms; }
|
||||
/* Stagger delays for the result cards' fade-up animation. */
|
||||
.stagger-0 {
|
||||
animation-delay: 0ms;
|
||||
}
|
||||
.stagger-1 {
|
||||
animation-delay: 80ms;
|
||||
}
|
||||
.stagger-2 {
|
||||
animation-delay: 160ms;
|
||||
}
|
||||
.stagger-3 {
|
||||
animation-delay: 240ms;
|
||||
}
|
||||
.stagger-4 {
|
||||
animation-delay: 320ms;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.scrollbar-thin {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
|
||||
}
|
||||
.scrollbar-thin {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
|
||||
}
|
||||
|
||||
html:not(.dark) .scrollbar-thin {
|
||||
scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
|
||||
}
|
||||
.scrollbar-thin::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
.scrollbar-thin::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
html:not(.dark) .scrollbar-thin::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user