Michael/xtremflow
1
0 Fork 0
mirror of https://github.com/R0m1k3/xtremflow.git synced 2026-10-20 13:38:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(theme): complete redesign to Cyber-Cinematic Glass (Stitch)

Browse Source 
Replace the legacy Apple TV-style purple/cyan theme with the full
Google Stitch Cyber-Cinematic Glass design system across the
entire app (desktop + mobile).

- New Material 3 dark ColorScheme: background #121317, primary
  #adc6ff, primaryContainer #4b8eff, surface containers, etc.
- Typography: Space Grotesk (headlines) + Inter (body/labels)
- 3-level glassmorphism via GlassContainer: base, glass, floating
- Primary gradient: #007AFF → #00C6FF with blue glow effects
- Removed old compatibility aliases (focusColor, border, textPrimary,
  textSecondary); all code now uses semantic Stitch tokens
- Systematically replaced all Colors.white/black/red/grey and
  GoogleFonts.roboto/outfit with Stitch equivalents
- All 36 lib/ files updated, zero compilation errors

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
MichaelandClaude Opus 4.7 committed 2026-04-27 22:06:29 +02:00
1 parent a9a1127d6b
commit f7eaa724e2
36 files changed
+1651 -986
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/mobile/features/iptv/widgets/mobile_live_tv_tab.dart
+27 -29
View File
@@ -48,7 +48,7 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
children: [
const CircularProgressIndicator(),
const SizedBox(height: 16),
const Text('Loading channels...', style: TextStyle(color: Colors.white70)),
const Text('Loading channels...', style: TextStyle(color: AppColors.onSurfaceVariant)),
const SizedBox(height: 24),
FutureBuilder(
future: Future.delayed(const Duration(seconds: 8)),
@@ -71,11 +71,11 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.error_outline, color: Colors.red, size: 48),
const Icon(Icons.error_outline, color: AppColors.error, size: 48),
const SizedBox(height: 16),
Text('Failed to load channels', style: GoogleFonts.inter(color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold)),
Text('Failed to load channels', style: GoogleFonts.inter(color: AppColors.onSurface, fontSize: 18, fontWeight: FontWeight.bold)),
const SizedBox(height: 8),
Text('$e', style: const TextStyle(color: Colors.white54), textAlign: TextAlign.center),
Text('$e', style: const TextStyle(color: AppColors.onSurfaceVariant), textAlign: TextAlign.center),
const SizedBox(height: 24),
ElevatedButton(
onPressed: () => ref.refresh(liveChannelsByPlaylistProvider(widget.playlist)),
@@ -127,9 +127,8 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
// Header & Search
Padding(
padding: const EdgeInsets.all(16),
child: GlassContainer(
child: GlassContainer.glass(
borderRadius: 16,
opacity: 0.1,
padding:
const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Row(
@@ -137,15 +136,15 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
Expanded(
child: TextField(
controller: _searchController,
style: GoogleFonts.inter(color: Colors.white),
style: GoogleFonts.inter(color: AppColors.onSurface),
decoration: InputDecoration(
hintText: 'Search channels...',
hintStyle:
GoogleFonts.inter(color: Colors.white54),
GoogleFonts.inter(color: AppColors.onSurfaceVariant),
border: InputBorder.none,
prefixIcon: const Icon(
Icons.search,
color: Colors.white54,
color: AppColors.onSurfaceVariant,
),
isDense: true,
),
@@ -155,7 +154,7 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
GestureDetector(
onTap: () => _searchController.clear(),
child:
const Icon(Icons.close, color: Colors.white54),
const Icon(Icons.close, color: AppColors.onSurfaceVariant),
),
],
),
@@ -185,15 +184,15 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
),
decoration: BoxDecoration(
color: isSelected
? Colors.white
: Colors.black.withOpacity(0.4),
? AppColors.primary
: AppColors.surfaceContainer,
borderRadius: BorderRadius.circular(20),
),
child: Text(
category,
style: GoogleFonts.inter(
color:
isSelected ? Colors.black : Colors.white70,
isSelected ? AppColors.onPrimary : AppColors.onSurfaceVariant,
fontWeight: isSelected
? FontWeight.w600
: FontWeight.w500,
@@ -218,7 +217,7 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
? 'Favorites'
: _selectedCategory ?? 'Channels',
style: GoogleFonts.inter(
color: Colors.white,
color: AppColors.onSurface,
fontWeight: FontWeight.bold,
fontSize: 18,
),
@@ -233,7 +232,7 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
decoration: BoxDecoration(
color: _showFavoritesOnly
? AppColors.live.withOpacity(0.2)
: Colors.white.withOpacity(0.1),
: AppColors.surfaceContainer,
borderRadius: BorderRadius.circular(8),
border: _showFavoritesOnly
? Border.all(color: AppColors.live)
@@ -245,7 +244,7 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
: Icons.favorite_border,
color: _showFavoritesOnly
? AppColors.live
: Colors.white,
: AppColors.onSurface,
size: 20,
),
),
@@ -263,13 +262,13 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
children: [
const Icon(
Icons.tv_off,
color: Colors.white24,
color: AppColors.outlineVariant,
size: 48,
),
const SizedBox(height: 16),
Text(
'No channels found',
style: GoogleFonts.inter(color: Colors.white38),
style: GoogleFonts.inter(color: AppColors.outline),
),
],
),
@@ -339,9 +338,8 @@ class _MobileChannelTile extends ConsumerWidget {
),
);
return GlassContainer(
return GlassContainer.glass(
borderRadius: 12,
opacity: 0.15,
padding: EdgeInsets.zero,
child: InkWell(
onTap: onTap,
@@ -354,7 +352,7 @@ class _MobileChannelTile extends ConsumerWidget {
width: 48,
height: 48,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1),
color: AppColors.surfaceContainer,
borderRadius: BorderRadius.circular(8),
),
padding: const EdgeInsets.all(4),
@@ -363,9 +361,9 @@ class _MobileChannelTile extends ConsumerWidget {
iconUrl,
fit: BoxFit.contain,
errorBuilder: (_, __, ___) =>
const Icon(Icons.tv, color: Colors.white24),
const Icon(Icons.tv, color: AppColors.outlineVariant),
)
: const Icon(Icons.tv, color: Colors.white24),
: const Icon(Icons.tv, color: AppColors.outlineVariant),
),
const SizedBox(width: 16),
Expanded(
@@ -375,7 +373,7 @@ class _MobileChannelTile extends ConsumerWidget {
Text(
channel.name,
style: GoogleFonts.inter(
color: Colors.white,
color: AppColors.onSurface,
fontWeight: FontWeight.w500,
fontSize: 14,
),
@@ -390,7 +388,7 @@ class _MobileChannelTile extends ConsumerWidget {
return Text(
'No Info',
style: GoogleFonts.inter(
color: Colors.white38,
color: AppColors.outline,
fontSize: 12,
),
);
@@ -411,11 +409,11 @@ class _MobileChannelTile extends ConsumerWidget {
},
loading: () => const Text(
'...',
style: TextStyle(color: Colors.white38, fontSize: 12),
style: TextStyle(color: AppColors.outline, fontSize: 12),
),
error: (err, stack) => const Text(
'Err',
style: TextStyle(color: Colors.red, fontSize: 10),
style: TextStyle(color: AppColors.error, fontSize: 10),
),
),
],
@@ -424,12 +422,12 @@ class _MobileChannelTile extends ConsumerWidget {
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1),
color: AppColors.surfaceContainer,
shape: BoxShape.circle,
),
child: const Icon(
Icons.play_arrow_rounded,
color: Colors.white,
color: AppColors.onSurface,
size: 16,
),
),
lib/mobile/features/iptv/widgets/mobile_movies_tab.dart
+14 -16
View File
@@ -195,25 +195,24 @@ class _MobileMoviesTabState extends ConsumerState<MobileMoviesTab> {
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.all(16),
child: GlassContainer(
child: GlassContainer.glass(
borderRadius: 100,
opacity: 0.1, // Glass
padding:
const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Row(
children: [
const Icon(Icons.search, size: 20, color: Colors.white54),
const Icon(Icons.search, size: 20, color: AppColors.onSurfaceVariant),
const SizedBox(width: 8),
Expanded(
child: TextField(
controller: _searchController,
style: GoogleFonts.inter(
fontSize: 14,
color: Colors.white,
color: AppColors.onSurface,
),
decoration: InputDecoration(
hintText: 'Search Movies...',
hintStyle: GoogleFonts.inter(color: Colors.white54),
hintStyle: GoogleFonts.inter(color: AppColors.onSurfaceVariant),
border: InputBorder.none,
isDense: true,
contentPadding: const EdgeInsets.only(bottom: 11),
@@ -227,7 +226,7 @@ class _MobileMoviesTabState extends ConsumerState<MobileMoviesTab> {
height: 12,
child: CircularProgressIndicator(
strokeWidth: 2,
color: Colors.white,
color: AppColors.onSurface,
),
),
if (_searchQuery.isNotEmpty)
@@ -239,7 +238,7 @@ class _MobileMoviesTabState extends ConsumerState<MobileMoviesTab> {
child: const Icon(
Icons.close,
size: 16,
color: Colors.white,
color: AppColors.onSurface,
),
),
],
@@ -302,13 +301,13 @@ class _MobileMoviesTabState extends ConsumerState<MobileMoviesTab> {
_getProxiedImageUrl(movie.streamIcon, ref),
fit: BoxFit.cover,
errorBuilder: (_, __, ___) =>
Container(color: Colors.white10),
Container(color: AppColors.surfaceContainerLow),
)
: Container(
color: Colors.white10,
color: AppColors.surfaceContainerLow,
child: const Icon(
Icons.movie,
color: Colors.white24,
color: AppColors.outlineVariant,
),
),
),
@@ -326,7 +325,7 @@ class _MobileMoviesTabState extends ConsumerState<MobileMoviesTab> {
end: Alignment.bottomCenter,
colors: [
Colors.transparent,
Colors.black.withOpacity(0.9),
AppColors.background.withOpacity(0.9),
],
),
borderRadius: const BorderRadius.vertical(
@@ -348,7 +347,7 @@ class _MobileMoviesTabState extends ConsumerState<MobileMoviesTab> {
Text(
movie.name,
style: GoogleFonts.inter(
color: Colors.white,
color: AppColors.onSurface,
fontSize: 13,
fontWeight: FontWeight.w600,
),
@@ -373,9 +372,8 @@ class _MobileMoviesTabState extends ConsumerState<MobileMoviesTab> {
Positioned(
top: 8,
right: 8,
child: GlassContainer(
child: GlassContainer.glass(
borderRadius: 4,
opacity: 0.6,
padding: const EdgeInsets.symmetric(
horizontal: 6,
vertical: 2,
@@ -394,7 +392,7 @@ class _MobileMoviesTabState extends ConsumerState<MobileMoviesTab> {
style: GoogleFonts.inter(
fontSize: 10,
fontWeight: FontWeight.bold,
color: Colors.white,
color: AppColors.onSurface,
),
),
],
@@ -415,7 +413,7 @@ class _MobileMoviesTabState extends ConsumerState<MobileMoviesTab> {
child: Padding(
padding: EdgeInsets.all(24),
child: Center(
child: CircularProgressIndicator(color: Colors.white),
child: CircularProgressIndicator(color: AppColors.onSurface),
),
),
),
lib/mobile/features/iptv/widgets/mobile_series_tab.dart
+15 -16
View File
@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:google_fonts/google_fonts.dart';
import '../../../../core/models/playlist_config.dart';
import '../../../../core/theme/app_colors.dart';
import '../../../../core/widgets/components/hero_carousel.dart';
import '../../../../core/widgets/glass_container.dart';
import '../../../../features/iptv/models/xtream_models.dart';
@@ -185,25 +186,24 @@ class _MobileSeriesTabState extends ConsumerState<MobileSeriesTab> {
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.all(16),
child: GlassContainer(
child: GlassContainer.glass(
borderRadius: 100,
opacity: 0.1,
padding:
const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Row(
children: [
const Icon(Icons.search, size: 20, color: Colors.white54),
const Icon(Icons.search, size: 20, color: AppColors.onSurfaceVariant),
const SizedBox(width: 8),
Expanded(
child: TextField(
controller: _searchController,
style: GoogleFonts.inter(
fontSize: 14,
color: Colors.white,
color: AppColors.onSurface,
),
decoration: InputDecoration(
hintText: 'Search Series...',
hintStyle: GoogleFonts.inter(color: Colors.white54),
hintStyle: GoogleFonts.inter(color: AppColors.onSurfaceVariant),
border: InputBorder.none,
isDense: true,
contentPadding: const EdgeInsets.only(bottom: 11),
@@ -217,7 +217,7 @@ class _MobileSeriesTabState extends ConsumerState<MobileSeriesTab> {
height: 12,
child: CircularProgressIndicator(
strokeWidth: 2,
color: Colors.white,
color: AppColors.onSurface,
),
),
if (_searchQuery.isNotEmpty)
@@ -229,7 +229,7 @@ class _MobileSeriesTabState extends ConsumerState<MobileSeriesTab> {
child: const Icon(
Icons.close,
size: 16,
color: Colors.white,
color: AppColors.onSurface,
),
),
],
@@ -291,13 +291,13 @@ class _MobileSeriesTabState extends ConsumerState<MobileSeriesTab> {
_getProxiedImageUrl(series.cover, ref),
fit: BoxFit.cover,
errorBuilder: (_, __, ___) =>
Container(color: Colors.white10),
Container(color: AppColors.surfaceContainerLow),
)
: Container(
color: Colors.white10,
color: AppColors.surfaceContainerLow,
child: const Icon(
Icons.tv,
color: Colors.white24,
color: AppColors.outlineVariant,
),
),
),
@@ -315,7 +315,7 @@ class _MobileSeriesTabState extends ConsumerState<MobileSeriesTab> {
end: Alignment.bottomCenter,
colors: [
Colors.transparent,
Colors.black.withOpacity(0.9),
AppColors.background.withOpacity(0.9),
],
),
borderRadius: const BorderRadius.vertical(
@@ -333,7 +333,7 @@ class _MobileSeriesTabState extends ConsumerState<MobileSeriesTab> {
child: Text(
series.name,
style: GoogleFonts.inter(
color: Colors.white,
color: AppColors.onSurface,
fontSize: 13,
fontWeight: FontWeight.w600,
),
@@ -347,9 +347,8 @@ class _MobileSeriesTabState extends ConsumerState<MobileSeriesTab> {
Positioned(
top: 8,
right: 8,
child: GlassContainer(
child: GlassContainer.glass(
borderRadius: 4,
opacity: 0.6,
padding: const EdgeInsets.symmetric(
horizontal: 6,
vertical: 2,
@@ -368,7 +367,7 @@ class _MobileSeriesTabState extends ConsumerState<MobileSeriesTab> {
style: GoogleFonts.inter(
fontSize: 10,
fontWeight: FontWeight.bold,
color: Colors.white,
color: AppColors.onSurface,
),
),
],
@@ -389,7 +388,7 @@ class _MobileSeriesTabState extends ConsumerState<MobileSeriesTab> {
child: Padding(
padding: EdgeInsets.all(24),
child: Center(
child: CircularProgressIndicator(color: Colors.white),
child: CircularProgressIndicator(color: AppColors.onSurface),
),
),
),
lib/mobile/features/iptv/widgets/mobile_settings_tab.dart
+15 -15
View File
@@ -112,7 +112,7 @@ class _MobileSettingsTabState extends ConsumerState<MobileSettingsTab> {
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: AppColors.textPrimary,
color: AppColors.onSurface,
),
),
if (currentUser?.isAdmin ?? false)
@@ -155,7 +155,7 @@ class _MobileSettingsTabState extends ConsumerState<MobileSettingsTab> {
SwitchListTile(
title: const Text(
'Dark Mode',
style: TextStyle(color: AppColors.textPrimary),
style: TextStyle(color: AppColors.onSurface),
),
secondary: Icon(
isDark ? Icons.dark_mode : Icons.light_mode,
@@ -169,7 +169,7 @@ class _MobileSettingsTabState extends ConsumerState<MobileSettingsTab> {
SwitchListTile(
title: const Text(
'Show Clock',
style: TextStyle(color: AppColors.textPrimary),
style: TextStyle(color: AppColors.onSurface),
),
secondary:
const Icon(Icons.access_time, color: AppColors.primary),
@@ -264,7 +264,7 @@ class _MobileSettingsTabState extends ConsumerState<MobileSettingsTab> {
SwitchListTile(
title: const Text(
'Auto Reconnect',
style: TextStyle(color: AppColors.textPrimary),
style: TextStyle(color: AppColors.onSurface),
),
secondary:
const Icon(Icons.refresh, color: AppColors.primary),
@@ -303,7 +303,7 @@ class _MobileSettingsTabState extends ConsumerState<MobileSettingsTab> {
'Currently using: ${Uri.base.origin}',
style: const TextStyle(
fontSize: 10,
color: AppColors.textSecondary,
color: AppColors.onSurfaceVariant,
fontStyle: FontStyle.italic,
),
),
@@ -402,7 +402,7 @@ class _SectionHeader extends StatelessWidget {
style: GoogleFonts.inter(
fontSize: 14,
fontWeight: FontWeight.w600,
color: AppColors.textSecondary,
color: AppColors.onSurfaceVariant,
),
),
);
@@ -426,7 +426,7 @@ class _FilterInput extends StatelessWidget {
Widget build(BuildContext context) {
return Row(
children: [
Icon(icon, size: 20, color: AppColors.textSecondary),
Icon(icon, size: 20, color: AppColors.onSurfaceVariant),
const SizedBox(width: 12),
Expanded(
child: Column(
@@ -436,13 +436,13 @@ class _FilterInput extends StatelessWidget {
label,
style: const TextStyle(
fontSize: 12,
color: AppColors.textSecondary,
color: AppColors.onSurfaceVariant,
),
),
TextField(
controller: controller,
style:
const TextStyle(fontSize: 14, color: AppColors.textPrimary),
const TextStyle(fontSize: 14, color: AppColors.onSurface),
decoration: const InputDecoration(
isDense: true,
contentPadding: EdgeInsets.symmetric(vertical: 4),
@@ -483,17 +483,17 @@ class _SettingsButton extends StatelessWidget {
),
child: Row(
children: [
Icon(icon, color: AppColors.textPrimary),
Icon(icon, color: AppColors.onSurface),
const SizedBox(width: 16),
Text(
label,
style: const TextStyle(
fontWeight: FontWeight.w600,
color: AppColors.textPrimary,
color: AppColors.onSurface,
),
),
const Spacer(),
const Icon(Icons.chevron_right, color: AppColors.textSecondary),
const Icon(Icons.chevron_right, color: AppColors.onSurfaceVariant),
],
),
),
@@ -530,7 +530,7 @@ class _DropdownSetting<T> extends StatelessWidget {
child: Text(
label,
style: const TextStyle(
color: AppColors.textPrimary,
color: AppColors.onSurface,
fontSize: 16,
),
),
@@ -541,9 +541,9 @@ class _DropdownSetting<T> extends StatelessWidget {
dropdownColor: AppColors.surfaceVariant,
icon: const Icon(
Icons.arrow_drop_down,
color: AppColors.textSecondary,
color: AppColors.onSurfaceVariant,
),
style: const TextStyle(color: AppColors.textPrimary),
style: const TextStyle(color: AppColors.onSurface),
items: items.map((item) {
return DropdownMenuItem<T>(
value: item,