redesign folder selection screen

lib/app.dart

@@ -1,5 +1,8 @@
+import 'dart:io';
+
 import 'package:adaptive_theme/adaptive_theme.dart';
 import 'package:background_fetch/background_fetch.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_easyloading/flutter_easyloading.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
@@ -15,19 +18,50 @@ final lightThemeData = ThemeData(
   fontFamily: 'Inter',
   brightness: Brightness.light,
   hintColor: Colors.grey,
+  primaryColor: Colors.deepOrangeAccent,
   iconTheme: IconThemeData(color: Colors.black),
   primaryIconTheme: IconThemeData(color: Colors.red, opacity: 1.0, size: 50.0),
   colorScheme: ColorScheme.light(primary: Colors.black),
   accentColor: Color.fromRGBO(45, 194, 98, 0.2),
   buttonColor: Color.fromRGBO(45, 194, 98, 1.0),
-  buttonTheme: ButtonThemeData().copyWith(
-    buttonColor: Color.fromRGBO(45, 194, 98, 1.0),
+  outlinedButtonTheme: OutlinedButtonThemeData(
+    style: OutlinedButton.styleFrom(
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(8),
+      ),
+      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 Colors.grey.shade500;
+          }
+          return Colors.black;
+        },
+      ),
+      foregroundColor: MaterialStateProperty.resolveWith<Color>(
+        (Set<MaterialState> states) {
+          if (states.contains(MaterialState.disabled)) {
+            return Colors.white;
+          }
+          return Colors.white;
+        },
+      ),
+      alignment: Alignment.center,
+    ),
   ),
   toggleableActiveColor: Colors.red[400],
   scaffoldBackgroundColor: Colors.white,
   bottomAppBarColor: Color.fromRGBO(196, 196, 196, 1.0),
   backgroundColor: Colors.white,
-  appBarTheme: AppBarTheme().copyWith(color: Colors.blue),
+  appBarTheme: AppBarTheme().copyWith(
+      backgroundColor: Colors.white,
+      iconTheme: IconThemeData(color: Colors.black)),
   //https://api.flutter.dev/flutter/material/TextTheme-class.html
   textTheme: TextTheme().copyWith(
       headline6: TextStyle(
@@ -41,7 +75,6 @@ final lightThemeData = ThemeData(
       bodyText2: TextStyle(color: Colors.yellow),
       bodyText1: TextStyle(color: Colors.orange)),
   cardColor: Color.fromRGBO(250, 250, 250, 1.0),
-  //
   dialogTheme: DialogTheme().copyWith(
     backgroundColor: Color.fromRGBO(250, 250, 250, 1.0), //
   ),
@@ -86,6 +119,37 @@ final darkThemeData = ThemeData(
         fontSize: 12,
       )),
   toggleableActiveColor: Colors.green[400],
+  outlinedButtonTheme: OutlinedButtonThemeData(
+    style: OutlinedButton.styleFrom(
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(8),
+      ),
+      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 Colors.grey.shade500;
+          }
+          return Colors.white;
+        },
+      ),
+      foregroundColor: MaterialStateProperty.resolveWith<Color>(
+        (Set<MaterialState> states) {
+          if (states.contains(MaterialState.disabled)) {
+            return Colors.white;
+          }
+          return Colors.black;
+        },
+      ),
+      alignment: Alignment.center,
+    ),
+  ),
   scaffoldBackgroundColor: Colors.black,
   backgroundColor: Colors.black,
   appBarTheme: AppBarTheme().copyWith(
@@ -107,11 +171,6 @@ final darkThemeData = ThemeData(
   ),
 );
 
-extension CustomColorScheme on ColorScheme {
-  Color get defaultTextColor =>
-      brightness == Brightness.light ? Colors.black : Colors.white;
-}
-
 class EnteApp extends StatefulWidget {
   static const _homeWidget = HomeWidget();
 
@@ -139,14 +198,38 @@ class _EnteAppState extends State<EnteApp> with WidgetsBindingObserver {
     _configureBackgroundFetch();
   }
 
+  Widget debugBuild(BuildContext context) {
+    return MaterialApp(
+      title: "ente",
+      themeMode: ThemeMode.system,
+      theme: lightThemeData,
+      darkTheme: darkThemeData,
+      home: EnteApp._homeWidget,
+      debugShowCheckedModeBanner: false,
+      navigatorKey: Network.instance.getAlice().getNavigatorKey(),
+      builder: EasyLoading.init(),
+      supportedLocales: L10n.all,
+      localizationsDelegates: const [
+        AppLocalizations.delegate,
+        GlobalMaterialLocalizations.delegate,
+        GlobalCupertinoLocalizations.delegate,
+        GlobalWidgetsLocalizations.delegate,
+      ],
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
+    if (kDebugMode && Platform.isIOS) {
+      return debugBuild(context);
+    }
     return AdaptiveTheme(
         light: lightThemeData,
         dark: darkThemeData,
         initial: AdaptiveThemeMode.dark,
         builder: (lightTheme, dartTheme) => MaterialApp(
               title: "ente",
+              themeMode: ThemeMode.system,
               theme: lightTheme,
               darkTheme: dartTheme,
               home: EnteApp._homeWidget,

lib/ui/backup_folder_selection_page.dart

@@ -9,6 +9,7 @@ import 'package:photos/core/event_bus.dart';
 import 'package:photos/db/files_db.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/common_elements.dart';
 import 'package:photos/ui/loading_widget.dart';
 import 'package:photos/ui/thumbnail_widget.dart';
@@ -61,19 +62,29 @@ class _BackupFolderSelectionPageState extends State<BackupFolderSelectionPage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: Text("select folders to backup")),
+      appBar: AppBar(
+        title: Text(""),
+      ),
       body: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
-          Padding(
-            padding: EdgeInsets.all(12),
+          Container(
+            padding: EdgeInsets.all(24),
+            child: Text(
+              'Select folders for backup',
+              textAlign: TextAlign.left,
+              style: TextStyle(
+                  color: Theme.of(context).colorScheme.onSurface,
+                  fontFamily: 'Inter-Bold',
+                  fontSize: 32,
+                  fontWeight: FontWeight.bold),
+            ),
           ),
           Padding(
-            padding: const EdgeInsets.only(left: 32, right: 32),
+            padding: const EdgeInsets.only(left: 24, right: 48),
             child: Text(
-              "the selected folders will be end-to-end encrypted and backed up",
+              "Selected folders will be end-to-end encrypted and backed up",
               style: Theme.of(context).textTheme.caption.copyWith(height: 1.3),
-              textAlign: TextAlign.center,
             ),
           ),
           Padding(
@@ -84,15 +95,18 @@ class _BackupFolderSelectionPageState extends State<BackupFolderSelectionPage> {
               : GestureDetector(
                   behavior: HitTestBehavior.translucent,
                   child: Padding(
-                    padding: const EdgeInsets.fromLTRB(6, 6, 64, 6),
+                    padding: const EdgeInsets.fromLTRB(24, 6, 64, 12),
                     child: Align(
-                      alignment: Alignment.centerRight,
+                      alignment: Alignment.centerLeft,
                       child: Text(
                         _selectedFolders.length == _allFolders.length
-                            ? "unselect all"
-                            : "select all",
+                            ? "Unselect all"
+                            : "Select all",
                         textAlign: TextAlign.right,
-                        style: Theme.of(context).textTheme.overline,
+                        style: Theme.of(context)
+                            .textTheme
+                            .overline
+                            .copyWith(decoration: TextDecoration.underline),
                       ),
                     ),
                   ),
@@ -119,11 +133,11 @@ class _BackupFolderSelectionPageState extends State<BackupFolderSelectionPage> {
           Hero(
             tag: "select_folders",
             child: Container(
+              width: double.infinity,
               padding: EdgeInsets.only(
-                  left: 60, right: 60, bottom: Platform.isIOS ? 60 : 32),
-              child: button(
-                widget.buttonText,
-                fontSize: 18,
+                  left: 24, right:24, bottom: Platform.isIOS ? 60 : 32),
+              child: OutlinedButton(
+                child: Text(widget.buttonText),
                 onPressed: _selectedFolders.isEmpty
                     ? null
                     : () async {
@@ -132,7 +146,7 @@ class _BackupFolderSelectionPageState extends State<BackupFolderSelectionPage> {
                         Bus.instance.fire(BackupFoldersUpdatedEvent());
                         Navigator.of(context).pop();
                       },
-                padding: EdgeInsets.fromLTRB(60, 20, 60, 20),
+                // padding: EdgeInsets.fromLTRB(12, 20, 12, 20),
               ),
             ),
           ),
@@ -148,7 +162,7 @@ class _BackupFolderSelectionPageState extends State<BackupFolderSelectionPage> {
     _sortFiles();
     final scrollController = ScrollController();
     return Container(
-      padding: EdgeInsets.only(left: 40, right: 40),
+      padding: EdgeInsets.only(left: 20, right: 24),
       child: Scrollbar(
         controller: scrollController,
         isAlwaysShown: true,
@@ -198,47 +212,63 @@ class _BackupFolderSelectionPageState extends State<BackupFolderSelectionPage> {
   Widget _getFileItem(File file) {
     final isSelected = _selectedFolders.contains(file.deviceFolder);
     return Padding(
-      padding: const EdgeInsets.only(bottom: 1, right: 4),
+      padding: const EdgeInsets.only(bottom: 1, right: 1),
       child: Container(
         decoration: BoxDecoration(
           border: Border.all(
-            color: Theme.of(context).primaryColor,
+            color: Theme.of(context).colorScheme.boxUnSelectColor,
           ),
           borderRadius: BorderRadius.all(
-            Radius.circular(10),
+            Radius.circular(12),
           ),
           color: isSelected
-              ? Color.fromRGBO(16, 32, 32, 1)
-              : Color.fromRGBO(8, 18, 18, 0.4),
+              ? Theme.of(context).colorScheme.boxSelectColor
+              : Theme.of(context).colorScheme.boxUnSelectColor,
         ),
-        padding: EdgeInsets.fromLTRB(20, 16, 20, 16),
+        padding: EdgeInsets.fromLTRB(8, 4, 4, 4),
         child: InkWell(
           child: Row(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: [
               Row(
                 children: [
-                  _getThumbnail(file),
-                  Padding(padding: EdgeInsets.all(10)),
+                  Checkbox(
+                    checkColor: Colors.green,
+                    activeColor: Colors.white,
+                    value: isSelected,
+                    onChanged: (value) {
+                      if (value) {
+                        _selectedFolders.add(file.deviceFolder);
+                      } else {
+                        _selectedFolders.remove(file.deviceFolder);
+                      }
+                      setState(() {});
+                    },
+                  ),
                   Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
                       Container(
-                        constraints: BoxConstraints(maxWidth: 140),
+                        constraints: BoxConstraints(maxWidth: 180),
                         child: Text(
                           file.deviceFolder,
+                          textAlign: TextAlign.left,
                           style: TextStyle(
-                            fontSize: 14,
-                            height: 1.5,
+                            fontFamily: 'Inter-Medium',
+                            fontSize: 18,
+                            fontWeight: FontWeight.w600,
                             color: isSelected
                                 ? Colors.white
-                                : Colors.white.withOpacity(0.7),
+                                : Theme.of(context)
+                                    .colorScheme
+                                    .onSurface
+                                    .withOpacity(0.7),
                           ),
                           overflow: TextOverflow.ellipsis,
                           maxLines: 2,
                         ),
                       ),
-                      Padding(padding: EdgeInsets.all(2)),
+                      Padding(padding: EdgeInsets.only(top: 2)),
                       Text(
                         _itemCount[file.deviceFolder].toString() +
                             " item" +
@@ -247,25 +277,19 @@ class _BackupFolderSelectionPageState extends State<BackupFolderSelectionPage> {
                         style: TextStyle(
                           fontSize: 12,
                           color: isSelected
-                              ? Colors.white.withOpacity(0.65)
-                              : Colors.white.withOpacity(0.4),
+                              ? Colors.white
+
+                              : Theme.of(context)
+                                  .colorScheme
+                                  .onSurface
+                                  ,
                         ),
                       ),
                     ],
                   ),
                 ],
               ),
-              Checkbox(
-                value: isSelected,
-                onChanged: (value) {
-                  if (value) {
-                    _selectedFolders.add(file.deviceFolder);
-                  } else {
-                    _selectedFolders.remove(file.deviceFolder);
-                  }
-                  setState(() {});
-                },
-              ),
+              _getThumbnail(file),
             ],
           ),
           onTap: () {
@@ -309,8 +333,8 @@ class _BackupFolderSelectionPageState extends State<BackupFolderSelectionPage> {
           shouldShowSyncStatus: false,
           key: Key("backup_selection_widget" + file.tag()),
         ),
-        height: 60,
-        width: 60,
+        height: 88,
+        width: 88,
       ),
     );
   }

lib/ui/common/custom_color_scheme.dart

@@ -0,0 +1,16 @@
+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);
+}

lib/ui/common_elements.dart

@@ -24,26 +24,36 @@ Widget button(
     child: OutlinedButton(
       style: OutlinedButton.styleFrom(
         shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(10),
+          borderRadius: BorderRadius.circular(8),
         ),
         padding: padding ?? EdgeInsets.fromLTRB(50, 16, 50, 16),
-        side: BorderSide(
-          width: onPressed == null ? 1 : 2,
-          color: onPressed == null
-              ? Colors.grey
-              : Color.fromRGBO(45, 194, 98, 1.0),
-        ),
-      ),
-      child: Text(
-        text,
-        style: TextStyle(
-          fontWeight: FontWeight.bold,
+        textStyle: TextStyle(
+          fontWeight: FontWeight.w600,
+          fontFamily: 'Inter-SemiBold',
           fontSize: fontSize,
-          color: onPressed == null ? Colors.grey : Colors.white,
           height: lineHeight,
         ),
-        textAlign: TextAlign.center,
+      ).copyWith(
+        backgroundColor: MaterialStateProperty.resolveWith<Color>(
+          (Set<MaterialState> states) {
+            if (states.contains(MaterialState.disabled)) {
+              return Colors.grey;
+            }
+            // return Color.fromRGBO(29, 184, 80, 1);
+            return Colors.white;
+          },
+        ),
+        foregroundColor: MaterialStateProperty.resolveWith<Color>(
+          (Set<MaterialState> states) {
+            if (states.contains(MaterialState.disabled)) {
+              return Colors.white;
+            }
+            return Colors.black;
+          },
+        ),
+        alignment: Alignment.center,
       ),
+      child: Text(text),
       onPressed: onPressed,
     ),
   );

pubspec.yaml

@@ -151,6 +151,7 @@ flutter:
   - family: Inter
     fonts:
       - asset: fonts/Inter-Regular.ttf
+      - asset: fonts/Inter-Medium.ttf
       - asset: fonts/Inter-Light.ttf
       - asset: fonts/Inter-SemiBold.ttf
       - asset: fonts/Inter-Bold.ttf