[MEDIUM PRIORITY] Form Input Styling Inconsistency - Border Radius and Focus States

[pbrissaud]

Form Input Styling Inconsistency

Problem Description

Form inputs across the site have inconsistent:

• Border-radius values (6px vs 8px)
• Focus state styling
• Border thickness
• Shadow application

Impact

• Inconsistent form experience across pages
• Confusing visual feedback on interaction
• Breaks neo-brutalism design system
• Degrades professional appearance

Current Issues

1. Inconsistent Border-Radius:

• Some inputs: 6px (rounded-md)
• Should be: 8px (rounded-lg) to match button system

2. Focus States:

• Varies between pages
• Should have consistent neo-brutalism focus (border + small shadow)

3. Border Thickness:

• Some use default 1px borders (too thin)
• Should use 3px (neo-border) for neo-brutalism

Affected Files

• components/ui/input.tsx - Base input component
• components/ui/select.tsx - Select component
• Form components on /get-started and /profile pages

Suggested Fix

1. Update Input Component:

// components/ui/input.tsx
const inputVariants = cva(
  "flex w-full rounded-lg neo-border bg-input px-3 py-2 " +
  "text-base transition-all " +
  "placeholder:text-muted-foreground " +
  "focus-visible:outline-none " +
  "focus-visible:neo-shadow-sm " +
  "focus-visible:border-primary " +
  "disabled:cursor-not-allowed disabled:opacity-50"
);

2. Standardize Focus Behavior:

/* All form inputs should have consistent focus */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 2px 2px 0px 0px oklch(0.15 0 0);
}

3. Update Select Component:
Apply same styling to select elements for consistency.

Definition of Done

✅ All form inputs use rounded-lg (8px border-radius)
✅ All inputs use neo-border (3px solid black)
✅ Consistent focus states across all form elements
✅ Focus includes: primary border color + small neo-shadow
✅ No 1px or 2px borders on any form inputs
✅ Input styling matches button styling for coherent design

Priority

MEDIUM PRIORITY - Phase 3 component standardization

References

• Style Audit Report: Lines 427-439
• Form Pages: /get-started, /profile
• Related Issue: Button Style Inconsistency [MEDIUM PRIORITY] Button Style Inconsistency Across Pages #138

[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-Radius Catastrophe - 6 Different Values Site-Wide #134

Related Issues

• [MEDIUM PRIORITY] Button Style Inconsistency Across Pages #138
• [CRITICAL] Border-Width Anarchy - 7-8 Different Border Patterns Site-Wide #135

👤 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]

Warning

The ticket describes styling inconsistencies in Input and Select components that do not exist in the current codebase. Comprehensive exploration confirms all form inputs already use rounded-lg (8px), neo-border (3px), and the correct focus pattern (focus-visible:border-ring focus-visible:ring-[3px]). The ticket's suggested implementation would introduce deprecated patterns (neo-shadow-sm is marked DEPRECATED in globals.css) and replace the current ring-based focus system with a shadow-based one, breaking consistency with Button, Badge, and NavigationMenu components. Implementing this ticket would degrade, not improve, the design system.

You can reply directly to this comment with additional context or clarifications to help CodeRabbit complete the planning task, with an @-mention to the bot.