Created App Surfaces for Theming

This commit is contained in:
2026-02-17 07:27:42 +08:00
parent e7c6f0d3b0
commit 7fb465f6c9
17 changed files with 336 additions and 22 deletions
+2
View File
@@ -7,6 +7,7 @@ import '../../providers/profile_provider.dart';
import '../../providers/tickets_provider.dart';
import '../../widgets/mono_text.dart';
import '../../widgets/responsive_body.dart';
import '../../theme/app_surfaces.dart';
import '../../widgets/tasq_adaptive_list.dart';
class OfficesScreen extends ConsumerStatefulWidget {
@@ -177,6 +178,7 @@ class _OfficesScreenState extends ConsumerState<OfficesScreen> {
context: context,
builder: (dialogContext) {
return AlertDialog(
shape: AppSurfaces.of(context).dialogShape,
title: Text(office == null ? 'Create Office' : 'Edit Office'),
content: TextField(
controller: nameController,
@@ -8,6 +8,7 @@ import '../../models/user_office.dart';
import '../../providers/admin_user_provider.dart';
import '../../providers/profile_provider.dart';
import '../../providers/tickets_provider.dart';
import '../../theme/app_surfaces.dart';
import '../../providers/user_offices_provider.dart';
import '../../utils/app_time.dart';
import '../../widgets/mono_text.dart';
@@ -241,8 +242,10 @@ class _UserManagementScreenState extends ConsumerState<UserManagementScreen> {
},
onRequestRefresh: () {
// For server-side pagination, update the query provider
ref.read(adminUserQueryProvider.notifier).state =
const AdminUserQuery(offset: 0, limit: 50);
ref.read(adminUserQueryProvider.notifier).state = const AdminUserQuery(
offset: 0,
limit: 50,
);
},
isLoading: false,
);
@@ -289,6 +292,7 @@ class _UserManagementScreenState extends ConsumerState<UserManagementScreen> {
return StatefulBuilder(
builder: (context, setDialogState) {
return AlertDialog(
shape: AppSurfaces.of(context).dialogShape,
title: const Text('Update user'),
content: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 520),
+2 -1
View File
@@ -10,6 +10,7 @@ import '../../providers/profile_provider.dart';
import '../../providers/tasks_provider.dart';
import '../../providers/tickets_provider.dart';
import '../../widgets/responsive_body.dart';
import '../../theme/app_surfaces.dart';
import '../../widgets/mono_text.dart';
import '../../widgets/status_pill.dart';
import '../../utils/app_time.dart';
@@ -497,7 +498,7 @@ class _StaffTable extends StatelessWidget {
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
borderRadius: BorderRadius.circular(16),
borderRadius: BorderRadius.circular(AppSurfaces.of(context).cardRadius),
border: Border.all(color: Theme.of(context).colorScheme.outlineVariant),
),
child: Column(
@@ -8,6 +8,7 @@ import '../../providers/tasks_provider.dart';
import '../../providers/tickets_provider.dart';
import '../../widgets/mono_text.dart';
import '../../widgets/responsive_body.dart';
import '../../theme/app_surfaces.dart';
class NotificationsScreen extends ConsumerWidget {
const NotificationsScreen({super.key});
@@ -74,7 +75,11 @@ class NotificationsScreen extends ConsumerWidget {
final title = _notificationTitle(item.type, actorName);
final icon = _notificationIcon(item.type);
// Use a slightly more compact card for dense notification lists
// — 12px radius, subtle shadow so the list remains readable.
return Card(
shape: AppSurfaces.of(context).compactShape,
shadowColor: AppSurfaces.of(context).compactShadowColor,
child: ListTile(
leading: Icon(icon),
title: Text(title),
@@ -1,5 +1,7 @@
import 'package:flutter/material.dart';
import '../theme/app_surfaces.dart';
/// Searchable multi-select dropdown with chips and 'Select All' option
class SearchableMultiSelectDropdown<T> extends StatefulWidget {
const SearchableMultiSelectDropdown({
@@ -53,6 +55,7 @@ class SearchableMultiSelectDropdownState<T>
)
.toList();
return AlertDialog(
shape: AppSurfaces.of(context).dialogShape,
title: Text('Select ${widget.label}'),
content: Column(
mainAxisSize: MainAxisSize.min,
@@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import '../../theme/app_surfaces.dart';
import '../../widgets/responsive_body.dart';
class UnderDevelopmentScreen extends StatelessWidget {
@@ -33,7 +34,9 @@ class UnderDevelopmentScreen extends StatelessWidget {
color: Theme.of(
context,
).colorScheme.primaryContainer.withValues(alpha: 0.7),
borderRadius: BorderRadius.circular(20),
borderRadius: BorderRadius.circular(
AppSurfaces.of(context).dialogRadius,
),
),
child: Icon(
icon,
+16 -5
View File
@@ -16,6 +16,7 @@ import '../../widgets/app_breakpoints.dart';
import '../../widgets/mono_text.dart';
import '../../widgets/responsive_body.dart';
import '../../widgets/status_pill.dart';
import '../../theme/app_surfaces.dart';
import '../../widgets/task_assignment_section.dart';
import '../../widgets/typing_dots.dart';
@@ -377,10 +378,18 @@ class _TaskDetailScreenState extends ConsumerState<TaskDetailScreen> {
decoration: BoxDecoration(
color: bubbleColor,
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(16),
topRight: const Radius.circular(16),
bottomLeft: Radius.circular(isMe ? 16 : 4),
bottomRight: Radius.circular(isMe ? 4 : 16),
topLeft: Radius.circular(
AppSurfaces.of(context).cardRadius,
),
topRight: Radius.circular(
AppSurfaces.of(context).cardRadius,
),
bottomLeft: Radius.circular(
isMe ? AppSurfaces.of(context).cardRadius : 4,
),
bottomRight: Radius.circular(
isMe ? 4 : AppSurfaces.of(context).cardRadius,
),
),
),
child: _buildMentionText(message.content, textColor, profiles),
@@ -695,7 +704,9 @@ class _TaskDetailScreenState extends ConsumerState<TaskDetailScreen> {
constraints: const BoxConstraints(maxHeight: 200),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surfaceContainerHighest,
borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(
AppSurfaces.of(context).compactCardRadius,
),
),
child: ListView.separated(
shrinkWrap: true,
+7 -1
View File
@@ -17,6 +17,7 @@ import '../../widgets/mono_text.dart';
import '../../widgets/responsive_body.dart';
import '../../widgets/tasq_adaptive_list.dart';
import '../../widgets/typing_dots.dart';
import '../../theme/app_surfaces.dart';
class TasksListScreen extends ConsumerStatefulWidget {
const TasksListScreen({super.key});
@@ -385,6 +386,7 @@ class _TasksListScreenState extends ConsumerState<TasksListScreen> {
builder: (context, setState) {
final officesAsync = ref.watch(officesProvider);
return AlertDialog(
shape: AppSurfaces.of(context).dialogShape,
title: const Text('Create Task'),
content: SizedBox(
width: 360,
@@ -499,7 +501,9 @@ class _TasksListScreenState extends ConsumerState<TasksListScreen> {
alignment: Alignment.center,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primaryContainer,
borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(
AppSurfaces.of(context).compactCardRadius,
),
),
child: Text(
'#$queueOrder',
@@ -691,6 +695,8 @@ class _StatusSummaryCard extends StatelessWidget {
return Card(
color: background,
// summary cards are compact — use compact token for consistent density
shape: AppSurfaces.of(context).compactShape,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
child: Column(
+3
View File
@@ -7,6 +7,7 @@ import '../../providers/teams_provider.dart';
import '../../providers/profile_provider.dart';
import 'package:supabase_flutter/supabase_flutter.dart';
import 'package:tasq/screens/searchable_multi_select_dropdown.dart';
import '../../theme/app_surfaces.dart';
import '../../widgets/tasq_adaptive_list.dart';
final officesProvider = FutureProvider<List<Office>>((ref) async {
@@ -150,6 +151,7 @@ class TeamsScreen extends ConsumerWidget {
return StatefulBuilder(
builder: (context, setState) {
return AlertDialog(
shape: AppSurfaces.of(context).dialogShape,
title: Text(isEdit ? 'Edit Team' : 'Add Team'),
content: SingleChildScrollView(
child: Column(
@@ -266,6 +268,7 @@ class TeamsScreen extends ConsumerWidget {
final confirmed = await showDialog<bool>(
context: context,
builder: (context) => AlertDialog(
shape: AppSurfaces.of(context).dialogShape,
title: const Text('Delete Team'),
content: const Text('Are you sure you want to delete this team?'),
actions: [
+24 -6
View File
@@ -19,6 +19,7 @@ import '../../widgets/responsive_body.dart';
import '../../widgets/status_pill.dart';
import '../../widgets/task_assignment_section.dart';
import '../../widgets/typing_dots.dart';
import '../../theme/app_surfaces.dart';
class TicketDetailScreen extends ConsumerStatefulWidget {
const TicketDetailScreen({super.key, required this.ticketId});
@@ -233,13 +234,25 @@ class _TicketDetailScreenState extends ConsumerState<TicketDetailScreen> {
decoration: BoxDecoration(
color: bubbleColor,
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(16),
topRight: const Radius.circular(16),
topLeft: Radius.circular(
AppSurfaces.of(context).cardRadius,
),
topRight: Radius.circular(
AppSurfaces.of(context).cardRadius,
),
bottomLeft: Radius.circular(
isMe ? 16 : 4,
isMe
? AppSurfaces.of(
context,
).cardRadius
: 4,
),
bottomRight: Radius.circular(
isMe ? 4 : 16,
isMe
? 4
: AppSurfaces.of(
context,
).cardRadius,
),
),
),
@@ -609,7 +622,9 @@ class _TicketDetailScreenState extends ConsumerState<TicketDetailScreen> {
constraints: const BoxConstraints(maxHeight: 200),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surfaceContainerHighest,
borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(
AppSurfaces.of(context).compactCardRadius,
),
),
child: ListView.separated(
shrinkWrap: true,
@@ -811,6 +826,7 @@ class _TicketDetailScreenState extends ConsumerState<TicketDetailScreen> {
context: context,
builder: (dialogContext) {
return AlertDialog(
shape: AppSurfaces.of(context).dialogShape,
title: const Text('Ticket Timeline'),
content: Column(
mainAxisSize: MainAxisSize.min,
@@ -929,7 +945,9 @@ class _MetaBadge extends StatelessWidget {
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
color: background,
borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(
AppSurfaces.of(context).compactCardRadius,
),
border: Border.all(color: border),
),
child: Row(
@@ -15,6 +15,7 @@ import '../../widgets/mono_text.dart';
import '../../widgets/responsive_body.dart';
import '../../widgets/tasq_adaptive_list.dart';
import '../../widgets/typing_dots.dart';
import '../../theme/app_surfaces.dart';
class TicketsListScreen extends ConsumerStatefulWidget {
const TicketsListScreen({super.key});
@@ -321,6 +322,7 @@ class _TicketsListScreenState extends ConsumerState<TicketsListScreen> {
return StatefulBuilder(
builder: (context, setState) {
return AlertDialog(
shape: AppSurfaces.of(context).dialogShape,
title: const Text('Create Ticket'),
content: Consumer(
builder: (context, ref, child) {
@@ -582,6 +584,8 @@ class _StatusSummaryCard extends StatelessWidget {
return Card(
color: background,
// summary cards are compact — use compact token for consistent density
shape: AppSurfaces.of(context).compactShape,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
child: Column(
+6 -1
View File
@@ -12,6 +12,7 @@ import '../../providers/profile_provider.dart';
import '../../providers/workforce_provider.dart';
import '../../utils/app_time.dart';
import '../../widgets/responsive_body.dart';
import '../../theme/app_surfaces.dart';
class WorkforceScreen extends ConsumerWidget {
const WorkforceScreen({super.key});
@@ -477,6 +478,7 @@ class _ScheduleTile extends ConsumerWidget {
context: context,
builder: (dialogContext) {
return AlertDialog(
shape: AppSurfaces.of(context).dialogShape,
title: const Text('Request swap'),
content: DropdownButtonFormField<String>(
initialValue: selectedId,
@@ -560,6 +562,7 @@ class _ScheduleTile extends ConsumerWidget {
completer.complete(dialogContext);
}
return AlertDialog(
shape: AppSurfaces.of(context).dialogShape,
title: const Text('Validating location'),
content: Row(
children: [
@@ -894,7 +897,9 @@ class _ScheduleGeneratorPanelState
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: colorScheme.tertiaryContainer,
borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(
AppSurfaces.of(context).compactCardRadius,
),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,