yveskalume/yvcodesnap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix padding

Browse Source
This commit is contained in:
Yves Kalume
2026-01-07 20:12:07 +02:00
parent 7dbba818db
commit b9da4dd56b
3 changed files with 865 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/design.md
+689
View File
@@ -0,0 +1,689 @@
# UI Design Improvement Guide for YvCode
> A comprehensive analysis and recommendations to modernize and enhance the user interface of YvCode - a lightweight code canvas for social media images.
---
## 📊 Current State Analysis
### Strengths
- ✅ Clean dark theme foundation with good contrast
- ✅ Modern glassmorphism effects on the toolbar
- ✅ Well-organized component structure (TopBar, Layers, Canvas, Inspector)
- ✅ Good use of subtle borders (`border-white/5`) and backgrounds (`bg-white/5`)
- ✅ Proper iconography with consistent stroke-based SVGs
- ✅ Keyboard shortcuts implemented throughout
### Areas for Improvement
- ⚠️ Limited visual hierarchy and depth
- ⚠️ Inconsistent spacing and component sizing
- ⚠️ Missing micro-interactions and animations
- ⚠️ Outdated form control styling
- ⚠️ No onboarding or empty states
- ⚠️ Missing visual feedback for user actions
---
## 🎨 Design System Recommendations
### 1. Color Palette Enhancement
**Current:** Basic neutral grays with blue accents
**Recommended:** Expanded semantic color palette
```css
/* Primary Colors */
--primary-50: #eff6ff;
--primary-100: #dbeafe;
--primary-400: #60a5fa;
--primary-500: #3b82f6;
--primary-600: #2563eb;
/* Surface Colors (for layered depth) */
--surface-0: #09090b; /* Deepest - sidebars */
--surface-1: #0f0f12; /* Base canvas area */
--surface-2: #18181b; /* Elevated cards */
--surface-3: #27272a; /* Interactive elements */
/* Semantic Colors */
--success: #22c55e;
--warning: #f59e0b;
--error: #ef4444;
--info: #06b6d4;
/* Glass Effects */
--glass-bg: rgba(255, 255, 255, 0.03);
--glass-border: rgba(255, 255, 255, 0.06);
--glass-highlight: rgba(255, 255, 255, 0.08);
```
### 2. Typography Scale
**Recommended Font System:**
```css
/* Headings */
--text-2xl: 1.5rem; /* Panel titles */
--text-xl: 1.25rem; /* Section headers */
--text-lg: 1.125rem; /* Subheadings */
/* Body */
--text-base: 0.875rem; /* Default UI text */
--text-sm: 0.8125rem; /* Secondary text */
--text-xs: 0.75rem; /* Labels, hints */
/* Line Heights */
--leading-tight: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.75;
```
### 3. Spacing System
Adopt an 8px grid system for consistent spacing:
```css
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
```
---
## 🧩 Component-Specific Improvements
### TopBar
**Current Issues:**
- Fixed positioning with `h-16` may feel cramped
- Logo and title area lacks breathing room
- Export dropdown uses hover instead of click
**Recommendations:**
1. **Increase Height & Visual Weight**
```tsx
// Change from h-16 to h-14 with better internal spacing
<div className="h-14 bg-surface-0/80 backdrop-blur-xl border-b border-white/[0.04]">
```
2. **Add Breadcrumb Navigation**
```tsx
<div className="flex items-center gap-2 text-sm">
<span className="text-neutral-500">Projects</span>
<ChevronRight className="w-3 h-3 text-neutral-600" />
<span className="text-white font-medium">{snap.meta.title}</span>
</div>
```
3. **Convert Export to Click-Triggered Dropdown with Animation**
- Use Radix UI or Headless UI for accessible dropdowns
- Add scale and fade animations on open/close
4. **Add Status Indicator**
```tsx
<div className="flex items-center gap-2">
<div className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
<span className="text-xs text-neutral-500">Auto-saved</span>
</div>
```
### Toolbar (Floating)
**Current Issues:**
- Good glassmorphism base but could be more refined
- Tool icons lack visual distinction when inactive
- Zoom controls feel disconnected
**Recommendations:**
1. **Enhanced Glass Effect**
```tsx
<div className="
absolute bottom-6 left-1/2 -translate-x-1/2
flex items-center gap-3 px-4 py-3
rounded-2xl
bg-gradient-to-b from-white/[0.08] to-white/[0.04]
backdrop-blur-2xl
border border-white/[0.08]
shadow-[0_8px_32px_rgba(0,0,0,0.4),_inset_0_1px_0_rgba(255,255,255,0.1)]
">
```
2. **Animated Tool Selection**
```tsx
// Add spring animation for tool selection indicator
<motion.div
layoutId="tool-indicator"
className="absolute inset-0 bg-primary-500 rounded-xl"
transition={{ type: "spring", stiffness: 500, damping: 30 }}
/>
```
3. **Tooltips with Shortcuts**
- Add tooltips that show on hover with keyboard shortcut badges
- Use consistent tooltip styling across the app
4. **Group Visual Separators**
- Use subtle vertical dividers with gradient fade
### Layers Panel
**Current Issues:**
- Minimal visual hierarchy
- Layer items lack drag handles or reordering indication
- Empty state is too plain
**Recommendations:**
1. **Add Drag & Drop Reordering**
- Use `@dnd-kit/sortable` for accessible drag-and-drop
- Add ghost element preview during drag
- Show insertion indicator line
2. **Enhanced Layer Item Design**
```tsx
<div className="
group relative
flex items-center gap-3 px-3 py-2.5
rounded-lg
bg-gradient-to-r from-transparent to-transparent
hover:from-white/[0.03] hover:to-transparent
border border-transparent
hover:border-white/[0.06]
cursor-pointer
transition-all duration-200
">
{/* Drag handle - visible on hover */}
<div className="
opacity-0 group-hover:opacity-100
cursor-grab active:cursor-grabbing
text-neutral-600 hover:text-neutral-400
">
<GripVertical className="w-3 h-3" />
</div>
{/* Layer thumbnail preview */}
<div className="w-8 h-8 rounded bg-white/5 flex items-center justify-center">
{/* Mini preview of element */}
</div>
{/* Content */}
<div className="flex-1 min-w-0">
<span className="text-sm text-neutral-200 truncate block">
{element.name}
</span>
<span className="text-xs text-neutral-500">
{element.type}
</span>
</div>
</div>
```
3. **Beautiful Empty State**
```tsx
<div className="flex flex-col items-center justify-center py-12 px-4">
<div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-white/[0.06] to-white/[0.02] flex items-center justify-center mb-4">
<Layers className="w-8 h-8 text-neutral-600" />
</div>
<h4 className="text-sm font-medium text-neutral-400 mb-1">No layers yet</h4>
<p className="text-xs text-neutral-600 text-center">
Click on the canvas or use<br />
<kbd className="px-1.5 py-0.5 rounded bg-white/5 text-neutral-400">C</kbd>
<kbd className="px-1.5 py-0.5 rounded bg-white/5 text-neutral-400 mx-1">T</kbd>
<kbd className="px-1.5 py-0.5 rounded bg-white/5 text-neutral-400">A</kbd>
to add elements
</p>
</div>
```
### Inspector Panel
**Current Issues:**
- Dense information without clear sections
- Form controls need modernization
- No collapsible sections
**Recommendations:**
1. **Collapsible Accordion Sections**
```tsx
<Accordion type="multiple" defaultValue={['appearance', 'style']}>
<AccordionItem value="appearance">
<AccordionTrigger className="
flex items-center justify-between w-full py-3
text-xs font-semibold uppercase tracking-wider text-neutral-500
hover:text-neutral-300
">
Appearance
<ChevronDown className="w-4 h-4 transition-transform duration-200" />
</AccordionTrigger>
<AccordionContent>
{/* Content */}
</AccordionContent>
</AccordionItem>
</Accordion>
```
2. **Modern Input Fields**
```tsx
// Enhanced number input with stepper
<div className="
flex items-center
bg-white/[0.03] hover:bg-white/[0.05]
border border-white/[0.06] hover:border-white/[0.1]
rounded-lg
overflow-hidden
focus-within:ring-2 focus-within:ring-primary-500/30 focus-within:border-primary-500/50
transition-all
">
<input
type="number"
className="flex-1 bg-transparent px-3 py-2 text-sm text-white outline-none"
/>
<div className="flex flex-col border-l border-white/[0.06]">
<button className="px-2 py-1 hover:bg-white/[0.05]">
<ChevronUp className="w-3 h-3" />
</button>
<button className="px-2 py-1 hover:bg-white/[0.05] border-t border-white/[0.06]">
<ChevronDown className="w-3 h-3" />
</button>
</div>
</div>
```
3. **Enhanced Color Picker**
```tsx
// Modern color picker with swatches and opacity
<div className="space-y-3">
<div className="flex gap-2">
<div className="
relative w-10 h-10 rounded-lg overflow-hidden
border-2 border-white/10
shadow-lg shadow-black/20
">
{/* Checkerboard background for transparency */}
<div className="absolute inset-0 bg-checkerboard" />
<input type="color" className="absolute inset-0 w-full h-full cursor-pointer opacity-0" />
<div className="absolute inset-0" style={{ backgroundColor: color }} />
</div>
<div className="flex-1">
<input
type="text"
value={color}
className="w-full bg-white/[0.03] border border-white/[0.06] rounded-lg px-3 py-2 text-sm font-mono"
/>
</div>
</div>
{/* Recent colors */}
<div className="flex gap-1.5">
{recentColors.map(c => (
<button
key={c}
className="w-6 h-6 rounded-md border border-white/10 hover:scale-110 transition-transform"
style={{ backgroundColor: c }}
/>
))}
</div>
</div>
```
4. **Slider with Value Display**
```tsx
<div className="space-y-2">
<div className="flex justify-between">
<label className="text-xs font-medium text-neutral-500">Border Radius</label>
<span className="text-xs text-neutral-400 tabular-nums">{value}px</span>
</div>
<input
type="range"
className="
w-full h-1.5 rounded-full
bg-white/[0.06]
appearance-none
[&::-webkit-slider-thumb]:appearance-none
[&::-webkit-slider-thumb]:w-4
[&::-webkit-slider-thumb]:h-4
[&::-webkit-slider-thumb]:rounded-full
[&::-webkit-slider-thumb]:bg-white
[&::-webkit-slider-thumb]:shadow-lg
[&::-webkit-slider-thumb]:cursor-pointer
[&::-webkit-slider-thumb]:hover:scale-110
[&::-webkit-slider-thumb]:transition-transform
"
/>
</div>
```
### Canvas Area
**Current Issues:**
- Basic checkered or solid background
- No visual indicators for safe zones
- Selection handles could be more refined
**Recommendations:**
1. **Subtle Canvas Background Pattern**
```tsx
// Add subtle dot grid pattern to canvas workspace
<div className="
absolute inset-0
bg-[radial-gradient(circle_at_1px_1px,_rgba(255,255,255,0.03)_1px,_transparent_1px)]
bg-[size:24px_24px]
" />
```
2. **Enhanced Selection Handles**
```tsx
// Modern corner handles
<div className="
absolute w-3 h-3
bg-white
rounded-full
border-2 border-primary-500
shadow-lg shadow-primary-500/30
cursor-nwse-resize
hover:scale-125
transition-transform
" />
```
3. **Canvas Info Badge**
```tsx
// Show canvas size in corner
<div className="
absolute bottom-4 right-4
px-2 py-1
bg-black/50 backdrop-blur-sm
rounded-md
text-xs text-neutral-400
font-mono
">
{width} × {height}
</div>
```
---
## ✨ Micro-Interactions & Animations
### 1. Button Press Effects
```tsx
// Add satisfying press feedback
<button className="
transform
active:scale-95
transition-transform duration-75
">
```
### 2. Panel Transitions
```tsx
// Smooth panel content transitions
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -10 }}
transition={{ duration: 0.15 }}
>
```
### 3. Loading States
```tsx
// Skeleton loading for async operations
<div className="
animate-pulse
bg-gradient-to-r from-white/[0.03] via-white/[0.06] to-white/[0.03]
bg-[length:200%_100%]
animate-shimmer
" />
```
### 4. Success Feedback
```tsx
// Toast notification for exports
<div className="
fixed bottom-6 right-6
flex items-center gap-3
px-4 py-3
bg-green-500/10 backdrop-blur-xl
border border-green-500/20
rounded-xl
shadow-2xl
">
<CheckCircle className="w-5 h-5 text-green-400" />
<span className="text-sm text-green-200">Image exported successfully!</span>
</div>
```
---
## 🚀 Feature Enhancements
### 1. Onboarding Experience
**First-time user tooltip tour:**
- Highlight each major area with spotlight effect
- Short, contextual tips
- Skip option
```tsx
<div className="
absolute inset-0
bg-black/60 backdrop-blur-sm
z-50
">
{/* Spotlight cutout */}
<div className="
absolute
w-64 h-16
bg-transparent
rounded-2xl
ring-4 ring-primary-500
shadow-[0_0_0_9999px_rgba(0,0,0,0.6)]
" style={{ top: 0, left: 100 }}>
{/* Tooltip */}
<div className="absolute top-full mt-4 left-0 w-64 p-4 bg-surface-2 rounded-xl">
<h4 className="font-semibold text-white mb-1">Create & Export</h4>
<p className="text-sm text-neutral-400">Start a new project or export your creation in multiple formats.</p>
</div>
</div>
</div>
```
### 2. Command Palette (⌘K)
Add a spotlight-style command palette for power users:
```tsx
<div className="
fixed inset-0
flex items-start justify-center
pt-[20vh]
bg-black/50 backdrop-blur-sm
z-50
">
<div className="
w-full max-w-lg
bg-surface-1
border border-white/10
rounded-2xl
shadow-2xl
overflow-hidden
">
<input
type="text"
placeholder="Type a command or search..."
className="w-full px-5 py-4 bg-transparent text-white placeholder-neutral-500 outline-none"
/>
<div className="border-t border-white/5 max-h-80 overflow-auto">
{/* Command results */}
</div>
</div>
</div>
```
### 3. Quick Actions Contextual Menu
Right-click context menus with modern styling:
```tsx
<div className="
min-w-[200px]
bg-surface-2/95 backdrop-blur-xl
border border-white/10
rounded-xl
shadow-2xl
py-1
overflow-hidden
">
<button className="
w-full px-3 py-2
flex items-center gap-3
text-sm text-neutral-300
hover:bg-white/5 hover:text-white
transition-colors
">
<Copy className="w-4 h-4" />
Duplicate
<span className="ml-auto text-xs text-neutral-500">⌘D</span>
</button>
</div>
```
### 4. Preview Mode
Full-screen distraction-free preview:
```tsx
<div className="
fixed inset-0
bg-black
flex items-center justify-center
z-50
">
<button className="
absolute top-6 right-6
p-2
rounded-full
bg-white/10 hover:bg-white/20
text-white
transition-colors
">
<X className="w-5 h-5" />
</button>
{/* Canvas preview at actual size */}
<div className="shadow-2xl rounded-lg overflow-hidden">
{/* Rendered canvas */}
</div>
</div>
```
---
## 📱 Responsive Considerations
### Breakpoint Strategy
```css
/* Collapse side panels to bottom sheets on tablet */
@media (max-width: 1024px) {
.layers-panel,
.inspector-panel {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 40vh;
border-radius: 24px 24px 0 0;
transform: translateY(calc(100% - 48px));
transition: transform 0.3s ease;
}
.panel-open {
transform: translateY(0);
}
}
/* Hide panels completely on mobile - show as modals */
@media (max-width: 768px) {
.side-panels {
display: none;
}
}
```
---
## 🎯 Implementation Priority
### Phase 1: Quick Wins (1-2 days)
1. ✅ Update color palette and CSS variables
2. ✅ Enhance button/input hover states
3. ✅ Add micro-animations (scale, transitions)
4. ✅ Improve empty states
### Phase 2: Component Polish (3-5 days)
1. 🔲 Redesign Inspector panel with collapsible sections
2. 🔲 Enhance Layers panel with drag-and-drop
3. 🔲 Modernize all form controls
4. 🔲 Add toast notifications
### Phase 3: Advanced Features (1-2 weeks)
1. 🔲 Command palette (⌘K)
2. 🔲 Onboarding tour
3. 🔲 Context menus
4. 🔲 Preview mode
5. 🔲 Responsive adaptations
---
## 🛠️ Recommended Libraries
| Purpose | Library | Why |
|---------|---------|-----|
| Animations | `framer-motion` | Smooth, spring-based animations |
| UI Primitives | `@radix-ui/react-*` | Accessible, unstyled components |
| Drag & Drop | `@dnd-kit/core` | Modern, accessible DnD |
| Icons | `lucide-react` | Consistent, customizable icons |
| Tooltips | `@radix-ui/react-tooltip` | Accessible tooltips |
| Toasts | `sonner` | Beautiful toast notifications |
| Command Palette | `cmdk` | ⌘K style command menu |
---
## 📐 Visual Reference
### Inspiration Sources
- [Figma](https://figma.com) - Panel organization, inspector design
- [Linear](https://linear.app) - Command palette, animations
- [Raycast](https://raycast.com) - Glass effects, dark theme
- [Arc Browser](https://arc.net) - Sidebar design, animations
- [Vercel Dashboard](https://vercel.com) - Cards, buttons, clean typography
---
## Summary
The current YvCode UI has a solid foundation with its dark theme and component organization. The key improvements focus on:
1. **Visual Polish** - Enhanced glass effects, refined colors, better shadows
2. **Interaction Design** - Micro-animations, better feedback, modern controls
3. **Information Architecture** - Collapsible sections, better empty states, contextual help
4. **Power User Features** - Command palette, keyboard shortcuts display, context menus
Implementing these changes will transform YvCode into a professional-grade design tool that feels modern, responsive, and delightful to use.