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(
fit: StackFit.expand,
children: [
// 1. Cinematic Background (Abstract Gradient)
// 1. Cinematic Background (Deep Space - Premium Apple TV)
Container(
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(
top: -size.height * 0.2,
right: -size.width * 0.1,
top: -size.height * 0.3,
right: -size.width * 0.2,
child: Container(
width: size.width * 0.6,
height: size.width * 0.6,
width: size.width * 0.8,
height: size.width * 0.8,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: RadialGradient(
colors: [
AppColors.textPrimary.withOpacity(0.05),
AppColors.primary.withOpacity(0.4),
AppColors.primary.withOpacity(0.1),
Colors.transparent,
],
radius: 0.5,
),
),
),
),
Positioned(
bottom: -size.height * 0.2,
left: -size.width * 0.1,
bottom: -size.height * 0.3,
left: -size.width * 0.2,
child: Container(
width: size.width * 0.6,
height: size.width * 0.6,
width: size.width * 0.8,
height: size.width * 0.8,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: RadialGradient(
colors: [
Colors.blue.withOpacity(0.03), // Subtle blue hint
AppColors.info.withOpacity(0.3),
AppColors.info.withOpacity(0.05),
Colors.transparent,
],
radius: 0.5,
),
),
),
@@ -54,11 +54,64 @@ class PlaylistSelectionScreen extends ConsumerWidget {
),
],
),
body: Container(
decoration: const BoxDecoration(
gradient: AppColors.backgroundGradient,
),
child: playlistsAsync.when(
body: Stack(
fit: StackFit.expand,
children: [
// Background with glows
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(
child: CircularProgressIndicator(color: AppColors.primary),
),
@@ -151,7 +204,9 @@ class PlaylistSelectionScreen extends ConsumerWidget {
},
);
},
),
),
),
],
),
);
}