Smaller variant for buttons that sit next to section labels in card headers
(Preview, Color, Results rows). Applied to QRPreview, FontPreview,
ColorManipulation, and FileConverter.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Extract shared actionBtn and iconBtn constants into lib/utils/styles.ts
and replace all 11 local definitions across tool components.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Also restore scroll handling to ExportPanel and PresetLibrary, and
remove maxHeight cap from CodeSnippet in ExportPanel.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Shared components (components/ui/):
- slider-row.tsx: SliderRow — label + display value + Slider, replaces
inline slider blocks in FileConverter, QROptions
- color-input.tsx: ColorInput — color swatch + hex text input pair,
replaces repeated inline patterns in QROptions, KeyframeProperties,
FaviconGenerator
Media tool (FileConverter.tsx):
- Remove all shadcn Select/SelectTrigger/SelectContent/SelectItem
- Replace with native <select> + selectCls (matches AnimationSettings
and all other tools)
- Use SliderRow for video/audio bitrate and image quality sliders
- Net: -6 shadcn Select trees, consistent with every other tool
QROptions.tsx:
- Use SliderRow for margin slider (remove raw Slider import)
- Use ColorInput for foreground + background color pairs
KeyframeProperties.tsx:
- Use ColorInput for background color pair (keep local SliderRow which
has a different layout with number input)
FaviconGenerator.tsx:
- Use ColorInput for background + theme color pairs
AnimationSettings.tsx:
- Remove dead bg-[#1a1a2e] per-option className (global CSS handles
select option styling via bg-popover)
Delete:
- components/media/ConversionOptions.tsx — dead code (no imports),
contained the shadcn Label/Input/Select/Slider patterns being replaced
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Rewrites all three media components to use the glass panel design
language, fixed-height two-panel layout, and glass action buttons.
- FileConverter: lg:grid-cols-5 split — left 2/5 is the upload zone;
right 3/5 has output format pill grid + codec/quality options +
convert/reset buttons + scrollable results panel; mobile 'Upload |
Convert' tab switcher auto-advances on file selection; removed all
Card/Button/Label/Input shadcn imports; keeps Select+Slider for
codec/quality controls
- FileUpload: large flex-1 drop zone fills the left panel; file list
shows glass item cards with metadata chips; native buttons; removes
shadcn Button dependency
- ConversionPreview: glass card replaces Card; native progress bar
(div with bg-primary/65) replaces shadcn Progress; size reduction
shown as emerald/muted badge; media previews in dark-bordered
containers; all buttons are glass action buttons
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Removed manual theme switching logic and ThemeProvider
- Installed and configured tailwind-scrollbar plugin
- Updated FileConverter and ConversionOptions to use shadcn Input
- Refactored FontSelector to use shadcn Tabs
- Simplified global styles and adjusted glassmorphic effects
