UI fixes 221223 (#652)

* Add foreground service media playback

Required for android 14 (audio library)

* Change serif font

* Update serif font family

* Update serif font

* Update stat tiles style

* Change shortcuts size

* Fix quote layout

* Fix header layout

* Update home layout

android/app/src/main/AndroidManifest.xml

@@ -6,6 +6,7 @@
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
     <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
+    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK"/>
     <uses-permission android:name="android.permission.WAKE_LOCK" />
     <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
     <uses-permission android:name="android.permission.ACCESS_NOTIFICATION_POLICY" />

lib/constants/styles/widget_styles.dart

@@ -3,7 +3,7 @@ import 'package:flutter/material.dart';
 
 final String DmMono = 'DM Mono';
 final String DmSans = 'DM Sans';
-const String DmSerif = 'DM Serif';
+const String SourceSerif = 'Source Serif';
 const String materialIcons = 'MaterialIcons';
 const padding12 = 12.0;
 const padding16 = 16.0;

lib/views/auth/join_email_view.dart

@@ -85,7 +85,7 @@ class _JoinEmailViewState extends ConsumerState<JoinEmailView> {
                         StringConstants.whatsYourEmail,
                         style: textTheme.headlineMedium?.copyWith(
                           color: ColorConstants.walterWhite,
-                          fontFamily: DmSerif,
+                          fontFamily: SourceSerif,
                           height: 1.2,
                           fontSize: 24,
                         ),

lib/views/auth/join_intro_view.dart

@@ -50,7 +50,7 @@ class JoinIntroView extends ConsumerWidget {
                           StringConstants.joinTheMeditoFamily,
                           style: textTheme.headlineMedium?.copyWith(
                             color: ColorConstants.walterWhite,
-                            fontFamily: DmSerif,
+                            fontFamily: SourceSerif,
                             height: 1.2,
                             fontSize: 24,
                           ),

lib/views/auth/join_verify_OTP_view.dart

@@ -85,7 +85,7 @@ class _JoinVerifyOTPViewState extends ConsumerState<JoinVerifyOTPView> {
                         StringConstants.verifyYourAccount,
                         style: textTheme.headlineMedium?.copyWith(
                           color: ColorConstants.walterWhite,
-                          fontFamily: DmSerif,
+                          fontFamily: SourceSerif,
                           height: 1.2,
                           fontSize: 24,
                         ),
@@ -123,7 +123,7 @@ class _JoinVerifyOTPViewState extends ConsumerState<JoinVerifyOTPView> {
                         ),
                         textStyle: textTheme.displayMedium?.copyWith(
                           color: ColorConstants.walterWhite,
-                          fontFamily: DmSerif,
+                          fontFamily: SourceSerif,
                           fontSize: 24,
                         ),
                         enableActiveFill: true,

lib/views/auth/join_welcome_view.dart

@@ -49,7 +49,7 @@ class JoinWelcomeView extends ConsumerWidget {
                             StringConstants.thanksForJoining,
                             style: textTheme.headlineMedium?.copyWith(
                               color: ColorConstants.walterWhite,
-                              fontFamily: DmSerif,
+                              fontFamily: SourceSerif,
                               height: 1.2,
                               fontSize: 24,
                             ),

lib/views/end_screen/widgets/donation_widget.dart

@@ -27,7 +27,7 @@ class DonationWidget extends ConsumerWidget {
         children: [
           Text(
             donationModel.title ?? '',
-            style: bodyLarge?.copyWith(fontFamily: DmSerif, fontSize: 22),
+            style: bodyLarge?.copyWith(fontFamily: SourceSerif, fontSize: 22),
             textAlign: TextAlign.center,
           ),
           height8,

lib/views/end_screen/widgets/feedback_widget.dart

@@ -61,7 +61,7 @@ class _FeedbackWidgetState extends ConsumerState<FeedbackWidget> {
         children: [
           Text(
             widget.feedbackModel.title ?? '',
-            style: bodyLarge?.copyWith(fontFamily: DmSerif, fontSize: 22),
+            style: bodyLarge?.copyWith(fontFamily: SourceSerif, fontSize: 22),
             textAlign: TextAlign.center,
           ),
           height8,

lib/views/home/home_view.dart

@@ -60,13 +60,13 @@ class _HomeViewState extends ConsumerState<HomeView>
                       child: Column(
                         children: [
                           HeaderAndAnnouncementWidget(),
-                          height16,
+                          height20,
                           ShortcutsWidget(),
-                          height24,
+                          height20,
                           EditorialWidget(),
-                          height24,
+                          height20,
                           QuoteWidget(),
-                          height24,
+                          height20,
                           TilesWidget(),
                           SizedBox(
                             height: 140,
@@ -91,7 +91,7 @@ class _HomeViewState extends ConsumerState<HomeView>
 
   FloatingActionButton _buildFloatingButton(BuildContext context) {
     return FloatingActionButton.extended(
-      backgroundColor: ColorConstants.onyx,
+      backgroundColor: ColorConstants.lightPurple,
       onPressed: () {
         context.push(RouteConstants.searchPath);
       },
@@ -100,8 +100,10 @@ class _HomeViewState extends ConsumerState<HomeView>
         StringConstants.explore,
         style: TextStyle(
           color: ColorConstants.walterWhite,
-          fontFamily: DmSerif,
+          fontFamily: SourceSerif,
           fontSize: 20,
+          fontWeight: FontWeight.w700,
+
         ),
       ),
     );

lib/views/home/widgets/editorial/editorial_widget.dart

@@ -33,7 +33,7 @@ class EditorialWidget extends ConsumerWidget {
 
   Padding _buildMain(BuildContext context, EditorialModel data) {
     var titleStyle = Theme.of(context).textTheme.headlineSmall?.copyWith(
-          fontFamily: DmSerif,
+          fontFamily: SourceSerif,
           color: ColorConstants.walterWhite,
           fontSize: 24,
         );

lib/views/home/widgets/header/home_header_widget.dart

@@ -18,14 +18,18 @@ class HomeHeaderWidget extends ConsumerWidget implements PreferredSizeWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     return SizedBox(
-      height: 56,
+      height: 72,
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        crossAxisAlignment: CrossAxisAlignment.end,
         children: [
           _welcomeWidget(context),
           Row(
             children: [
-              _menuWidget(context),
+              Padding(
+                padding: EdgeInsets.only(top: 34), // Add top padding
+                child: _menuWidget(context),
+              ),
             ],
           ),
         ],
@@ -60,7 +64,8 @@ class HomeHeaderWidget extends ConsumerWidget implements PreferredSizeWidget {
                 color: ColorConstants.walterWhite,
                 height: 0,
                 fontSize: 28,
-                fontFamily: DmSerif,
+                fontWeight: FontWeight.w700,
+                fontFamily: SourceSerif,
               ),
         ),
       ),
@@ -100,5 +105,5 @@ class HomeHeaderWidget extends ConsumerWidget implements PreferredSizeWidget {
   }
 
   @override
-  Size get preferredSize => Size.fromHeight(56.0);
+  Size get preferredSize => Size.fromHeight(72.0);
 }

lib/views/home/widgets/quote/quote_widget.dart

@@ -12,8 +12,11 @@ class QuoteWidget extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     var response = ref.watch(fetchQuoteProvider);
     var fontStyle = Theme.of(context).textTheme.bodyMedium?.copyWith(
-          fontFamily: DmSerif,
-          color: ColorConstants.walterWhite,
+      fontFamily: SourceSerif,
+      fontWeight: FontWeight.w500,
+      fontSize: fontSize16,
+      height: 1.4,
+      color: ColorConstants.walterWhite,
         );
 
     return response.when(
@@ -21,6 +24,7 @@ class QuoteWidget extends ConsumerWidget {
       skipLoadingOnReload: true,
       data: (data) {
         return Container(
+          width: double.infinity,
           decoration: BoxDecoration(
             borderRadius: BorderRadius.circular(14),
             color: ColorConstants.onyx,
@@ -34,6 +38,7 @@ class QuoteWidget extends ConsumerWidget {
                 style: fontStyle,
                 textAlign: TextAlign.center,
               ),
+              height4,
               Text(
                 '— ${data.author}',
                 style: fontStyle,

lib/views/home/widgets/shortcuts/shortcuts_items_widget.dart

@@ -75,8 +75,8 @@ class _ShortcutsItemsWidgetState extends ConsumerState<ShortcutsItemsWidget> {
   @override
   Widget build(BuildContext context) {
     return ReorderableWrap(
-      spacing: 8.0,
-      runSpacing: 8.0,
+      spacing: 10.0,
+      runSpacing: 10.0,
       padding: EdgeInsets.zero,
       maxMainAxisCount: 2,
       minMainAxisCount: 2,
@@ -87,7 +87,7 @@ class _ShortcutsItemsWidgetState extends ConsumerState<ShortcutsItemsWidget> {
 
   List<Widget> _getShortcutsItemWidgetList() {
     var size = MediaQuery.of(context).size;
-    final containerHeight = 48.0;
+    final containerHeight = 56.0;
     final containerWidth = (size.width / 2) - (padding20 + 2);
 
     return data.shortcuts

lib/views/home/widgets/tiles/tiles_widget.dart

@@ -29,13 +29,14 @@ class TilesWidget extends ConsumerWidget {
   }
 
   Padding _buildTiles(
-    WidgetRef ref,
-    List<TilesModel> data,
-  ) {
+      WidgetRef ref,
+      List<TilesModel> data,
+      ) {
     return Padding(
       padding: const EdgeInsets.only(left: 4, right: padding20),
       child: Row(
-        mainAxisAlignment: MainAxisAlignment.center,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisAlignment: MainAxisAlignment.start,
         children: data.map((e) {
           var isFirstItem = data[0] == e;
 
@@ -46,13 +47,22 @@ class TilesWidget extends ConsumerWidget {
               ),
               child: LayoutBuilder(
                 builder: (context, constraints) {
-                  var fontSize = _getFontSize(constraints);
-                  var fontStyle =
-                      Theme.of(context).textTheme.bodyMedium?.copyWith(
-                            fontFamily: DmSerif,
-                            color: ColorConstants.walterWhite,
-                            fontSize: fontSize,
-                          );
+
+                  var titleFontStyle =
+                  Theme.of(context).textTheme.bodyMedium?.copyWith(
+                    fontFamily: DmMono,
+                    color: ColorConstants.walterWhite,
+                    fontSize: 18,
+                    fontWeight: FontWeight.w600,
+                  );
+
+                  var subtitleFontStyle =
+                  Theme.of(context).textTheme.bodyMedium?.copyWith(
+                    fontFamily: DmSans,
+                    color: ColorConstants.walterWhite,
+                    fontSize: 14,
+                    fontWeight: FontWeight.w500,
+                  );
 
                   return InkWell(
                     onTap: isFirstItem ? () => _onTapTile(context, ref) : null,
@@ -77,12 +87,12 @@ class TilesWidget extends ConsumerWidget {
                           height8,
                           Text(
                             e.title,
-                            style: fontStyle,
+                            style: titleFontStyle,
                           ),
                           height4,
                           Text(
                             e.subtitle,
-                            style: fontStyle,
+                            style: subtitleFontStyle,
                           ),
                         ],
                       ),
@@ -97,16 +107,6 @@ class TilesWidget extends ConsumerWidget {
     );
   }
 
-  double _getFontSize(BoxConstraints constraints) {
-    final width = constraints.maxWidth;
-    var fontSize = fontSize16;
-    if (width <= smallScreenWidth) {
-      fontSize = fontSize14;
-    }
-
-    return fontSize;
-  }
-
   void _onTapTile(BuildContext context, WidgetRef ref) {
     ref.invalidate(remoteStatsProvider);
     ref.read(remoteStatsProvider);

lib/views/notifications/notification_permission_view.dart

@@ -118,7 +118,7 @@ class _NotificationPermissionViewState
             StringConstants.allowNotificationsTitle,
             style: textTheme.headlineMedium?.copyWith(
               color: ColorConstants.walterWhite,
-              fontFamily: DmSerif,
+              fontFamily: SourceSerif,
               height: 1.2,
               fontSize: 24,
             ),

lib/views/player/widgets/artist_title_widget.dart

@@ -42,7 +42,7 @@ class ArtistTitleWidget extends ConsumerWidget {
       child: Marquee(
         text: trackTitle,
         style: Theme.of(context).primaryTextTheme.headlineMedium?.copyWith(
-              fontFamily: DmSerif,
+              fontFamily: SourceSerif,
               color: ColorConstants.walterWhite,
               fontSize: trackTitleFontSize,
               letterSpacing: 0.2,

lib/views/track/track_view.dart

@@ -312,7 +312,7 @@ class _TrackViewState extends ConsumerState<TrackView>
     return Text(
       title,
       style: Theme.of(context).primaryTextTheme.titleLarge?.copyWith(
-            fontFamily: DmSerif,
+            fontFamily: SourceSerif,
             color: ColorConstants.walterWhite,
             letterSpacing: 0.2,
             fontSize: 24,

lib/widgets/errors/medito_error_widget.dart

@@ -26,7 +26,7 @@ class MeditoErrorWidget extends StatelessWidget {
     var textStyle = Theme.of(context).textTheme.headlineSmall?.copyWith(
           fontSize: 16,
           color: ColorConstants.walterWhite,
-          fontFamily: DmSerif,
+          fontFamily: SourceSerif,
         );
     if (isScaffold) {
       return Scaffold(

lib/widgets/headers/medito_app_bar_large.dart

@@ -70,8 +70,9 @@ class _MeditoAppBarLargeState extends State<MeditoAppBarLarge> {
     return Text(
       title,
       style: Theme.of(context).primaryTextTheme.titleLarge?.copyWith(
-            fontFamily: DmSerif,
-            color: ColorConstants.walterWhite,
+            fontFamily: SourceSerif,
+        fontWeight: FontWeight.w700,
+        color: ColorConstants.walterWhite,
           ),
     );
   }

lib/widgets/pack_card_widget.dart

@@ -59,7 +59,7 @@ class PackCardWidget extends StatelessWidget {
     return Text(
       '$title',
       style: textTheme.displayLarge?.copyWith(
-        fontFamily: DmSerif,
+        fontFamily: SourceSerif,
         height: 0,
       ),
     );

pubspec.yaml

@@ -87,16 +87,16 @@ flutter:
     - .staging.env
     - assets/images/
   fonts:
-
-    - family: DM Serif
+    - family: Source Serif
       fonts:
-        - asset: assets/fonts/dm-serif/DMSerifDisplay-Regular.ttf
-
+        - asset: assets/fonts/source-serif/SourceSerif4-Regular.ttf
+        - asset: assets/fonts/source-serif/SourceSerif4-Medium.ttf
+        - asset: assets/fonts/source-serif/SourceSerif4-SemiBold.ttf
+        - asset: assets/fonts/source-serif/SourceSerif4-Bold.ttf
     - family: DM Mono
       fonts:
         - asset: assets/fonts/dm-mono/DMMono-Medium.ttf
         - asset: assets/fonts/dm-mono/DMMono-Regular.ttf
-
     - family: DM Sans
       fonts:
         - asset: assets/fonts/dm-sans/DMSans-Bold.ttf