chore(mobile): Mobile make over (#5129)

* chore: added overpass font

* Setting page

* style: app bar dialog

* style: backup controller and album selection page

* style: asset grid

* blanket fix

* blanket fix

* remove description input for local only asset

* revert

* merge main

* style: search page

* sharing page

* text size in sharing page

* style: library page

* library page

* album page + album creation page

* Navigationbar

* style: minor

* update

* album bottom sheet

* album option page

* minor style fix

* remove unused fonts

* remove fonts in pubspec

mobile/assets/i18n/en-US.json

@@ -224,7 +224,7 @@
   "login_password_changed_success": "Password updated successfully",
   "map_assets_in_bounds": {
     "one": "{} photo",
-    "many": "{} photos"
+    "other": "{} photos"
   },
   "map_cannot_get_user_location": "Cannot get user's location",
   "map_location_dialog_cancel": "Cancel",
@@ -396,7 +396,7 @@
   "sharing_page_album": "Shared albums",
   "sharing_page_description": "Create shared albums to share photos and videos with people in your network.",
   "sharing_page_empty_list": "EMPTY LIST",
-  "sharing_silver_appbar_create_shared_album": "Create shared album",
+  "sharing_silver_appbar_create_shared_album": "New shared album",
   "sharing_silver_appbar_shared_links": "Shared links",
   "sharing_silver_appbar_share_partner": "Share with partner",
   "tab_controller_nav_library": "Library",

mobile/lib/modules/album/ui/album_action_outlined_button.dart

@@ -16,7 +16,7 @@ class AlbumActionOutlinedButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Padding(
-      padding: const EdgeInsets.only(right: 8.0),
+      padding: const EdgeInsets.only(right: 16.0),
       child: OutlinedButton.icon(
         style: OutlinedButton.styleFrom(
           padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 10),
@@ -32,13 +32,13 @@ class AlbumActionOutlinedButton extends StatelessWidget {
         ),
         icon: Icon(
           iconData,
-          size: 15,
+          size: 18,
           color: context.primaryColor,
         ),
         label: Text(
           labelText,
-          style: context.textTheme.labelSmall?.copyWith(
-            fontWeight: FontWeight.bold,
+          style: context.textTheme.labelMedium?.copyWith(
+            fontWeight: FontWeight.w600,
           ),
         ),
         onPressed: onPressed,

mobile/lib/modules/album/ui/album_thumbnail_card.dart

@@ -72,17 +72,13 @@ class AlbumThumbnailCard extends StatelessWidget {
                           .tr(args: ['${album.assetCount}'])
                       : 'album_thumbnail_card_items'
                           .tr(args: ['${album.assetCount}']),
-                  style: TextStyle(
-                    fontFamily: 'WorkSans',
-                    fontSize: 12,
-                    color: isDarkTheme ? Colors.white : Colors.black,
-                  ),
+                  style: context.textTheme.bodyMedium,
                 ),
                 if (owner != null) const TextSpan(text: ' · '),
                 if (owner != null)
                   TextSpan(
                     text: owner,
-                    style: context.textTheme.labelSmall,
+                    style: context.textTheme.bodyMedium,
                   ),
               ],
             ),
@@ -114,11 +110,9 @@ class AlbumThumbnailCard extends StatelessWidget {
                         width: cardSize,
                         child: Text(
                           album.name,
-                          style: TextStyle(
-                            fontWeight: FontWeight.bold,
-                            color: isDarkTheme
-                                ? context.primaryColor
-                                : Colors.black,
+                          style: context.textTheme.bodyMedium?.copyWith(
+                            color: context.primaryColor,
+                            fontWeight: FontWeight.w500,
                           ),
                         ),
                       ),

mobile/lib/modules/album/ui/album_viewer_appbar.dart

@@ -210,7 +210,7 @@ class AlbumViewerAppbar extends HookConsumerWidget
             leading: const Icon(Icons.ios_share_rounded),
             title: const Text(
               'album_viewer_appbar_share_to',
-              style: TextStyle(fontWeight: FontWeight.bold),
+              style: TextStyle(fontWeight: FontWeight.w500),
             ).tr(),
             onTap: () => onShareAssetsTo(),
           ),
@@ -219,7 +219,7 @@ class AlbumViewerAppbar extends HookConsumerWidget
                   leading: const Icon(Icons.delete_sweep_rounded),
                   title: const Text(
                     'album_viewer_appbar_share_remove',
-                    style: TextStyle(fontWeight: FontWeight.bold),
+                    style: TextStyle(fontWeight: FontWeight.w500),
                   ).tr(),
                   onTap: () => onRemoveFromAlbumPressed(),
                 )
@@ -232,7 +232,7 @@ class AlbumViewerAppbar extends HookConsumerWidget
                   leading: const Icon(Icons.delete_forever_rounded),
                   title: const Text(
                     'album_viewer_appbar_share_delete',
-                    style: TextStyle(fontWeight: FontWeight.bold),
+                    style: TextStyle(fontWeight: FontWeight.w500),
                   ).tr(),
                   onTap: () => onDeleteAlbumPressed(),
                 )
@@ -240,7 +240,7 @@ class AlbumViewerAppbar extends HookConsumerWidget
                   leading: const Icon(Icons.person_remove_rounded),
                   title: const Text(
                     'album_viewer_appbar_share_leave',
-                    style: TextStyle(fontWeight: FontWeight.bold),
+                    style: TextStyle(fontWeight: FontWeight.w500),
                   ).tr(),
                   onTap: () => onLeaveAlbumPressed(),
                 ),
@@ -258,7 +258,7 @@ class AlbumViewerAppbar extends HookConsumerWidget
           },
           title: const Text(
             "album_viewer_page_share_add_users",
-            style: TextStyle(fontWeight: FontWeight.bold),
+            style: TextStyle(fontWeight: FontWeight.w500),
           ).tr(),
         ),
         ListTile(
@@ -269,7 +269,7 @@ class AlbumViewerAppbar extends HookConsumerWidget
           },
           title: const Text(
             "control_bottom_app_bar_share",
-            style: TextStyle(fontWeight: FontWeight.bold),
+            style: TextStyle(fontWeight: FontWeight.w500),
           ).tr(),
         ),
         ListTile(
@@ -277,7 +277,7 @@ class AlbumViewerAppbar extends HookConsumerWidget
           onTap: () => context.autoNavigate(AlbumOptionsRoute(album: album)),
           title: const Text(
             "translated_text_options",
-            style: TextStyle(fontWeight: FontWeight.bold),
+            style: TextStyle(fontWeight: FontWeight.w500),
           ).tr(),
         ),
       ];
@@ -291,7 +291,7 @@ class AlbumViewerAppbar extends HookConsumerWidget
           },
           title: const Text(
             "share_add_photos",
-            style: TextStyle(fontWeight: FontWeight.bold),
+            style: TextStyle(fontWeight: FontWeight.w500),
           ).tr(),
         ),
       ];

mobile/lib/modules/album/ui/album_viewer_editable_title.dart

@@ -44,7 +44,7 @@ class AlbumViewerEditableTitle extends HookConsumerWidget {
         }
       },
       focusNode: titleFocusNode,
