theme: more refactoring

lib/app.dart

@@ -9,6 +9,7 @@ import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
 import 'package:logging/logging.dart';
 import 'package:photos/core/network.dart';
+import 'package:photos/ente_theme_data.dart';
 import 'package:photos/l10n/l10n.dart';
 import 'package:photos/services/app_lifecycle_service.dart';
 import 'package:photos/services/sync_service.dart';
@@ -24,28 +25,14 @@ final lightThemeData = ThemeData(
   colorScheme: ColorScheme.light(primary: Colors.black),
   accentColor: Color.fromRGBO(45, 194, 98, 0.2),
   buttonColor: Color.fromRGBO(45, 194, 98, 1.0),
-  outlinedButtonTheme: _outlinedButtonThemeData(
+  outlinedButtonTheme: buildOutlinedButtonThemeData(
     bgDisabled: Colors.grey.shade500,
     bgEnabled: Colors.black,
     fgDisabled: Colors.white,
     fgEnabled: Colors.white,
   ),
-  elevatedButtonTheme: ElevatedButtonThemeData(
-      style: ElevatedButton.styleFrom(
-    onPrimary: Colors.white,
-    primary: Colors.black,
-    alignment: Alignment.center,
-    textStyle: TextStyle(
-      fontWeight: FontWeight.w600,
-      fontFamily: 'Inter-SemiBold',
-      fontSize: 18,
-    ),
-    padding: EdgeInsets.symmetric(vertical: 14),
-    shape: const RoundedRectangleBorder(
-      borderRadius: BorderRadius.all(Radius.circular(8)),
-    ),
-  )),
-
+  elevatedButtonTheme: buildElevatedButtonThemeData(
+      onPrimary: Colors.white, primary: Colors.black),
   toggleableActiveColor: Colors.red[400],
   scaffoldBackgroundColor: Colors.white,
   bottomAppBarColor: Color.fromRGBO(196, 196, 196, 1.0),
@@ -115,27 +102,13 @@ final darkThemeData = ThemeData(
   // primaryColor: Colors.red,
   textTheme: _buildTextTheme(Colors.white),
   toggleableActiveColor: Colors.green[400],
-  outlinedButtonTheme: _outlinedButtonThemeData(
+  outlinedButtonTheme: buildOutlinedButtonThemeData(
       bgDisabled: Colors.grey.shade500,
       bgEnabled: Colors.white,
       fgDisabled: Colors.white,
       fgEnabled: Colors.black),
-  elevatedButtonTheme: ElevatedButtonThemeData(
-      style: ElevatedButton.styleFrom(
-    onPrimary: Colors.black,
-    primary: Colors.white,
-    minimumSize: Size(88, 36),
-    alignment: Alignment.center,
-    textStyle: TextStyle(
-      fontWeight: FontWeight.w600,
-      fontFamily: 'Inter-SemiBold',
-      fontSize: 18,
-    ),
-    padding: EdgeInsets.symmetric(vertical: 14),
-    shape: const RoundedRectangleBorder(
-      borderRadius: BorderRadius.all(Radius.circular(8)),
-    ),
-  )),
+  elevatedButtonTheme: buildElevatedButtonThemeData(
+      onPrimary: Colors.black, primary: Colors.white),
   scaffoldBackgroundColor: Colors.black,
   backgroundColor: Colors.black,
   appBarTheme: AppBarTheme().copyWith(
@@ -223,42 +196,6 @@ TextTheme _buildTextTheme(Color textColor) {
       ));
 }
 
-OutlinedButtonThemeData _outlinedButtonThemeData(
-    {Color bgDisabled, Color bgEnabled, Color fgDisabled, Color fgEnabled}) {
-  return OutlinedButtonThemeData(
-    style: OutlinedButton.styleFrom(
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(8),
-      ),
-      alignment: Alignment.center,
-      padding: EdgeInsets.fromLTRB(50, 16, 50, 16),
-      textStyle: TextStyle(
-        fontWeight: FontWeight.w600,
-        fontFamily: 'Inter-SemiBold',
-        fontSize: 18,
-      ),
-    ).copyWith(
-      backgroundColor: MaterialStateProperty.resolveWith<Color>(
-        (Set<MaterialState> states) {
-          if (states.contains(MaterialState.disabled)) {
-            return bgDisabled;
-          }
-          return bgEnabled;
-        },
-      ),
-      foregroundColor: MaterialStateProperty.resolveWith<Color>(
-        (Set<MaterialState> states) {
-          if (states.contains(MaterialState.disabled)) {
-            return fgDisabled;
-          }
-          return fgEnabled;
-        },
-      ),
-      alignment: Alignment.center,
-    ),
-  );
-}
-
 class EnteApp extends StatefulWidget {
   static const _homeWidget = HomeWidget();
 

lib/ente_theme_data.dart

@@ -0,0 +1,91 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+extension CustomColorScheme on ColorScheme {
+  Color get defaultTextColor =>
+      brightness == Brightness.light ? Colors.black : Colors.white;
+
+  Color get boxSelectColor => brightness == Brightness.light
+      ? Color.fromRGBO(67, 186, 108, 1)
+      : Color.fromRGBO(16, 32, 32, 1);
+
+  Color get boxUnSelectColor => brightness == Brightness.light
+      ? Color.fromRGBO(240, 240, 240, 1)
+      : Color.fromRGBO(8, 18, 18, 0.4);
+
+  Color get fabBackgroundColor =>
+      brightness == Brightness.light ? Colors.black : Colors.grey[850];
+
+  Color get fabTextOrIconColor =>
+      brightness == Brightness.light ? Colors.white : Colors.white;
+
+  // todo: use brightness == Brightness.light for changing color for dark/light theme
+  ButtonStyle get primaryActionButtonStyle => buildElevatedButtonThemeData(
+        onPrimary: Colors.white,
+        primary: Color.fromRGBO(29, 185, 84, 1.0),
+      ).style;
+
+  // todo: use brightness == Brightness.light for changing color for dark/light theme
+  ButtonStyle get optionalActionButtonStyle => buildElevatedButtonThemeData(
+        onPrimary: Colors.black87,
+        primary: Color.fromRGBO(240, 240, 240, 1),
+      ).style;
+}
+
+OutlinedButtonThemeData buildOutlinedButtonThemeData(
+    {Color bgDisabled, Color bgEnabled, Color fgDisabled, Color fgEnabled}) {
+  return OutlinedButtonThemeData(
+    style: OutlinedButton.styleFrom(
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(8),
+      ),
+      alignment: Alignment.center,
+      padding: EdgeInsets.fromLTRB(50, 16, 50, 16),
+      textStyle: TextStyle(
+        fontWeight: FontWeight.w600,
+        fontFamily: 'Inter-SemiBold',
+        fontSize: 18,
+      ),
+    ).copyWith(
+      backgroundColor: MaterialStateProperty.resolveWith<Color>(
+        (Set<MaterialState> states) {
+          if (states.contains(MaterialState.disabled)) {
+            return bgDisabled;
+          }
+          return bgEnabled;
+        },
+      ),
+      foregroundColor: MaterialStateProperty.resolveWith<Color>(
+        (Set<MaterialState> states) {
+          if (states.contains(MaterialState.disabled)) {
+            return fgDisabled;
+          }
+          return fgEnabled;
+        },
+      ),
+      alignment: Alignment.center,
+    ),
+  );
+}
+
+ElevatedButtonThemeData buildElevatedButtonThemeData(
+    {@required Color onPrimary, // text button color
+    @required Color primary // background color of button
+    }) {
+  return ElevatedButtonThemeData(
+      style: ElevatedButton.styleFrom(
+    onPrimary: onPrimary,
+    primary: primary,
+    alignment: Alignment.center,
+    textStyle: TextStyle(
+      fontWeight: FontWeight.w600,
+      fontFamily: 'Inter-SemiBold',
+      fontSize: 18,
+    ),
+    padding: EdgeInsets.symmetric(vertical: 14),
+    shape: const RoundedRectangleBorder(
+      borderRadius: BorderRadius.all(Radius.circular(8)),
+    ),
+  ));
+}

lib/ui/backup_folder_selection_page.dart

@@ -7,9 +7,9 @@ import 'package:implicitly_animated_reorderable_list/transitions.dart';
 import 'package:photos/core/configuration.dart';
 import 'package:photos/core/event_bus.dart';
 import 'package:photos/db/files_db.dart';
+import 'package:photos/ente_theme_data.dart';
 import 'package:photos/events/backup_folders_updated_event.dart';
 import 'package:photos/models/file.dart';
-import 'package:photos/ui/common/custom_color_scheme.dart';
 import 'package:photos/ui/loading_widget.dart';
 import 'package:photos/ui/thumbnail_widget.dart';
 

lib/ui/common/custom_color_scheme.dart

@@ -1,54 +0,0 @@
-import 'dart:ui';
-
-import 'package:flutter/material.dart';
-
-extension CustomColorScheme on ColorScheme {
-  Color get defaultTextColor =>
-      brightness == Brightness.light ? Colors.black : Colors.white;
-
-  Color get boxSelectColor => brightness == Brightness.light
-      ? Color.fromRGBO(67, 186, 108, 1)
-      : Color.fromRGBO(16, 32, 32, 1);
-
-  Color get boxUnSelectColor => brightness == Brightness.light
-      ? Color.fromRGBO(240, 240, 240, 1)
-      : Color.fromRGBO(8, 18, 18, 0.4);
-
-  Color get fabBackgroundColor =>
-      brightness == Brightness.light ? Colors.black : Colors.grey[850];
-
-  Color get fabTextOrIconColor =>
-      brightness == Brightness.light ? Colors.white : Colors.white;
-
-  ButtonStyle get primaryActionButtonStyle => ElevatedButton.styleFrom(
-        onPrimary: Colors.white,
-        primary: Color.fromRGBO(29, 185, 84, 1.0),
-        minimumSize: Size(88, 56),
-        alignment: Alignment.center,
-        textStyle: TextStyle(
-          fontWeight: FontWeight.w600,
-          fontFamily: 'Inter-SemiBold',
-          fontSize: 18,
-        ),
-        padding: EdgeInsets.symmetric(vertical: 14),
-        shape: const RoundedRectangleBorder(
-          borderRadius: BorderRadius.all(Radius.circular(8)),
-        ),
-      );
-
-  ButtonStyle get optionalActionButtonStyle => ElevatedButton.styleFrom(
-        onPrimary: Colors.black87,
-        primary: Color.fromRGBO(240, 240, 240, 1),
-        minimumSize: Size(88, 56),
-        alignment: Alignment.center,
-        textStyle: TextStyle(
-          fontWeight: FontWeight.w600,
-          fontFamily: 'Inter-SemiBold',
-          fontSize: 18,
-        ),
-        padding: EdgeInsets.symmetric(vertical: 14),
-        shape: const RoundedRectangleBorder(
-          borderRadius: BorderRadius.all(Radius.circular(8)),
-        ),
-      );
-}

lib/ui/common/fabCreateAccount.dart

@@ -1,8 +1,7 @@
-//import 'dart:html';
 import 'dart:math' as math;
 
 import 'package:flutter/material.dart';
-import 'package:photos/ui/common/custom_color_scheme.dart';
+import 'package:photos/ente_theme_data.dart';
 
 class FABCreateAccount extends StatelessWidget {
   final bool isKeypadOpen;

lib/ui/grant_permissions_widget.dart

@@ -3,9 +3,8 @@ import 'dart:ui';
 
 import 'package:flutter/material.dart';
 import 'package:photo_manager/photo_manager.dart';
+import 'package:photos/ente_theme_data.dart';
 import 'package:photos/services/sync_service.dart';
-import 'package:photos/ui/common/custom_color_scheme.dart';
-import 'package:photos/ui/common_elements.dart';
 
 class GrantPermissionsWidget extends StatelessWidget {
   @override

lib/ui/landing_page_widget.dart

@@ -2,7 +2,7 @@ import 'package:dots_indicator/dots_indicator.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 import 'package:photos/core/configuration.dart';
-import 'package:photos/ui/common/custom_color_scheme.dart';
+import 'package:photos/ente_theme_data.dart';
 import 'package:photos/ui/email_entry_page.dart';
 import 'package:photos/ui/login_page.dart';
 import 'package:photos/ui/password_entry_page.dart';

lib/ui/recovery_key_page.dart

@@ -7,7 +7,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:photos/core/configuration.dart';
 import 'package:photos/core/constants.dart';
-import 'package:photos/ui/common/custom_color_scheme.dart';
+import 'package:photos/ente_theme_data.dart';
 import 'package:photos/utils/toast_util.dart';
 import 'package:share_plus/share_plus.dart';
 
@@ -23,12 +23,12 @@ class RecoveryKeyPage extends StatefulWidget {
 
   const RecoveryKeyPage(this.recoveryKey, this.doneText,
       {Key key,
-        this.showAppBar,
-        this.onDone,
-        this.isDismissible,
-        this.title,
-        this.text,
-        this.subText})
+      this.showAppBar,
+      this.onDone,
+      this.isDismissible,
+      this.title,
+      this.text,
+      this.subText})
       : super(key: key);
 
   @override
@@ -44,9 +44,7 @@ class _RecoveryKeyPageState extends State<RecoveryKeyPage> {
   @override
   Widget build(BuildContext context) {
     final String recoveryKey = bip39.entropyToMnemonic(widget.recoveryKey);
-    if (recoveryKey
-        .split(' ')
-        .length != kMnemonicKeyWordCount) {
+    if (recoveryKey.split(' ').length != kMnemonicKeyWordCount) {
       throw AssertionError(
           'recovery code should have $kMnemonicKeyWordCount words');
     }
@@ -54,8 +52,8 @@ class _RecoveryKeyPageState extends State<RecoveryKeyPage> {
     return Scaffold(
       appBar: widget.showAppBar
           ? AppBar(
-        title: Text(""),
-      )
+              title: Text(""),
+            )
           : null,
       body: Padding(
         padding: const EdgeInsets.fromLTRB(20, 40, 20, 20),
@@ -66,18 +64,12 @@ class _RecoveryKeyPageState extends State<RecoveryKeyPage> {
           mainAxisSize: MainAxisSize.max,
           children: [
             Text(widget.title ?? "Recovery Key",
-                style: Theme
-                    .of(context)
-                    .textTheme
-                    .headline4),
+                style: Theme.of(context).textTheme.headline4),
             Padding(padding: EdgeInsets.all(12)),
             Text(
               widget.text ??
                   "If you forget your password, the only way you can recover your data is with this key.",
-              style: Theme
-                  .of(context)
-                  .textTheme
-                  .subtitle1,
+              style: Theme.of(context).textTheme.subtitle1,
             ),
             Padding(padding: EdgeInsets.only(top: 24)),
             DottedBorder(
@@ -92,14 +84,14 @@ class _RecoveryKeyPageState extends State<RecoveryKeyPage> {
                 //inner container
                 height: 200, //height of inner container
                 width:
-                double.infinity, //width to 100% match to parent container.
+                    double.infinity, //width to 100% match to parent container.
                 // ignore: prefer_const_literals_to_create_immutables
                 child: Column(
                   children: [
                     GestureDetector(
                       onTap: () async {
-                        await Clipboard.setData(ClipboardData(
-                            text: recoveryKey));
+                        await Clipboard.setData(
+                            ClipboardData(text: recoveryKey));
                         showToast("recovery key copied to clipboard");
                         setState(() {
                           _hasTriedToSave = true;
@@ -121,10 +113,7 @@ class _RecoveryKeyPageState extends State<RecoveryKeyPage> {
                         width: double.infinity,
                         child: Text(
                           recoveryKey,
-                          style: Theme
-                              .of(context)
-                              .textTheme
-                              .bodyText1,
+                          style: Theme.of(context).textTheme.bodyText1,
                         ),
                       ),
                     ),
@@ -135,10 +124,7 @@ class _RecoveryKeyPageState extends State<RecoveryKeyPage> {
                           child: Text(
                             widget.subText ??
                                 "we don’t store this key, please save this in a safe place",
-                            style: Theme
-                                .of(context)
-                                .textTheme
-                                .bodyText1,
+                            style: Theme.of(context).textTheme.bodyText1,
                           ),
                           padding: EdgeInsets.all(20)),
                     ),
@@ -168,10 +154,7 @@ class _RecoveryKeyPageState extends State<RecoveryKeyPage> {
     if (!_hasTriedToSave) {
       childrens.add(ElevatedButton(
         child: Text('Save Later'),
-        style: Theme
-            .of(context)
-            .colorScheme
-            .optionalActionButtonStyle,
+        style: Theme.of(context).colorScheme.optionalActionButtonStyle,
         onPressed: () async {
           await _saveKeys();
         },
@@ -181,10 +164,7 @@ class _RecoveryKeyPageState extends State<RecoveryKeyPage> {
 
     childrens.add(ElevatedButton(
       child: Text('Save'),
-      style: Theme
-          .of(context)
-          .colorScheme
-          .primaryActionButtonStyle,
+      style: Theme.of(context).colorScheme.primaryActionButtonStyle,
       onPressed: () async {
         await _shareRecoveryKey(recoveryKey);
       },