admin.suherdy/odoo_loyalty_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update design system to Editorial Organicism theme with zero-radius components and new typography

Browse Source
This commit is contained in:
Suherdy Yacob 2026-04-03 16:54:05 +07:00
parent 8431a8dc13
commit b0b75de3b6
5 changed files with 108 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
lib/screens/branches_screen.dart
View File

@ -83,9 +83,9 @@ class _BranchesScreenState extends State<BranchesScreen> {
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<BranchesScreen> {
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<BranchesScreen> {
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<BranchesScreen> {
),
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',
)

66
lib/screens/login_screen.dart
View File

@ -85,17 +85,18 @@ class _LoginScreenState extends State<LoginScreen> {
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<LoginScreen> {
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,
),
),
),
),
),

12
lib/screens/loyalty_dashboard.dart
View File

@ -44,11 +44,11 @@ class _LoyaltyDashboardState extends State<LoyaltyDashboard> {
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<LoyaltyDashboard> {
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<LoyaltyDashboard> {
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',

13
lib/screens/notifications_screen.dart
View File

@ -64,16 +64,9 @@ class _NotificationsScreenState extends State<NotificationsScreen> {
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<NotificationsScreen> {
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),
),

119
lib/theme/app_theme.dart
View File

@ -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)),
),
enabledBorder: const UnderlineInputBorder(
border: const OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.only(topLeft: Radius.circular(8), topRight: Radius.circular(8)),
borderRadius: BorderRadius.zero,
),
focusedBorder: UnderlineInputBorder(
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.zero,
),
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,
),
),
);