diff --git a/lib/screens/branches_screen.dart b/lib/screens/branches_screen.dart index 9b2a0d1..d72715a 100644 --- a/lib/screens/branches_screen.dart +++ b/lib/screens/branches_screen.dart @@ -83,9 +83,9 @@ class _BranchesScreenState extends State { return Container( margin: const EdgeInsets.only(bottom: 16), - decoration: BoxDecoration( + decoration: const BoxDecoration( color: AppTheme.surfaceContainerLow, - borderRadius: BorderRadius.circular(16), + borderRadius: BorderRadius.zero, // Spec rules: "Don't use standard drop shadows" ), child: ListTile( @@ -95,7 +95,7 @@ class _BranchesScreenState extends State { padding: const EdgeInsets.all(12), decoration: BoxDecoration( color: AppTheme.secondaryContainer.withOpacity(0.2), - shape: BoxShape.circle, + shape: BoxShape.rectangle, ), child: const Icon(Icons.storefront, color: AppTheme.secondary), ), @@ -116,9 +116,9 @@ class _BranchesScreenState extends State { const SizedBox(height: 4), Row( children: [ - const Icon(Icons.phone, size: 14, color: AppTheme.primary), + const Icon(Icons.phone, size: 14, color: AppTheme.onSurfaceVariant), const SizedBox(width: 4), - Text(phone, style: Theme.of(context).textTheme.bodySmall?.copyWith(color: AppTheme.primary)), + Text(phone, style: Theme.of(context).textTheme.bodySmall?.copyWith(color: AppTheme.onSurfaceVariant)), ], ), ] @@ -127,7 +127,7 @@ class _BranchesScreenState extends State { ), trailing: phone.isNotEmpty ? IconButton( - icon: const Icon(Icons.chat_bubble_outline, color: Colors.green), + icon: const Icon(Icons.chat_bubble, color: AppTheme.onSurface), onPressed: () => _launchWhatsApp(phone), tooltip: 'Chat on WhatsApp', ) diff --git a/lib/screens/login_screen.dart b/lib/screens/login_screen.dart index 1c3a165..4245f3d 100644 --- a/lib/screens/login_screen.dart +++ b/lib/screens/login_screen.dart @@ -85,17 +85,18 @@ class _LoginScreenState extends State { children: [ const SizedBox(height: 64), Text( - 'Mie Mapan\nMembership', // Editorial high-end entry + 'Mie Mapan\nMembership.', style: Theme.of(context).textTheme.displayLarge?.copyWith( - color: AppTheme.primary, - letterSpacing: -1.0, // High-fashion compact look + color: AppTheme.onSurface, fontSize: 48, ), ), const SizedBox(height: 12), Text( 'Sign in to access your culinary loyalty tier and discover exclusive offers.', - style: Theme.of(context).textTheme.bodyLarge, + style: Theme.of(context).textTheme.bodyLarge?.copyWith( + color: AppTheme.onSurfaceVariant, + ), ), const SizedBox(height: 80), TextField( @@ -115,38 +116,39 @@ class _LoginScreenState extends State { height: 56, child: _isLoading ? const Center(child: CircularProgressIndicator()) - : Container( - decoration: BoxDecoration( - gradient: AppTheme.primaryGradient, - borderRadius: BorderRadius.circular(12), - ), - child: ElevatedButton( - onPressed: _login, - style: ElevatedButton.styleFrom( - backgroundColor: Colors.transparent, - shadowColor: Colors.transparent, - ), - child: const Text( - 'Access Membership', - style: TextStyle( - fontSize: 16, - fontWeight: FontWeight.bold, - ), + : ElevatedButton( + onPressed: _login, + child: const Text( + 'Access Membership', + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.bold, ), ), ), ), - const SizedBox(height: 16), - TextButton( - onPressed: () => Navigator.push( - context, - MaterialPageRoute(builder: (_) => const BranchesScreen()), - ), - child: Text( - 'Find Nearest Branch', - style: TextStyle( - fontWeight: FontWeight.bold, - color: Theme.of(context).colorScheme.primary, + const SizedBox(height: 32), + Center( + child: GestureDetector( + onTap: () => Navigator.push( + context, + MaterialPageRoute(builder: (_) => const BranchesScreen()), + ), + child: Container( + decoration: const BoxDecoration( + border: Border( + bottom: BorderSide(color: AppTheme.primary, width: 4), + ), + ), + padding: const EdgeInsets.only(bottom: 2), + child: const Text( + 'Find Nearest Branch', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 14, + color: AppTheme.onSurface, + ), + ), ), ), ), diff --git a/lib/screens/loyalty_dashboard.dart b/lib/screens/loyalty_dashboard.dart index 9961e51..50c7007 100644 --- a/lib/screens/loyalty_dashboard.dart +++ b/lib/screens/loyalty_dashboard.dart @@ -44,11 +44,11 @@ class _LoyaltyDashboardState extends State { title: const Text('My Rewards'), actions: [ IconButton( - icon: const Icon(Icons.storefront_outlined), + icon: const Icon(Icons.storefront), onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (_) => const BranchesScreen())), ), IconButton( - icon: const Icon(Icons.notifications_outlined), + icon: const Icon(Icons.notifications), onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (_) => const NotificationsScreen())), ), const SizedBox(width: 8), @@ -73,9 +73,9 @@ class _LoyaltyDashboardState extends State { return Container( margin: const EdgeInsets.only(bottom: 40), padding: const EdgeInsets.all(32), - decoration: BoxDecoration( + decoration: const BoxDecoration( color: AppTheme.surfaceContainerHighest, // Soft Lift without shadow - borderRadius: BorderRadius.circular(24), + borderRadius: BorderRadius.zero, ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -93,9 +93,9 @@ class _LoyaltyDashboardState extends State { const SizedBox(width: 16), Container( padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), - decoration: BoxDecoration( + decoration: const BoxDecoration( color: AppTheme.secondaryContainer, - borderRadius: BorderRadius.circular(1000), // full explicit roundedness + borderRadius: BorderRadius.zero, // Editorial block ), child: Text( 'Gold Member', diff --git a/lib/screens/notifications_screen.dart b/lib/screens/notifications_screen.dart index 3d3f97f..22b7fca 100644 --- a/lib/screens/notifications_screen.dart +++ b/lib/screens/notifications_screen.dart @@ -64,16 +64,9 @@ class _NotificationsScreenState extends State { final notif = _notifications[index]; return Container( margin: const EdgeInsets.only(bottom: 16), - decoration: BoxDecoration( + decoration: const BoxDecoration( color: AppTheme.surfaceContainerLow, - borderRadius: BorderRadius.circular(16), - boxShadow: [ - BoxShadow( - color: AppTheme.onSurface.withOpacity(0.04), - blurRadius: 16, - offset: const Offset(0, 4), - ) - ] + borderRadius: BorderRadius.zero, ), child: ListTile( contentPadding: const EdgeInsets.all(16), @@ -81,7 +74,7 @@ class _NotificationsScreenState extends State { padding: const EdgeInsets.all(12), decoration: BoxDecoration( color: AppTheme.primaryContainer.withOpacity(0.1), - shape: BoxShape.circle, + shape: BoxShape.rectangle, ), child: const Icon(Icons.star, color: AppTheme.primary), ), diff --git a/lib/theme/app_theme.dart b/lib/theme/app_theme.dart index 7b06a44..dda8e56 100644 --- a/lib/theme/app_theme.dart +++ b/lib/theme/app_theme.dart @@ -2,31 +2,26 @@ import 'package:flutter/material.dart'; import 'package:google_fonts/google_fonts.dart'; class AppTheme { - // Mapan Core Tokens (Heritage Gallery) - static const Color primary = Color(0xFFE1251B); - static const Color primaryContainer = Color(0xFFBB0004); - static const Color secondary = Color(0xFFCA8342); - static const Color secondaryContainer = Color(0xFFFFBF3C); - static const Color onSecondaryContainer = Color(0xFFEADFD2); + // Editorial Organicism Tokens + static const Color primary = Color(0xFFFFEF00); + static const Color primaryContainer = Color(0xFFFFEF00); + static const Color secondary = Color(0xFF705900); + static const Color secondaryContainer = Color(0xFFFACD34); + static const Color onPrimaryContainer = Color(0xFF5F5800); + static const Color onSecondaryContainer = Color(0xFF584500); // Surface Hierarchy - static const Color surface = Color(0xFFFFF8F3); - static const Color surfaceContainer = Color(0xFFF7ECDF); - static const Color surfaceContainerLow = Color(0xFFFDF2E5); + static const Color surface = Color(0xFFF7F7F4); + static const Color surfaceContainer = Color(0xFFE8E8E5); + static const Color surfaceContainerLow = Color(0xFFF0F1EE); static const Color surfaceContainerLowest = Colors.white; - static const Color surfaceContainerHighest = Color(0xFFECE1D4); + static const Color surfaceContainerHighest = Color(0xFFDCDDDA); // Text & On-Colors - static const Color onSurface = Color(0xFF201B13); - static const Color onSurfaceVariant = Color(0xFF5D3F3B); - static const Color onPrimary = Colors.white; - - /// The Signature 135-degree CTA Gradient for main buttons. - static const LinearGradient primaryGradient = LinearGradient( - colors: [primary, primaryContainer], - begin: Alignment.topLeft, - end: Alignment.bottomRight, // Approximation of 135 degrees - ); + static const Color onSurface = Color(0xFF2D2F2D); + static const Color onSurfaceVariant = Color(0xFF5A5C5A); + static const Color onPrimary = Color(0xFFFFF59B); + static const Color outlineVariant = Color(0xFFACADAB); static ThemeData get lightTheme { final baseTheme = ThemeData.light(); @@ -44,86 +39,92 @@ class AppTheme { onSurface: onSurface, onSurfaceVariant: onSurfaceVariant, onPrimary: onPrimary, - error: Color(0xFFBA1A1A), + error: Color(0xFFB02500), ), textTheme: baseTheme.textTheme.copyWith( - displayLarge: GoogleFonts.plusJakartaSans( + displayLarge: GoogleFonts.epilogue( color: onSurface, fontWeight: FontWeight.bold, - letterSpacing: -0.5, + letterSpacing: -0.02, ), - displayMedium: GoogleFonts.plusJakartaSans( + displayMedium: GoogleFonts.epilogue( + color: onSurface, + fontWeight: FontWeight.bold, + letterSpacing: -0.02, + ), + displaySmall: GoogleFonts.epilogue( + color: onSurface, + fontWeight: FontWeight.bold, + letterSpacing: -0.02, + ), + headlineMedium: GoogleFonts.epilogue( + color: onSurface, + fontWeight: FontWeight.bold, + letterSpacing: -0.02, + ), + titleLarge: GoogleFonts.epilogue( color: onSurface, fontWeight: FontWeight.bold, ), - displaySmall: GoogleFonts.plusJakartaSans( + titleMedium: GoogleFonts.epilogue( color: onSurface, fontWeight: FontWeight.bold, ), - headlineMedium: GoogleFonts.plusJakartaSans( - color: onSurface, - fontWeight: FontWeight.bold, - ), - titleLarge: GoogleFonts.plusJakartaSans( + titleSmall: GoogleFonts.epilogue( color: onSurface, fontWeight: FontWeight.w600, ), - titleMedium: GoogleFonts.plusJakartaSans( - color: onSurface, - fontWeight: FontWeight.w600, - ), - titleSmall: GoogleFonts.plusJakartaSans( - color: onSurface, - fontWeight: FontWeight.w500, - ), - bodyLarge: GoogleFonts.plusJakartaSans(color: onSurfaceVariant), - bodyMedium: GoogleFonts.plusJakartaSans(color: onSurfaceVariant), - bodySmall: GoogleFonts.plusJakartaSans(color: onSurfaceVariant), - labelLarge: GoogleFonts.plusJakartaSans(color: onSurfaceVariant), + bodyLarge: GoogleFonts.manrope(color: onSurface), + bodyMedium: GoogleFonts.manrope(color: onSurfaceVariant), + bodySmall: GoogleFonts.manrope(color: onSurfaceVariant), + labelLarge: GoogleFonts.manrope(color: onSurfaceVariant), ), elevatedButtonTheme: ElevatedButtonThemeData( style: ElevatedButton.styleFrom( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(12), + shape: const RoundedRectangleBorder( + borderRadius: BorderRadius.zero, ), - foregroundColor: onPrimary, - backgroundColor: primaryContainer, // Fallback if no gradient is used + foregroundColor: onPrimaryContainer, + backgroundColor: primaryContainer, elevation: 0, + side: const BorderSide(color: Colors.red, width: 2), ), ), - cardTheme: CardThemeData( + cardTheme: const CardThemeData( color: surfaceContainerLow, - elevation: 0, // Depth created via tonal shifts - shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)), + elevation: 0, + shape: RoundedRectangleBorder(borderRadius: BorderRadius.zero), margin: EdgeInsets.zero, ), inputDecorationTheme: InputDecorationTheme( filled: true, - fillColor: surfaceContainerLowest, // Spec: soft filled background + fillColor: surfaceContainer, // Spec: surfaceContainer with 0px radius contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16), - border: const UnderlineInputBorder( - borderSide: BorderSide.none, // Minimum/No outline by default - borderRadius: BorderRadius.only(topLeft: Radius.circular(8), topRight: Radius.circular(8)), + border: const OutlineInputBorder( + borderSide: BorderSide.none, + borderRadius: BorderRadius.zero, ), - enabledBorder: const UnderlineInputBorder( + enabledBorder: const OutlineInputBorder( borderSide: BorderSide.none, - borderRadius: BorderRadius.only(topLeft: Radius.circular(8), topRight: Radius.circular(8)), + borderRadius: BorderRadius.zero, ), - focusedBorder: UnderlineInputBorder( + focusedBorder: OutlineInputBorder( borderSide: BorderSide(color: primary.withOpacity(0.5), width: 2), - borderRadius: const BorderRadius.only(topLeft: Radius.circular(8), topRight: Radius.circular(8)), + borderRadius: BorderRadius.zero, ), labelStyle: const TextStyle(color: onSurfaceVariant), + hintStyle: GoogleFonts.manrope(color: onSurfaceVariant), ), appBarTheme: AppBarTheme( backgroundColor: surface, foregroundColor: onSurface, elevation: 0, surfaceTintColor: Colors.transparent, - titleTextStyle: GoogleFonts.plusJakartaSans( + titleTextStyle: GoogleFonts.epilogue( color: onSurface, fontSize: 20, fontWeight: FontWeight.bold, + letterSpacing: -0.02, ), ), );