-      style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
+      style: context.textTheme.headlineMedium,
       controller: titleTextEditController,
       onTap: () {
         FocusScope.of(context).requestFocus(titleFocusNode);

mobile/lib/modules/album/views/album_options_part.dart

@@ -91,7 +91,8 @@ class AlbumOptionsPage extends HookConsumerWidget {
         actions = [
           ListTile(
             leading: const Icon(Icons.person_remove_rounded),
-            title: const Text("shared_album_section_people_remove_user").tr(),
+            title: const Text("shared_album_section_people_action_remove_user")
+                .tr(),
             onTap: () => removeUserFromAlbum(user),
           ),
         ];
@@ -122,18 +123,16 @@ class AlbumOptionsPage extends HookConsumerWidget {
         title: Text(
           album.owner.value?.name ?? "",
           style: const TextStyle(
-            fontWeight: FontWeight.bold,
+            fontWeight: FontWeight.w500,
           ),
         ),
         subtitle: Text(
           album.owner.value?.email ?? "",
-          style: TextStyle(color: Colors.grey[500]),
+          style: TextStyle(color: Colors.grey[600]),
         ),
-        trailing: const Text(
+        trailing: Text(
           "shared_album_section_people_owner_label",
-          style: TextStyle(
-            fontWeight: FontWeight.bold,
-          ),
+          style: context.textTheme.labelLarge,
         ).tr(),
       );
     }
@@ -152,12 +151,12 @@ class AlbumOptionsPage extends HookConsumerWidget {
             title: Text(
               user.name,
               style: const TextStyle(
-                fontWeight: FontWeight.bold,
+                fontWeight: FontWeight.w500,
               ),
             ),
             subtitle: Text(
               user.email,
-              style: TextStyle(color: Colors.grey[500]),
+              style: TextStyle(color: Colors.grey[600]),
             ),
             trailing: userId == user.id || isOwner
                 ? const Icon(Icons.more_horiz_rounded)
@@ -209,11 +208,15 @@ class AlbumOptionsPage extends HookConsumerWidget {
               dense: true,
               title: Text(
                 "shared_album_activity_setting_title",
-                style: context.textTheme.labelLarge
-                    ?.copyWith(fontWeight: FontWeight.bold),
+                style: context.textTheme.titleMedium
+                    ?.copyWith(fontWeight: FontWeight.w500),
+              ).tr(),
+              subtitle: Text(
+                "shared_album_activity_setting_subtitle",
+                style: context.textTheme.labelLarge?.copyWith(
+                  color: context.textTheme.labelLarge?.color?.withAlpha(175),
+                ),
               ).tr(),
-              subtitle:
-                  const Text("shared_album_activity_setting_subtitle").tr(),
             ),
           buildSectionTitle("shared_album_section_people_title".tr()),
           buildOwnerInfo(),

mobile/lib/modules/album/views/album_viewer_page.dart

@@ -153,10 +153,7 @@ class AlbumViewerPage extends HookConsumerWidget {
                 padding: const EdgeInsets.only(left: 8.0),
                 child: Text(
                   album.name,
-                  style: const TextStyle(
-                    fontSize: 24,
-                    fontWeight: FontWeight.bold,
-                  ),
+                  style: context.textTheme.headlineMedium,
                 ),
               ),
       );
@@ -191,10 +188,7 @@ class AlbumViewerPage extends HookConsumerWidget {
         ),
         child: Text(
           dateRangeText,
-          style: const TextStyle(
-            fontSize: 14,
-            fontWeight: FontWeight.bold,
-          ),
+          style: context.textTheme.labelLarge,
         ),
       );
     }

mobile/lib/modules/album/views/create_album_page.dart

@@ -94,10 +94,7 @@ class CreateAlbumPage extends HookConsumerWidget {
             padding: const EdgeInsets.only(top: 200, left: 18),
             child: Text(
               'create_shared_album_page_share_add_assets',
-              style: context.textTheme.displayMedium?.copyWith(
-                fontSize: 12,
-                fontWeight: FontWeight.normal,
-              ),
+              style: context.textTheme.labelLarge,
             ).tr(),
           ),
         );
