Merge pull request #524 from ente-io/text_style

[Design] Add base Text styles

lib/theme/text_style.dart

@@ -0,0 +1,115 @@
+import 'package:flutter/material.dart';
+
+const FontWeight regularWeight = FontWeight.w500;
+const FontWeight boldWeight = FontWeight.w600;
+const String _fontFamily = 'Inter';
+
+const TextStyle h1 = TextStyle(
+  fontSize: 48,
+  height: 48 / 28,
+  fontWeight: regularWeight,
+  fontFamily: _fontFamily,
+);
+const TextStyle h2 = TextStyle(
+  fontSize: 32,
+  height: 39 / 32.0,
+  fontWeight: regularWeight,
+  fontFamily: _fontFamily,
+);
+const TextStyle h3 = TextStyle(
+  fontSize: 24,
+  height: 29 / 24.0,
+  fontWeight: regularWeight,
+  fontFamily: _fontFamily,
+);
+const TextStyle large = TextStyle(
+  fontSize: 18,
+  height: 22 / 18.0,
+  fontWeight: regularWeight,
+  fontFamily: _fontFamily,
+);
+const TextStyle body = TextStyle(
+  fontSize: 16,
+  height: 19.4 / 16.0,
+  fontWeight: regularWeight,
+  fontFamily: _fontFamily,
+);
+const TextStyle small = TextStyle(
+  fontSize: 14,
+  height: 17 / 14.0,
+  fontWeight: regularWeight,
+  fontFamily: _fontFamily,
+);
+const TextStyle mini = TextStyle(
+  fontSize: 12,
+  height: 15 / 12.0,
+  fontWeight: regularWeight,
+  fontFamily: _fontFamily,
+);
+const TextStyle tiny = TextStyle(
+  fontSize: 10,
+  height: 12 / 10.0,
+  fontWeight: regularWeight,
+  fontFamily: _fontFamily,
+);
+
+class EnteTextStyle {
+  final TextStyle? h1;
+  final TextStyle? h1Bold;
+  final TextStyle? h2;
+  final TextStyle? h2Bold;
+  final TextStyle? h3;
+  final TextStyle? h3Bold;
+  final TextStyle? large;
+  final TextStyle? largeBold;
+  final TextStyle? body;
+  final TextStyle? bodyBold;
+  final TextStyle? small;
+  final TextStyle? smallBold;
+  final TextStyle? mini;
+  final TextStyle? miniBold;
+  final TextStyle? tiny;
+  final TextStyle? tinyBold;
+
+  const EnteTextStyle({
+    this.h1,
+    this.h1Bold,
+    this.h2,
+    this.h2Bold,
+    this.h3,
+    this.h3Bold,
+    this.large,
+    this.largeBold,
+    this.body,
+    this.bodyBold,
+    this.small,
+    this.smallBold,
+    this.mini,
+    this.miniBold,
+    this.tiny,
+    this.tinyBold,
+  });
+}
+
+EnteTextStyle lightTextStyle = _buildEnteTextStyle(Colors.white);
+EnteTextStyle darkTextStyle = _buildEnteTextStyle(Colors.white);
+
+EnteTextStyle _buildEnteTextStyle(Color color) {
+  return EnteTextStyle(
+    h1: h1.copyWith(color: color),
+    h1Bold: h1.copyWith(color: color, fontWeight: boldWeight),
+    h2: h2.copyWith(color: color),
+    h3: h3.copyWith(color: color),
+    h3Bold: h3.copyWith(color: color, fontWeight: boldWeight),
+    large: large.copyWith(color: color),
+    largeBold: large.copyWith(color: color, fontWeight: boldWeight),
+    body: body.copyWith(color: color),
+    bodyBold: body.copyWith(color: color, fontWeight: boldWeight),
+    small: small.copyWith(color: color),
+    smallBold: small.copyWith(color: color, fontWeight: boldWeight),
+    mini: mini.copyWith(color: color),
+    miniBold: mini.copyWith(color: color, fontWeight: boldWeight),
+    tiny: tiny.copyWith(color: color),
+    tinyBold: tiny.copyWith(color: color, fontWeight: boldWeight),
+  );
+}

lib/ui/account/delete_account_page.dart

