Repository navigation
Redesign entire UI/UX with editorial grayscale design language - #153
Merged
Merged
Conversation
Design spec for full UI/UX overhaul replacing AI-slopped gradients, emoji labels, and uniform roundedness with editorial grayscale typography-driven design language.
…ion notes - Map hex palette to CSS variables (globals.css / shadcn theming) - Add categories, auth, polls, notes, calendar page designs - Add navigation change documentation (bottom tabs → hamburger) - Add implementation notes: font, Tailwind config, component changes - Add focus state accessibility guidance - Clarify dark mode is out of scope - Note homepage grid → list is intentional layout change
18-task plan covering: design tokens, shared primitives (Card, Badge, Button, Input, Tabs, Select, Checkbox), navigation, gradient removal, emoji removal, and page-by-page editorial treatment for all screens.
…sses - Badge: ring-[3px] → ring-1 ring-ring/20 - Button ghost: remove dark:hover:bg-accent/50 - TabsTrigger: ring-2 ring-offset-2 → ring-1 ring-ring/20
Apply full editorial design pass to event detail page: split hero into image/no-image variants (no-image gets #fafafa bg, border-b-2, extrabold title, muted badge, watermark date, and bordered organizer buttons; image hero gets bg-black/50 category badge), update section headers to xs/bold/uppercase/tracking-wide, normalize organizer avatar fallback to bg-muted, use rounded+border on organizer cards, and remove shadow-sm from register page tier selection.
- Image thumbnails: 140x94px with rounded corners (matching spec) - Date fallback: 3px left border + large day number + month (no wrapping) - More spacing between rows
Events are now grouped under date headers (e.g., "Wednesday, March 19") with sticky positioning. Removes the per-row date column in favor of group headers. Image thumbnails shown when available.
Use inline width/height/min/max to ensure images don't break out of their containers regardless of CSS specificity.
Mobile menu now includes: Events, Groups, Places, My Groups, My Calendar, Settings, Create Group, Create Event, Admin Panel (if admin), and Sign out — matching the desktop dropdown.
- Page title: font-extrabold - Section headers: uppercase tracking-wide editorial style - Remove emoji from selected place, dialog title, nearby dialog cards - Place detail: 2px editorial border on header, uppercase section titles - Nearby cards: rounded corners
- Header: 2px editorial border, extrabold title - Calendar grid: bordered container, uppercase weekday headers on fafafa background, hover states on cells, larger day numbers - Month header: extrabold - Mobile list: editorial date headers with border-b, divide-y events - Legend: refined with rounded indicator dots, border-t separator - Calendar subscription: section with editorial header, no Card wrapper - Remove unused Card/Separator/CalendarDays imports
- RSVP'd: inverted black bg + white text (strongest contrast) - Hosting: gray bg + black left border - Bookmarked: light bg + star prefix - Mobile list: right-aligned type badges (Going/Host/★) - Legend matches new visual styles with inline badge examples
Desktop grid redesign: - 2px bottom border on weekday headers (editorial signature) - Row-based layout (per-week rows with border-b) instead of flat grid - Day numbers: plain text, bold when has events, extrabold for today with inline "today" label — no rounded-full pill - Events: plain text with square dot indicator (■) instead of colored chips/pills. RSVP'd = black dot + bold, Hosting = gray dot + medium, Bookmarked = light dot + muted - Hover: underline on text, not background color change - Empty days: light opacity, not colored background - Legend: square dot indicators matching grid This feels like a newspaper schedule, not a SaaS widget.
- Row-based weeks with border-b instead of flat grid - Day numbers: plain text (bold with events, extrabold for today with inline label) — no rounded-full pill - Events: plain text with square dot + font-medium title — no background chips, no colored left borders - Selected day: subtle #f5f5f5 background only - Matches My Calendar editorial ledger treatment
- Events show time + title with thin 2px left border (not black squares) - Today: underline instead of inline label - Times in 9px muted, titles in 10px medium - No background chips, no dot indicators - Keeps row-based week layout with border separators
- Editorial section header with 2px border - Remove verbose "checked in at 📍" format - Each row: avatar + name/timestamp + place name (link) + note - No Card wrapper, plain divide-y list - Remove colored pin emoji, use plain text place link
Header: - Avatar + name/handle/summary/website/stats/categories all in one block with 2px editorial border bottom - Follow + Events + Dashboard buttons left-aligned - No Card wrapper Places: - Editorial section header, divide-y list with hover underline - Category as plain text border pill Activity timeline: - Square dots instead of rounded circles - Events: 3px left border accent, uppercase date, bold title, hover state - Notes: 3px left border (light), prose content, permalink - Type badges as tiny uppercase bordered labels - No Card wrappers around timeline items Remove unused Card/Calendar/renderMarkdown imports
- Header: 2px editorial border, extrabold title, compact Create button - Each group row: avatar + bold name (hover underline) + role badge (tiny uppercase bordered label) + handle + stats - Stats: bold numbers for followers/members/upcoming - Empty state: plain centered text, no Card wrapper - Remove unused Badge/Card imports
Listing: - Editorial header with 2px border - List layout with divide-y (not grid cards) - Each row: bold category name + feed handle + chevron - No Card wrappers Detail: - Clean header: back link, extrabold title, description, feed handle - Follow/ICS as small text buttons (not icon-only) - Calendar without Card wrapper - Remove unused Card/CalendarPlus/UserPlus imports
- Header: 2px editorial border, extrabold title - Federation section: editorial section header, no Card wrapper - Linked Accounts: 2px border-t section separator, editorial header - Remove unused Card/Separator imports
Polls: - 2px editorial border header with extrabold question - Type/status as tiny uppercase bordered labels - Results with border-t separator, bold voter count - Remove Card/Badge imports Notes: - Author header: avatar + name/handle + date on right - 2px editorial border - Content as clean prose below - Remove Card imports
- Grayscale logo + extrabold title + subtitle (centered) - No Card wrapper — clean open layout - "Get started" link in border-t separated footer - Remove unused Card imports
- Step dots centered at top (smaller, subtle) - Back/Next buttons at bottom in border-t separated row - Last step shows "Sign in →" primary button - Clearer wizard flow: content in middle, navigation at bottom
…yout - Remove all Card/CardContent/CardHeader/CardTitle wrappers - Two-column with border-right separator (not gap) - Date/Location in main column top (desktop), not sidebar - Sidebar: map → attendee avatars → RSVP → bookmark (clean, no Card) - About/Organizers/Discussion as plain sections with editorial headers - Attendees (organizer-only) as plain section - Mobile: bordered div instead of Card for info section - Remove -mt-14 hero overlap trick - Remove unused Card imports
- Stepper: bar-based progress (3px height) instead of numbered circles - Editorial page header with 2px border - Remove all Card wrappers from form steps - Section headers: uppercase editorial style - Blue info alert → grayscale neutral - Green success alert → grayscale neutral - Remove unused Card imports
- Stepper: bar-based progress matching group create wizard - Editorial page header with 2px border - Blue info alert → grayscale neutral - Error section: remove Card wrapper - Remove unused Card imports
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (41)
📝 WalkthroughWalkthroughThis PR implements a comprehensive UI redesign transitioning the application from an emerald and gradient-based design system to an editorial grayscale aesthetic. The changes encompass design token updates, removal of gradient utilities and emoji category labels, styling updates across shared UI primitives, layout restructuring on multiple pages, and simplified visual hierarchy throughout the application. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes Possibly related PRs
Poem
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
📝 Coding Plan
Comment |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Full UI/UX redesign replacing the AI-slopped design (decorative gradients, emoji categories, uniform roundedness, emerald accents) with an editorial grayscale design language driven by typography, weight contrast, and intentional borders.
Key changes:
pickGradient), emoji from category labels, colored accent palette, Card wrappers on most pages (replaced with plain sections + editorial headers)Test plan
Summary by CodeRabbit
Release Notes
New Features
Styling & Visual Updates