@@ -119,7 +116,7 @@ class CreateAlbumPage extends HookConsumerWidget {
                 side: BorderSide(
                   color: context.isDarkTheme
                       ? const Color.fromARGB(255, 63, 63, 63)
-                      : const Color.fromARGB(255, 206, 206, 206),
+                      : const Color.fromARGB(255, 129, 129, 129),
                 ),
                 shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(5),
@@ -134,9 +131,8 @@ class CreateAlbumPage extends HookConsumerWidget {
                 padding: const EdgeInsets.only(left: 8.0),
                 child: Text(
                   'create_shared_album_page_share_select_photos',
-                  style: context.textTheme.labelLarge?.copyWith(
-                    fontSize: 16,
-                    fontWeight: FontWeight.bold,
+                  style: context.textTheme.titleMedium?.copyWith(
+                    color: context.primaryColor,
                   ),
                 ).tr(),
               ),
@@ -222,11 +218,8 @@ class CreateAlbumPage extends HookConsumerWidget {
           },
           icon: const Icon(Icons.close_rounded),
         ),
-        title: Text(
+        title: const Text(
           'share_create_album',
-          style: context.textTheme.displayMedium?.copyWith(
-            color: context.primaryColor,
-          ),
         ).tr(),
         actions: [
           if (isSharedAlbum)

mobile/lib/modules/album/views/library_page.dart

@@ -125,10 +125,8 @@ class LibraryPage extends HookConsumerWidget {
             ),
             Text(
               options[selectedAlbumSortOrder.value],
-              style: TextStyle(
-                fontWeight: FontWeight.bold,
+              style: context.textTheme.labelLarge?.copyWith(
                 color: context.primaryColor,
-                fontSize: 12.0,
               ),
             ),
           ],
@@ -172,11 +170,9 @@ class LibraryPage extends HookConsumerWidget {
                   top: 8.0,
                   bottom: 16,
                 ),
-                child: const Text(
+                child: Text(
                   'library_page_new_album',
-                  style: TextStyle(
-                    fontWeight: FontWeight.bold,
-                  ),
+                  style: context.textTheme.labelLarge,
                 ).tr(),
               ),
             ],
@@ -198,9 +194,9 @@ class LibraryPage extends HookConsumerWidget {
             child: Text(
               label,
               style: TextStyle(
-                fontWeight: FontWeight.bold,
-                fontSize: 13.0,
-                color: isDarkTheme ? Colors.white : Colors.grey[800],
+                color: context.isDarkTheme
+                    ? Colors.white
+                    : Colors.black.withAlpha(200),
               ),
             ),
           ),
@@ -278,9 +274,11 @@ class LibraryPage extends HookConsumerWidget {
               child: Row(
                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
                 children: [
-                  const Text(
+                  Text(
                     'library_page_albums',
-                    style: TextStyle(fontWeight: FontWeight.bold),
+                    style: context.textTheme.bodyLarge?.copyWith(
+                      fontWeight: FontWeight.w500,
+                    ),
                   ).tr(),
                   buildSortButton(),
                 ],
@@ -326,9 +324,11 @@ class LibraryPage extends HookConsumerWidget {
               child: Row(
                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
                 children: [
-                  const Text(
+                  Text(
                     'library_page_device_albums',
-                    style: TextStyle(fontWeight: FontWeight.bold),
+                    style: context.textTheme.bodyLarge?.copyWith(
+                      fontWeight: FontWeight.w500,
+                    ),
                   ).tr(),
                 ],
               ),

mobile/lib/modules/album/views/sharing_page.dart

@@ -80,25 +80,20 @@ class SharingPage extends HookConsumerWidget {
                 maxLines: 1,
                 overflow: TextOverflow.ellipsis,
                 style: context.textTheme.bodyMedium?.copyWith(
-                  fontWeight: FontWeight.bold,
-                  color:
-                      context.isDarkTheme ? context.primaryColor : Colors.black,
+                  color: context.primaryColor,
+                  fontWeight: FontWeight.w500,
                 ),
               ),
               subtitle: isOwner
                   ? Text(
                       'album_thumbnail_owned'.tr(),
-                      style: const TextStyle(
-                        fontSize: 12.0,
-                      ),
+                      style: context.textTheme.bodyMedium,
                     )
                   : album.ownerName != null
                       ? Text(
                           'album_thumbnail_shared_by'
                               .tr(args: [album.ownerName!]),
-                          style: const TextStyle(
-                            fontSize: 12.0,
-                          ),
+                          style: context.textTheme.bodyMedium,
                         )
                       : null,
               onTap: () {
@@ -137,8 +132,8 @@ class SharingPage extends HookConsumerWidget {
                   "sharing_silver_appbar_create_shared_album",
                   maxLines: 1,
                   style: TextStyle(
-                    fontWeight: FontWeight.bold,
-                    fontSize: 11,
+                    fontWeight: FontWeight.w500,
+                    fontSize: 12,
                   ),
                 ).tr(),
               ),
@@ -154,8 +149,8 @@ class SharingPage extends HookConsumerWidget {
                 label: const Text(
                   "sharing_silver_appbar_shared_links",
                   style: TextStyle(
-                    fontWeight: FontWeight.bold,
-                    fontSize: 11,
+                    fontWeight: FontWeight.w500,
+                    fontSize: 12,
                   ),
                   maxLines: 1,
                 ).tr(),
@@ -236,9 +231,11 @@ class SharingPage extends HookConsumerWidget {
             SliverPadding(
               padding: const EdgeInsets.all(12),
               sliver: SliverToBoxAdapter(
-                child: const Text(
+                child: Text(
                   "partner_page_title",
-                  style: TextStyle(fontWeight: FontWeight.bold),
+                  style: context.textTheme.bodyLarge?.copyWith(
+                    fontWeight: FontWeight.w500,
+                  ),
                 ).tr(),
               ),
             ),
@@ -246,10 +243,10 @@ class SharingPage extends HookConsumerWidget {
           SliverPadding(
             padding: const EdgeInsets.all(12),
             sliver: SliverToBoxAdapter(
-              child: const Text(
+              child: Text(
                 "sharing_page_album",
-                style: TextStyle(
-                  fontWeight: FontWeight.bold,
+                style: context.textTheme.bodyLarge?.copyWith(
+                  fontWeight: FontWeight.w500,
                 ),
               ).tr(),
             ),

mobile/lib/modules/asset_viewer/ui/description_input.dart

@@ -93,15 +93,11 @@ class DescriptionInput extends HookConsumerWidget {
       maxLines: null,
       keyboardType: TextInputType.multiline,
       controller: controller,
-      style: const TextStyle(
-        fontSize: 14,
-      ),
+      style: context.textTheme.labelLarge,
       decoration: InputDecoration(
         hintText: 'description_input_hint_text'.tr(),
         border: InputBorder.none,
-        hintStyle: TextStyle(
-          fontWeight: FontWeight.normal,
-          fontSize: 12,
+        hintStyle: context.textTheme.labelLarge?.copyWith(
           color: textColor.withOpacity(0.5),
         ),
         suffixIcon: suffixIcon,

mobile/lib/modules/asset_viewer/ui/exif_bottom_sheet.dart

@@ -193,21 +193,15 @@ class ExifBottomSheet extends HookConsumerWidget {
             children: [
               Text(
                 "exif_bottom_sheet_location",
-                style: TextStyle(
-                  fontSize: 11,
-                  color: textColor,
-                  fontWeight: FontWeight.bold,
+                style: context.textTheme.labelMedium?.copyWith(
+                  color: context.textTheme.labelMedium?.color?.withAlpha(200),
+                  fontWeight: FontWeight.w600,
                 ),
               ).tr(),
               buildMap(),
               RichText(
                 text: TextSpan(
-                  style: TextStyle(
-                    fontSize: 12,
-                    fontWeight: FontWeight.bold,
-                    color: textColor,
-                    fontFamily: 'WorkSans',
-                  ),
+                  style: context.textTheme.labelLarge,
                   children: [
                     if (exifInfo != null && exifInfo.city != null)
                       TextSpan(
@@ -228,7 +222,9 @@ class ExifBottomSheet extends HookConsumerWidget {
               ),
               Text(
                 "${exifInfo!.latitude!.toStringAsFixed(4)}, ${exifInfo.longitude!.toStringAsFixed(4)}",
-                style: const TextStyle(fontSize: 12),
+                style: context.textTheme.labelMedium?.copyWith(
+                  color: context.textTheme.labelMedium?.color?.withAlpha(150),
+                ),
               ),
             ],
           ),
@@ -258,10 +254,7 @@ class ExifBottomSheet extends HookConsumerWidget {
             titleAlignment: ListTileTitleAlignment.center,
             title: Text(
               title,
-              style: TextStyle(
-                fontWeight: FontWeight.bold,
-                color: textColor,
-              ),
+              style: context.textTheme.labelLarge,
             ),
             subtitle: subtitle,
           );
@@ -278,7 +271,7 @@ class ExifBottomSheet extends HookConsumerWidget {
         // There is both filename and size information
         return createImagePropertiesListStyle(
           asset.fileName,
-          Text(imgSizeString),
+          Text(imgSizeString, style: context.textTheme.bodySmall),
         );
       } else if (imgSizeString != null && asset.fileName.isEmpty) {
         // There is only size information
@@ -305,10 +298,9 @@ class ExifBottomSheet extends HookConsumerWidget {
             padding: const EdgeInsets.only(bottom: 8.0),
             child: Text(
               "exif_bottom_sheet_details",
-              style: TextStyle(
-                fontSize: 11,
-                color: textColor,
-                fontWeight: FontWeight.bold,
+              style: context.textTheme.labelMedium?.copyWith(
+                color: context.textTheme.labelMedium?.color?.withAlpha(200),
+                fontWeight: FontWeight.w600,
               ),
             ).tr(),
           ),
@@ -323,10 +315,7 @@ class ExifBottomSheet extends HookConsumerWidget {
               ),
               title: Text(
                 "${exifInfo!.make} ${exifInfo.model}",
-                style: TextStyle(
-                  color: textColor,
-                  fontWeight: FontWeight.bold,
-                ),
+                style: context.textTheme.labelLarge,
               ),
               subtitle: exifInfo.f != null ||
                       exifInfo.exposureSeconds != null ||
@@ -334,6 +323,7 @@ class ExifBottomSheet extends HookConsumerWidget {
                       exifInfo.iso != null
                   ? Text(
                       "ƒ/${exifInfo.fNumber}   ${exifInfo.exposureTime}   ${exifInfo.focalLength} mm   ISO ${exifInfo.iso ?? ''} ",
+                      style: context.textTheme.bodySmall,
                     )
                   : null,
             ),

mobile/lib/modules/backup/ui/backup_info_card.dart

@@ -28,17 +28,17 @@ class BackupInfoCard extends StatelessWidget {
       elevation: 0,
       borderOnForeground: false,
       child: ListTile(
-        minVerticalPadding: 15,
+        minVerticalPadding: 18,
         isThreeLine: true,
         title: Text(
           title,
-          style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
+          style: context.textTheme.titleMedium,
         ),
         subtitle: Padding(
-          padding: const EdgeInsets.only(top: 8.0),
+          padding: const EdgeInsets.only(top: 4.0, right: 18.0),
           child: Text(
             subtitle,
-            style: const TextStyle(fontSize: 12),
+            style: context.textTheme.bodyMedium,
           ),
         ),
         trailing: Column(
@@ -46,9 +46,12 @@ class BackupInfoCard extends StatelessWidget {
           children: [
             Text(
               info,
-              style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
+              style: context.textTheme.titleLarge,
             ),
-            const Text("backup_info_card_assets").tr(),
+            Text(
+              "backup_info_card_assets",
+              style: context.textTheme.labelLarge,
+            ).tr(),
           ],
         ),
       ),

mobile/lib/modules/backup/ui/current_backup_asset_info_box.dart

@@ -188,9 +188,9 @@ class CurrentUploadingAssetInfoBox extends HookConsumerWidget {
         title: Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
-            const Text(
+            Text(
               "backup_controller_page_uploading_file_info",
-              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
+              style: context.textTheme.titleSmall,
             ).tr(),
             if (ref.watch(errorBackupListProvider).isNotEmpty) buildErrorChip(),
           ],

mobile/lib/modules/backup/views/backup_album_selection_page.dart

@@ -100,7 +100,7 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
               label: Text(
                 album.name,
                 style: TextStyle(
-                  fontSize: 10,
+                  fontSize: 12,
                   color: isDarkTheme ? Colors.black : Colors.white,
                   fontWeight: FontWeight.bold,
                 ),
@@ -134,7 +134,7 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
               label: Text(
                 album.name,
                 style: TextStyle(
-                  fontSize: 10,
+                  fontSize: 12,
                   color: isDarkTheme ? Colors.black : immichBackgroundColor,
                   fontWeight: FontWeight.bold,
                 ),
@@ -203,7 +203,6 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
         ),
         title: const Text(
           "backup_album_selection_page_select_albums",
-          style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
         ).tr(),
         elevation: 0,
       ),
@@ -219,12 +218,9 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
                     vertical: 8.0,
                     horizontal: 16.0,
                   ),
-                  child: const Text(
+                  child: Text(
                     "backup_album_selection_page_selection_info",
-                    style: TextStyle(
-                      fontWeight: FontWeight.bold,
-                      fontSize: 14,
-                    ),
+                    style: context.textTheme.titleSmall,
                   ).tr(),
                 ),
                 // Selected Album Chips
@@ -250,19 +246,14 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
                             .toString(),
                       ],
                     ),
-                    style: const TextStyle(
-                      fontWeight: FontWeight.bold,
-                      fontSize: 14,
-                    ),
+                    style: context.textTheme.titleSmall,
                   ),
                   subtitle: Padding(
                     padding: const EdgeInsets.symmetric(vertical: 8.0),
                     child: Text(
                       "backup_album_selection_page_albums_tap",
-                      style: TextStyle(
-                        fontSize: 12,
+                      style: context.textTheme.labelLarge?.copyWith(
                         color: context.primaryColor,
-                        fontWeight: FontWeight.bold,
                       ),
                     ).tr(),
                   ),

mobile/lib/modules/backup/views/backup_controller_page.dart

@@ -193,7 +193,7 @@ class BackupControllerPage extends HookConsumerWidget {
             : const Icon(Icons.cloud_off_rounded),
         title: Text(
           backUpOption,
-          style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
+          style: context.textTheme.titleSmall,
         ),
         subtitle: Padding(
           padding: const EdgeInsets.symmetric(vertical: 8.0),
@@ -213,9 +213,8 @@ class BackupControllerPage extends HookConsumerWidget {
                       .setAutoBackup(!isAutoBackup),
                   child: Text(
                     backupBtnText,
-                    style: const TextStyle(
-                      fontWeight: FontWeight.bold,
-                      fontSize: 12,
+                    style: context.textTheme.labelLarge?.copyWith(
+                      color: context.isDarkTheme ? Colors.black : Colors.white,
                     ),
                   ),
                 ),
@@ -335,7 +334,7 @@ class BackupControllerPage extends HookConsumerWidget {
               isBackgroundEnabled
                   ? "backup_controller_page_background_is_on"
                   : "backup_controller_page_background_is_off",
-              style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
+              style: context.textTheme.titleSmall,
             ).tr(),
             subtitle: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
@@ -426,9 +425,8 @@ class BackupControllerPage extends HookConsumerWidget {
                     isBackgroundEnabled
                         ? "backup_controller_page_background_turn_off"
                         : "backup_controller_page_background_turn_on",
-                    style: const TextStyle(
-                      fontWeight: FontWeight.bold,
-                      fontSize: 12,
+                    style: context.textTheme.labelLarge?.copyWith(
+                      color: context.isDarkTheme ? Colors.black : Colors.white,
                     ),
                   ).tr(),
                 ),
@@ -511,10 +509,8 @@ class BackupControllerPage extends HookConsumerWidget {
           padding: const EdgeInsets.only(top: 8.0),
           child: Text(
             text.trim().substring(0, text.length - 2),
-            style: TextStyle(
+            style: context.textTheme.labelLarge?.copyWith(
               color: context.primaryColor,
-              fontSize: 12,
-              fontWeight: FontWeight.bold,
             ),
           ),
         );
@@ -523,10 +519,8 @@ class BackupControllerPage extends HookConsumerWidget {
           padding: const EdgeInsets.only(top: 8.0),
           child: Text(
             "backup_controller_page_none_selected".tr(),
-            style: TextStyle(
+            style: context.textTheme.labelLarge?.copyWith(
               color: context.primaryColor,
-              fontSize: 12,
-              fontWeight: FontWeight.bold,
             ),
           ),
         );
@@ -546,10 +540,8 @@ class BackupControllerPage extends HookConsumerWidget {
           padding: const EdgeInsets.only(top: 8.0),
           child: Text(
             text.trim().substring(0, text.length - 2),
-            style: TextStyle(
+            style: context.textTheme.labelLarge?.copyWith(
               color: Colors.red[300],
-              fontSize: 12,
-              fontWeight: FontWeight.bold,
             ),
           ),
         );
@@ -559,55 +551,57 @@ class BackupControllerPage extends HookConsumerWidget {
     }
 
     buildFolderSelectionTile() {
-      return Card(
-        shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(20),
-          side: BorderSide(
-            color: context.isDarkTheme
-                ? const Color.fromARGB(255, 56, 56, 56)
-                : Colors.black12,
-            width: 1,
-          ),
-        ),
-        elevation: 0,
-        borderOnForeground: false,
-        child: ListTile(
-          minVerticalPadding: 15,
-          title: const Text(
-            "backup_controller_page_albums",
-            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
-          ).tr(),
-          subtitle: Padding(
-            padding: const EdgeInsets.only(top: 8.0),
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                const Text(
-                  "backup_controller_page_to_backup",
-                  style: TextStyle(fontSize: 12),
-                ).tr(),
-                buildSelectedAlbumName(),
-                buildExcludedAlbumName(),
-              ],
+      return Padding(
+        padding: const EdgeInsets.only(top: 8.0),
+        child: Card(
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(20),
+            side: BorderSide(
+              color: context.isDarkTheme
+                  ? const Color.fromARGB(255, 56, 56, 56)
+                  : Colors.black12,
+              width: 1,
             ),
           ),
-          trailing: ElevatedButton(
-            onPressed: () async {
-              await context.autoPush(const BackupAlbumSelectionRoute());
-              // waited until returning from selection
-              await ref
-                  .read(backupProvider.notifier)
-                  .backupAlbumSelectionDone();
-              // waited until backup albums are stored in DB
-              ref.read(albumProvider.notifier).getDeviceAlbums();
-            },
-            child: const Text(
-              "backup_controller_page_select",
-              style: TextStyle(
-                fontWeight: FontWeight.bold,
-                fontSize: 12,
-              ),
+          elevation: 0,
+          borderOnForeground: false,
+          child: ListTile(
+            minVerticalPadding: 18,
+            title: Text(
+              "backup_controller_page_albums",
+              style: context.textTheme.titleMedium,
             ).tr(),
+            subtitle: Padding(
+              padding: const EdgeInsets.only(top: 8.0),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    "backup_controller_page_to_backup",
+                    style: context.textTheme.bodyMedium,
+                  ).tr(),
+                  buildSelectedAlbumName(),
+                  buildExcludedAlbumName(),
+                ],
+              ),
+            ),
+            trailing: ElevatedButton(
+              onPressed: () async {
+                await context.autoPush(const BackupAlbumSelectionRoute());
+                // waited until returning from selection
+                await ref
+                    .read(backupProvider.notifier)
+                    .backupAlbumSelectionDone();
+                // waited until backup albums are stored in DB
+                ref.read(albumProvider.notifier).getDeviceAlbums();
+              },
+              child: const Text(
+                "backup_controller_page_select",
+                style: TextStyle(
+                  fontWeight: FontWeight.bold,
+                ),
+              ).tr(),
+            ),
           ),
         ),
       );
@@ -657,7 +651,7 @@ class BackupControllerPage extends HookConsumerWidget {
                   child: const Text(
                     "backup_controller_page_start_backup",
                     style: TextStyle(
-                      fontSize: 14,
+                      fontSize: 16,
                       fontWeight: FontWeight.bold,
                     ),
                   ).tr(),
@@ -680,7 +674,6 @@ class BackupControllerPage extends HookConsumerWidget {
         elevation: 0,
         title: const Text(
           "backup_controller_page_backup",
-          style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
         ).tr(),
         leading: IconButton(
           onPressed: () {
@@ -735,7 +728,6 @@ class BackupControllerPage extends HookConsumerWidget {
                   if (showBackupFix) const Divider(),
                   if (showBackupFix) buildCheckCorruptBackups(),
                   const Divider(),
-                  const Divider(),
                   const CurrentUploadingAssetInfoBox(),
                   if (!hasExclusiveAccess) buildBackgroundBackupInfo(),
                   buildBackupButton(),

mobile/lib/modules/home/ui/asset_grid/group_divider_title.dart

@@ -1,9 +1,13 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.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/modules/home/ui/asset_grid/asset_grid_data_structure.dart';
+import 'package:immich_mobile/modules/settings/providers/app_settings.provider.dart';
+import 'package:immich_mobile/modules/settings/services/app_settings.service.dart';
 
-class GroupDividerTitle extends ConsumerWidget {
+class GroupDividerTitle extends HookConsumerWidget {
   const GroupDividerTitle({
     Key? key,
     required this.text,
@@ -21,6 +25,18 @@ class GroupDividerTitle extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final appSettingService = ref.watch(appSettingsServiceProvider);
+    final groupBy = useState(GroupAssetsBy.day);
+
+    useEffect(
+      () {
+        groupBy.value = GroupAssetsBy.values[
+            appSettingService.getSetting<int>(AppSettingsEnum.groupAssetsBy)];
+        return null;
+      },
+      [],
+    );
+
     void handleTitleIconClick() {
       HapticFeedback.heavyImpact();
       if (selected) {
@@ -31,8 +47,8 @@ class GroupDividerTitle extends ConsumerWidget {
     }
 
     return Padding(
-      padding: const EdgeInsets.only(
-        top: 12.0,
+      padding: EdgeInsets.only(
+        top: groupBy.value == GroupAssetsBy.month ? 32.0 : 16.0,
         bottom: 16.0,
         left: 12.0,
         right: 12.0,
@@ -41,10 +57,14 @@ class GroupDividerTitle extends ConsumerWidget {
         children: [
           Text(
             text,
-            style: const TextStyle(
-              fontSize: 14,
-              fontWeight: FontWeight.bold,
-            ),
+            style: groupBy.value == GroupAssetsBy.month
+                ? context.textTheme.bodyLarge?.copyWith(
+                    fontSize: 24.0,
+                  )
+                : context.textTheme.labelLarge?.copyWith(
+                    color: context.textTheme.labelLarge?.color?.withAlpha(250),
+                    fontWeight: FontWeight.w500,
+                  ),
           ),
           const Spacer(),
           GestureDetector(

mobile/lib/modules/home/ui/asset_grid/immich_asset_grid_view.dart

@@ -222,10 +222,9 @@ class ImmichAssetGridViewState extends State<ImmichAssetGridView> {
       padding: const EdgeInsets.only(left: 12.0, top: 24.0),
       child: Text(
         title,
-        style: TextStyle(
+        style: const TextStyle(
           fontSize: 26,
-          fontWeight: FontWeight.bold,
-          color: context.textTheme.displayLarge?.color,
+          fontWeight: FontWeight.w500,
         ),
       ),
     );

mobile/lib/modules/map/ui/map_page_bottom_sheet.dart

@@ -179,7 +179,7 @@ class AssetsInBoundBottomSheetState extends ConsumerState<MapPageBottomSheet> {
           ? "map_assets_in_bounds".plural(assetsInBound.value.length)
           : "map_no_assets_in_bounds".tr();
       final dragHandle = Container(
-        height: 60,
+        height: 70,
         width: double.infinity,
         decoration: BoxDecoration(
           color: isDarkTheme ? Colors.grey[900] : Colors.grey[100],
@@ -195,11 +195,7 @@ class AssetsInBoundBottomSheetState extends ConsumerState<MapPageBottomSheet> {
                 const SizedBox(height: 15),
                 Text(
                   textToDisplay,
-                  style: TextStyle(
-                    fontSize: 16,
-                    color: context.textTheme.displayLarge?.color,
-                    fontWeight: FontWeight.bold,
-                  ),
+                  style: context.textTheme.bodyLarge,
                 ),
                 Divider(
                   height: 10,

mobile/lib/modules/map/ui/map_settings_dialog.dart

@@ -134,12 +134,16 @@ class MapSettingsDialog extends HookConsumerWidget {
             backgroundColor:
                 mapSettings.isDarkTheme ? Colors.grey[100] : Colors.grey[700],
           ),
-          child: Text(
-            "map_settings_dialog_cancel".tr(),
-            style: theme.textTheme.labelSmall?.copyWith(
-              fontWeight: FontWeight.bold,
-              color:
-                  mapSettings.isDarkTheme ? Colors.grey[900] : Colors.grey[100],
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 16.0),
+            child: Text(
+              "map_settings_dialog_cancel".tr(),
+              style: theme.textTheme.labelLarge?.copyWith(
+                fontWeight: FontWeight.w500,
+                color: mapSettings.isDarkTheme
+                    ? Colors.grey[900]
+                    : Colors.grey[100],
+              ),
             ),
           ),
         ),
@@ -155,11 +159,14 @@ class MapSettingsDialog extends HookConsumerWidget {
           style: TextButton.styleFrom(
             backgroundColor: theme.primaryColor,
           ),
-          child: Text(
-            "map_settings_dialog_save".tr(),
-            style: theme.textTheme.labelSmall?.copyWith(
-              fontWeight: FontWeight.bold,
-              color: theme.primaryTextTheme.labelLarge?.color,
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 16.0),
+            child: Text(
+              "map_settings_dialog_save".tr(),
+              style: theme.textTheme.labelLarge?.copyWith(
+                fontWeight: FontWeight.w500,
+                color: theme.primaryTextTheme.labelLarge?.color,
+              ),
             ),
           ),
         ),

mobile/lib/modules/memories/ui/memory_card.dart

@@ -3,6 +3,7 @@ import 'dart:ui';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:immich_mobile/shared/models/store.dart';
 import 'package:immich_mobile/shared/ui/immich_image.dart';
@@ -34,10 +35,9 @@ class MemoryCard extends HookConsumerWidget {
     buildTitle() {
       return Text(
         title,
-        style: const TextStyle(
+        style: context.textTheme.headlineMedium?.copyWith(
           color: Colors.white,
-          fontWeight: FontWeight.bold,
-          fontSize: 24.0,
+          fontWeight: FontWeight.w500,
         ),
       );
     }

mobile/lib/modules/memories/ui/memory_lane.dart

@@ -48,7 +48,7 @@ class MemoryLane extends HookConsumerWidget {
                                 clipBehavior: Clip.hardEdge,
                                 child: ColorFiltered(
                                   colorFilter: ColorFilter.mode(
-                                    Colors.black.withOpacity(0.1),
+                                    Colors.black.withOpacity(0.2),
                                     BlendMode.darken,
                                   ),
                                   child: ImmichImage(
@@ -71,9 +71,9 @@ class MemoryLane extends HookConsumerWidget {
                                   child: Text(
                                     memory.title,
                                     style: const TextStyle(
-                                      fontWeight: FontWeight.bold,
+                                      fontWeight: FontWeight.w600,
                                       color: Colors.white,
-                                      fontSize: 14,
+                                      fontSize: 15,
                                     ),
                                   ),
                                 ),

mobile/lib/modules/memories/views/memory_page.dart

@@ -138,8 +138,8 @@ class MemoryPage extends HookConsumerWidget {
                   memory.title,
                   style: TextStyle(
                     color: Colors.grey[400],
-                    fontSize: 11.0,
-                    fontWeight: FontWeight.w600,
+                    fontSize: 13.0,
+                    fontWeight: FontWeight.w500,
                   ),
                 ),
                 Text(
@@ -148,7 +148,7 @@ class MemoryPage extends HookConsumerWidget {
                   ),
                   style: const TextStyle(
                     color: Colors.white,
-                    fontSize: 14.0,
+                    fontSize: 15.0,
                     fontWeight: FontWeight.w500,
                   ),
                 ),

mobile/lib/modules/partner/ui/partner_list.dart

@@ -28,15 +28,11 @@ class PartnerList extends HookConsumerWidget {
       leading: userAvatar(context, p, radius: 24),
       title: Text(
         "${p.name}'s photos",
-        style: const TextStyle(
-          fontWeight: FontWeight.bold,
-          fontSize: 14,
-        ),
+        style: context.textTheme.labelLarge,
       ),
       trailing: Text(
         "View all",
-        style: TextStyle(
-          fontWeight: FontWeight.bold,
+        style: context.textTheme.labelLarge?.copyWith(
           color: context.primaryColor,
         ),
       ),

mobile/lib/modules/search/ui/curated_people_row.dart

@@ -84,8 +84,7 @@ class CuratedPeopleRow extends StatelessWidget {
                       padding: const EdgeInsets.only(top: 8.0),
                       child: Text(
                         "Add name",
-                        style: TextStyle(
-                          fontWeight: FontWeight.bold,
+                        style: context.textTheme.labelLarge?.copyWith(
                           color: context.primaryColor,
                         ),
                       ),
@@ -98,10 +97,7 @@ class CuratedPeopleRow extends StatelessWidget {
                       person.label,
                       textAlign: TextAlign.center,
                       overflow: TextOverflow.ellipsis,
-                      style: const TextStyle(
-                        fontWeight: FontWeight.bold,
-                        fontSize: 13.0,
-                      ),
+                      style: context.textTheme.labelLarge,
                     ),
                   ),
               ],

mobile/lib/modules/search/ui/immich_search_bar.dart

@@ -58,10 +58,8 @@ class ImmichSearchBar extends HookConsumerWidget
         },
         decoration: InputDecoration(
           hintText: 'search_bar_hint'.tr(),
-          hintStyle: context.textTheme.titleSmall?.copyWith(
-            color: context.themeData.colorScheme.onSurface.withOpacity(0.5),
-            fontWeight: FontWeight.w500,
-            fontSize: 14,
+          hintStyle: context.textTheme.bodyLarge?.copyWith(
+            color: context.themeData.colorScheme.onSurface.withOpacity(0.75),
           ),
           enabledBorder: const UnderlineInputBorder(
             borderSide: BorderSide(color: Colors.transparent),

mobile/lib/modules/search/ui/search_row_title.dart

@@ -27,16 +27,16 @@ class SearchRowTitle extends StatelessWidget {
         children: [
           Text(
             title,
-            style: context.textTheme.titleSmall,
+            style: context.textTheme.bodyLarge?.copyWith(
+              fontWeight: FontWeight.w500,
+            ),
           ),
           TextButton(
             onPressed: onViewAllPressed,
             child: Text(
               'search_page_view_all_button',
-              style: TextStyle(
+              style: context.textTheme.labelLarge?.copyWith(
                 color: context.primaryColor,
-                fontWeight: FontWeight.bold,
-                fontSize: 14.0,
               ),
             ).tr(),
           ),

mobile/lib/modules/search/views/all_people_page.dart

@@ -15,13 +15,8 @@ class AllPeoplePage extends HookConsumerWidget {
 
     return Scaffold(
       appBar: AppBar(
-        title: Text(
+        title: const Text(
           'all_people_page_title',
-          style: TextStyle(
-            color: context.primaryColor,
-            fontWeight: FontWeight.bold,
-            fontSize: 16.0,
-          ),
         ).tr(),
         leading: IconButton(
           onPressed: () => context.autoPop(),

mobile/lib/modules/search/views/curated_location_page.dart

@@ -18,13 +18,8 @@ class CuratedLocationPage extends HookConsumerWidget {
 
     return Scaffold(
       appBar: AppBar(
-        title: Text(
+        title: const Text(
           'curated_location_page_title',
-          style: TextStyle(
-            color: context.primaryColor,
-            fontWeight: FontWeight.bold,
-            fontSize: 16.0,
-          ),
         ).tr(),
         leading: IconButton(
           onPressed: () => context.autoPop(),

mobile/lib/modules/search/views/search_page.dart

@@ -33,8 +33,8 @@ class SearchPage extends HookConsumerWidget {
     double imageSize = math.min(context.width / 3, 150);
 
     TextStyle categoryTitleStyle = const TextStyle(
-      fontWeight: FontWeight.bold,
-      fontSize: 14.0,
+      fontWeight: FontWeight.w500,
+      fontSize: 15.0,
     );
 
     Color categoryIconColor = context.isDarkTheme ? Colors.white : Colors.black;
@@ -156,7 +156,9 @@ class SearchPage extends HookConsumerWidget {
                   padding: const EdgeInsets.symmetric(horizontal: 16),
                   child: Text(
                     'search_page_your_activity',
-                    style: context.textTheme.titleSmall,
+                    style: context.textTheme.bodyLarge?.copyWith(
+                      fontWeight: FontWeight.w500,
+                    ),
                   ).tr(),
                 ),
                 ListTile(
@@ -186,11 +188,15 @@ class SearchPage extends HookConsumerWidget {
                   padding: const EdgeInsets.symmetric(horizontal: 16.0),
                   child: Text(
                     'search_page_categories',
-                    style: context.textTheme.titleSmall,
+                    style: context.textTheme.bodyLarge?.copyWith(
+                      fontWeight: FontWeight.w500,
+                    ),
                   ).tr(),
                 ),
                 ListTile(
-                  title: Text('search_page_screenshots', style: categoryTitleStyle).tr(),
+                  title:
+                      Text('search_page_screenshots', style: categoryTitleStyle)
+                          .tr(),
                   leading: Icon(
                     Icons.screenshot,
                     color: categoryIconColor,
@@ -255,7 +261,7 @@ class CategoryDivider extends StatelessWidget {
   Widget build(BuildContext context) {
     return const Padding(
       padding: EdgeInsets.only(
-        left: 72,
+        left: 56,
         right: 16,
       ),
       child: Divider(

mobile/lib/modules/settings/ui/advanced_settings/advanced_settings.dart

@@ -45,17 +45,12 @@ class AdvancedSettings extends HookConsumerWidget {
 
     return ExpansionTile(
       textColor: context.primaryColor,
-      title: const Text(
+      title: Text(
         "advanced_settings_tile_title",
-        style: TextStyle(
-          fontWeight: FontWeight.bold,
-        ),
+        style: context.textTheme.titleMedium,
       ).tr(),
       subtitle: const Text(
         "advanced_settings_tile_subtitle",
-        style: TextStyle(
-          fontSize: 13,
-        ),
       ).tr(),
       children: [
         SettingsSwitchListTile(

mobile/lib/modules/settings/ui/asset_list_settings/asset_list_layout_settings.dart

@@ -54,8 +54,7 @@ class LayoutSettings extends HookConsumerWidget {
           activeColor: context.primaryColor,
           title: Text(
             "asset_list_layout_settings_dynamic_layout_title",
-            style: context.textTheme.labelLarge
-                ?.copyWith(fontWeight: FontWeight.bold),
+            style: context.textTheme.labelLarge,
           ).tr(),
           onChanged: switchChanged,
           value: useDynamicLayout.value,

mobile/lib/modules/settings/ui/asset_list_settings/asset_list_settings.dart

@@ -14,17 +14,12 @@ class AssetListSettings extends StatelessWidget {
   Widget build(BuildContext context) {
     return ExpansionTile(
       textColor: context.primaryColor,
-      title: const Text(
+      title: Text(
         'asset_list_settings_title',
-        style: TextStyle(
-          fontWeight: FontWeight.bold,
-        ),
+        style: context.textTheme.titleMedium,
       ).tr(),
       subtitle: const Text(
         'asset_list_settings_subtitle',
-        style: TextStyle(
-          fontSize: 13,
-        ),
       ).tr(),
       children: const [
         TilesPerRow(),

mobile/lib/modules/settings/ui/asset_list_settings/asset_list_storage_indicator.dart

@@ -37,8 +37,7 @@ class StorageIndicator extends HookConsumerWidget {
       activeColor: context.primaryColor,
       title: Text(
         "theme_setting_asset_list_storage_indicator_title",
-        style:
-            context.textTheme.labelLarge?.copyWith(fontWeight: FontWeight.bold),
+        style: context.textTheme.labelLarge,
       ).tr(),
       onChanged: switchChanged,
       value: showStorageIndicator.value,

mobile/lib/modules/settings/ui/asset_list_settings/asset_list_tiles_per_row.dart

@@ -37,12 +37,9 @@ class TilesPerRow extends HookConsumerWidget {
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         ListTile(
-          title: const Text(
+          title: Text(
             "theme_setting_asset_list_tiles_per_row_title",
-            style: TextStyle(
-              fontSize: 14,
-              fontWeight: FontWeight.bold,
-            ),
+            style: context.textTheme.labelLarge,
           ).tr(args: ["${itemsValue.value.toInt()}"]),
         ),
         Slider(

mobile/lib/modules/settings/ui/image_viewer_quality_setting/image_viewer_quality_setting.dart

@@ -28,22 +28,19 @@ class ImageViewerQualitySetting extends HookConsumerWidget {
 
     return ExpansionTile(
       textColor: context.primaryColor,
-      title: const Text(
+      title: Text(
         'theme_setting_image_viewer_quality_title',
-        style: TextStyle(
-          fontWeight: FontWeight.bold,
-        ),
+        style: context.textTheme.titleMedium,
       ).tr(),
       subtitle: const Text(
         'theme_setting_image_viewer_quality_subtitle',
-        style: TextStyle(
-          fontSize: 13,
-        ),
       ).tr(),
       children: [
         ListTile(
-          title: const Text('setting_image_viewer_help').tr(),
-          dense: true,
+          title: Text(
+            'setting_image_viewer_help',
+            style: context.textTheme.bodyMedium,
+          ).tr(),
         ),
         SettingsSwitchListTile(
           appSettingService: settings,

mobile/lib/modules/settings/ui/local_storage_settings/local_storage_settings.dart

@@ -27,30 +27,21 @@ class LocalStorageSettings extends HookConsumerWidget {
 
     return ExpansionTile(
       textColor: context.primaryColor,
-      title: const Text(
+      title: Text(
         "cache_settings_tile_title",
-        style: TextStyle(
-          fontWeight: FontWeight.bold,
-        ),
+        style: context.textTheme.titleMedium,
       ).tr(),
       subtitle: const Text(
         "cache_settings_tile_subtitle",
-        style: TextStyle(
-          fontSize: 13,
-        ),
       ).tr(),
       children: [
         ListTile(
           title: Text(
             "cache_settings_duplicated_assets_title",
-            style: context.textTheme.labelLarge
-                ?.copyWith(fontWeight: FontWeight.bold),
+            style: context.textTheme.titleSmall,
           ).tr(args: ["${cacheItemCount.value}"]),
           subtitle: const Text(
             "cache_settings_duplicated_assets_subtitle",
-            style: TextStyle(
-              fontSize: 13,
-            ),
           ).tr(),
           trailing: TextButton(
             onPressed: cacheItemCount.value > 0 ? clearCache : null,

mobile/lib/modules/settings/ui/notification_setting/notification_setting.dart

@@ -67,17 +67,12 @@ class NotificationSetting extends HookConsumerWidget {
     final String formattedValue = _formatSliderValue(sliderValue.value);
     return ExpansionTile(
       textColor: context.primaryColor,
-      title: const Text(
+      title: Text(
         'setting_notifications_title',
-        style: TextStyle(
-          fontWeight: FontWeight.bold,
-        ),
+        style: context.textTheme.titleMedium,
       ).tr(),
       subtitle: const Text(
         'setting_notifications_subtitle',
-        style: TextStyle(
-          fontSize: 13,
-        ),
       ).tr(),
       children: [
         if (!hasPermission)

mobile/lib/modules/settings/ui/settings_switch_list_tile.dart

@@ -40,10 +40,14 @@ class SettingsSwitchListTile extends StatelessWidget {
       dense: true,
       title: Text(
         title,
-        style:
-            context.textTheme.labelLarge?.copyWith(fontWeight: FontWeight.bold),
+        style: context.textTheme.titleSmall,
       ),
-      subtitle: subtitle != null ? Text(subtitle!) : null,
+      subtitle: subtitle != null
+          ? Text(
+              subtitle!,
+              style: context.textTheme.bodyMedium,
+            )
+          : null,
     );
   }
 }

mobile/lib/modules/settings/ui/theme_setting/theme_setting.dart

@@ -26,17 +26,12 @@ class ThemeSetting extends HookConsumerWidget {
 
     return ExpansionTile(
       textColor: context.primaryColor,
-      title: const Text(
+      title: Text(
         'theme_setting_theme_title',
-        style: TextStyle(
-          fontWeight: FontWeight.bold,
-        ),
+        style: context.textTheme.titleMedium,
       ).tr(),
       subtitle: const Text(
         'theme_setting_theme_subtitle',
-        style: TextStyle(
-          fontSize: 13,
-        ),
       ).tr(),
       children: [
         SwitchListTile.adaptive(

mobile/lib/modules/settings/views/settings_page.dart

@@ -27,10 +27,6 @@ class SettingsPage extends HookConsumerWidget {
         centerTitle: false,
         title: const Text(
           'setting_pages_app_bar_settings',
-          style: TextStyle(
-            fontSize: 16,
-            fontWeight: FontWeight.bold,
-          ),
         ).tr(),
       ),
       body: ListView(

mobile/lib/modules/shared_link/ui/shared_link_item.dart

@@ -148,8 +148,8 @@ class SharedLinkItem extends ConsumerWidget {
           label: Text(
             labelText,
             style: TextStyle(
-              fontSize: 10,
-              fontWeight: FontWeight.bold,
+              fontSize: 11,
+              fontWeight: FontWeight.w500,
               color: isDarkMode ? Colors.black : Colors.white,
             ),
           ),

mobile/lib/modules/shared_link/views/shared_link_page.dart

@@ -67,12 +67,10 @@ class SharedLinkPage extends HookConsumerWidget {
         children: [
           Padding(
             padding: const EdgeInsets.only(left: 16.0, top: 16.0, bottom: 30.0),
-            child: const Text(
+            child: Text(
               "shared_link_manage_links",
-              style: TextStyle(
-                fontSize: 14,
-                color: Colors.grey,
-                fontWeight: FontWeight.bold,
+              style: context.textTheme.labelLarge?.copyWith(
+                color: context.textTheme.labelLarge?.color?.withAlpha(200),
               ),
             ).tr(),
           ),

mobile/lib/shared/ui/app_bar_dialog/app_bar_dialog.dart

@@ -54,7 +54,7 @@ class ImmichAppBarDialog extends HookConsumerWidget {
                   fontFamily: 'SnowburstOne',
                   fontWeight: FontWeight.bold,
                   color: context.primaryColor,
-                  fontSize: 15,
+                  fontSize: 16,
                 ),
               ),
             ),
@@ -72,14 +72,15 @@ class ImmichAppBarDialog extends HookConsumerWidget {
         leading: SizedBox(
           child: Icon(
             icon,
-            color: theme.textTheme.labelMedium?.color,
+            color: theme.textTheme.labelLarge?.color?.withAlpha(250),
             size: 20,
           ),
         ),
         title: Text(
           text,
-          style:
-              theme.textTheme.labelLarge?.copyWith(fontWeight: FontWeight.bold),
+          style: theme.textTheme.labelLarge?.copyWith(
+            color: theme.textTheme.labelLarge?.color?.withAlpha(250),
+          ),
         ).tr(),
         onTap: onTap,
       );
@@ -145,9 +146,11 @@ class ImmichAppBarDialog extends HookConsumerWidget {
               Icons.storage_rounded,
               color: theme.primaryColor,
             ),
-            title: const Text(
+            title: Text(
               "backup_controller_page_server_storage",
-              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
+              style: context.textTheme.labelLarge?.copyWith(
+                fontWeight: FontWeight.w500,
+              ),
             ).tr(),
             isThreeLine: true,
             subtitle: Padding(
@@ -230,7 +233,7 @@ class ImmichAppBarDialog extends HookConsumerWidget {
       clipBehavior: Clip.hardEdge,
       alignment: Alignment.topCenter,
       insetPadding: EdgeInsets.only(
-        top: isHorizontal ? 20 : 60,
+        top: isHorizontal ? 20 : 40,
         left: horizontalPadding,
         right: horizontalPadding,
         bottom: isHorizontal ? 20 : 100,

mobile/lib/shared/ui/app_bar_dialog/app_bar_profile_info.dart

@@ -31,8 +31,8 @@ class AppBarProfileInfoBox extends HookConsumerWidget {
       }
 
       final userImage = UserCircleAvatar(
-        radius: 20,
-        size: 40,
+        radius: 22,
+        size: 44,
         user: user,
       );
 
@@ -119,16 +119,15 @@ class AppBarProfileInfoBox extends HookConsumerWidget {
           ),
           title: Text(
             authState.name,
-            style: TextStyle(
+            style: context.textTheme.titleMedium?.copyWith(
               color: context.primaryColor,
-              fontWeight: FontWeight.bold,
-              fontSize: 16,
+              fontWeight: FontWeight.w500,
             ),
           ),
           subtitle: Text(
             authState.userEmail,
-            style: context.textTheme.labelMedium?.copyWith(
-              fontSize: 12,
+            style: context.textTheme.bodySmall?.copyWith(
+              color: context.textTheme.bodySmall?.color?.withAlpha(200),
             ),
           ),
         ),

mobile/lib/shared/ui/app_bar_dialog/app_bar_server_info.dart

@@ -18,6 +18,8 @@ class AppBarServerInfo extends HookConsumerWidget {
     ServerInfo serverInfoState = ref.watch(serverInfoProvider);
 
     final appInfo = useState({});
+    const titleFontSize = 12.0;
+    const contentFontSize = 11.0;
 
     getPackageInfo() async {
       PackageInfo packageInfo = await PackageInfo.fromPlatform();
@@ -63,7 +65,7 @@ class AppBarServerInfo extends HookConsumerWidget {
                   style: TextStyle(
                     fontSize: 11,
                     color: context.primaryColor,
-                    fontWeight: FontWeight.w600,
+                    fontWeight: FontWeight.w500,
                   ),
                 ),
               ),
@@ -83,9 +85,9 @@ class AppBarServerInfo extends HookConsumerWidget {
                       child: Text(
                         "server_info_box_app_version".tr(),
                         style: TextStyle(
-                          fontSize: 11,
+                          fontSize: titleFontSize,
                           color: context.textTheme.labelSmall?.color,
-                          fontWeight: FontWeight.bold,
+                          fontWeight: FontWeight.w500,
                         ),
                       ),
                     ),
@@ -97,7 +99,7 @@ class AppBarServerInfo extends HookConsumerWidget {
                       child: Text(
                         "${appInfo.value["version"]} build.${appInfo.value["buildNumber"]}",
                         style: TextStyle(
-                          fontSize: 11,
+                          fontSize: contentFontSize,
                           color: context.textTheme.labelSmall?.color
                               ?.withOpacity(0.5),
                           fontWeight: FontWeight.bold,
@@ -123,9 +125,9 @@ class AppBarServerInfo extends HookConsumerWidget {
                       child: Text(
                         "server_info_box_server_version".tr(),
                         style: TextStyle(
-                          fontSize: 11,
+                          fontSize: titleFontSize,
                           color: context.textTheme.labelSmall?.color,
-                          fontWeight: FontWeight.bold,
+                          fontWeight: FontWeight.w500,
                         ),
                       ),
                     ),
@@ -139,7 +141,7 @@ class AppBarServerInfo extends HookConsumerWidget {
                             ? "${serverInfoState.serverVersion.major}.${serverInfoState.serverVersion.minor}.${serverInfoState.serverVersion.patch}"
                             : "--",
                         style: TextStyle(
-                          fontSize: 11,
+                          fontSize: contentFontSize,
                           color: context.textTheme.labelSmall?.color
                               ?.withOpacity(0.5),
                           fontWeight: FontWeight.bold,
@@ -165,9 +167,9 @@ class AppBarServerInfo extends HookConsumerWidget {
                       child: Text(
                         "server_info_box_server_url".tr(),
                         style: TextStyle(
-                          fontSize: 11,
+                          fontSize: titleFontSize,
                           color: context.textTheme.labelSmall?.color,
-                          fontWeight: FontWeight.bold,
+                          fontWeight: FontWeight.w500,
                         ),
                       ),
                     ),
@@ -194,7 +196,7 @@ class AppBarServerInfo extends HookConsumerWidget {
                         child: Text(
                           getServerUrl() ?? '--',
                           style: TextStyle(
-                            fontSize: 11,
+                            fontSize: contentFontSize,
                             color: context.textTheme.labelSmall?.color
                                 ?.withOpacity(0.5),
                             fontWeight: FontWeight.bold,
@@ -234,9 +236,9 @@ class AppBarServerInfo extends HookConsumerWidget {
                           Text(
                             "server_info_box_latest_release".tr(),
                             style: TextStyle(
-                              fontSize: 11,
+                              fontSize: titleFontSize,
                               color: context.textTheme.labelSmall?.color,
-                              fontWeight: FontWeight.bold,
+                              fontWeight: FontWeight.w500,
                             ),
                           ),
                         ],
@@ -252,7 +254,7 @@ class AppBarServerInfo extends HookConsumerWidget {
                             ? "${serverInfoState.latestVersion.major}.${serverInfoState.latestVersion.minor}.${serverInfoState.latestVersion.patch}"
                             : "--",
                         style: TextStyle(
-                          fontSize: 11,
+                          fontSize: contentFontSize,
                           color: context.textTheme.labelSmall?.color
                               ?.withOpacity(0.5),
                           fontWeight: FontWeight.bold,

mobile/lib/utils/immich_app_theme.dart

@@ -38,11 +38,11 @@ ThemeData immichLightTheme = ThemeData(
   hintColor: Colors.indigo,
   focusColor: Colors.indigo,
   splashColor: Colors.indigo.withOpacity(0.15),
-  fontFamily: 'WorkSans',
+  fontFamily: 'Overpass',
   scaffoldBackgroundColor: immichBackgroundColor,
   snackBarTheme: const SnackBarThemeData(
     contentTextStyle: TextStyle(
-      fontFamily: 'WorkSans',
+      fontFamily: 'Overpass',
       color: Colors.indigo,
       fontWeight: FontWeight.bold,
     ),
@@ -50,7 +50,7 @@ ThemeData immichLightTheme = ThemeData(
   ),
   appBarTheme: AppBarTheme(
     titleTextStyle: const TextStyle(
-      fontFamily: 'WorkSans',
+      fontFamily: 'Overpass',
       color: Colors.indigo,
       fontWeight: FontWeight.bold,
       fontSize: 18,
@@ -125,9 +125,9 @@ ThemeData immichLightTheme = ThemeData(
     surfaceTintColor: Colors.transparent,
     labelTextStyle: MaterialStatePropertyAll(
       TextStyle(
-        fontSize: 12,
-        fontWeight: FontWeight.w600,
-        color: Colors.grey[700],
+        fontSize: 13,
+        fontWeight: FontWeight.w500,
+        color: Colors.grey[800],
       ),
     ),
   ),
@@ -160,10 +160,10 @@ ThemeData immichDarkTheme = ThemeData(
   primaryColor: immichDarkThemePrimaryColor,
   scaffoldBackgroundColor: immichDarkBackgroundColor,
   hintColor: Colors.grey[600],
-  fontFamily: 'WorkSans',
+  fontFamily: 'Overpass',
   snackBarTheme: SnackBarThemeData(
     contentTextStyle: TextStyle(
-      fontFamily: 'WorkSans',
+      fontFamily: 'Overpass',
       color: immichDarkThemePrimaryColor,
       fontWeight: FontWeight.bold,
     ),
@@ -176,7 +176,7 @@ ThemeData immichDarkTheme = ThemeData(
   ),
   appBarTheme: AppBarTheme(
     titleTextStyle: TextStyle(
-      fontFamily: 'WorkSans',
+      fontFamily: 'Overpass',
       color: immichDarkThemePrimaryColor,
       fontWeight: FontWeight.bold,
       fontSize: 18,
@@ -249,9 +249,9 @@ ThemeData immichDarkTheme = ThemeData(
     surfaceTintColor: Colors.transparent,
     labelTextStyle: MaterialStatePropertyAll(
       TextStyle(
-        fontSize: 12,
-        fontWeight: FontWeight.w600,
-        color: Colors.grey[500],
+        fontSize: 13,
+        fontWeight: FontWeight.w500,
+        color: Colors.grey[300],
       ),
     ),
   ),

mobile/pubspec.yaml

@@ -97,27 +97,28 @@ flutter:
     - assets/
     - assets/i18n/
   fonts:
-    - family: WorkSans
-      fonts:
-        - asset: fonts/WorkSans.ttf
-        - asset: fonts/WorkSans-Italic.ttf
-          style: italic
-        # - asset: fonts/WorkSans-Medium.ttf
-        #   weight: 500
-        # - asset: fonts/WorkSans-SemiBold.ttf
-        #   weight: 600
-        # - asset: fonts/WorkSans-Bold.ttf
-        #   weight: 700
-        # - asset: fonts/WorkSans-ExtraBold.ttf
-        #   weight: 800
-        # - asset: fonts/WorkSans-Black.ttf
-        #   weight: 900
     - family: SnowburstOne
       fonts:
         - asset: fonts/SnowburstOne.ttf
     - family: Inconsolata
       fonts:
         - asset: fonts/Inconsolata-Regular.ttf
+    - family: Overpass
+      fonts:
+        - asset: fonts/overpass/Overpass-Regular.ttf
+          weight: 400
+        - asset: fonts/overpass/Overpass-Italic.ttf
+          style: italic
+        - asset: fonts/overpass/Overpass-Medium.ttf
+          weight: 500
+        - asset: fonts/overpass/Overpass-SemiBold.ttf
+          weight: 600
+        - asset: fonts/overpass/Overpass-Bold.ttf
+          weight: 700
+    - family: OverpassMono
+      fonts:
+        - asset: fonts/overpass/OverpassMono.ttf
+
 flutter_icons:
   image_path_android: "assets/immich-logo-no-outline.png"
   image_path_ios: "assets/immich-logo-no-outline.png"