💄 Update the account settings to match the app settings style

This commit is contained in:
2025-12-21 23:06:12 +08:00
parent 9c1eb8e5bc
commit 2df31e4244

View File

@@ -135,8 +135,7 @@ class AccountSettingsScreen extends HookConsumerWidget {
ref ref
.watch(accountConnectionsProvider) .watch(accountConnectionsProvider)
.when( .when(
data: data: (connections) => Column(
(connections) => Column(
children: [ children: [
for (final connection in connections) for (final connection in connections)
ListTile( ListTile(
@@ -147,20 +146,17 @@ class AccountSettingsScreen extends HookConsumerWidget {
top: 2, top: 2,
bottom: 4, bottom: 4,
), ),
title: title: Text(
Text(
getLocalizedProviderName(connection.provider), getLocalizedProviderName(connection.provider),
).tr(), ).tr(),
subtitle: subtitle: connection.meta['email'] != null
connection.meta['email'] != null
? Text(connection.meta['email']) ? Text(connection.meta['email'])
: Text(connection.providedIdentifier), : Text(connection.providedIdentifier),
leading: CircleAvatar( leading: CircleAvatar(
child: getProviderIcon( child: getProviderIcon(
connection.provider, connection.provider,
size: 16, size: 16,
color: color: Theme.of(
Theme.of(
context, context,
).colorScheme.onPrimaryContainer, ).colorScheme.onPrimaryContainer,
), ),
@@ -169,10 +165,8 @@ class AccountSettingsScreen extends HookConsumerWidget {
onTap: () { onTap: () {
showModalBottomSheet( showModalBottomSheet(
context: context, context: context,
builder: builder: (context) =>
(context) => AccountConnectionSheet( AccountConnectionSheet(connection: connection),
connection: connection,
),
).then((value) { ).then((value) {
if (value == true) { if (value == true) {
ref.invalidate(accountConnectionsProvider); ref.invalidate(accountConnectionsProvider);
@@ -193,8 +187,7 @@ class AccountSettingsScreen extends HookConsumerWidget {
onTap: () { onTap: () {
showModalBottomSheet( showModalBottomSheet(
context: context, context: context,
builder: builder: (context) =>
(context) =>
const AccountConnectionNewSheet(), const AccountConnectionNewSheet(),
).then((value) { ).then((value) {
if (value == true) { if (value == true) {
@@ -205,8 +198,7 @@ class AccountSettingsScreen extends HookConsumerWidget {
), ),
], ],
), ),
error: error: (err, _) => ResponseErrorWidget(
(err, _) => ResponseErrorWidget(
error: err, error: err,
onRetry: () => ref.invalidate(accountConnectionsProvider), onRetry: () => ref.invalidate(accountConnectionsProvider),
), ),
@@ -223,8 +215,7 @@ class AccountSettingsScreen extends HookConsumerWidget {
tilePadding: const EdgeInsets.only(left: 24, right: 17), tilePadding: const EdgeInsets.only(left: 24, right: 17),
children: [ children: [
authFactors.when( authFactors.when(
data: data: (factors) => Column(
(factors) => Column(
children: [ children: [
for (final factor in factors) for (final factor in factors)
ListTile( ListTile(
@@ -235,35 +226,22 @@ class AccountSettingsScreen extends HookConsumerWidget {
top: 2, top: 2,
bottom: 4, bottom: 4,
), ),
title: title: Text(
Text(
kFactorTypes[factor.type]!.$1, kFactorTypes[factor.type]!.$1,
style: style: factor.enabledAt == null
factor.enabledAt == null ? TextStyle(decoration: TextDecoration.lineThrough)
? TextStyle(
decoration: TextDecoration.lineThrough,
)
: null, : null,
).tr(), ).tr(),
subtitle: subtitle: Text(
Text(
kFactorTypes[factor.type]!.$2, kFactorTypes[factor.type]!.$2,
style: style: factor.enabledAt == null
factor.enabledAt == null ? TextStyle(decoration: TextDecoration.lineThrough)
? TextStyle(
decoration: TextDecoration.lineThrough,
)
: null, : null,
).tr(), ).tr(),
leading: CircleAvatar( leading: CircleAvatar(
backgroundColor: backgroundColor: factor.enabledAt == null
factor.enabledAt == null ? Theme.of(context).colorScheme.secondaryContainer
? Theme.of( : Theme.of(context).colorScheme.primaryContainer,
context,
).colorScheme.secondaryContainer
: Theme.of(
context,
).colorScheme.primaryContainer,
child: Icon(kFactorTypes[factor.type]!.$3), child: Icon(kFactorTypes[factor.type]!.$3),
).padding(top: 4), ).padding(top: 4),
trailing: const Icon(Symbols.chevron_right), trailing: const Icon(Symbols.chevron_right),
@@ -275,8 +253,7 @@ class AccountSettingsScreen extends HookConsumerWidget {
} }
showModalBottomSheet( showModalBottomSheet(
context: context, context: context,
builder: builder: (context) => AuthFactorSheet(factor: factor),
(context) => AuthFactorSheet(factor: factor),
).then((value) { ).then((value) {
if (value == true) { if (value == true) {
ref.invalidate(authFactorsProvider); ref.invalidate(authFactorsProvider);
@@ -287,10 +264,7 @@ class AccountSettingsScreen extends HookConsumerWidget {
if (factors.isNotEmpty) Divider(height: 1), if (factors.isNotEmpty) Divider(height: 1),
ListTile( ListTile(
minLeadingWidth: 48, minLeadingWidth: 48,
contentPadding: const EdgeInsets.only( contentPadding: const EdgeInsets.only(left: 24, right: 17),
left: 24,
right: 17,
),
title: Text('authFactorNew').tr(), title: Text('authFactorNew').tr(),
leading: const Icon(Symbols.add), leading: const Icon(Symbols.add),
trailing: const Icon(Symbols.chevron_right), trailing: const Icon(Symbols.chevron_right),
@@ -307,8 +281,7 @@ class AccountSettingsScreen extends HookConsumerWidget {
), ),
], ],
), ),
error: error: (err, _) => ResponseErrorWidget(
(err, _) => ResponseErrorWidget(
error: err, error: err,
onRetry: () => ref.invalidate(authFactorsProvider), onRetry: () => ref.invalidate(authFactorsProvider),
), ),
@@ -327,8 +300,7 @@ class AccountSettingsScreen extends HookConsumerWidget {
ref ref
.watch(contactMethodsProvider) .watch(contactMethodsProvider)
.when( .when(
data: data: (contacts) => Column(
(contacts) => Column(
children: [ children: [
for (final contact in contacts) for (final contact in contacts)
ListTile( ListTile(
@@ -341,8 +313,7 @@ class AccountSettingsScreen extends HookConsumerWidget {
), ),
title: Text( title: Text(
contact.content, contact.content,
style: style: contact.verifiedAt == null
contact.verifiedAt == null
? TextStyle( ? TextStyle(
decoration: TextDecoration.lineThrough, decoration: TextDecoration.lineThrough,
) )
@@ -352,26 +323,18 @@ class AccountSettingsScreen extends HookConsumerWidget {
contact.type == 0 contact.type == 0
? 'contactMethodTypeEmail'.tr() ? 'contactMethodTypeEmail'.tr()
: 'contactMethodTypePhone'.tr(), : 'contactMethodTypePhone'.tr(),
style: style: contact.verifiedAt == null
contact.verifiedAt == null
? TextStyle( ? TextStyle(
decoration: TextDecoration.lineThrough, decoration: TextDecoration.lineThrough,
) )
: null, : null,
), ),
leading: CircleAvatar( leading: CircleAvatar(
backgroundColor: backgroundColor: contact.verifiedAt == null
contact.verifiedAt == null ? Theme.of(context).colorScheme.secondaryContainer
? Theme.of( : Theme.of(context).colorScheme.primaryContainer,
context,
).colorScheme.secondaryContainer
: Theme.of(
context,
).colorScheme.primaryContainer,
child: Icon( child: Icon(
contact.type == 0 contact.type == 0 ? Symbols.mail : Symbols.phone,
? Symbols.mail
: Symbols.phone,
), ),
).padding(top: 4), ).padding(top: 4),
trailing: const Icon(Symbols.chevron_right), trailing: const Icon(Symbols.chevron_right),
@@ -379,8 +342,7 @@ class AccountSettingsScreen extends HookConsumerWidget {
onTap: () { onTap: () {
showModalBottomSheet( showModalBottomSheet(
context: context, context: context,
builder: builder: (context) =>
(context) =>
ContactMethodSheet(contact: contact), ContactMethodSheet(contact: contact),
).then((value) { ).then((value) {
if (value == true) { if (value == true) {
@@ -402,8 +364,7 @@ class AccountSettingsScreen extends HookConsumerWidget {
onTap: () { onTap: () {
showModalBottomSheet( showModalBottomSheet(
context: context, context: context,
builder: builder: (context) => const ContactMethodNewSheet(),
(context) => const ContactMethodNewSheet(),
).then((value) { ).then((value) {
if (value == true) { if (value == true) {
ref.invalidate(contactMethodsProvider); ref.invalidate(contactMethodsProvider);
@@ -413,8 +374,7 @@ class AccountSettingsScreen extends HookConsumerWidget {
), ),
], ],
), ),
error: error: (err, _) => ResponseErrorWidget(
(err, _) => ResponseErrorWidget(
error: err, error: err,
onRetry: () => ref.invalidate(contactMethodsProvider), onRetry: () => ref.invalidate(contactMethodsProvider),
), ),
@@ -439,6 +399,7 @@ class AccountSettingsScreen extends HookConsumerWidget {
// Create a responsive layout based on screen width // Create a responsive layout based on screen width
Widget buildSettingsList() { Widget buildSettingsList() {
return Column( return Column(
spacing: 16,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
_SettingsSection( _SettingsSection(
@@ -450,14 +411,13 @@ class AccountSettingsScreen extends HookConsumerWidget {
children: dangerZoneSettings, children: dangerZoneSettings,
), ),
], ],
); ).padding(horizontal: 16);
} }
return AppScaffold( return AppScaffold(
appBar: AppBar( appBar: AppBar(
title: Text('accountSettings').tr(), title: Text('accountSettings').tr(),
actions: actions: isDesktop
isDesktop
? [ ? [
IconButton( IconButton(
icon: const Icon(Symbols.help_outline), icon: const Icon(Symbols.help_outline),
@@ -465,8 +425,7 @@ class AccountSettingsScreen extends HookConsumerWidget {
// Show help dialog // Show help dialog
showDialog( showDialog(
context: context, context: context,
builder: builder: (context) => AlertDialog(
(context) => AlertDialog(
title: Text('accountSettingsHelp').tr(), title: Text('accountSettingsHelp').tr(),
content: Text('accountSettingsHelpContent').tr(), content: Text('accountSettingsHelpContent').tr(),
actions: [ actions: [
@@ -513,7 +472,9 @@ class _SettingsSection extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Column( return Card(
margin: EdgeInsets.zero,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Padding( Padding(
@@ -529,6 +490,7 @@ class _SettingsSection extends StatelessWidget {
...children, ...children,
const SizedBox(height: 16), const SizedBox(height: 16),
], ],
),
); );
} }
} }