@@ -75,7 +75,6 @@ class DeleteAccountPage extends StatelessWidget {
               ),
               GradientButton(
                 text: "Yes, send feedback",
-                paddingValue: 4,
                 iconData: Icons.check,
                 onTap: () async {
                   await sendEmail(

lib/ui/account/verify_recovery_page.dart

@@ -201,7 +201,6 @@ class _VerifyRecoveryPageState extends State<VerifyRecoveryPage> {
                               GradientButton(
                                 onTap: _verifyRecoveryKey,
                                 text: "Verify",
-                                paddingValue: 6,
                                 iconData: Icons.shield_outlined,
                               ),
                               const SizedBox(height: 8),

lib/ui/common/gradient_button.dart

@@ -5,17 +5,18 @@ import 'package:flutter/material.dart';
 class GradientButton extends StatelessWidget {
   final List<Color> linearGradientColors;
   final Function onTap;
-  final Widget child;
+
   // text is ignored if child is specified
   final String text;
+
   // nullable
   final IconData iconData;
+
   // padding between the text and icon
   final double paddingValue;
 
   const GradientButton({
     Key key,
-    this.child,
     this.linearGradientColors = const [
       Color(0xFF2CD267),
       Color(0xFF1DB954),
@@ -29,9 +30,7 @@ class GradientButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     Widget buttonContent;
-    if (child != null) {
-      buttonContent = child;
-    } else if (iconData == null) {
+    if (iconData == null) {
       buttonContent = Text(
         text,
         style: const TextStyle(
@@ -48,9 +47,10 @@ class GradientButton extends StatelessWidget {
         children: [
           Icon(
             iconData,
+            size: 20,
             color: Colors.white,
           ),
-          Padding(padding: EdgeInsets.all(paddingValue)),
+          const Padding(padding: EdgeInsets.symmetric(horizontal: 6)),
           Text(
             text,
             style: const TextStyle(

lib/ui/components/notification_warning_widget.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:photos/ente_theme_data.dart';
 import 'package:photos/theme/colors.dart';
+import 'package:photos/theme/text_style.dart';
 
 class NotificationWarningWidget extends StatelessWidget {
   final IconData warningIcon;
@@ -22,7 +23,7 @@ class NotificationWarningWidget extends StatelessWidget {
       child: GestureDetector(
         onTap: onTap,
         child: Padding(
-          padding: const EdgeInsets.all(10.0),
+          padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12),
           child: Container(
             decoration: BoxDecoration(
               borderRadius: const BorderRadius.all(
@@ -40,18 +41,18 @@ class NotificationWarningWidget extends StatelessWidget {
                     size: 36,
                     color: Colors.white,
                   ),
-                  const SizedBox(width: 10),
+                  const SizedBox(width: 12),
                   Flexible(
                     child: Text(
                       text,
-                      style: const TextStyle(height: 1.4, color: Colors.white),
+                      style: darkTextStyle.bodyBold,
                       textAlign: TextAlign.left,
                     ),
                   ),
-                  const SizedBox(width: 10),
+                  const SizedBox(width: 12),
                   ClipOval(
                     child: Material(
-                      color: Theme.of(context).colorScheme.fillFaint,
+                      color: fillFaintDark,
                       child: InkWell(
                         splashColor: Colors.red, // Splash color
                         onTap: onTap,

lib/ui/create_collection_page.dart

@@ -95,7 +95,6 @@ class _CreateCollectionPageState extends State<CreateCollectionPage> {
                       _showNameAlbumDialog();
                     },
                     iconData: Icons.create_new_folder_outlined,
-                    paddingValue: 6,
                     text: "To a new album",
                   ),
                 ),

lib/ui/shared_collections_gallery.dart

@@ -191,7 +191,6 @@ class _SharedCollectionGalleryState extends State<SharedCollectionGallery>
                 shareText("Check out https://ente.io");
               },
               iconData: Icons.outgoing_mail,
-              paddingValue: 2,
               text: "Invite",
             ),
           ),
@@ -227,7 +226,6 @@ class _SharedCollectionGalleryState extends State<SharedCollectionGallery>
                 );
               },
               iconData: Icons.person_add,
-              paddingValue: 2,
               text: "Share",
             ),
           ),

lib/ui/status_bar_widget.dart

@@ -113,7 +113,7 @@ class _StatusBarWidgetState extends State<StatusBarWidget> {
             ? NotificationWarningWidget(
                 warningIcon: Icons.gpp_maybe,
                 actionIcon: Icons.arrow_forward,
-                text: "Please ensure that you have your 24 word recovery key",
+                text: "Please ensure you have your 24 word recovery key",
                 onTap: () async => {
                   await routeToPage(
                     context,

lib/ui/tools/lock_screen.dart

@@ -42,7 +42,6 @@ class _LockScreenState extends State<LockScreen> {
                   child: GradientButton(
                     text: "Unlock",
                     iconData: Icons.lock_open_outlined,
-                    paddingValue: 6,
                     onTap: () async {
                       _showLockScreen();
                     },

lib/ui/viewer/gallery/gallery_footer_widget.dart

@@ -27,7 +27,6 @@ class GalleryFooterWidget extends StatelessWidget {
             );
           }
         },
-        paddingValue: 6,
         text: "Preserve more",
         iconData: Icons.cloud_upload_outlined,
       ),