chore: mobile font tuning (#25349)

* chore: mobile font tuning

* chore: fix some paddings

* setting page tune

* chore: album sort dropdown button styling

* pr feedback

* tweak sync status card

* chore: refactor

mobile/lib/widgets/settings/networking_settings/endpoint_input.dart

@@ -117,7 +117,7 @@ class EndpointInputState extends ConsumerState<EndpointInput> {
           autovalidateMode: AutovalidateMode.onUserInteraction,
           validator: validateUrl,
           keyboardType: TextInputType.url,
-          style: const TextStyle(fontFamily: 'GoogleSansCode', fontWeight: FontWeight.w600, fontSize: 14),
+          style: const TextStyle(fontFamily: 'GoogleSansCode', fontSize: 14),
           decoration: InputDecoration(
             hintText: 'http(s)://immich.domain.com',
             contentPadding: const EdgeInsets.all(16),

mobile/lib/widgets/settings/networking_settings/external_network_preference.dart

@@ -1,12 +1,12 @@
 import 'dart:convert';
 
-import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart' hide Store;
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/models/auth/auxilary_endpoint.model.dart';
 import 'package:immich_mobile/widgets/settings/networking_settings/endpoint_input.dart';
 
@@ -103,7 +103,7 @@ class ExternalNetworkPreference extends HookConsumerWidget {
               children: [
                 Padding(
                   padding: const EdgeInsets.symmetric(vertical: 4.0, horizontal: 24),
-                  child: Text("external_network_sheet_info".tr(), style: context.textTheme.bodyMedium),
+                  child: Text("external_network_sheet_info".t(context: context), style: context.textTheme.bodyMedium),
                 ),
                 const SizedBox(height: 4),
                 Divider(color: context.colorScheme.surfaceContainerHighest),
@@ -135,7 +135,7 @@ class ExternalNetworkPreference extends HookConsumerWidget {
                     height: 48,
                     child: OutlinedButton.icon(
                       icon: const Icon(Icons.add),
-                      label: Text('add_endpoint'.tr().toUpperCase()),
+                      label: Text('add_endpoint'.t(context: context)),
                       onPressed: enabled
                           ? () {
                               entries.value = [

mobile/lib/widgets/settings/networking_settings/local_network_preference.dart

@@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/providers/auth.provider.dart';
 import 'package:immich_mobile/providers/network.provider.dart';
 
@@ -167,13 +168,12 @@ class LocalNetworkPreference extends HookConsumerWidget {
                       enabled: enabled,
                       contentPadding: const EdgeInsets.only(left: 24, right: 8),
                       leading: const Icon(Icons.lan_rounded),
-                      title: Text("server_endpoint".tr()),
+                      title: Text("server_endpoint".t(context: context)),
                       subtitle: localEndpointText.value.isEmpty
                           ? const Text("http://local-ip:2283")
                           : Text(
                               localEndpointText.value,
                               style: context.textTheme.labelLarge?.copyWith(
-                                fontWeight: FontWeight.bold,
                                 color: enabled ? context.primaryColor : context.colorScheme.onSurface.withAlpha(100),
                                 fontFamily: 'GoogleSansCode',
                               ),
@@ -190,7 +190,7 @@ class LocalNetworkPreference extends HookConsumerWidget {
                         height: 48,
                         child: OutlinedButton.icon(
                           icon: const Icon(Icons.wifi_find_rounded),
-                          label: Text('use_current_connection'.tr().toUpperCase()),
+                          label: Text('use_current_connection'.t(context: context)),
                           onPressed: enabled ? autofillCurrentNetwork : null,
                         ),
                       ),

mobile/lib/widgets/settings/networking_settings/networking_settings.dart

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart' hide Store;
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/models/auth/auxilary_endpoint.model.dart';
 import 'package:immich_mobile/providers/network.provider.dart';
 import 'package:immich_mobile/services/app_settings.service.dart';
@@ -10,6 +11,7 @@ import 'package:immich_mobile/utils/hooks/app_settings_update_hook.dart';
 import 'package:immich_mobile/utils/url_helper.dart';
 import 'package:immich_mobile/widgets/settings/networking_settings/external_network_preference.dart';
 import 'package:immich_mobile/widgets/settings/networking_settings/local_network_preference.dart';
+import 'package:immich_mobile/widgets/settings/setting_group_title.dart';
 import 'package:immich_mobile/widgets/settings/settings_switch_list_tile.dart';
 
 class NetworkingSettings extends HookConsumerWidget {
@@ -87,12 +89,10 @@ class NetworkingSettings extends HookConsumerWidget {
     return ListView(
       padding: const EdgeInsets.only(bottom: 96),
       children: <Widget>[
-        Padding(
-          padding: const EdgeInsets.only(top: 8, left: 16, bottom: 8),
-          child: NetworkPreferenceTitle(
-            title: "current_server_address".tr().toUpperCase(),
-            icon: (currentEndpoint?.startsWith('https') ?? false) ? Icons.https_outlined : Icons.http_outlined,
-          ),
+        const SizedBox(height: 8),
+        SettingGroupTitle(
+          title: "current_server_address".t(context: context),
+          icon: (currentEndpoint?.startsWith('https') ?? false) ? Icons.https_outlined : Icons.http_outlined,
         ),
         Padding(
           padding: const EdgeInsets.symmetric(horizontal: 8),
@@ -108,12 +108,7 @@ class NetworkingSettings extends HookConsumerWidget {
                   : const Icon(Icons.circle_outlined),
               title: Text(
                 currentEndpoint ?? "--",
-                style: TextStyle(
-                  fontSize: 16,
-                  fontFamily: 'GoogleSansCode',
-                  fontWeight: FontWeight.bold,
-                  color: context.primaryColor,
-                ),
+                style: TextStyle(fontSize: 14, fontFamily: 'GoogleSansCode', color: context.primaryColor),
               ),
             ),
           ),
@@ -128,14 +123,16 @@ class NetworkingSettings extends HookConsumerWidget {
           title: "automatic_endpoint_switching_title".tr(),
           subtitle: "automatic_endpoint_switching_subtitle".tr(),
         ),
-        Padding(
-          padding: const EdgeInsets.only(top: 8, left: 16, bottom: 16),
-          child: NetworkPreferenceTitle(title: "local_network".tr().toUpperCase(), icon: Icons.home_outlined),
+        const SizedBox(height: 8),
+        SettingGroupTitle(
+          title: "local_network".t(context: context),
+          icon: Icons.home_outlined,
         ),
         LocalNetworkPreference(enabled: featureEnabled.value),
-        Padding(
-          padding: const EdgeInsets.only(top: 32, left: 16, bottom: 16),
-          child: NetworkPreferenceTitle(title: "external_network".tr().toUpperCase(), icon: Icons.dns_outlined),
+        const SizedBox(height: 16),
+        SettingGroupTitle(
+          title: "external_network".t(context: context),
+          icon: Icons.dns_outlined,
         ),
         ExternalNetworkPreference(enabled: featureEnabled.value),
       ],
@@ -143,30 +140,6 @@ class NetworkingSettings extends HookConsumerWidget {
   }
 }
 
-class NetworkPreferenceTitle extends StatelessWidget {
-  const NetworkPreferenceTitle({super.key, required this.icon, required this.title});
-
-  final IconData icon;
-  final String title;
-
-  @override
-  Widget build(BuildContext context) {
-    return Row(
-      children: [
-        Icon(icon, color: context.colorScheme.onSurface.withAlpha(150)),
-        const SizedBox(width: 8),
-        Text(
-          title,
-          style: context.textTheme.displaySmall?.copyWith(
-            color: context.colorScheme.onSurface.withAlpha(200),
-            fontWeight: FontWeight.w500,
-          ),
-        ),
-      ],
-    );
-  }
-}
-
 class NetworkStatusIcon extends StatelessWidget {
   const NetworkStatusIcon({super.key, required this.status, this.enabled = true}) : super();
 
@@ -175,10 +148,10 @@ class NetworkStatusIcon extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return AnimatedSwitcher(duration: const Duration(milliseconds: 200), child: _buildIcon(context));
+    return AnimatedSwitcher(duration: const Duration(milliseconds: 200), child: buildIcon(context));
   }
 
-  Widget _buildIcon(BuildContext context) => switch (status) {
+  Widget buildIcon(BuildContext context) => switch (status) {
     AuxCheckStatus.loading => Padding(
       padding: const EdgeInsets.only(left: 4.0),
       child: SizedBox(