[Feature] UI/UX Redesign — Improve Visual Design & User Experience

[umesh-saini]

🎨 Feature: UI/UX Improvement

Current State

The app is functional but the visual design needs improvement.
The UI doesn't feel polished enough for a tool developers use daily.
We're looking for contributors with UI/UX or frontend skills to help
make DevSwitch look and feel great.

Goals

• Make the app feel modern and professional
• Improve information hierarchy so key actions are obvious
• Better empty states when no profiles exist
• Improve visual feedback for actions (loading, success, errors)
• Make the app feel more consistent across all pages

Specific Areas That Need Work

Home Page

• Better empty state when no profiles exist — illustration + clear CTA
• Profile cards feel flat — add better hover states, visual depth
• Provider icon/badge per profile card (GitHub, GitLab, etc.)
• Better layout for 6+ profiles (grid vs list toggle?)

Create / Edit Profile Page

• Form feels cramped — improve spacing and section grouping
• SSH key option selector (Default / Generate / Import) needs clearer visual treatment
• Step-by-step wizard layout could reduce overwhelm for new users

Profile View Page

• Public key display box needs better styling
• GitHub connection section needs clearer status indicators
• Action buttons need better grouping and hierarchy

Global

• Improve dark/light theme contrast ratios for accessibility
• Add loading skeletons instead of blank states during data fetch
• Error and success toast notifications need more consistent styling
• Sidebar/navigation could be cleaner

Tech Stack (Frontend)

• React 19 + TypeScript
• Tailwind CSS v4
• Radix UI primitives
• Motion One for animations
• shadcn/ui component style

How to Contribute

You don't need to redesign everything at once. Feel free to:

• Pick one page or one component and open a PR for just that
• Share a Figma mockup or screenshot in this issue before coding —
  we'll give feedback before you invest time building it
• Suggest improvements in the comments even if you're not coding

What We're NOT Looking For

• Full framework changes (staying with React + Tailwind)
• Component library changes (staying with Radix UI)
• Dark mode removal

[snakefood3232]

The "SSH key option selector needs clearer visual treatment" caught my eye. I'd handle this by enhancing the layout with more intuitive labels and spacing, possibly incorporating visual cues and animations for better usability. Can have a PR up within 2 days. I recently redesigned a configuration panel with a similar UI/UX challenge.

[jshaofa-ui]

Proposal: DevSwitch UI/UX Redesign

I've prepared a comprehensive redesign proposal for DevSwitch.

What I've Prepared

• Design System: Consistent color palette, spacing, typography
• Component Structure: Reusable UI components (Button, Card, Input, Modal)
• Layout Improvements: Card-based layout, responsive grid
• Accessibility Plan: WCAG 2.1 AA compliance roadmap

Key Improvements

1. Visual Polish: Modern, clean design with consistent styling
2. Responsive Layout: Works on all screen sizes
3. Dark/Light Theme: Built-in theme switching
4. Smooth Animations: Framer Motion transitions
5. Accessibility: Keyboard navigation, screen reader support

Tech Stack

• React 18+ with TypeScript
• Tailwind CSS
• Framer Motion
• React Hook Form
• React Query

Delivery

• ✅ Design proposal document
• ✅ Component structure plan
• 🎨 Figma mockups (if needed)
• ⏱️ Delivery: 5-7 days

Why Me

• Strong React + TypeScript experience
• UI/UX design expertise
• Accessibility-first approach

Ready to discuss the redesign in detail!

[umesh-saini]

@snakefood3232 , Hey! Yes, please go ahead — the SSH key selector is a great place to start.

Just a heads up: another contributor @jshaofa-ui is working on a broader UI redesign proposal for the full app. To avoid conflicts, could you scope your PR specifically to the SSH key option selector component on the Create/Edit Profile page? That way both PRs can land cleanly without stepping on each other.

Feel free to open a draft PR early so I can review the direction before you finalize it. Looking forward to it! 🙌

[umesh-saini]

@jshaofa-ui Wow, this is a really thorough proposal — exactly the kind of structured thinking this issue needed. Thank you for putting this together! 🙌

I love the direction, especially the accessibility plan and the component structure. Feel free to jump straight into the code — and if you have time to share Figma mockups along the way, I'd love to see them, but no pressure at all.

A couple of things to keep in mind:

• The app currently uses React 19, Tailwind CSS v4, and Radix UI — let's stick with these to avoid a full dependency overhaul
• For animations, Motion One is already in the project — we can use that instead of adding Framer Motion
• Another contributor is handling the SSH key selector component specifically, so leave that one out of your PR

Open a draft PR whenever you're ready so I can follow along and give feedback as you go. Really excited to see what you come up with! 🚀

[umesh-saini]

Hey @snakefood3232 @jshaofa-ui — checking in! It's been 5 days, would love to see a draft PR or any early progress. If you're still working on it, no rush just drop a quick update here. If things have come up and you can't continue, totally fine too just let me know so I can open it up to others.