Merge branch 'master' of github.com:ente-io/frame into clean_up_2

ios/Podfile.lock

@@ -1,5 +1,5 @@
 PODS:
-  - background_fetch (1.1.0):
+  - background_fetch (1.1.1):
     - Flutter
   - connectivity (0.0.1):
     - Flutter
@@ -309,7 +309,7 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/wakelock/ios"
 
 SPEC CHECKSUMS:
-  background_fetch: 3795af8a49054dc526477cc2f60d2ed41de60587
+  background_fetch: ef7bc433c96131e4f284d8616d2e0d4e18fa6af4
   connectivity: c4130b2985d4ef6fd26f9702e886bd5260681467
   device_info: d7d233b645a32c40dfdc212de5cf646ca482f175
   Firebase: 800f16f07af493d98d017446a315c27af0552f41

lib/ente_theme_data.dart

@@ -293,10 +293,6 @@ extension CustomColorScheme on ColorScheme {
       ? const Color.fromRGBO(196, 196, 196, 0.6)
       : const Color.fromRGBO(255, 255, 255, 0.7);
 
-  Color get gNavBackgroundColor => brightness == Brightness.light
-      ? const Color.fromRGBO(196, 196, 196, 0.6)
-      : const Color.fromRGBO(40, 40, 40, 0.6);
-
   Color get gNavBarActiveColor => brightness == Brightness.light
       ? const Color.fromRGBO(255, 255, 255, 0.6)
       : const Color.fromRGBO(255, 255, 255, 0.9);

lib/events/opened_settings_event.dart

@@ -0,0 +1,3 @@
+import 'package:photos/events/event.dart';
+
+class OpenedSettingsEvent extends Event {}

lib/events/tab_changed_event.dart

@@ -15,5 +15,4 @@ enum TabChangedEventSource {
   pageView,
   collectionsPage,
   backButton,
-  settingsTitleBar
 }

lib/states/user_details_state.dart

@@ -1,8 +1,9 @@
 import 'dart:async';
 
 import 'package:flutter/material.dart';
+import 'package:photos/core/configuration.dart';
 import 'package:photos/core/event_bus.dart';
-import 'package:photos/events/tab_changed_event.dart';
+import 'package:photos/events/opened_settings_event.dart';
 import 'package:photos/events/user_details_changed_event.dart';
 import 'package:photos/models/user_details.dart';
 // ignore: import_of_legacy_library_into_null_safe
@@ -20,22 +21,29 @@ class UserDetailsStateWidget extends StatefulWidget {
 }
 
 class UserDetailsStateWidgetState extends State<UserDetailsStateWidget> {
-  late Future<UserDetails> userDetails;
+  late Future<UserDetails?> userDetails;
   late StreamSubscription<UserDetailsChangedEvent> _userDetailsChangedEvent;
-  late StreamSubscription<TabChangedEvent> _tabChangedEventSubscription;
+  late StreamSubscription<OpenedSettingsEvent> _openedSettingsEventSubscription;
 
   @override
   void initState() {
-    _fetchUserDetails();
+    if (Configuration.instance.hasConfiguredAccount()) {
+      _fetchUserDetails();
+    } else {
+      userDetails = Future.value(null);
+    }
     _userDetailsChangedEvent =
         Bus.instance.on<UserDetailsChangedEvent>().listen((event) {
       _fetchUserDetails();
     });
-    _tabChangedEventSubscription =
-        Bus.instance.on<TabChangedEvent>().listen((event) {
-      if (event.selectedIndex == 3) {
-        _fetchUserDetails();
-      }
+    _openedSettingsEventSubscription =
+        Bus.instance.on<OpenedSettingsEvent>().listen((event) {
+      Future.delayed(
+        const Duration(
+          seconds: 1,
+        ),
+        _fetchUserDetails,
+      );
     });
     super.initState();
   }
@@ -43,7 +51,7 @@ class UserDetailsStateWidgetState extends State<UserDetailsStateWidget> {
   @override
   void dispose() {
     _userDetailsChangedEvent.cancel();
-    _tabChangedEventSubscription.cancel();
+    _openedSettingsEventSubscription.cancel();
     super.dispose();
   }
 
@@ -64,7 +72,7 @@ class UserDetailsStateWidgetState extends State<UserDetailsStateWidget> {
 
 class InheritedUserDetails extends InheritedWidget {
   final UserDetailsStateWidgetState userDetailsState;
-  final Future<UserDetails> userDetails;
+  final Future<UserDetails?> userDetails;
 
   const InheritedUserDetails({
     Key? key,

lib/theme/colors.dart

@@ -26,6 +26,7 @@ class EnteColorScheme {
   final Color strokeBase;
   final Color strokeMuted;
   final Color strokeFaint;
+  final Color strokeFainter;
 
   // Fixed Colors
   final Color primary700;
@@ -52,7 +53,8 @@ class EnteColorScheme {
     this.fillFaint,
     this.strokeBase,
     this.strokeMuted,
-    this.strokeFaint, {
+    this.strokeFaint,
+    this.strokeFainter, {
     this.primary700 = _primary700,
     this.primary500 = _primary500,
     this.primary400 = _primary400,
@@ -79,6 +81,7 @@ const EnteColorScheme lightScheme = EnteColorScheme(
   strokeBaseLight,
   strokeMutedLight,
   strokeFaintLight,
+  strokeFainterLight,
 );
 
 const EnteColorScheme darkScheme = EnteColorScheme(
@@ -96,6 +99,7 @@ const EnteColorScheme darkScheme = EnteColorScheme(
   strokeBaseDark,
   strokeMutedDark,
   strokeFaintDark,
+  strokeFainterDark,
 );
 
 // Background Colors
@@ -135,11 +139,13 @@ const Color fillFaintDark = Color.fromRGBO(255, 255, 255, 0.12);
 // Stroke Colors
 const Color strokeBaseLight = Color.fromRGBO(0, 0, 0, 1);
 const Color strokeMutedLight = Color.fromRGBO(0, 0, 0, 0.24);
-const Color strokeFaintLight = Color.fromRGBO(0, 0, 0, 0.04);
+const Color strokeFaintLight = Color.fromRGBO(0, 0, 0, 0.12);
+const Color strokeFainterLight = Color.fromRGBO(0, 0, 0, 0.06);
 
 const Color strokeBaseDark = Color.fromRGBO(255, 255, 255, 1);
 const Color strokeMutedDark = Color.fromRGBO(255, 255, 255, 0.24);
 const Color strokeFaintDark = Color.fromRGBO(255, 255, 255, 0.16);
+const Color strokeFainterDark = Color.fromRGBO(255, 255, 255, 0.08);
 
 // Fixed Colors
 

lib/ui/backup_folder_selection_page.dart

@@ -150,36 +150,33 @@ class _BackupFolderSelectionPageState extends State<BackupFolderSelectionPage> {
           Expanded(child: _getFolders()),
           Column(
             children: [
-              Hero(
-                tag: "select_folders",
-                child: Container(
-                  width: double.infinity,
-                  decoration: BoxDecoration(
-                    boxShadow: [
-                      BoxShadow(
-                        color: Theme.of(context).backgroundColor,
-                        blurRadius: 24,
-                        offset: const Offset(0, -8),
-                        spreadRadius: 4,
-                      )
-                    ],
-                  ),
-                  padding: widget.isOnboarding
-                      ? const EdgeInsets.only(left: 20, right: 20)
-                      : EdgeInsets.only(
-                          top: 16,
-                          left: 20,
-                          right: 20,
-                          bottom: Platform.isIOS ? 60 : 32,
-                        ),
-                  child: OutlinedButton(
-                    onPressed: _selectedDevicePathIDs.isEmpty
-                        ? null
-                        : () async {
-                            await updateFolderSettings();
-                          },
-                    child: Text(widget.buttonText),
-                  ),
+              Container(
+                width: double.infinity,
+                decoration: BoxDecoration(
+                  boxShadow: [
+                    BoxShadow(
+                      color: Theme.of(context).backgroundColor,
+                      blurRadius: 24,
+                      offset: const Offset(0, -8),
+                      spreadRadius: 4,
+                    )
+                  ],
+                ),
+                padding: widget.isOnboarding
+                    ? const EdgeInsets.only(left: 20, right: 20)
+                    : EdgeInsets.only(
+                        top: 16,
+                        left: 20,
+                        right: 20,
+                        bottom: Platform.isIOS ? 60 : 32,
+                      ),
+                child: OutlinedButton(
+                  onPressed: _selectedDevicePathIDs.isEmpty
+                      ? null
+                      : () async {
+                          await updateFolderSettings();
+                        },
+                  child: Text(widget.buttonText),
                 ),
               ),
               widget.isOnboarding

lib/ui/components/brand_title_widget.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+
+enum SizeVarient {
+  small(21),
+  medium(24),
+  large(28);
+
+  final double size;
+  const SizeVarient(this.size);
+}
+
+class BrandTitleWidget extends StatelessWidget {
+  final SizeVarient size;
+  const BrandTitleWidget({required this.size, Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      "ente",
+      style: TextStyle(
+        fontWeight: FontWeight.bold,
+        fontFamily: 'Montserrat',
+        fontSize: SizeVarient.medium.size,
+      ),
+    );
+  }
+}

lib/ui/components/expandable_menu_item_widget.dart

@@ -23,19 +23,30 @@ class ExpandableMenuItemWidget extends StatefulWidget {
 
 class _ExpandableMenuItemWidgetState extends State<ExpandableMenuItemWidget> {
   final expandableController = ExpandableController(initialExpanded: false);
+  @override
+  void initState() {
+    expandableController.addListener(() {
+      setState(() {});
+    });
+    super.initState();
+  }
 
   @override
   void dispose() {
-    expandableController.dispose();
+    expandableController.removeListener(() {});
     super.dispose();
   }
 
   @override
   Widget build(BuildContext context) {
     final enteColorScheme = Theme.of(context).colorScheme.enteTheme.colorScheme;
-    return Container(
+    return AnimatedContainer(
+      curve: Curves.ease,
+      duration: const Duration(milliseconds: 200),
       decoration: BoxDecoration(
-        color: enteColorScheme.backgroundElevated2,
+        color: expandableController.value
+            ? enteColorScheme.backgroundElevated2
+            : null,
         borderRadius: BorderRadius.circular(4),
       ),
       child: ExpandableNotifier(

lib/ui/components/home_header_widget.dart

@@ -0,0 +1,46 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+import 'package:photos/core/event_bus.dart';
+import 'package:photos/events/opened_settings_event.dart';
+import 'package:photos/ui/viewer/search/search_widget.dart';
+
+class HomeHeaderWidget extends StatefulWidget {
+  final Widget centerWidget;
+  const HomeHeaderWidget({required this.centerWidget, Key? key})
+      : super(key: key);
+
+  @override
+  State<HomeHeaderWidget> createState() => _HomeHeaderWidgetState();
+}
+
+class _HomeHeaderWidgetState extends State<HomeHeaderWidget> {
+  @override
+  Widget build(BuildContext context) {
+    final hasNotch = window.viewPadding.top > 65;
+    return Padding(
+      padding: EdgeInsets.fromLTRB(4, hasNotch ? 4 : 8, 4, 4),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          IconButton(
+            visualDensity: const VisualDensity(horizontal: -2, vertical: -2),
+            onPressed: () {
+              Scaffold.of(context).openDrawer();
+              Bus.instance.fire(OpenedSettingsEvent());
+            },
+            splashColor: Colors.transparent,
+            icon: const Icon(
+              Icons.menu_outlined,
+            ),
+          ),
+          AnimatedSwitcher(
+            duration: const Duration(milliseconds: 250),
+            child: widget.centerWidget,
+          ),
+          const SearchIconWidget(),
+        ],
+      ),
+    );
+  }
+}

lib/ui/components/menu_item_widget.dart

@@ -114,13 +114,15 @@ class _MenuItemWidgetState extends State<MenuItemWidget> {
           widget.expandableController != null
               ? AnimatedOpacity(
                   duration: const Duration(milliseconds: 100),
+                  curve: Curves.easeInOut,
                   opacity: isExpanded! ? 0 : 1,
                   child: AnimatedSwitcher(
                     transitionBuilder: (child, animation) {
                       return ScaleTransition(scale: animation, child: child);
                     },
                     duration: const Duration(milliseconds: 200),
-                    child: isExpanded!
+                    switchInCurve: Curves.easeOut,
+                    child: isExpanded
                         ? const SizedBox.shrink()
                         : Icon(widget.trailingIcon),
                   ),

lib/ui/extents_page_view.dart

@@ -3,6 +3,8 @@
 import 'package:flutter/gestures.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter/widgets.dart' hide PageView;
+import 'package:photos/core/event_bus.dart';
+import 'package:photos/events/opened_settings_event.dart';
 
 /// This is copy-pasted from the Flutter framework with a support added for building
 /// pages off screen using [Viewport.cacheExtents] and a [LayoutBuilder]
@@ -58,6 +60,7 @@ class ExtentsPageView extends StatefulWidget {
     this.onPageChanged,
     List<Widget> children = const <Widget>[],
     this.dragStartBehavior = DragStartBehavior.start,
+    this.openDrawer,
   })  : controller = controller ?? _defaultPageController,
         childrenDelegate = SliverChildListDelegate(children),
         extents = children.length,
@@ -90,6 +93,7 @@ class ExtentsPageView extends StatefulWidget {
     @required IndexedWidgetBuilder itemBuilder,
     int itemCount,
     this.dragStartBehavior = DragStartBehavior.start,
+    this.openDrawer,
   })  : controller = controller ?? _defaultPageController,
         childrenDelegate =
             SliverChildBuilderDelegate(itemBuilder, childCount: itemCount),
@@ -108,6 +112,7 @@ class ExtentsPageView extends StatefulWidget {
     @required IndexedWidgetBuilder itemBuilder,
     int itemCount,
     this.dragStartBehavior = DragStartBehavior.start,
+    this.openDrawer,
   })  : controller = controller ?? _defaultPageController,
         childrenDelegate = SliverChildBuilderDelegate(
           itemBuilder,
@@ -207,6 +212,7 @@ class ExtentsPageView extends StatefulWidget {
     this.onPageChanged,
     @required this.childrenDelegate,
     this.dragStartBehavior = DragStartBehavior.start,
+    this.openDrawer,
   })  : assert(childrenDelegate != null),
         extents = 0,
         controller = controller ?? _defaultPageController,
@@ -272,6 +278,8 @@ class ExtentsPageView extends StatefulWidget {
   /// {@macro flutter.widgets.scrollable.dragStartBehavior}
   final DragStartBehavior dragStartBehavior;
 
+  final Function openDrawer; //nullable
+
   @override
   State<ExtentsPageView> createState() => _PageViewState();
 }
@@ -283,6 +291,20 @@ class _PageViewState extends State<ExtentsPageView> {
   void initState() {
     super.initState();
     _lastReportedPage = widget.controller.initialPage;
+    widget.openDrawer != null
+        ? widget.controller.addListener(() {
+            if (widget.controller.offset < -45) {
+              widget.openDrawer();
+              Bus.instance.fire(OpenedSettingsEvent());
+            }
+          })
+        : null;
+  }
+
+  @override
+  void dispose() {
+    widget.controller.dispose();
+    super.dispose();
   }
 
   AxisDirection _getDirection(BuildContext context) {

lib/ui/home_widget.dart

@@ -5,6 +5,7 @@ import 'dart:io';
 import 'dart:ui';
 
 import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart';
 import 'package:flutter/services.dart';
 import 'package:logging/logging.dart';
 import 'package:move_to_background/move_to_background.dart';
@@ -32,6 +33,8 @@ import 'package:photos/services/ignored_files_service.dart';
 import 'package:photos/services/local_sync_service.dart';
 import 'package:photos/services/update_service.dart';
 import 'package:photos/services/user_service.dart';
+import 'package:photos/states/user_details_state.dart';
+import 'package:photos/theme/ente_theme.dart';
 import 'package:photos/ui/backup_folder_selection_page.dart';
 import 'package:photos/ui/collections_gallery_widget.dart';
 import 'package:photos/ui/common/bottom_shadow.dart';
@@ -74,7 +77,6 @@ class _HomeWidgetState extends State<HomeWidget> {
   final _logger = Logger("HomeWidgetState");
   final _selectedFiles = SelectedFiles();
 
-  // final _settingsButton = SettingsButton();
   final PageController _pageController = PageController();
   int _selectedTabIndex = 0;
   Widget _headerWidgetWithSettingsButton;
@@ -96,13 +98,10 @@ class _HomeWidgetState extends State<HomeWidget> {
   @override
   void initState() {
     _logger.info("Building initstate");
-    _headerWidgetWithSettingsButton = Container(
-      margin: const EdgeInsets.only(top: 12),
-      child: Stack(
-        children: const [
-          _headerWidget,
-        ],
-      ),
+    _headerWidgetWithSettingsButton = Stack(
+      children: const [
+        _headerWidget,
+      ],
     );
     _tabChangedEventSubscription =
         Bus.instance.on<TabChangedEvent>().listen((event) {
@@ -254,35 +253,60 @@ class _HomeWidgetState extends State<HomeWidget> {
   @override
   Widget build(BuildContext context) {
     _logger.info("Building home_Widget with tab $_selectedTabIndex");
-
-    return WillPopScope(
-      child: Scaffold(
-        appBar: PreferredSize(
-          preferredSize: const Size.fromHeight(0),
-          child: Container(),
+    bool isSettingsOpen = false;
+    final enableDrawer = LocalSyncService.instance.hasCompletedFirstImport();
+
+    return UserDetailsStateWidget(
+      child: WillPopScope(
+        child: Scaffold(
+          drawerScrimColor: getEnteColorScheme(context).strokeFainter,
+          drawerEnableOpenDragGesture:
+              false, //using a hack instead of enabling this as enabling this will create other problems
+          drawer: enableDrawer
+              ? ConstrainedBox(
+                  constraints: const BoxConstraints(maxWidth: 428),
+                  child: Drawer(
+                    width: double.infinity,
+                    child: _settingsPage,
+                  ),
+                )
+              : null,
+          onDrawerChanged: (isOpened) => isSettingsOpen = isOpened,
+          body: SafeArea(
+            bottom: false,
+            child: Builder(
+              builder: (context) {
+                return _getBody(context);
+              },
+            ),
+          ),
+          resizeToAvoidBottomInset: false,
         ),
-        body: _getBody(),
-        resizeToAvoidBottomInset: false,
-      ),
-      onWillPop: () async {
-        if (_selectedTabIndex == 0) {
-          if (Platform.isAndroid) {
-            MoveToBackground.moveTaskToBack();
-            return false;
+        onWillPop: () async {
+          if (_selectedTabIndex == 0) {
+            if (isSettingsOpen) {
+              Navigator.pop(context);
+              return false;
+            }
+            if (Platform.isAndroid) {
+              MoveToBackground.moveTaskToBack();
+              return false;
+            } else {
+              return true;
+            }
           } else {
-            return true;
+            Bus.instance
+                .fire(TabChangedEvent(0, TabChangedEventSource.backButton));
+            return false;
           }
-        } else {
-          Bus.instance
-              .fire(TabChangedEvent(0, TabChangedEventSource.backButton));
-          return false;
-        }
-      },
+        },
+      ),
     );
   }
 
-  Widget _getBody() {
+  Widget _getBody(BuildContext context) {
     if (!Configuration.instance.hasConfiguredAccount()) {
+      _closeDrawerIfOpen(context);
       return const LandingPageWidget();
     }
     if (!LocalSyncService.instance.hasGrantedPermissions()) {
@@ -295,6 +319,7 @@ class _HomeWidgetState extends State<HomeWidget> {
       ReceiveSharingIntent.reset();
       return CreateCollectionPage(null, _sharedFiles);
     }
+    final isBottomInsetPresent = MediaQuery.of(context).viewPadding.bottom != 0;
 
     final bool showBackupFolderHook =
         !Configuration.instance.hasSelectedAnyBackupFolder() &&
@@ -302,24 +327,29 @@ class _HomeWidgetState extends State<HomeWidget> {
             CollectionsService.instance.getActiveCollections().isEmpty;
     return Stack(
       children: [
-        ExtentsPageView(
-          onPageChanged: (page) {
-            Bus.instance.fire(
-              TabChangedEvent(
-                page,
-                TabChangedEventSource.pageView,
-              ),
+        Builder(
+          builder: (context) {
+            return ExtentsPageView(
+              onPageChanged: (page) {
+                Bus.instance.fire(
+                  TabChangedEvent(
+                    page,
+                    TabChangedEventSource.pageView,
+                  ),
+                );
+              },
+              controller: _pageController,
+              openDrawer: Scaffold.of(context).openDrawer,
+              physics: const BouncingScrollPhysics(),
+              children: [
+                showBackupFolderHook
+                    ? _getBackupFolderSelectionHook()
+                    : _getMainGalleryWidget(),
+                _deviceFolderGalleryWidget,
+                _sharedCollectionGallery,
+              ],
             );
           },
-          controller: _pageController,
-          children: [
-            showBackupFolderHook
-                ? _getBackupFolderSelectionHook()
-                : _getMainGalleryWidget(),
-            _deviceFolderGalleryWidget,
-            _sharedCollectionGallery,
-            _settingsPage,
-          ],
         ),
         const Align(
           alignment: Alignment.bottomCenter,
@@ -327,8 +357,8 @@ class _HomeWidgetState extends State<HomeWidget> {
         ),
         Align(
           alignment: Alignment.bottomCenter,
-          child: SafeArea(
-            minimum: const EdgeInsets.only(bottom: 8),
+          child: Padding(
+            padding: EdgeInsets.only(bottom: isBottomInsetPresent ? 32 : 8),
             child: HomeBottomNavigationBar(
               _selectedFiles,
               selectedTabIndex: _selectedTabIndex,
@@ -343,6 +373,14 @@ class _HomeWidgetState extends State<HomeWidget> {
     );
   }
 
+  void _closeDrawerIfOpen(BuildContext context) {
+    Scaffold.of(context).isDrawerOpen
+        ? SchedulerBinding.instance.addPostFrameCallback((timeStamp) {
+            Scaffold.of(context).closeDrawer();
+          })
+        : null;
+  }
+
   Future<bool> _initDeepLinks() async {
     // Platform messages may fail, so we use a try/catch PlatformException.
     try {
@@ -472,30 +510,27 @@ class _HomeWidgetState extends State<HomeWidget> {
               .copyWith(fontFamily: 'Inter-Medium', fontSize: 16),
         ),
         Center(
-          child: Hero(
-            tag: "select_folders",
-            child: Material(
-              type: MaterialType.transparency,
-              child: Container(
-                width: double.infinity,
-                height: 64,
-                padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
-                child: GradientButton(
-                  onTap: () async {
-                    if (LocalSyncService.instance
-                        .hasGrantedLimitedPermissions()) {
-                      PhotoManager.presentLimited();
-                    } else {
-                      routeToPage(
-                        context,
-                        const BackupFolderSelectionPage(
-                          buttonText: "Start backup",
-                        ),
-                      );
-                    }
-                  },
-                  text: "Start backup",
-                ),
+          child: Material(
+            type: MaterialType.transparency,
+            child: Container(
+              width: double.infinity,
+              height: 64,
+              padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
+              child: GradientButton(
+                onTap: () async {
+                  if (LocalSyncService.instance
+                      .hasGrantedLimitedPermissions()) {
+                    PhotoManager.presentLimited();
+                  } else {
+                    routeToPage(
+                      context,
+                      const BackupFolderSelectionPage(
+                        buttonText: "Start backup",
+                      ),
+                    );
+                  }
+                },
+                text: "Start backup",
               ),
             ),
           ),
@@ -605,7 +640,7 @@ class _HomeBottomNavigationBarState extends State<HomeBottomNavigationBar> {
     return AnimatedContainer(
       duration: const Duration(milliseconds: 300),
       curve: Curves.easeInOut,
-      height: filesAreSelected ? 0 : 52,
+      height: filesAreSelected ? 0 : 56,
       child: AnimatedOpacity(
         duration: const Duration(milliseconds: 100),
         opacity: filesAreSelected ? 0.0 : 1.0,
@@ -619,19 +654,17 @@ class _HomeBottomNavigationBarState extends State<HomeBottomNavigationBar> {
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: [
                   ClipRRect(
-                    borderRadius: BorderRadius.circular(36),
+                    borderRadius: BorderRadius.circular(32),
                     child: Container(
                       alignment: Alignment.bottomCenter,
-                      height: 52,
-                      width: 240,
+                      height: 56,
                       child: ClipRect(
                         child: BackdropFilter(
-                          filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
+                          filter: ImageFilter.blur(sigmaX: 96, sigmaY: 96),
                           child: GNav(
                             curve: Curves.easeOutExpo,
-                            backgroundColor: Theme.of(context)
-                                .colorScheme
-                                .gNavBackgroundColor,
+                            backgroundColor:
+                                getEnteColorScheme(context).fillMuted,
                             mainAxisAlignment: MainAxisAlignment.center,
                             rippleColor: Colors.white.withOpacity(0.1),
                             activeColor: Theme.of(context)
@@ -648,7 +681,7 @@ class _HomeBottomNavigationBarState extends State<HomeBottomNavigationBar> {
                             haptic: false,
                             tabs: [
                               GButton(
-                                margin: const EdgeInsets.fromLTRB(6, 6, 0, 6),
+                                margin: const EdgeInsets.fromLTRB(12, 8, 6, 8),
                                 icon: Icons.home,
                                 iconColor:
                                     Theme.of(context).colorScheme.gNavIconColor,
@@ -663,7 +696,7 @@ class _HomeBottomNavigationBarState extends State<HomeBottomNavigationBar> {
                                 },
                               ),
                               GButton(
-                                margin: const EdgeInsets.fromLTRB(0, 6, 0, 6),
+                                margin: const EdgeInsets.fromLTRB(6, 8, 6, 8),
                                 icon: Icons.photo_library,
                                 iconColor:
                                     Theme.of(context).colorScheme.gNavIconColor,
@@ -678,7 +711,7 @@ class _HomeBottomNavigationBarState extends State<HomeBottomNavigationBar> {
                                 },
                               ),
                               GButton(
-                                margin: const EdgeInsets.fromLTRB(0, 6, 0, 6),
+                                margin: const EdgeInsets.fromLTRB(6, 8, 12, 8),
                                 icon: Icons.folder_shared,
                                 iconColor:
                                     Theme.of(context).colorScheme.gNavIconColor,
@@ -692,21 +725,6 @@ class _HomeBottomNavigationBarState extends State<HomeBottomNavigationBar> {
                                   ); // To take care of occasional missing events
                                 },
                               ),
-                              GButton(
-                                margin: const EdgeInsets.fromLTRB(0, 6, 6, 6),
-                                icon: Icons.person,
-                                iconColor:
-                                    Theme.of(context).colorScheme.gNavIconColor,
-                                iconActiveColor: Theme.of(context)
-                                    .colorScheme
-                                    .gNavActiveIconColor,
-                                text: '',
-                                onPressed: () {
-                                  _onTabChange(
-                                    3,
-                                  ); // To take care of occasional missing events
-                                },
-                              )
                             ],
                             selectedIndex: currentTabIndex,
                             onTabChange: _onTabChange,

lib/ui/settings/settings_title_bar_widget.dart

@@ -1,8 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';
 import 'package:logging/logging.dart';
-import 'package:photos/core/event_bus.dart';
-import 'package:photos/events/tab_changed_event.dart';
 import 'package:photos/models/user_details.dart';
 import 'package:photos/states/user_details_state.dart';
 import 'package:photos/theme/ente_theme.dart';
@@ -17,19 +15,14 @@ class SettingsTitleBarWidget extends StatelessWidget {
     return Container(
       padding: const EdgeInsets.symmetric(vertical: 4),
       child: Padding(
-        padding: const EdgeInsets.fromLTRB(12, 0, 20, 0),
+        padding: const EdgeInsets.fromLTRB(8, 0, 20, 0),
         child: Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
             IconButton(
               visualDensity: const VisualDensity(horizontal: -2, vertical: -2),
               onPressed: () {
-                Bus.instance.fire(
-                  TabChangedEvent(
-                    0,
-                    TabChangedEventSource.settingsTitleBar,
-                  ),
-                );
+                Navigator.pop(context);
               },
               icon: const Icon(Icons.keyboard_double_arrow_left_outlined),
             ),

lib/ui/settings_page.dart

@@ -6,7 +6,6 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:photos/core/configuration.dart';
 import 'package:photos/services/feature_flag_service.dart';
-import 'package:photos/states/user_details_state.dart';
 import 'package:photos/theme/colors.dart';
 import 'package:photos/theme/ente_theme.dart';
 import 'package:photos/ui/settings/about_section_widget.dart';
@@ -31,7 +30,7 @@ class SettingsPage extends StatelessWidget {
     final enteColorScheme = getEnteColorScheme(context);
     return Scaffold(
       body: Container(
-        color: enteColorScheme.backgroundElevated,
+        color: enteColorScheme.backdropBase,
         child: _getBody(context, enteColorScheme),
       ),
     );
@@ -111,7 +110,8 @@ class SettingsPage extends StatelessWidget {
       ),
     );
 
-    return UserDetailsStateWidget(
+    return SafeArea(
+      bottom: false,
       child: SingleChildScrollView(
         child: Column(
           mainAxisSize: MainAxisSize.min,
@@ -119,13 +119,8 @@ class SettingsPage extends StatelessWidget {
             const SettingsTitleBarWidget(),
             Padding(
               padding: const EdgeInsets.fromLTRB(16, 16, 16, 24),
-              child: Center(
-                child: ConstrainedBox(
-                  constraints: const BoxConstraints(maxWidth: 428),
-                  child: Column(
-                    children: contents,
-                  ),
-                ),
+              child: Column(
+                children: contents,
               ),
             ),
           ],

lib/ui/status_bar_widget.dart

@@ -10,9 +10,10 @@ import 'package:photos/events/sync_status_update_event.dart';
 import 'package:photos/services/sync_service.dart';
 import 'package:photos/services/user_remote_flag_service.dart';
 import 'package:photos/ui/account/verify_recovery_page.dart';
+import 'package:photos/ui/components/brand_title_widget.dart';
+import 'package:photos/ui/components/home_header_widget.dart';
 import 'package:photos/ui/components/notification_warning_widget.dart';
 import 'package:photos/ui/header_error_widget.dart';
-import 'package:photos/ui/viewer/search/search_widget.dart';
 import 'package:photos/utils/navigation_util.dart';
 
 const double kContainerHeight = 36;
@@ -29,16 +30,19 @@ class _StatusBarWidgetState extends State<StatusBarWidget> {
   StreamSubscription<NotificationEvent> _notificationSubscription;
   bool _showStatus = false;
   bool _showErrorBanner = false;
+  Error _syncError;
 
   @override
   void initState() {
     _subscription = Bus.instance.on<SyncStatusUpdate>().listen((event) {
       if (event.status == SyncStatus.error) {
         setState(() {
+          _syncError = event.error;
           _showErrorBanner = true;
         });
       } else {
         setState(() {
+          _syncError = null;
           _showErrorBanner = false;
         });
       }
@@ -77,38 +81,23 @@ class _StatusBarWidgetState extends State<StatusBarWidget> {
   Widget build(BuildContext context) {
     return Column(
       children: [
-        Stack(
-          children: [
-            AnimatedOpacity(
-              opacity: _showStatus
-                  ? _showErrorBanner
-                      ? 1
-                      : 0
-                  : 1,
-              duration: const Duration(milliseconds: 1000),
-              child: const BrandingWidget(),
-            ),
-            AnimatedOpacity(
-              opacity: _showStatus ? 1 : 0,
-              duration: const Duration(milliseconds: 1000),
-              child: const SyncStatusWidget(),
-            ),
-            Positioned(
-              right: 0,
-              top: 0,
-              child: Container(
-                color: Theme.of(context).colorScheme.defaultBackgroundColor,
-                height: kContainerHeight,
-                child: const SearchIconWidget(),
-              ),
-            ),
-          ],
+        HomeHeaderWidget(
+          centerWidget: _showStatus
+              ? _showErrorBanner
+                  ? const BrandTitleWidget(size: SizeVarient.medium)
+                  : const SyncStatusWidget()
+              : const BrandTitleWidget(size: SizeVarient.medium),
         ),
         AnimatedOpacity(
-          opacity: _showStatus ? 1 : 0,
-          duration: const Duration(milliseconds: 1000),
-          child: const Divider(),
+          opacity: _showErrorBanner ? 1 : 0,
+          duration: const Duration(milliseconds: 200),
+          child: const Divider(
+            height: 8,
+          ),
         ),
+        _showErrorBanner
+            ? HeaderErrorWidget(error: _syncError)
+            : const SizedBox.shrink(),
         UserRemoteFlagService.instance.shouldShowRecoveryVerification()
             ? NotificationWarningWidget(
                 warningIcon: Icons.gpp_maybe,
@@ -165,15 +154,12 @@ class _SyncStatusWidgetState extends State<SyncStatusWidget> {
             _event.status == SyncStatus.completedFirstGalleryImport) &&
         (DateTime.now().microsecondsSinceEpoch - _event.timestamp >
             kSleepDuration.inMicroseconds);
-    if (_event == null || isNotOutdatedEvent) {
+    if (_event == null ||
+        isNotOutdatedEvent ||
+        //sync error cases are handled in StatusBarWidget
+        _event.status == SyncStatus.error) {
       return const SizedBox.shrink();
     }
-    if (_event.status == SyncStatus.error) {
-      return Padding(
-        padding: const EdgeInsets.only(top: kContainerHeight + 8),
-        child: HeaderErrorWidget(error: _event.error),
-      );
-    }
     if (_event.status == SyncStatus.completedBackup) {
       return const SyncStatusCompletedWidget();
     }
@@ -195,7 +181,6 @@ class RefreshIndicatorWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     return Container(
       height: kContainerHeight,
-      width: double.infinity,
       alignment: Alignment.center,
       child: SingleChildScrollView(
         physics: const NeverScrollableScrollPhysics(),

lib/ui/viewer/gallery/gallery_app_bar_widget.dart

@@ -73,26 +73,28 @@ class _GalleryAppBarWidgetState extends State<GalleryAppBarWidget> {
 
   @override
   Widget build(BuildContext context) {
-    // if (widget.selectedFiles.files.isEmpty) {
-    return AppBar(
-      backgroundColor:
-          widget.type == GalleryType.homepage ? const Color(0x00000000) : null,
-      elevation: 0,
-      centerTitle: false,
-      title: widget.type == GalleryType.homepage
-          ? const SizedBox.shrink()
-          : TextButton(
-              child: Text(
-                _appBarTitle,
-                style: Theme.of(context)
-                    .textTheme
-                    .headline5
-                    .copyWith(fontSize: 16),
-              ),
-              onPressed: () => _renameAlbum(context),
-            ),
-      actions: _getDefaultActions(context),
-    );
+    return widget.type == GalleryType.homepage
+        ? const SizedBox.shrink()
+        : AppBar(
+            backgroundColor: widget.type == GalleryType.homepage
+                ? const Color(0x00000000)
+                : null,
+            elevation: 0,
+            centerTitle: false,
+            title: widget.type == GalleryType.homepage
+                ? const SizedBox.shrink()
+                : TextButton(
+                    child: Text(
+                      _appBarTitle,
+                      style: Theme.of(context)
+                          .textTheme
+                          .headline5
+                          .copyWith(fontSize: 16),
+                    ),
+                    onPressed: () => _renameAlbum(context),
+                  ),
+            actions: _getDefaultActions(context),
+          );
   }
 
   Future<dynamic> _renameAlbum(BuildContext context) async {

lib/ui/viewer/search/search_widget.dart

@@ -33,6 +33,7 @@ class _SearchIconWidgetState extends State<SearchIconWidget> {
     return Hero(
       tag: "search_icon",
       child: IconButton(
+        visualDensity: const VisualDensity(horizontal: -2, vertical: -2),
         onPressed: () {
           Navigator.push(
             context,

pubspec.lock

@@ -42,7 +42,7 @@ packages:
       name: background_fetch
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0"
+    version: "1.1.1"
   bip39:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -15,13 +15,13 @@ description: ente photos application
 version: 0.6.42+372
 
 environment:
-  sdk: '>=2.12.0 <3.0.0'
+  sdk: '>=2.17.0 <3.0.0'
 
 dependencies:
   adaptive_theme: ^3.1.0
   animate_do: ^2.0.0
   archive: ^3.1.2
-  background_fetch: ^1.0.1
+  background_fetch: ^1.1.1
   bip39: ^1.0.6
   cached_network_image: ^3.0.0
   chewie: