Comprehensive UI improvements with proper button spacing and modern design
- Fix broken Tailwind gap classes by implementing custom CSS spacing system - Add .form-row and .button-group classes for consistent 16px and 12px spacing - Replace broken SVG icons with reliable emoji icons throughout application - Implement comprehensive button system with proper sizing and color coding: * btn-success (green) for add/save actions * btn-danger (red) for delete actions * btn-secondary (glass) for edit/cancel actions * btn-sm for smaller buttons with proper proportions Updated all pages with consistent spacing: - Header: Fixed navigation button spacing with button-group class - Teams: Fixed add team form and action button spacing - Streams: Moved Add Stream button to same line as team dropdown - Home: Updated edit button styling and spacing - Edit: Fixed all form buttons with proper spacing and modern icons Enhanced user experience: - Professional button hover effects with subtle animations - Consistent visual hierarchy with proper spacing - Responsive design maintained across all screen sizes - Modern glass morphism design with improved accessibility 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
f913e20dec
commit
9a79decda3
6 changed files with 134 additions and 78 deletions
|
@ -157,31 +157,29 @@ export default function AddStream() {
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* Team Selection */}
|
||||
{/* Team Selection and Submit Button */}
|
||||
<div>
|
||||
<label className="block text-white font-semibold mb-3">
|
||||
Team
|
||||
</label>
|
||||
<Dropdown
|
||||
options={teams}
|
||||
activeId={formData.team_id}
|
||||
onSelect={handleTeamSelect}
|
||||
label="Select a Team"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<div className="pt-6">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="btn w-full"
|
||||
>
|
||||
<svg className="icon-sm" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clipRule="evenodd" />
|
||||
</svg>
|
||||
{isSubmitting ? 'Adding Stream...' : 'Add Stream'}
|
||||
</button>
|
||||
<div className="form-row">
|
||||
<div style={{ flex: 1 }}>
|
||||
<Dropdown
|
||||
options={teams}
|
||||
activeId={formData.team_id}
|
||||
onSelect={handleTeamSelect}
|
||||
label="Select a Team"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="btn btn-success"
|
||||
>
|
||||
<span className="icon">🎥</span>
|
||||
{isSubmitting ? 'Adding...' : 'Add Stream'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue