From 9a79decda3746c05123c1ea0f717f862d756252a Mon Sep 17 00:00:00 2001 From: Decobus Date: Sat, 19 Jul 2025 05:12:10 -0400 Subject: [PATCH] Comprehensive UI improvements with proper button spacing and modern design MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- app/add/page.tsx | 40 ++++++++++---------- app/edit/[id]/page.tsx | 19 ++++------ app/globals.css | 84 ++++++++++++++++++++++++++++++++++++++++-- app/page.tsx | 6 +-- app/teams/page.tsx | 47 +++++++++++------------ components/Header.tsx | 16 ++------ 6 files changed, 134 insertions(+), 78 deletions(-) diff --git a/app/add/page.tsx b/app/add/page.tsx index 5d7025d..a06b03f 100644 --- a/app/add/page.tsx +++ b/app/add/page.tsx @@ -157,31 +157,29 @@ export default function AddStream() { /> - {/* Team Selection */} + {/* Team Selection and Submit Button */}
- -
- - {/* Submit Button */} -
- +
+
+ +
+ +
diff --git a/app/edit/[id]/page.tsx b/app/edit/[id]/page.tsx index 2feb090..570c72c 100644 --- a/app/edit/[id]/page.tsx +++ b/app/edit/[id]/page.tsx @@ -165,6 +165,7 @@ export default function EditStream() {

Stream Not Found

The requested stream could not be found.

@@ -252,32 +253,28 @@ export default function EditStream() { -
+
diff --git a/app/globals.css b/app/globals.css index 28e4099..013862a 100644 --- a/app/globals.css +++ b/app/globals.css @@ -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 */ diff --git a/app/page.tsx b/app/page.tsx index 4433388..8c0f60b 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -200,11 +200,9 @@ export default function Home() {
- - - + ✏️ Edit diff --git a/app/teams/page.tsx b/app/teams/page.tsx index 52116f6..1613e3e 100644 --- a/app/teams/page.tsx +++ b/app/teams/page.tsx @@ -125,23 +125,22 @@ export default function Teams() {

Add New Team

-
+
setNewTeamName(e.target.value)} placeholder="Enter team name" - className="input flex-1" + className="input" + style={{ flex: 1 }} required />
@@ -170,30 +169,29 @@ export default function Teams() { {teams.map((team) => (
{editingTeam?.team_id === team.team_id ? ( -
+
setEditingName(e.target.value)} - className="input flex-1" + className="input" + style={{ flex: 1 }} autoFocus />
@@ -208,24 +206,21 @@ export default function Teams() {
ID: {team.team_id}
-
+
diff --git a/components/Header.tsx b/components/Header.tsx index 609a38e..ba380cc 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -26,26 +26,20 @@ export default function Header() {
{/* Navigation */} -