TW-824: install google fonts to fetch font from http

lib/config/themes.dart

@@ -1,12 +1,13 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:go_router/go_router.dart';
+import 'package:google_fonts/google_fonts.dart';
 import 'package:linagora_design_flutter/colors/linagora_ref_colors.dart';
 import 'package:linagora_design_flutter/colors/linagora_sys_colors.dart';
 
 import 'app_config.dart';
 
-abstract class FluffyThemes {
+abstract class TwakeThemes {
   static const double columnWidth = 360.0;
   static const double iconSize = 24.0;
 
@@ -18,58 +19,53 @@ abstract class FluffyThemes {
   static bool getDisplayNavigationRail(BuildContext context) =>
       !(GoRouterState.of(context).path?.startsWith('/settings') == true);
 
-  static const fallbackTextStyle = TextStyle(
-    fontFamily: 'Inter',
-    fontFamilyFallback: ['Inter'],
-  );
-
   static var fallbackTextTheme = TextTheme(
-    bodyLarge: fallbackTextStyle.copyWith(
+    bodyLarge: GoogleFonts.inter(
       fontWeight: FontWeight.w500,
       letterSpacing: -0.15,
     ),
-    bodyMedium: fallbackTextStyle.copyWith(
+    bodyMedium: GoogleFonts.inter(
       fontWeight: FontWeight.w500,
       letterSpacing: 0.25,
     ),
-    bodySmall: fallbackTextStyle.copyWith(
+    bodySmall: GoogleFonts.inter(
       fontWeight: FontWeight.w500,
       letterSpacing: 0.4,
     ),
-    labelLarge: fallbackTextStyle.copyWith(
+    labelLarge: GoogleFonts.inter(
       fontWeight: FontWeight.w500,
       letterSpacing: 0.1,
     ),
-    labelSmall: fallbackTextStyle.copyWith(
+    labelSmall: GoogleFonts.inter(
       fontWeight: FontWeight.w500,
       letterSpacing: 0.5,
     ),
-    displayLarge: fallbackTextStyle.copyWith(
+    displayLarge: GoogleFonts.inter(
       fontWeight: FontWeight.w700,
     ),
-    displayMedium: fallbackTextStyle.copyWith(
+    displayMedium: GoogleFonts.inter(
       fontWeight: FontWeight.w600,
       letterSpacing: 0.4,
     ),
-    displaySmall: fallbackTextStyle.copyWith(
+    displaySmall: GoogleFonts.inter(
       fontWeight: FontWeight.w600,
       letterSpacing: 0.4,
     ),
-    headlineMedium: fallbackTextStyle.copyWith(
+    headlineMedium: GoogleFonts.inter(
       fontWeight: FontWeight.w600,
     ),
-    headlineSmall: fallbackTextStyle.copyWith(
+    headlineSmall: GoogleFonts.inter(
       fontWeight: FontWeight.w600,
       letterSpacing: 0.4,
     ),
-    titleLarge: fallbackTextStyle.copyWith(
+    titleLarge: GoogleFonts.inter(
       fontWeight: FontWeight.w600,
     ),
-    titleMedium: fallbackTextStyle.copyWith(
+    titleMedium: GoogleFonts.inter(
       fontWeight: FontWeight.w500,
       letterSpacing: 0.15,
     ),
-    titleSmall: fallbackTextStyle.copyWith(
+    titleSmall: GoogleFonts.inter(
       fontWeight: FontWeight.w500,
       letterSpacing: 0.1,
     ),

lib/pages/bootstrap/bootstrap_dialog.dart

@@ -8,6 +8,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:flutter_secure_storage/flutter_secure_storage.dart';
 import 'package:future_loading_dialog/future_loading_dialog.dart';
+import 'package:google_fonts/google_fonts.dart';
 import 'package:matrix/encryption.dart';
 import 'package:matrix/encryption/utils/bootstrap.dart';
 import 'package:matrix/matrix.dart';
@@ -117,7 +118,7 @@ class BootstrapDialogState extends State<BootstrapDialog> {
         body: Center(
           child: ConstrainedBox(
             constraints:
-                const BoxConstraints(maxWidth: FluffyThemes.columnWidth * 1.5),
+                const BoxConstraints(maxWidth: TwakeThemes.columnWidth * 1.5),
             child: ListView(
               padding: const EdgeInsets.all(16.0),
               children: [
@@ -140,7 +141,7 @@ class BootstrapDialogState extends State<BootstrapDialog> {
                   minLines: 2,
                   maxLines: 4,
                   readOnly: true,
-                  style: const TextStyle(fontFamily: 'RobotoMono'),
+                  style: GoogleFonts.robotoMono(),
                   controller: TextEditingController(text: key),
                   decoration: const InputDecoration(
                     contentPadding: EdgeInsets.all(16),
@@ -244,7 +245,7 @@ class BootstrapDialogState extends State<BootstrapDialog> {
             body: Center(
               child: ConstrainedBox(
                 constraints: const BoxConstraints(
-                  maxWidth: FluffyThemes.columnWidth * 1.5,
+                  maxWidth: TwakeThemes.columnWidth * 1.5,
                 ),
                 child: ListView(
                   padding: const EdgeInsets.all(16.0),
@@ -270,7 +271,7 @@ class BootstrapDialogState extends State<BootstrapDialog> {
                           ? null
                           : [AutofillHints.password],
                       controller: _recoveryKeyTextEditingController,
-                      style: const TextStyle(fontFamily: 'RobotoMono'),
+                      style: GoogleFonts.robotoMono(),
                       decoration: InputDecoration(
                         contentPadding: const EdgeInsets.all(16),
                         hintStyle: TextStyle(

lib/pages/chat/chat_emoji_picker.dart

@@ -13,8 +13,8 @@ class ChatEmojiPicker extends StatelessWidget {
       valueListenable: controller.showEmojiPickerNotifier,
       builder: (context, showEmojiPicker, _) {
         return AnimatedContainer(
-          duration: FluffyThemes.animationDuration,
-          curve: FluffyThemes.animationCurve,
+          duration: TwakeThemes.animationDuration,
+          curve: TwakeThemes.animationCurve,
           width: MediaQuery.of(context).size.width,
           height: showEmojiPicker ? MediaQuery.of(context).size.height / 3 : 0,
           child: showEmojiPicker

lib/pages/chat/chat_event_list.dart

@@ -24,7 +24,7 @@ class ChatEventList extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final horizontalPadding = FluffyThemes.isColumnMode(context) ? 8.0 : 0.0;
+    final horizontalPadding = TwakeThemes.isColumnMode(context) ? 8.0 : 0.0;
 
     // create a map of eventId --> index to greatly improve performance of
     // ListView's findChildIndexCallback

lib/pages/chat/chat_view.dart

@@ -131,7 +131,7 @@ class ChatView extends StatelessWidget with MessageContentMixin {
       return const SizedBox.shrink();
     }
 
-    final bottomSheetPadding = FluffyThemes.isColumnMode(context) ? 16.0 : 8.0;
+    final bottomSheetPadding = TwakeThemes.isColumnMode(context) ? 16.0 : 8.0;
 
     return GestureDetector(
       onTapDown: controller.setReadMarker,
@@ -273,7 +273,7 @@ class ChatView extends StatelessWidget with MessageContentMixin {
                               controller.room!.membership == Membership.join)
                             Container(
                               constraints: const BoxConstraints(
-                                maxWidth: FluffyThemes.columnWidth * 2.5,
+                                maxWidth: TwakeThemes.columnWidth * 2.5,
                               ),
                               alignment: Alignment.center,
                               child: controller.room?.isAbandonedDMRoom == true

lib/pages/chat/events/message/message.dart

@@ -653,7 +653,7 @@ class Message extends StatelessWidget {
           ? LinagoraSysColors.material().secondaryContainer
           : Theme.of(context).primaryColor.withAlpha(0),
       constraints:
-          const BoxConstraints(maxWidth: FluffyThemes.columnWidth * 2.5),
+          const BoxConstraints(maxWidth: TwakeThemes.columnWidth * 2.5),
       child: Row(
         mainAxisSize: MainAxisSize.max,
         children: [

lib/pages/chat/reactions_picker.dart

@@ -21,8 +21,8 @@ class ReactionsPicker extends StatelessWidget {
         controller.room!.canSendDefaultMessages &&
         controller.selectedEvents.isNotEmpty;
     return AnimatedContainer(
-      duration: FluffyThemes.animationDuration,
-      curve: FluffyThemes.animationCurve,
+      duration: TwakeThemes.animationDuration,
+      curve: TwakeThemes.animationCurve,
       height: (display) ? 56 : 0,
       child: Material(
         color: Colors.transparent,

lib/pages/chat/reply_display.dart

@@ -16,8 +16,8 @@ class ReplyDisplay extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return AnimatedContainer(
-      duration: FluffyThemes.animationDuration,
-      curve: FluffyThemes.animationCurve,
+      duration: TwakeThemes.animationDuration,
+      curve: TwakeThemes.animationCurve,
       height: controller.editEvent != null || controller.replyEvent != null
           ? 56
           : 0,

lib/pages/chat/typing_indicators.dart

@@ -23,11 +23,11 @@ class TypingIndicators extends StatelessWidget {
       alignment: Alignment.center,
       child: AnimatedContainer(
         constraints:
-            const BoxConstraints(maxWidth: FluffyThemes.columnWidth * 2.5),
+            const BoxConstraints(maxWidth: TwakeThemes.columnWidth * 2.5),
         height:
             typingUsers.isEmpty ? 0 : AvatarStyle.defaultSize + bottomPadding,
-        duration: FluffyThemes.animationDuration,
-        curve: FluffyThemes.animationCurve,
+        duration: TwakeThemes.animationDuration,
+        curve: TwakeThemes.animationCurve,
         alignment: controller.timeline!.events.isNotEmpty &&
                 controller.timeline!.events.first.senderId ==
                     Matrix.of(context).client.userID

lib/pages/chat_draft/draft_chat_view.dart

@@ -227,8 +227,8 @@ class DraftChatView extends StatelessWidget {
                             DraftChatViewStyle.containerMaxWidthConstraints,
                         alignment: Alignment.center,
                         child: AnimatedContainer(
-                          duration: FluffyThemes.animationDuration,
-                          curve: FluffyThemes.animationCurve,
+                          duration: TwakeThemes.animationDuration,
+                          curve: TwakeThemes.animationCurve,
                           width: MediaQuery.of(context).size.width,
                           height: DraftChatViewStyle.animatedContainerHeight(
                             context,

lib/pages/chat_draft/draft_chat_view_style.dart

@@ -11,7 +11,7 @@ class DraftChatViewStyle {
       responsive.isMobile(context) ? 56 : 80;
 
   static BoxConstraints get containerMaxWidthConstraints =>
-      const BoxConstraints(maxWidth: FluffyThemes.columnWidth * 2.5);
+      const BoxConstraints(maxWidth: TwakeThemes.columnWidth * 2.5);
 
   static double animatedContainerHeight(
     BuildContext context,

lib/pages/chat_encryption_settings/chat_encryption_settings_view.dart

@@ -2,6 +2,7 @@ import 'package:fluffychat/utils/url_launcher.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:go_router/go_router.dart';
+import 'package:google_fonts/google_fonts.dart';
 import 'package:matrix/matrix.dart';
 import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/pages/chat_encryption_settings/chat_encryption_settings.dart';
@@ -168,7 +169,7 @@ class ChatEncryptionSettingsView extends StatelessWidget {
                           deviceKeys[i].ed25519Key?.beautified ??
                               L10n.of(context)!.unknownEncryptionAlgorithm,
                           style: TextStyle(
-                            fontFamily: 'RobotoMono',
+                            fontFamily: GoogleFonts.robotoMono().fontFamily,
                             color: Theme.of(context).colorScheme.secondary,
                           ),
                         ),

lib/pages/chat_list/chat_list_body_view.dart

@@ -25,8 +25,8 @@ class ChatListBodyView extends StatelessWidget {
     return Row(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        if (FluffyThemes.isColumnMode(context) &&
-            FluffyThemes.getDisplayNavigationRail(context)) ...[
+        if (TwakeThemes.isColumnMode(context) &&
+            TwakeThemes.getDisplayNavigationRail(context)) ...[
           Container(
             color: Theme.of(context).dividerColor,
             width: 1,
@@ -137,8 +137,8 @@ class ChatListBodyView extends StatelessWidget {
                             height: ChatListBodyViewStyle.heightIsTorBrowser(
                               controller.isTorBrowser,
                             ),
-                            duration: FluffyThemes.animationDuration,
-                            curve: FluffyThemes.animationCurve,
+                            duration: TwakeThemes.animationDuration,
+                            curve: TwakeThemes.animationCurve,
                             clipBehavior: Clip.hardEdge,
                             decoration: const BoxDecoration(),
                             child: Material(

lib/pages/chat_list/chat_list_item_subtitle.dart

@@ -64,8 +64,8 @@ class ChatListItemSubtitle extends StatelessWidget with ChatListItemMixin {
                 .getAllMentionedUserIdsFromMessage(room)
                 .contains(Matrix.of(context).client.userID);
             return AnimatedContainer(
-              duration: FluffyThemes.animationDuration,
-              curve: FluffyThemes.animationCurve,
+              duration: TwakeThemes.animationDuration,
+              curve: TwakeThemes.animationCurve,
               padding: const EdgeInsets.only(bottom: 4),
               height: ChatListItemStyle.mentionIconWidth,
               width: isMentionned && room.isUnreadOrInvited
@@ -96,8 +96,8 @@ class ChatListItemSubtitle extends StatelessWidget with ChatListItemMixin {
         ),
         const SizedBox(width: 4),
         AnimatedContainer(
-          duration: FluffyThemes.animationDuration,
-          curve: FluffyThemes.animationCurve,
+          duration: TwakeThemes.animationDuration,
+          curve: TwakeThemes.animationCurve,
           padding: const EdgeInsets.symmetric(horizontal: 7),
           height: unreadBadgeSize,
           width: ChatListItemStyle.notificationBadgeSize(

lib/pages/chat_list/navi_rail_item.dart

@@ -32,8 +32,8 @@ class NaviRailItem extends StatelessWidget {
             left: 0,
             child: AnimatedContainer(
               width: isSelected ? 4 : 0,
-              duration: FluffyThemes.animationDuration,
-              curve: FluffyThemes.animationCurve,
+              duration: TwakeThemes.animationDuration,
+              curve: TwakeThemes.animationCurve,
               decoration: BoxDecoration(
                 color: Theme.of(context).colorScheme.primary,
                 borderRadius: const BorderRadius.only(

lib/pages/dialer/pip/pip_view.dart

@@ -44,11 +44,11 @@ class PIPViewState extends State<PIPView> with TickerProviderStateMixin {
     super.initState();
     _corner = widget.initialCorner;
     _toggleFloatingAnimationController = AnimationController(
-      duration: FluffyThemes.animationDuration,
+      duration: TwakeThemes.animationDuration,
       vsync: this,
     );
     _dragAnimationController = AnimationController(
-      duration: FluffyThemes.animationDuration,
+      duration: TwakeThemes.animationDuration,
       vsync: this,
     );
   }

lib/pages/homeserver_picker/homeserver_picker_view.dart

@@ -43,8 +43,8 @@ class HomeserverPickerView extends StatelessWidget {
             // usually forced to logout as TOR browser is non-persistent
             AnimatedContainer(
               height: controller.isTorBrowser ? 64 : 0,
-              duration: FluffyThemes.animationDuration,
-              curve: FluffyThemes.animationCurve,
+              duration: TwakeThemes.animationDuration,
+              curve: TwakeThemes.animationCurve,
               clipBehavior: Clip.hardEdge,
               decoration: const BoxDecoration(),
               child: Material(

lib/pages/story/story_view.dart

@@ -251,8 +251,8 @@ class StoryView extends StatelessWidget {
                 onHorizontalDragStart: controller.hold,
                 onHorizontalDragEnd: controller.unhold,
                 child: AnimatedContainer(
-                  duration: FluffyThemes.animationDuration,
-                  curve: FluffyThemes.animationCurve,
+                  duration: TwakeThemes.animationDuration,
+                  curve: TwakeThemes.animationCurve,
                   padding: const EdgeInsets.symmetric(
                     horizontal: 16.0,
                     vertical: 80,

lib/utils/adaptive_bottom_sheet.dart

@@ -18,7 +18,7 @@ Future<T?> showAdaptiveBottomSheet<T>({
       isScrollControlled: isScrollControlled,
       constraints: BoxConstraints(
         maxHeight: MediaQuery.of(context).size.height - 128,
-        maxWidth: FluffyThemes.columnWidth * 1.5,
+        maxWidth: TwakeThemes.columnWidth * 1.5,
       ),
       clipBehavior: Clip.hardEdge,
       shape: const RoundedRectangleBorder(

lib/widgets/connection_status_header.dart

@@ -43,8 +43,8 @@ class ConnectionStatusHeaderState extends State<ConnectionStatusHeader> {
         client.prevBatch != null;
 
     return AnimatedContainer(
-      duration: FluffyThemes.animationDuration,
-      curve: FluffyThemes.animationCurve,
+      duration: TwakeThemes.animationDuration,
+      curve: TwakeThemes.animationCurve,
       height: hide ? 0 : 36,
       clipBehavior: Clip.hardEdge,
       decoration: BoxDecoration(color: Theme.of(context).colorScheme.surface),

lib/widgets/layouts/login_scaffold.dart

@@ -14,7 +14,7 @@ class LoginScaffold extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final isMobileMode = !FluffyThemes.isColumnMode(context);
+    final isMobileMode = !TwakeThemes.isColumnMode(context);
     final scaffold = Scaffold(
       backgroundColor: isMobileMode ? null : Colors.transparent,
       appBar: appBar == null

lib/widgets/lock_screen.dart

@@ -25,8 +25,8 @@ class LockScreenState extends State<LockScreen> {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
-      theme: FluffyThemes.buildTheme(Brightness.light),
-      darkTheme: FluffyThemes.buildTheme(Brightness.dark),
+      theme: TwakeThemes.buildTheme(Brightness.light),
+      darkTheme: TwakeThemes.buildTheme(Brightness.dark),
       localizationsDelegates: L10n.localizationsDelegates,
       supportedLocales: L10n.supportedLocales,
       home: Builder(

lib/widgets/mxc_image.dart

@@ -50,7 +50,7 @@ class MxcImage extends StatefulWidget {
     this.animated = false,
     this.animationDuration = const Duration(milliseconds: 500),
     this.retryDuration = const Duration(seconds: 2),
-    this.animationCurve = FluffyThemes.animationCurve,
+    this.animationCurve = TwakeThemes.animationCurve,
     this.thumbnailMethod = ThumbnailMethod.scale,
     this.cacheKey,
     this.rounded = false,

lib/widgets/twake_app.dart

@@ -67,8 +67,8 @@ class TwakeAppState extends State<TwakeApp> {
         title: AppConfig.applicationName,
         debugShowCheckedModeBanner: false,
         themeMode: themeMode,
-        theme: FluffyThemes.buildTheme(Brightness.light, primaryColor),
-        darkTheme: FluffyThemes.buildTheme(Brightness.light, primaryColor),
+        theme: TwakeThemes.buildTheme(Brightness.light, primaryColor),
+        darkTheme: TwakeThemes.buildTheme(Brightness.light, primaryColor),
         scrollBehavior: CustomScrollBehavior(),
         localizationsDelegates: L10n.localizationsDelegates,
         supportedLocales: L10n.supportedLocales,

pubspec.lock

@@ -1163,6 +1163,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "10.0.0"
+  google_fonts:
+    dependency: "direct main"
+    description:
+      name: google_fonts
+      sha256: "6b6f10f0ce3c42f6552d1c70d2c28d764cf22bb487f50f66cca31dcd5194f4d6"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.0.4"
   graphs:
     dependency: transitive
     description:

pubspec.yaml

@@ -154,6 +154,7 @@ dependencies:
   video_player: ^2.7.2
   js: ^0.6.7
   super_clipboard: ^0.6.4
+  google_fonts: ^4.0.4
 dev_dependencies:
   build_runner: ^2.3.3
   dart_code_metrics: ^5.7.3
@@ -193,38 +194,7 @@ flutter:
     - assets/sounds/
     - assets/js/
     - assets/js/package/
-
-  fonts:
-    - family: Roboto
-      fonts:
-        - asset: fonts/Roboto/Roboto-Regular.ttf
-        - asset: fonts/Roboto/Roboto-Italic.ttf
-          style: italic
-        - asset: fonts/Roboto/Roboto-Bold.ttf
-          weight: 700
-    - family: RobotoMono
-      fonts:
-        - asset: fonts/Roboto/RobotoMono-Regular.ttf
-    - family: Inter
-      fonts:
-        - asset: fonts/Inter/Inter-Thin.ttf
-          weight: 100
-        - asset: fonts/Inter/Inter-ExtraLight.ttf
-          weight: 200
-        - asset: fonts/Inter/Inter-Light.ttf
-          weight: 300
-        - asset: fonts/Inter/Inter-Regular.ttf
-          weight: 400
-        - asset: fonts/Inter/Inter-Medium.ttf
-          weight: 500
-        - asset: fonts/Inter/Inter-SemiBold.ttf
-          weight: 600
-        - asset: fonts/Inter/Inter-Bold.ttf
-          weight: 700
-        - asset: fonts/Inter/Inter-ExtraBold.ttf
-          weight: 800
-        - asset: fonts/Inter/Inter-Black.ttf
-          weight: 900
+    - assets/google_fonts/
 
 msix_config:
   display_name: Twake

web/index.html

@@ -31,7 +31,7 @@
 
     <title>Twake</title>
     <link rel="manifest" href="manifest.json" />
-    <link rel="stylesheet" type="text/css" href="splash/style.css" />
+    <link rel="stylesheet" type="text/css" href="style.css" />
     <meta
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
       name="viewport"