refactor(ui): apply premium Apple TV glows to all screens

Consistent Apple TV-style premium background across:
- Dashboard: dual glows (teal 40%, blue 35%)
- Login: dual glows with larger coverage (0.4, 0.3 opacity)
- Playlist Selection: dual glows (teal 30%, blue 25%)

All backgrounds now feature:
- Deep gradient (050505 → 000000 → 0A0A0A)
- Visible ambient glows instead of flat black
- Premium cinematic feel with accent lighting
- Larger glow sizes for better visual impact

Result: Cohesive Apple TV premium aesthetic across entire app

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
GitHub CopilotandClaude Haiku 4.5 committed 2026-03-26 12:09:17 +01:00
1 parent 8c8a7ad5c5
commit c4a3aaa066
2 files changed
+84 -21

No files matched your search

+23 -15
View File
@@ -51,46 +51,54 @@ class _LoginScreenState extends ConsumerState<LoginScreen> {
body: Stack( body: Stack(
fit: StackFit.expand, fit: StackFit.expand,
children: [ children: [
// 1. Cinematic Background (Abstract Gradient) // 1. Cinematic Background (Deep Space - Premium Apple TV)
Container( Container(
decoration: const BoxDecoration( decoration: const BoxDecoration(
gradient: AppColors.backgroundGradient, gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0xFF050505),
AppColors.background,
Color(0xFF0A0A0A),
],
),
), ),
), ),
// 2. Ambient Glows (Apple TV Style) // 2. Ambient Glows (Apple TV Style - VISIBLE)
Positioned( Positioned(
top: -size.height * 0.2, top: -size.height * 0.3,
right: -size.width * 0.1, right: -size.width * 0.2,
child: Container( child: Container(
width: size.width * 0.6, width: size.width * 0.8,
height: size.width * 0.6, height: size.width * 0.8,
decoration: BoxDecoration( decoration: BoxDecoration(
shape: BoxShape.circle, shape: BoxShape.circle,
gradient: RadialGradient( gradient: RadialGradient(
colors: [ colors: [
AppColors.textPrimary.withOpacity(0.05), AppColors.primary.withOpacity(0.4),
AppColors.primary.withOpacity(0.1),
Colors.transparent, Colors.transparent,
], ],
radius: 0.5,
), ),
), ),
), ),
), ),
Positioned( Positioned(
bottom: -size.height * 0.2, bottom: -size.height * 0.3,
left: -size.width * 0.1, left: -size.width * 0.2,
child: Container( child: Container(
width: size.width * 0.6, width: size.width * 0.8,
height: size.width * 0.6, height: size.width * 0.8,
decoration: BoxDecoration( decoration: BoxDecoration(
shape: BoxShape.circle, shape: BoxShape.circle,
gradient: RadialGradient( gradient: RadialGradient(
colors: [ colors: [
Colors.blue.withOpacity(0.03), // Subtle blue hint AppColors.info.withOpacity(0.3),
AppColors.info.withOpacity(0.05),
Colors.transparent, Colors.transparent,
], ],
radius: 0.5,
), ),
), ),
), ),
@@ -54,11 +54,64 @@ class PlaylistSelectionScreen extends ConsumerWidget {
), ),
], ],
), ),
body: Container( body: Stack(
decoration: const BoxDecoration( fit: StackFit.expand,
gradient: AppColors.backgroundGradient, children: [
), // Background with glows
child: playlistsAsync.when( Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0xFF050505),
AppColors.background,
Color(0xFF0A0A0A),
],
),
),
),
// Ambient Glow Top-Left - Teal
Positioned(
top: -200,
left: -200,
child: Container(
width: 600,
height: 600,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: RadialGradient(
colors: [
AppColors.primary.withOpacity(0.3),
AppColors.primary.withOpacity(0.05),
Colors.transparent,
],
),
),
),
),
// Ambient Glow Bottom-Right - Blue
Positioned(
bottom: -200,
right: -200,
child: Container(
width: 600,
height: 600,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: RadialGradient(
colors: [
AppColors.info.withOpacity(0.25),
AppColors.info.withOpacity(0.05),
Colors.transparent,
],
),
),
),
),
// Content
SingleChildScrollView(
child: playlistsAsync.when(
loading: () => const Center( loading: () => const Center(
child: CircularProgressIndicator(color: AppColors.primary), child: CircularProgressIndicator(color: AppColors.primary),
), ),
@@ -151,7 +204,9 @@ class PlaylistSelectionScreen extends ConsumerWidget {
}, },
); );
}, },
), ),
),
],
), ),
); );
} }