[MEDIUM PRIORITY] Button Style Inconsistency Across Pages

[pbrissaud]

Button Style Inconsistency Across Pages

Problem Description

Primary CTA buttons have different styles on different pages, with varying:

• Button padding and sizing
• Hover states and transitions
• Shadow application
• Border consistency

Impact

• Inconsistent user experience across pages
• Weakens brand professionalism
• Confusing interaction patterns
• Degrades perceived quality

Current State by Page

Page	Button Style	Shadow	Border	Consistency
Homepage	Varied	Mixed	3px/4px	❌
/get-started	Purple CTA	✓	3px	✅
/challenges	Mixed	Some	Varied	❌
/dashboard	Consistent	✓	3px	✅
/profile	"Save Changes"	✓	3px	✅

Affected Files

• components/ui/button.tsx - Base button component (uses Tailwind shadow)
• Various page components overriding button styles

Current Button Component Analysis

File: components/ui/button.tsx:7-36

Issues Found:

1. Uses Tailwind's default shadow-xs (soft shadow) ❌
2. Border not explicitly defined (relies on Tailwind defaults)
3. Missing explicit neo-brutalism hard shadow

Suggested Fix

1. Update Button Component to Use Neo-Brutalism:

// components/ui/button.tsx
const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap " +
  "rounded-lg text-sm font-medium transition-all " +  // Use rounded-lg for 8px
  "neo-border neo-shadow " +                          // Add neo-brutalism classes
  "hover:translate-x-[2px] hover:translate-y-[2px] " + // Hover effect
  "hover:neo-shadow-sm " +                            // Reduce shadow on hover
  "disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        // ... other variants
      },
      size: {
        default: "h-10 px-6 py-2",  // Consistent sizing
        sm: "h-9 px-4 py-1.5",
        lg: "h-12 px-8 py-3",
        // ...
      }
    }
  }
);

2. Standardize Hover Behavior:

/* Add to app/globals.css if not using classes above */
.btn-neo-hover:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px 0px oklch(0.15 0 0);
}

3. Remove Inline Style Overrides:
Search for buttons with inline styles or className overrides:

rg "Button.*className=" --type tsx

Definition of Done

✅ All buttons use standardized button component
✅ Consistent neo-brutalism shadow (neo-shadow)
✅ Consistent border (3px solid black via neo-border)
✅ Uniform hover effect (translate + shadow reduction)
✅ No inline style overrides on buttons
✅ Same button appearance across all pages
✅ Proper size variants (sm, default, lg) used appropriately

Priority

MEDIUM PRIORITY - Phase 3 component standardization

References

• Style Audit Report: Lines 373-409
• Current Button: components/ui/button.tsx
• Neo-Brutalism Utilities: app/globals.css:128-151

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

✅ Successfully generated implementation plan.

💡 Use @coderabbitai <feedback> to replan

Examples

• Example 1
• Example 2

---

🔗 Similar Issues

Possible Duplicates

• [CRITICAL] Border-Width Anarchy - 7-8 Different Border Patterns Site-Wide #135

Related Issues

• [HIGH PRIORITY] Color Palette Dilution - Off-Brand Colors Weaken Purple Identity #137
• [CRITICAL] Border-Radius Catastrophe - 6 Different Values Site-Wide #134

🔗 Related PRs

#4 - refactor: upgrade to tailwind v4 [merged]

👤 Suggested Assignees

• pbrissaud

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord or schedule a call!

[coderabbitai]

Coding Plan

Approach

Standardize button styling across all pages to use consistent neo-brutalism design with uniform borders, shadows, and hover effects, removing all custom className overrides to create a cohesive user experience.

Observations

The project uses a shadcn/ui Button component built with CVA (Class Variance Authority) that defines 6 variants and 6 sizes. Neo-brutalism utilities (neo-border, neo-shadow classes) are defined in app/globals.css but are inconsistently applied through className overrides across 19+ files. The current architecture has a well-structured base button component in components/ui/button.tsx that serves as the single source of truth for button styling, with components consuming it via variant and size props.

Assumptions

Assumption 1: Should the "ghost" and "link" button variants have neo-brutalism styling?

Options Considered:

• Apply neo-brutalism styling to all variants uniformly for absolute consistency
• Exclude ghost and link variants from neo-brutalism base styling while applying it to default, destructive, outline, and secondary variants

Chosen Option: Exclude ghost and link variants from neo-brutalism base styling

Rationale: These variants serve specific UI patterns where minimal visual weight is intentional (subtle navigation actions, text-like buttons). The goal is consistency for primary interactive buttons while preserving legitimate use cases for minimal button styles. This aligns with developer expectations that ghost and link variants should remain visually lightweight.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Update Base Button Component

Update the core Button component to apply neo-brutalism styling by default, ensuring consistent borders, shadows, and hover effects across all standard button variants.

Task 1: Add Neo-Brutalism Base Styling

Modify the buttonVariants CVA definition in components/ui/button.tsx to include neo-brutalism classes in the base configuration.

• Add neo-border and neo-shadow classes to the base button classes string (alongside existing inline-flex, transition-all, etc.)
• Add hover transform classes hover:translate-x-[2px] hover:translate-y-[2px] to create the neo-brutalism press effect
• Add hover:neo-shadow-sm to reduce shadow on hover, creating the visual "press down" effect
• Ensure these classes are added before the variant and size configurations in the CVA definition

Task 2: Adjust Variants for Neo-Brutalism Compatibility

Update variant definitions to properly compose with the new neo-brutalism base styling.

• Remove neo-border and shadow-xs from the outline variant since these will now come from base styling
• Add shadow and border override classes to ghost variant: shadow-none border-transparent to maintain minimal appearance
• Add shadow and border override classes to link variant: shadow-none border-transparent to maintain text-only appearance
• Verify that default, destructive, and secondary variants work correctly with neo-brutalism base (no changes needed, they should compose naturally)

Task 3: Verify Size Variants with Neo-Brutalism

Ensure size variants work properly with the neo-brutalism base styling, particularly the hover transform effects.

• Review all size variants (default, sm, lg, icon, icon-sm, icon-lg) to confirm padding and dimensions work with the 2px hover transform
• No code changes expected, but verify visually that hover effects don't cause layout shifts or overflow issues

🤖 Prompt for AI agents

Update the Button component to apply neo-brutalism styling by default for
standard variants.

In components/ui/button.tsx:
- Add neo-brutalism classes to the CVA base configuration: `neo-border`,
`neo-shadow`, `hover:translate-x-[2px]`, `hover:translate-y-[2px]`, and
`hover:neo-shadow-sm`
- Update outline variant to remove `neo-border` and `shadow-xs` (now inherited
from base)
- Update ghost variant to add `shadow-none border-transparent` to maintain
minimal appearance
- Update link variant to add `shadow-none border-transparent` to maintain
text-only appearance
- Verify all size variants work with the 2px hover transform

Phase 2: Remove Custom Button Styling Overrides

Clean up all className overrides and custom styling across the codebase, relying on the standardized button component and its built-in variants.

Task 1: Clean Up Homepage Button Overrides

Remove custom className overrides from homepage components that duplicate neo-brutalism styling.

• In components/hero-section.tsx: Remove className overrides containing neo-border-thick, neo-shadow-lg, custom backgrounds, and font-bold classes from Button components
• In components/cta-section.tsx: Remove className overrides with neo-border-thick, neo-shadow-lg, custom bg-white/bg-secondary, and font styling
• Replace removed styling with appropriate size prop (use size="lg" for hero/CTA buttons) and variant prop where color customization is needed
• Keep only essential layout classes like width classes (w-full) if needed

Task 2: Clean Up Challenge and Dashboard Button Overrides

Remove neo-brutalism className overrides from challenge and dashboard components.

• In components/challenge-preview.tsx: Remove neo-border className override from outline variant Button
• In components/dashboard-recent-gains.tsx: Remove neo-border and neo-shadow className overrides
• In components/open-source-section.tsx: Remove extensive className overrides including neo-border-thick, neo-shadow, custom backgrounds, hover states, and typography overrides from all 3 Button instances
• Replace styling with appropriate variant and size props

Task 3: Clean Up Profile Page Button Overrides

Remove custom hover effects, shadows, and neo-brutalism overrides from profile components.

• In components/profile-settings.tsx: Remove className containing neo-border, neo-shadow, hover translate effects, and font-bold
• In components/profile-api-tokens.tsx: Remove className overrides with neo-border, neo-shadow, custom bg-accent backgrounds, hover translate effects, and font-bold from all 6 Button instances
• In components/profile-danger-zone.tsx: Remove className overrides with custom red backgrounds (use variant="destructive" instead), neo-border-destructive, shadow-danger, hover translate effects, and font-bold from all 3 Button instances
• Let the base button component handle neo-brutalism styling and hover effects

Task 4: Clean Up Remaining Component Button Overrides

Audit and clean up Button components in the remaining files identified during exploration.

• Review components/header-client.tsx, components/challenge-selector.tsx, components/challenge-objectives.tsx, and any other files containing Button instances
• Remove any neo-border, neo-shadow, custom hover transform, or font-bold className overrides
• Keep only variant, size, and essential layout props (className with w-full, mt-x spacing classes if needed)
• Ensure asChild usage patterns remain intact when wrapping Link components

🤖 Prompt for AI agents

Remove all custom neo-brutalism className overrides from Button components
across the codebase.

Clean up homepage components:
- components/hero-section.tsx: Remove className overrides, use size="lg" prop
- components/cta-section.tsx: Remove className overrides, use size="lg" and
variant props

Clean up challenge and dashboard components:
- components/challenge-preview.tsx: Remove neo-border override
- components/dashboard-recent-gains.tsx: Remove neo-border and neo-shadow
overrides
- components/open-source-section.tsx: Remove all styling overrides from 3 Button
instances

Clean up profile components:
- components/profile-settings.tsx: Remove neo-brutalism and hover overrides
- components/profile-api-tokens.tsx: Remove overrides from all 6 Button
instances
- components/profile-danger-zone.tsx: Remove overrides, use
variant="destructive" for red buttons

Clean up remaining components:
- components/header-client.tsx, components/challenge-selector.tsx,
components/challenge-objectives.tsx
- Keep only layout classes (w-full, spacing), preserve asChild patterns

Phase 3: Validation and Documentation

Verify consistent button appearance across all pages and document any legitimate cases where className customization is needed.

Task 1: Visual Verification Across Pages

Test the standardized button styling on all affected pages to ensure consistency and correct appearance.

• Verify homepage hero and CTA sections display buttons with neo-brutalism styling
• Check challenge pages show consistent button styling without custom overrides
• Confirm dashboard buttons maintain neo-brutalism appearance
• Test profile pages (settings, API tokens, danger zone) to ensure buttons appear consistent
• Verify ghost and link variant buttons maintain their minimal appearance without neo-brutalism styling

Task 2: Document Acceptable className Usage

Create guidelines for when className overrides are acceptable on Button components.

• Add comments or documentation noting that className should only be used for layout concerns (width, margin, positioning)
• Clarify that styling concerns (colors, shadows, borders, hover effects) should use variant and size props instead
• Document the available variants and when to use each (default for primary actions, destructive for dangerous actions, outline for secondary actions, ghost/link for minimal UI)

🤖 Prompt for AI agents

Validate the button standardization and document usage guidelines.

Visual verification:
- Test homepage, challenge pages, dashboard, and profile pages
- Verify neo-brutalism styling appears consistently on
default/destructive/outline/secondary variants
- Confirm ghost and link variants maintain minimal appearance

Documentation:
- Add comments to components/ui/button.tsx explaining className usage guidelines
- Document that className should only contain layout classes (width, margin,
positioning)
- Document that styling should use variant and size props
- List available variants and their intended use cases

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Update the Button component to apply neo-brutalism styling by default for
standard variants.

In components/ui/button.tsx:
- Add neo-brutalism classes to the CVA base configuration: `neo-border`,
`neo-shadow`, `hover:translate-x-[2px]`, `hover:translate-y-[2px]`, and
`hover:neo-shadow-sm`
- Update outline variant to remove `neo-border` and `shadow-xs` (now inherited
from base)
- Update ghost variant to add `shadow-none border-transparent` to maintain
minimal appearance
- Update link variant to add `shadow-none border-transparent` to maintain
text-only appearance
- Verify all size variants work with the 2px hover transform
===============================================================================

Task: 2

Remove all custom neo-brutalism className overrides from Button components
across the codebase.

Clean up homepage components:
- components/hero-section.tsx: Remove className overrides, use size="lg" prop
- components/cta-section.tsx: Remove className overrides, use size="lg" and
variant props

Clean up challenge and dashboard components:
- components/challenge-preview.tsx: Remove neo-border override
- components/dashboard-recent-gains.tsx: Remove neo-border and neo-shadow
overrides
- components/open-source-section.tsx: Remove all styling overrides from 3 Button
instances

Clean up profile components:
- components/profile-settings.tsx: Remove neo-brutalism and hover overrides
- components/profile-api-tokens.tsx: Remove overrides from all 6 Button
instances
- components/profile-danger-zone.tsx: Remove overrides, use
variant="destructive" for red buttons

Clean up remaining components:
- components/header-client.tsx, components/challenge-selector.tsx,
components/challenge-objectives.tsx
- Keep only layout classes (w-full, spacing), preserve asChild patterns
===============================================================================

Task: 3

Validate the button standardization and document usage guidelines.

Visual verification:
- Test homepage, challenge pages, dashboard, and profile pages
- Verify neo-brutalism styling appears consistently on
default/destructive/outline/secondary variants
- Confirm ghost and link variants maintain minimal appearance

Documentation:
- Add comments to components/ui/button.tsx explaining className usage guidelines
- Document that className should only contain layout classes (width, margin,
positioning)
- Document that styling should use variant and size props
- List available variants and their intended use cases

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- @coderabbitai You can skip phase 3. Add a simple unit test case for phase 2.
- @coderabbitai For assumption 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord or schedule a call!