mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: clean up chat UI layout and align theme to neutral white

Browse Source 
- Replace beige background with clean neutral white (matches Grok aesthetic)
- Remove hardcoded hex colors in thread.tsx - use CSS variables throughout
- Remove scroll-to-bottom button that showed incorrectly after auto-send
- Chat container now integrates visually with the page instead of floating

Made-with: Cursor
This commit is contained in:
Mark Henderson
2026-03-01 20:21:39 -08:00
parent a2bde95222
commit c842a4b75b
3 changed files with 50 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
app/globals.css
View File

@@ -44,44 +44,38 @@
}
:root {
--radius: 0.625rem;
/* Vib'n warm beige background from logo */
--background: oklch(0.96 0.015 80);
--foreground: oklch(0.25 0.02 230);
/* Slightly warmer white for cards */
--card: oklch(0.99 0.01 80);
--card-foreground: oklch(0.25 0.02 230);
--popover: oklch(0.99 0.01 80);
--popover-foreground: oklch(0.25 0.02 230);
/* Vib'n dark blue from logo text */
--primary: oklch(0.35 0.08 230);
--primary-foreground: oklch(0.99 0 0);
--secondary: oklch(0.92 0.015 80);
--secondary-foreground: oklch(0.35 0.08 230);
--muted: oklch(0.92 0.015 80);
--muted-foreground: oklch(0.50 0.02 230);
--accent: oklch(0.92 0.015 80);
--accent-foreground: oklch(0.35 0.08 230);
--radius: 0.5rem;
--background: oklch(0.985 0 0);
--foreground: oklch(0.09 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.09 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.09 0 0);
--primary: oklch(0.09 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.94 0 0);
--secondary-foreground: oklch(0.09 0 0);
--muted: oklch(0.94 0 0);
--muted-foreground: oklch(0.50 0 0);
--accent: oklch(0.94 0 0);
--accent-foreground: oklch(0.09 0 0);
--destructive: oklch(0.577 0.245 27.325);
/* Softer borders on warm background */
--border: oklch(0.88 0.015 80);
--input: oklch(0.88 0.015 80);
--ring: oklch(0.60 0.08 230);
/* Vib'n brand colors for charts */
--chart-1: oklch(0.70 0.15 60); /* Orange */
--chart-2: oklch(0.70 0.12 210); /* Light blue */
--chart-3: oklch(0.55 0.10 220); /* Medium blue */
--chart-4: oklch(0.40 0.08 230); /* Dark blue */
--chart-5: oklch(0.75 0.15 70); /* Yellow */
/* Sidebar with warm tint */
--sidebar: oklch(0.98 0.01 80);
--sidebar-foreground: oklch(0.30 0.02 230);
--sidebar-primary: oklch(0.35 0.08 230);
--sidebar-primary-foreground: oklch(0.99 0 0);
--sidebar-accent: oklch(0.92 0.015 80);
--sidebar-accent-foreground: oklch(0.35 0.08 230);
--sidebar-border: oklch(0.88 0.015 80);
--sidebar-ring: oklch(0.60 0.08 230);
--border: oklch(0.88 0 0);
--input: oklch(0.88 0 0);
--ring: oklch(0.70 0 0);
--chart-1: oklch(0.70 0.15 60);
--chart-2: oklch(0.70 0.12 210);
--chart-3: oklch(0.55 0.10 220);
--chart-4: oklch(0.40 0.08 230);
--chart-5: oklch(0.75 0.15 70);
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.09 0 0);
--sidebar-primary: oklch(0.09 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.94 0 0);
--sidebar-accent-foreground: oklch(0.09 0 0);
--sidebar-border: oklch(0.88 0 0);
--sidebar-ring: oklch(0.70 0 0);
}
.dark {