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:
Decobus
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>
|
||||
|
|
|
|||
|
|
@ -165,6 +165,7 @@ export default function EditStream() {
|
|||
<h1 className="title">Stream Not Found</h1>
|
||||
<p className="subtitle">The requested stream could not be found.</p>
|
||||
<button onClick={() => router.push('/')} className="btn mt-4">
|
||||
<span className="icon">🏠</span>
|
||||
Back to Home
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -252,32 +253,28 @@ export default function EditStream() {
|
|||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="btn w-full"
|
||||
className="btn btn-success w-full"
|
||||
>
|
||||
<svg className="icon-sm" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
|
||||
</svg>
|
||||
<span className="icon">✅</span>
|
||||
{isSubmitting ? 'Updating Stream...' : 'Update Stream'}
|
||||
</button>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<div className="button-group" style={{ justifyContent: 'center' }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.push('/')}
|
||||
className="btn-secondary flex-1"
|
||||
className="btn-secondary"
|
||||
>
|
||||
<span className="icon">❌</span>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDelete}
|
||||
className="btn bg-red-600 hover:bg-red-700 flex-1"
|
||||
className="btn-danger"
|
||||
>
|
||||
<svg className="icon-sm" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" clipRule="evenodd" />
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span className="icon">🗑️</span>
|
||||
Delete Stream
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ body {
|
|||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Modern Button */
|
||||
/* Modern Button System */
|
||||
.btn {
|
||||
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
|
||||
color: white;
|
||||
|
|
@ -41,8 +41,12 @@ body {
|
|||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
position: relative;
|
||||
min-height: 44px;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn.active {
|
||||
|
|
@ -51,18 +55,90 @@ body {
|
|||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Secondary Button */
|
||||
.btn-secondary {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Success Button */
|
||||
.btn-success {
|
||||
background: linear-gradient(135deg, #10b981, #059669);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background: linear-gradient(135deg, #059669, #047857);
|
||||
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
|
||||
}
|
||||
|
||||
/* Danger Button */
|
||||
.btn-danger {
|
||||
background: linear-gradient(135deg, #ef4444, #dc2626);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: linear-gradient(135deg, #dc2626, #b91c1c);
|
||||
box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
|
||||
}
|
||||
|
||||
/* Small Button */
|
||||
.btn-sm {
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
min-height: 36px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Icon Only Button */
|
||||
.btn-icon {
|
||||
padding: 10px;
|
||||
min-width: 44px;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
/* Button with icon spacing */
|
||||
.btn .icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Form spacing fixes since Tailwind gap classes aren't working */
|
||||
.form-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-row > * + * {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button-group > * + * {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
/* Input Styling */
|
||||
|
|
|
|||
|
|
@ -200,11 +200,9 @@ export default function Home() {
|
|||
</div>
|
||||
<Link
|
||||
href={`/edit/${stream.id}`}
|
||||
className="btn-secondary"
|
||||
className="btn-secondary btn-sm"
|
||||
>
|
||||
<svg className="icon-sm" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
|
||||
</svg>
|
||||
<span className="icon">✏️</span>
|
||||
Edit
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -125,23 +125,22 @@ export default function Teams() {
|
|||
<div className="glass p-6 mb-6">
|
||||
<h2 className="card-title">Add New Team</h2>
|
||||
<form onSubmit={handleAddTeam} className="max-w-md mx-auto">
|
||||
<div className="flex gap-3">
|
||||
<div className="form-row">
|
||||
<input
|
||||
type="text"
|
||||
value={newTeamName}
|
||||
onChange={(e) => setNewTeamName(e.target.value)}
|
||||
placeholder="Enter team name"
|
||||
className="input flex-1"
|
||||
className="input"
|
||||
style={{ flex: 1 }}
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="btn"
|
||||
className="btn btn-success"
|
||||
>
|
||||
<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>
|
||||
<span className="icon">➕</span>
|
||||
{isSubmitting ? 'Adding...' : 'Add Team'}
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -170,30 +169,29 @@ export default function Teams() {
|
|||
{teams.map((team) => (
|
||||
<div key={team.team_id} className="glass p-4">
|
||||
{editingTeam?.team_id === team.team_id ? (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="form-row">
|
||||
<input
|
||||
type="text"
|
||||
value={editingName}
|
||||
onChange={(e) => setEditingName(e.target.value)}
|
||||
className="input flex-1"
|
||||
className="input"
|
||||
style={{ flex: 1 }}
|
||||
autoFocus
|
||||
/>
|
||||
<button
|
||||
onClick={() => handleUpdateTeam(team.team_id)}
|
||||
className="btn"
|
||||
className="btn btn-success btn-sm"
|
||||
title="Save changes"
|
||||
>
|
||||
<svg className="icon-sm" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span className="icon">✅</span>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
onClick={cancelEditing}
|
||||
className="btn-secondary"
|
||||
className="btn-secondary btn-sm"
|
||||
title="Cancel editing"
|
||||
>
|
||||
<svg className="icon-sm" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span className="icon">❌</span>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -208,24 +206,21 @@ export default function Teams() {
|
|||
<div className="text-sm text-white/60">ID: {team.team_id}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="button-group">
|
||||
<button
|
||||
onClick={() => startEditing(team)}
|
||||
className="btn-secondary"
|
||||
className="btn-secondary btn-sm"
|
||||
title="Edit team"
|
||||
>
|
||||
<svg className="icon-sm" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
|
||||
</svg>
|
||||
<span className="icon">✏️</span>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeleteTeam(team.team_id)}
|
||||
className="btn bg-red-600 hover:bg-red-700"
|
||||
className="btn-danger btn-sm"
|
||||
title="Delete team"
|
||||
>
|
||||
<svg className="icon-sm" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" clipRule="evenodd" />
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span className="icon">🗑️</span>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -26,26 +26,20 @@ export default function Header() {
|
|||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex">
|
||||
<nav className="button-group">
|
||||
<Link
|
||||
href="/"
|
||||
className={`btn ${isActive('/') ? 'active' : ''}`}
|
||||
style={{ marginRight: '12px' }}
|
||||
>
|
||||
<svg className="icon-sm" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
|
||||
</svg>
|
||||
<span className="icon">🏠</span>
|
||||
Home
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/add"
|
||||
className={`btn ${isActive('/add') ? 'active' : ''}`}
|
||||
style={{ marginRight: '12px' }}
|
||||
>
|
||||
<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>
|
||||
<span className="icon">🎥</span>
|
||||
Streams
|
||||
</Link>
|
||||
|
||||
|
|
@ -53,9 +47,7 @@ export default function Header() {
|
|||
href="/teams"
|
||||
className={`btn ${isActive('/teams') ? 'active' : ''}`}
|
||||
>
|
||||
<svg className="icon-sm" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z" />
|
||||
</svg>
|
||||
<span className="icon">👥</span>
|
||||
Teams
|
||||
</Link>
|
||||
</nav>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue