Merge pull request #216 from ente-io/new-user-redesign

New user redesign

lib/ente_theme_data.dart

@@ -14,11 +14,10 @@ extension CustomColorScheme on ColorScheme {
       ? Color.fromRGBO(240, 240, 240, 1)
       : Color.fromRGBO(8, 18, 18, 0.4);
 
-  Color get fabBackgroundColor =>
+  Color get dynamicFABBackgroundColor =>
       brightness == Brightness.light ? Colors.black : Colors.grey[850];
 
-  Color get fabTextOrIconColor =>
-      brightness == Brightness.light ? Colors.white : Colors.white;
+  Color get dynamicFABTextColor => Colors.white; //same for both themes
 
   // todo: use brightness == Brightness.light for changing color for dark/light theme
   ButtonStyle get optionalActionButtonStyle => buildElevatedButtonThemeData(

lib/ui/backup_folder_selection_page.dart

@@ -104,10 +104,10 @@ class _BackupFolderSelectionPageState extends State<BackupFolderSelectionPage> {
                             ? "Unselect all"
                             : "Select all",
                         textAlign: TextAlign.right,
-                        style: Theme.of(context)
-                            .textTheme
-                            .overline
-                            .copyWith(decoration: TextDecoration.underline),
+                        style: Theme.of(context).textTheme.overline.copyWith(
+                            decoration: TextDecoration.underline,
+                            fontSize: 16,
+                            letterSpacing: 1),
                       ),
                     ),
                   ),
@@ -133,7 +133,7 @@ class _BackupFolderSelectionPageState extends State<BackupFolderSelectionPage> {
             child: Container(
               width: double.infinity,
               padding: EdgeInsets.only(
-                  left: 24, right: 24, bottom: Platform.isIOS ? 60 : 32),
+                  left: 20, right: 20, bottom: Platform.isIOS ? 60 : 32),
               child: OutlinedButton(
                 child: Text(widget.buttonText),
                 onPressed: _selectedFolders.isEmpty
@@ -213,16 +213,24 @@ class _BackupFolderSelectionPageState extends State<BackupFolderSelectionPage> {
       padding: const EdgeInsets.only(bottom: 1, right: 1),
       child: Container(
         decoration: BoxDecoration(
-          border: Border.all(
-            color: Theme.of(context).colorScheme.boxUnSelectColor,
-          ),
-          borderRadius: BorderRadius.all(
-            Radius.circular(12),
-          ),
-          color: isSelected
-              ? Theme.of(context).colorScheme.boxSelectColor
-              : Theme.of(context).colorScheme.boxUnSelectColor,
-        ),
+            border: Border.all(
+              color: Theme.of(context).colorScheme.boxUnSelectColor,
+            ),
+            borderRadius: BorderRadius.all(
+              Radius.circular(12),
+            ),
+            // color: isSelected
+            //     ? Theme.of(context).colorScheme.boxSelectColor
+            //     : Theme.of(context).colorScheme.boxUnSelectColor,
+            gradient: isSelected
+                ? LinearGradient(colors: const [
+                    Color(0xFF00DD4D),
+                    Color(0xFF43BA6C)
+                  ]) //same for both themes
+                : LinearGradient(colors: [
+                    Theme.of(context).colorScheme.boxUnSelectColor,
+                    Theme.of(context).colorScheme.boxUnSelectColor
+                  ])),
         padding: EdgeInsets.fromLTRB(8, 4, 4, 4),
         child: InkWell(
           child: Row(

lib/ui/common/dynamicFAB.dart

@@ -37,9 +37,9 @@ class DynamicFAB extends StatelessWidget {
             FloatingActionButton(
                 //mini: true,
                 backgroundColor:
-                    Theme.of(context).colorScheme.fabBackgroundColor,
+                    Theme.of(context).colorScheme.dynamicFABBackgroundColor,
                 foregroundColor:
-                    Theme.of(context).colorScheme.fabTextOrIconColor,
+                    Theme.of(context).colorScheme.dynamicFABTextColor,
                 child: Transform.rotate(
                   angle: isFormValid ? 0 : math.pi / 2, //var here
                   child: Icon(

lib/ui/email_entry_page.dart

@@ -335,9 +335,13 @@ class _EmailEntryPageState extends State<EmailEntryPage> {
                                       horizontal: 20),
                                   child: Container(
                                     decoration: BoxDecoration(
-                                      border: Border.all(
+                                      boxShadow: [
+                                        BoxShadow(
+                                          spreadRadius: 0.5,
                                           color: Theme.of(context).hintColor,
-                                          width: 0.5),
+                                          offset: Offset(0, -0.325),
+                                        ),
+                                      ],
                                       borderRadius: BorderRadius.only(
                                         topLeft: Radius.zero,
                                         topRight: Radius.zero,

lib/ui/grant_permissions_widget.dart

@@ -3,143 +3,91 @@ 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/ente_theme_data.dart';
 import 'package:photos/services/sync_service.dart';
 
 class GrantPermissionsWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: SingleChildScrollView(
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            Center(
-              child: Padding(
-                padding: const EdgeInsets.symmetric(vertical: 50),
-                child: Image.asset(
-                  "assets/gallery.png",
-                  height: 250,
-                ),
-              ),
-            ),
-            Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 20),
-              child: Text(
-                'ente needs your permission to access gallery',
-                style:
-                    Theme.of(context).textTheme.headline4.copyWith(height: 1.4),
-              ),
-            ),
-            Padding(
-              padding: const EdgeInsets.symmetric(vertical: 40),
-              child: Divider(
-                thickness: 1.5,
-              ),
-            ),
-            Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 20),
-              child: Text(
-                'Why we need permissions',
-                style: Theme.of(context).textTheme.headline5,
-              ),
-            ),
-            Padding(
-              padding: const EdgeInsets.fromLTRB(0, 20, 0, 5),
-              child: ListTile(
-                leading: ClipRRect(
-                  borderRadius: BorderRadius.circular(10),
-                  child: Container(
-                    height: 40,
-                    width: 40,
-                    color: Colors.greenAccent,
+      body: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Column(
+            children: [
+              Center(
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(vertical: 50),
+                  child: Image.asset(
+                    "assets/gallery.png",
+                    height: 250,
                   ),
                 ),
-                title: Text("hey there random stuff"),
-                subtitle: Text(
-                    "Even more random stuff here. blah blabh blahhasdn asidf as"),
               ),
-            ),
-            Padding(
-              padding: const EdgeInsets.fromLTRB(0, 5, 0, 180),
-              child: ListTile(
-                leading: ClipRRect(
-                  borderRadius: BorderRadius.circular(10),
-                  child: Container(
-                    height: 40,
-                    width: 40,
-                    color: Colors.greenAccent,
-                  ),
+              Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 20),
+                child: Text(
+                  'ente needs your permission to access gallery',
+                  style: Theme.of(context)
+                      .textTheme
+                      .headline4
+                      .copyWith(height: 1.4),
                 ),
-                title: Text("hey there random stuff"),
-                subtitle: Text(
-                    "Even more random stuff here. blah blabh blahhasdn asidf as"),
               ),
-            ),
-          ],
-        ),
-      ),
-      floatingActionButton: Container(
-        decoration: BoxDecoration(boxShadow: [
-          BoxShadow(
-            color: Theme.of(context).backgroundColor,
-            spreadRadius: 200,
-            blurRadius: 100,
-            offset: Offset(0, 150),
-          )
-        ]),
-        width: double.infinity,
-        height: 56,
-        padding: EdgeInsets.symmetric(horizontal: 20),
-        child: FloatingActionButton.extended(
-            backgroundColor: Theme.of(context).colorScheme.fabBackgroundColor,
-            onPressed: () async {
-              final state = await PhotoManager.requestPermissionExtend();
-              if (state == PermissionState.authorized ||
-                  state == PermissionState.limited) {
-                await SyncService.instance.onPermissionGranted(state);
-              } else if (state == PermissionState.denied) {
-                AlertDialog alert = AlertDialog(
-                  title: Text("Please grant permissions"),
-                  content: Text(
-                      "ente can encrypt and preserve files only if you grant access to them"),
-                  actions: [
-                    TextButton(
-                      child: Text(
-                        "OK",
-                        style: Theme.of(context).textTheme.subtitle1.copyWith(
-                            fontSize: 14, fontWeight: FontWeight.w700),
+            ],
+          ),
+          Container(
+            width: double.infinity,
+            padding: EdgeInsets.only(
+                left: 20, right: 20, bottom: Platform.isIOS ? 60 : 32),
+            child: OutlinedButton(
+              child: Text("Grant Permission"),
+              onPressed: () async {
+                final state = await PhotoManager.requestPermissionExtend();
+                if (state == PermissionState.authorized ||
+                    state == PermissionState.limited) {
+                  await SyncService.instance.onPermissionGranted(state);
+                } else if (state == PermissionState.denied) {
+                  AlertDialog alert = AlertDialog(
+                    title: Text("Please grant permissions"),
+                    content: Text(
+                        "ente can encrypt and preserve files only if you grant access to them"),
+                    actions: [
+                      TextButton(
+                        child: Text(
+                          "OK",
+                          style: Theme.of(context).textTheme.subtitle1.copyWith(
+                              fontSize: 14, fontWeight: FontWeight.w700),
+                        ),
+                        onPressed: () {
+                          Navigator.of(context, rootNavigator: true)
+                              .pop('dialog');
+                          if (Platform.isIOS) {
+                            PhotoManager.openSetting();
+                          }
+                        },
                       ),
-                      onPressed: () {
-                        Navigator.of(context, rootNavigator: true)
-                            .pop('dialog');
-                        if (Platform.isIOS) {
-                          PhotoManager.openSetting();
-                        }
-                      },
-                    ),
-                  ],
-                );
+                    ],
+                  );
 
-                showDialog(
-                  context: context,
-                  builder: (BuildContext context) {
-                    return BackdropFilter(
-                      filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
-                      child: alert,
-                    );
-                  },
-                  barrierColor: Colors.black12,
-                );
-              }
-            },
-            label: Text('Grant permission',
-                style: Theme.of(context).textTheme.headline6.copyWith(
-                    color: Theme.of(context).colorScheme.fabTextOrIconColor)),
-            shape:
-                RoundedRectangleBorder(borderRadius: BorderRadius.circular(8))),
+                  showDialog(
+                    context: context,
+                    builder: (BuildContext context) {
+                      return BackdropFilter(
+                        filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
+                        child: alert,
+                      );
+                    },
+                    barrierColor: Colors.black12,
+                  );
+                }
+              },
+              // padding: EdgeInsets.fromLTRB(12, 20, 12, 20),
+            ),
+          ),
+        ],
       ),
-      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
     );
   }
 }

lib/ui/home_widget.dart

@@ -12,6 +12,7 @@ import 'package:photo_manager/photo_manager.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/account_configured_event.dart';
 import 'package:photos/events/backup_folders_updated_event.dart';
 import 'package:photos/events/files_updated_event.dart';
@@ -33,7 +34,7 @@ import 'package:photos/services/user_service.dart';
 import 'package:photos/ui/app_update_dialog.dart';
 import 'package:photos/ui/backup_folder_selection_page.dart';
 import 'package:photos/ui/collections_gallery_widget.dart';
-import 'package:photos/ui/common_elements.dart';
+import 'package:photos/ui/common/gradientButton.dart';
 import 'package:photos/ui/create_collection_page.dart';
 import 'package:photos/ui/extents_page_view.dart';
 import 'package:photos/ui/gallery.dart';
@@ -421,10 +422,18 @@ class _HomeWidgetState extends State<HomeWidget> {
       mainAxisAlignment: MainAxisAlignment.spaceBetween,
       children: [
         _headerWidgetWithSettingsButton,
-        Image.asset(
-          "assets/preserved.png",
-          height: 160,
+        Padding(
+          padding: const EdgeInsets.only(top: 64),
+          child: Image.asset(
+            "assets/preserved.png",
+            height: 206,
+          ),
         ),
+        Text('No photos are being backed up right now',
+            style: Theme.of(context)
+                .textTheme
+                .caption
+                .copyWith(fontFamily: 'Inter-Medium', fontSize: 16)),
         Center(
           child: Hero(
             tag: "select_folders",
@@ -433,13 +442,17 @@ class _HomeWidgetState extends State<HomeWidget> {
               child: Container(
                 width: double.infinity,
                 height: 64,
-                padding: const EdgeInsets.fromLTRB(60, 0, 60, 0),
-                child: button(
-                  "start backup",
-                  fontSize: 16,
-                  lineHeight: 1.5,
-                  padding: EdgeInsets.only(bottom: 4),
-                  onPressed: () async {
+                padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
+                child: GradientButton(
+                  child: Text(
+                    'Start Backup',
+                    style: gradientButtonTextTheme(),
+                  ),
+                  linearGradientColors: const [
+                    Color(0xFF2CD267),
+                    Color(0xFF1DB954),
+                  ],
+                  onTap: () async {
                     if (LocalSyncService.instance
                         .hasGrantedLimitedPermissions()) {
                       PhotoManager.presentLimited();
@@ -448,12 +461,32 @@ class _HomeWidgetState extends State<HomeWidget> {
                         context,
                         BackupFolderSelectionPage(
                           shouldSelectAll: true,
-                          buttonText: "Start backup",
+                          buttonText: "Start Backup",
                         ),
                       );
                     }
                   },
                 ),
+                // child: button(
+                //   "start backup",
+                //   fontSize: 16,
+                //   lineHeight: 1.5,
+                //   padding: EdgeInsets.only(bottom: 4),
+                //   onPressed: () async {
+                //     if (LocalSyncService.instance
+                //         .hasGrantedLimitedPermissions()) {
+                //       PhotoManager.presentLimited();
+                //     } else {
+                //       routeToPage(
+                //         context,
+                //         BackupFolderSelectionPage(
+                //           shouldSelectAll: true,
+                //           buttonText: "Start backup",
+                //         ),
+                //       );
+                //     }
+                //   },
+                // ),
               ),
             ),
           ),
@@ -474,7 +507,7 @@ class _HomeWidgetState extends State<HomeWidget> {
           width: 180,
           child: ClipRect(
             child: BackdropFilter(
-              filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
+              filter: ImageFilter.blur(sigmaX: 4, sigmaY: 4),
               child: GNav(
                 curve: Curves.easeOutExpo,
                 backgroundColor: Theme.of(context).bottomAppBarColor,

lib/ui/loading_photos_widget.dart

@@ -1,8 +1,9 @@
 import 'dart:async';
 
 import 'package:flutter/material.dart';
-import 'package:loading_animations/loading_animations.dart';
+import 'package:lottie/lottie.dart';
 import 'package:photos/core/event_bus.dart';
+import 'package:photos/ente_theme_data.dart';
 import 'package:photos/events/sync_status_update_event.dart';
 import 'package:photos/services/local_sync_service.dart';
 import 'package:photos/ui/backup_folder_selection_page.dart';
@@ -17,20 +18,10 @@ class LoadingPhotosWidget extends StatefulWidget {
 
 class _LoadingPhotosWidgetState extends State<LoadingPhotosWidget> {
   StreamSubscription<SyncStatusUpdate> _firstImportEvent;
-  int _currentPage = 0;
-  final PageController _pageController = PageController(
-    initialPage: 0,
-  );
-  final List<String> _messages = [
-    "web.ente.io has a slick uploader",
-    "we have preserved over a million memories so far",
-    "all our apps are open source",
-    "our encryption protocols have been reviewed by engineers at Google, Apple, Amazon, and Facebook",
-    "you can share files and folders with your loved ones, end-to-end encrypted",
-    "our mobile apps run in the background to encrypt and backup new photos you take",
-    "we use Xchacha20Poly1305 to safely encrypt your data",
-    "one of our data centers is in a fall out shelter 25m underground",
-  ];
+  // final int _currentPage = 0;
+  // final PageController _pageController = PageController(
+  //   initialPage: 0,
+  // );
 
   @override
   void initState() {
@@ -46,28 +37,11 @@ class _LoadingPhotosWidgetState extends State<LoadingPhotosWidget> {
               context,
               BackupFolderSelectionPage(
                 shouldSelectAll: true,
-                buttonText: "Start backup",
+                buttonText: "Start Backup",
               ));
         }
       }
     });
-
-    Timer.periodic(Duration(seconds: 5), (Timer timer) {
-      if (!mounted) {
-        return;
-      }
-      if (_currentPage < _messages.length - 1) {
-        _currentPage++;
-      } else {
-        _currentPage = 0;
-      }
-
-      _pageController.animateToPage(
-        _currentPage,
-        duration: Duration(milliseconds: 300),
-        curve: Curves.easeIn,
-      );
-    });
   }
 
   @override
@@ -81,47 +55,28 @@ class _LoadingPhotosWidgetState extends State<LoadingPhotosWidget> {
     return Scaffold(
       body: Center(
         child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
           crossAxisAlignment: CrossAxisAlignment.center,
           children: [
-            LoadingBouncingGrid.square(
-              inverted: true,
-              backgroundColor: Theme.of(context).buttonColor,
-              size: 64,
-            ),
-            Padding(padding: const EdgeInsets.all(20.0)),
-            Text(
-              "loading your gallery...",
-              style: TextStyle(
-                fontSize: 16,
-              ),
-            ),
-            Padding(padding: EdgeInsets.all(10)),
-            Text(
-              "this might take upto 30 seconds 🐣",
-              style: TextStyle(color: Colors.white.withOpacity(0.3)),
-            ),
-            Padding(padding: const EdgeInsets.all(70)),
-            Text(
-              "did you know?",
-              style: TextStyle(
-                fontSize: 16,
-                color: Theme.of(context).buttonColor,
-              ),
+            SizedBox(
+              height: 56,
             ),
-            Padding(padding: EdgeInsets.all(8)),
+            Lottie.asset('assets/loadingGalleryLottie.json'),
+            Text("Did you know?",
+                style: Theme.of(context).textTheme.headline6.copyWith(
+                    fontFamily: "Inter",
+                    color: Theme.of(context)
+                        .colorScheme
+                        .defaultTextColor
+                        .withOpacity(0.4))),
             SizedBox(
-              height: 80,
-              child: PageView.builder(
-                scrollDirection: Axis.vertical,
-                controller: _pageController,
-                itemBuilder: (context, index) {
-                  return _getMessage(_messages[index]);
-                },
-                itemCount: _messages.length,
-                physics: NeverScrollableScrollPhysics(),
-              ),
+              height: 16,
             ),
+            Text(
+              "ente is amazing",
+              style: Theme.of(context).textTheme.headline6.copyWith(
+                  fontFamily: "Inter",
+                  color: Theme.of(context).colorScheme.defaultTextColor),
+            )
           ],
         ),
       ),

lib/ui/password_entry_page.dart

@@ -358,9 +358,13 @@ class _PasswordEntryPageState extends State<PasswordEntryPage> {
                                       horizontal: 20),
                                   child: Container(
                                     decoration: BoxDecoration(
-                                      border: Border.all(
+                                      boxShadow: [
+                                        BoxShadow(
+                                          spreadRadius: 0.5,
                                           color: Theme.of(context).hintColor,
-                                          width: 0.5),
+                                          offset: Offset(0, -0.325),
+                                        ),
+                                      ],
                                       borderRadius: BorderRadius.only(
                                         topLeft: Radius.zero,
                                         topRight: Radius.zero,

pubspec.lock

@@ -679,6 +679,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.1"
+  lottie:
+    dependency: "direct main"
+    description:
+      name: lottie
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.2.2"
   matcher:
     dependency: transitive
     description:

pubspec.yaml

@@ -72,6 +72,7 @@ dependencies:
   loading_animations: ^2.1.0
   local_auth: ^1.1.5
   logging: ^1.0.1
+  lottie: ^1.2.2
   motionphoto:
     git: "https://github.com/ente-io/motionphoto.git"
   move_to_background: ^1.0.2