Merge pull request #222 from ente-io/redesign-albums+edit

redesigned 'albums' screen

lib/ui/collection_page.dart

@@ -40,6 +40,7 @@ class CollectionPage extends StatelessWidget {
       tagPrefix: tagPrefix,
       selectedFiles: _selectedFiles,
       initialFiles: initialFiles,
+      smallerTodayFont: true,
     );
     return Scaffold(
       appBar: PreferredSize(

lib/ui/collections_gallery_widget.dart

@@ -8,6 +8,7 @@ import 'package:logging/logging.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/events/collection_updated_event.dart';
 import 'package:photos/events/local_photos_updated_event.dart';
@@ -105,54 +106,73 @@ class _CollectionsGalleryWidgetState extends State<CollectionsGalleryWidget>
         collectionsWithThumbnail.add(CollectionWithThumbnail(c, file));
       }
     }
-    collectionsWithThumbnail.sort((first, second) {
-      if (sortKey == AlbumSortKey.albumName) {
-        // alphabetical ASC order
-        return first.collection.name.compareTo(second.collection.name);
-      } else if (sortKey == AlbumSortKey.recentPhoto) {
-        return second.thumbnail.creationTime
-            .compareTo(first.thumbnail.creationTime);
-      } else {
-        return second.collection.updationTime
-            .compareTo(first.collection.updationTime);
-      }
-    });
+    collectionsWithThumbnail.sort(
+      (first, second) {
+        if (sortKey == AlbumSortKey.albumName) {
+          // alphabetical ASC order
+          return first.collection.name.compareTo(second.collection.name);
+        } else if (sortKey == AlbumSortKey.newestPhoto) {
+          return second.thumbnail.creationTime
+              .compareTo(first.thumbnail.creationTime);
+        } else if (sortKey == AlbumSortKey.oldestPhoto) {
+          return first.thumbnail.creationTime
+              .compareTo(second.thumbnail.creationTime);
+        } else {
+          return second.collection.updationTime
+              .compareTo(first.collection.updationTime);
+        }
+      },
+    );
     return CollectionItems(folders, collectionsWithThumbnail);
   }
 
   Widget _getCollectionsGalleryWidget(CollectionItems items) {
+    const double horizontalPaddingOfGridRow = 16;
+    const double crossAxisSpacingOfGrid = 5;
+    TextStyle trashAndHiddenTextStyle = Theme.of(context).textTheme.subtitle1;
     Size size = MediaQuery.of(context).size;
-    int albumsCountInOneRow = max(size.width~/220.0, 2);
+    int albumsCountInOneRow = max(size.width ~/ 220.0, 2);
+    final double sideOfThumbnail = (size.width / 2) -
+        horizontalPaddingOfGridRow -
+        ((crossAxisSpacingOfGrid / 2) * (albumsCountInOneRow - 1));
     return SingleChildScrollView(
       child: Container(
         margin: const EdgeInsets.only(bottom: 50),
         child: Column(
           children: [
             Padding(padding: EdgeInsets.all(6)),
-            SectionTitle("on device"),
+            SectionTitle("On device"),
             Padding(padding: EdgeInsets.all(8)),
             items.folders.isEmpty
                 ? Padding(
                     padding: const EdgeInsets.all(22),
-                    child: nothingToSeeHere,
+                    child: nothingToSeeHere(
+                        textColor:
+                            Theme.of(context).colorScheme.defaultTextColor),
                   )
-                : SizedBox(
-                    height: 170,
-                    child: Align(
-                      alignment: Alignment.centerLeft,
-                      child: items.folders.isEmpty
-                          ? nothingToSeeHere
-                          : ListView.builder(
-                              shrinkWrap: true,
-                              scrollDirection: Axis.horizontal,
-                              padding: EdgeInsets.fromLTRB(12, 0, 12, 0),
-                              physics:
-                                  ScrollPhysics(), // to disable GridView's scrolling
-                              itemBuilder: (context, index) {
-                                return DeviceFolderIcon(items.folders[index]);
-                              },
-                              itemCount: items.folders.length,
-                            ),
+                : Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 8),
+                    child: SizedBox(
+                      height: 170,
+                      child: Align(
+                        alignment: Alignment.centerLeft,
+                        child: items.folders.isEmpty
+                            ? nothingToSeeHere(
+                                textColor: Theme.of(context)
+                                    .colorScheme
+                                    .defaultTextColor)
+                            : ListView.builder(
+                                shrinkWrap: true,
+                                scrollDirection: Axis.horizontal,
+                                padding: EdgeInsets.fromLTRB(6, 0, 6, 0),
+                                physics:
+                                    ScrollPhysics(), // to disable GridView's scrolling
+                                itemBuilder: (context, index) {
+                                  return DeviceFolderIcon(items.folders[index]);
+                                },
+                                itemCount: items.folders.length,
+                              ),
+                      ),
                     ),
                   ),
             Padding(padding: EdgeInsets.all(4)),
@@ -161,115 +181,171 @@ class _CollectionsGalleryWidgetState extends State<CollectionsGalleryWidget>
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               crossAxisAlignment: CrossAxisAlignment.end,
               children: [
-                SectionTitle("on ente"),
+                SectionTitle("On ente"),
                 _sortMenu(),
               ],
             ),
             Padding(padding: EdgeInsets.all(12)),
             Configuration.instance.hasConfiguredAccount()
-                ? GridView.builder(
-                    shrinkWrap: true,
-                    padding: EdgeInsets.fromLTRB(0, 0, 12, 0),
-                    physics: ScrollPhysics(), // to disable GridView's scrolling
-                    itemBuilder: (context, index) {
-                      return _buildCollection(
-                          context, items.collections, index);
-                    },
-                    itemCount:
-                        items.collections.length + 1, // To include the + button
-                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-                      crossAxisCount: albumsCountInOneRow,
-                      mainAxisSpacing: 12,
+                ? Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 16),
+                    child: GridView.builder(
+                      shrinkWrap: true,
+                      physics:
+                          ScrollPhysics(), // to disable GridView's scrolling
+                      itemBuilder: (context, index) {
+                        return _buildCollection(
+                            context, items.collections, index);
+                      },
+                      itemCount: items.collections.length +
+                          1, // To include the + button
+                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                          crossAxisCount: albumsCountInOneRow,
+                          mainAxisSpacing: 12,
+                          crossAxisSpacing: crossAxisSpacingOfGrid,
+                          childAspectRatio: sideOfThumbnail /
+                              (sideOfThumbnail +
+                                  24)), //24 is height of album title
                     ),
                   )
-                : nothingToSeeHere,
+                : nothingToSeeHere(
+                    textColor: Theme.of(context).colorScheme.defaultTextColor),
+            SizedBox(height: 20),
             Divider(),
             Padding(padding: EdgeInsets.all(8)),
-            Row(
-              mainAxisAlignment: MainAxisAlignment.center,
-              crossAxisAlignment: CrossAxisAlignment.center,
-              mainAxisSize: MainAxisSize.min,
-              children: [
-                OutlinedButton(
-                  style: OutlinedButton.styleFrom(
-                    shape: RoundedRectangleBorder(
-                      borderRadius: BorderRadius.circular(5),
-                    ),
-                    padding: EdgeInsets.fromLTRB(20, 10, 20, 10),
-                    side: BorderSide(
-                      width: 2,
-                      color: Colors.white12,
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 16),
+              child: Column(
+                children: [
+                  OutlinedButton(
+                    style: OutlinedButton.styleFrom(
+                      backgroundColor: Theme.of(context).backgroundColor,
+                      shape: RoundedRectangleBorder(
+                        borderRadius: BorderRadius.circular(8),
+                      ),
+                      padding: EdgeInsets.all(0),
+                      side: BorderSide(
+                        width: 0.5,
+                        color:
+                            Theme.of(context).iconTheme.color.withOpacity(0.24),
+                      ),
                     ),
-                  ),
-                  child: SizedBox(
-                    width: 100,
-                    child: Row(
-                      mainAxisAlignment: MainAxisAlignment.center,
-                      crossAxisAlignment: CrossAxisAlignment.center,
-                      mainAxisSize: MainAxisSize.min,
-                      children: const [
-                        Icon(
-                          Icons.archive_outlined,
-                        ),
-                        Padding(padding: EdgeInsets.all(6)),
-                        Text(
-                          "archive",
-                          style: TextStyle(
-                            color: Colors.white,
-                          ),
+                    child: Container(
+                      height: 48,
+                      width: double.infinity,
+                      child: Padding(
+                        padding: const EdgeInsets.symmetric(horizontal: 16),
+                        child: Row(
+                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                          children: [
+                            Row(
+                              children: [
+                                Icon(
+                                  Icons.delete,
+                                  color: Theme.of(context).iconTheme.color,
+                                ),
+                                Padding(padding: EdgeInsets.all(6)),
+                                RichText(
+                                    text: TextSpan(
+                                        style: trashAndHiddenTextStyle.copyWith(
+                                          color: trashAndHiddenTextStyle.color
+                                              .withOpacity(0.5),
+                                        ),
+                                        children: [
+                                      TextSpan(
+                                          text: "Trash",
+                                          style: Theme.of(context)
+                                              .textTheme
+                                              .subtitle1),
+                                      TextSpan(text: "  \u2022  "),
+                                      TextSpan(
+                                          text:
+                                              "23"), //need to query in db and bring this value
+                                    ])),
+                              ],
+                            ),
+                            Icon(
+                              Icons.chevron_right,
+                              color: Theme.of(context).iconTheme.color,
+                            ),
+                          ],
                         ),
-                      ],
+                      ),
                     ),
+                    onPressed: () async {
+                      routeToPage(
+                        context,
+                        TrashPage(),
+                      );
+                    },
                   ),
-                  onPressed: () async {
-                    routeToPage(
-                      context,
-                      ArchivePage(),
-                    );
-                  },
-                ),
-                Padding(padding: EdgeInsets.fromLTRB(18, 0, 18, 0)),
-                OutlinedButton(
-                  style: OutlinedButton.styleFrom(
-                    shape: RoundedRectangleBorder(
-                      borderRadius: BorderRadius.circular(5),
-                    ),
-                    padding: EdgeInsets.fromLTRB(20, 10, 20, 10),
-                    side: BorderSide(
-                      width: 2,
-                      color: Colors.white12,
+                  SizedBox(height: 12),
+                  OutlinedButton(
+                    style: OutlinedButton.styleFrom(
+                      backgroundColor: Theme.of(context).backgroundColor,
+                      shape: RoundedRectangleBorder(
+                        borderRadius: BorderRadius.circular(8),
+                      ),
+                      padding: EdgeInsets.all(0),
+                      side: BorderSide(
+                        width: 0.5,
+                        color:
+                            Theme.of(context).iconTheme.color.withOpacity(0.24),
+                      ),
                     ),
-                  ),
-                  child: SizedBox(
-                    width: 100,
-                    child: Row(
-                      mainAxisAlignment: MainAxisAlignment.center,
-                      crossAxisAlignment: CrossAxisAlignment.center,
-                      mainAxisSize: MainAxisSize.min,
-                      children: const [
-                        Icon(
-                          Icons.delete_outline_sharp,
-                        ),
-                        Padding(padding: EdgeInsets.all(6)),
-                        Text(
-                          "trash",
-                          style: TextStyle(
-                            color: Colors.white,
-                          ),
+                    child: Container(
+                      height: 48,
+                      width: double.infinity,
+                      child: Padding(
+                        padding: const EdgeInsets.symmetric(horizontal: 16),
+                        child: Row(
+                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                          children: [
+                            Row(
+                              children: [
+                                Icon(
+                                  Icons.visibility_off,
+                                  color: Theme.of(context).iconTheme.color,
+                                ),
+                                Padding(padding: EdgeInsets.all(6)),
+                                RichText(
+                                    text: TextSpan(
+                                        style: trashAndHiddenTextStyle.copyWith(
+                                          color: trashAndHiddenTextStyle.color
+                                              .withOpacity(0.5),
+                                        ),
+                                        children: [
+                                      TextSpan(
+                                          text: "Hidden",
+                                          style: Theme.of(context)
+                                              .textTheme
+                                              .subtitle1),
+                                      TextSpan(text: "  \u2022  "),
+                                      TextSpan(
+                                          text:
+                                              "12"), //need to query in db and bring this value
+                                    ])),
+                              ],
+                            ),
+                            Icon(
+                              Icons.chevron_right,
+                              color: Theme.of(context).iconTheme.color,
+                            ),
+                          ],
                         ),
-                      ],
+                      ),
                     ),
+                    onPressed: () async {
+                      routeToPage(
+                        context,
+                        ArchivePage(),
+                      );
+                    },
                   ),
-                  onPressed: () async {
-                    routeToPage(
-                      context,
-                      TrashPage(),
-                    );
-                  },
-                ),
-              ],
+                ],
+              ),
             ),
-            Padding(padding: EdgeInsets.fromLTRB(12, 12, 12, 72)),
+            Padding(padding: EdgeInsets.fromLTRB(12, 12, 12, 36)),
           ],
         ),
       ),
@@ -281,41 +357,48 @@ class _CollectionsGalleryWidgetState extends State<CollectionsGalleryWidget>
       String text = key.toString();
       switch (key) {
         case AlbumSortKey.albumName:
-          text = "album name";
+          text = "Name";
           break;
-        case AlbumSortKey.lastUpdated:
-          text = "last updated";
+        case AlbumSortKey.newestPhoto:
+          text = "Newest";
           break;
-        case AlbumSortKey.recentPhoto:
-          text = "recent photo";
+        case AlbumSortKey.oldestPhoto:
+          text = "Oldest";
           break;
+        case AlbumSortKey.lastUpdated:
+          text = "Last updated";
       }
-      return Text(
-        text,
-        style: TextStyle(
-          fontWeight: FontWeight.bold,
-          fontSize: 13,
-          color: Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
-        ),
-      );
+      return Text(text,
+          style: Theme.of(context).textTheme.subtitle1.copyWith(
+              fontSize: 14,
+              color: Theme.of(context).iconTheme.color.withOpacity(0.7)));
     }
 
     return Padding(
       padding: const EdgeInsets.only(right: 24),
       child: PopupMenuButton(
-        offset: Offset(10, 40),
+        offset: Offset(10, 50),
         initialValue: sortKey?.index ?? 0,
         child: Align(
           child: Row(
             mainAxisAlignment: MainAxisAlignment.end,
             crossAxisAlignment: CrossAxisAlignment.center,
             children: [
-              sortOptionText(sortKey),
-              Padding(padding: EdgeInsets.only(left: 5.0)),
-              Icon(
-                Icons.sort,
-                color: Theme.of(context).buttonColor,
-                size: 20,
+              Padding(
+                padding: EdgeInsets.only(left: 5.0),
+              ),
+              Container(
+                width: 36,
+                height: 36,
+                decoration: BoxDecoration(
+                  color: Theme.of(context).hintColor.withOpacity(0.2),
+                  borderRadius: BorderRadius.circular(18),
+                ),
+                child: Icon(
+                  Icons.sort,
+                  color: Theme.of(context).iconTheme.color,
+                  size: 20,
+                ),
               ),
             ],
           ),
@@ -343,30 +426,40 @@ class _CollectionsGalleryWidgetState extends State<CollectionsGalleryWidget>
       final c = collections[index];
       return CollectionItem(c);
     } else {
-      return Container(
-        padding: EdgeInsets.fromLTRB(28, 0, 28, 58),
-        child: OutlinedButton(
-          style: OutlinedButton.styleFrom(
-            shape: RoundedRectangleBorder(
-              borderRadius: BorderRadius.circular(18.0),
-            ),
-            side: BorderSide(
-              width: 1,
-              color: Theme.of(context).buttonColor.withOpacity(0.4),
-            ),
+      return InkWell(
+        child: Container(
+          margin: EdgeInsets.fromLTRB(30, 30, 30, 54),
+          decoration: BoxDecoration(
+            // gradient: LinearGradient(
+            //     colors: [Colors.white12, Colors.transparent],
+            //     begin: Alignment.topCenter,
+            //     end: Alignment.bottomCenter,
+            //     stops: [0, 0.1]),
+            color: Theme.of(context).backgroundColor,
+            boxShadow: [
+              BoxShadow(
+                  blurRadius: 2,
+                  spreadRadius: 0,
+                  offset: Offset(0, 0),
+                  color: Theme.of(context).iconTheme.color.withOpacity(0.3))
+            ],
+            // border: Border.all(
+            //   color: Theme.of(context).iconTheme.color.withOpacity(0.1),
+            // ),
+            borderRadius: BorderRadius.circular(4),
           ),
           child: Icon(
             Icons.add,
-            color: Theme.of(context).buttonColor.withOpacity(0.7),
+            color: Theme.of(context).iconTheme.color.withOpacity(0.25),
           ),
-          onPressed: () async {
-            await showToast(
-                "long press to select photos and click + to create an album",
-                toastLength: Toast.LENGTH_LONG);
-            Bus.instance.fire(
-                TabChangedEvent(0, TabChangedEventSource.collections_page));
-          },
         ),
+        onTap: () async {
+          await showToast(
+              "long press to select photos and click + to create an album",
+              toastLength: Toast.LENGTH_LONG);
+          Bus.instance
+              .fire(TabChangedEvent(0, TabChangedEventSource.collections_page));
+        },
       );
     }
   }
@@ -422,45 +515,50 @@ class DeviceFolderIcon extends StatelessWidget {
     final isBackedUp =
         Configuration.instance.getPathsToBackUp().contains(folder.path);
     return GestureDetector(
-      child: Container(
-        height: 140,
-        width: 142,
-        padding: const EdgeInsets.all(8.0),
-        child: Column(
-          children: <Widget>[
-            ClipRRect(
-              borderRadius: BorderRadius.circular(18.0),
-              child: SizedBox(
-                child: Hero(
-                  tag: "device_folder:" + folder.path + folder.thumbnail.tag(),
-                  child: Stack(
-                    children: [
-                      ThumbnailWidget(
-                        folder.thumbnail,
-                        shouldShowSyncStatus: false,
-                        key: Key("device_folder:" +
-                            folder.path +
-                            folder.thumbnail.tag()),
-                      ),
-                      isBackedUp ? Container() : kUnsyncedIconOverlay,
-                    ],
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 2),
+        child: Container(
+          height: 140,
+          width: 120,
+          // padding: const EdgeInsets.all(8.0),
+          child: Column(
+            children: <Widget>[
+              ClipRRect(
+                borderRadius: BorderRadius.circular(4),
+                child: SizedBox(
+                  child: Hero(
+                    tag:
+                        "device_folder:" + folder.path + folder.thumbnail.tag(),
+                    child: Stack(
+                      children: [
+                        ThumbnailWidget(
+                          folder.thumbnail,
+                          shouldShowSyncStatus: false,
+                          key: Key("device_folder:" +
+                              folder.path +
+                              folder.thumbnail.tag()),
+                        ),
+                        isBackedUp ? Container() : kUnsyncedIconOverlay,
+                      ],
+                    ),
                   ),
+                  height: 120,
+                  width: 120,
                 ),
-                height: 120,
-                width: 120,
               ),
-            ),
-            Padding(
-              padding: const EdgeInsets.only(top: 10),
-              child: Text(
-                folder.name,
-                style: TextStyle(
-                  fontSize: 12,
+              Padding(
+                padding: const EdgeInsets.only(top: 10),
+                child: Text(
+                  folder.name,
+                  style: Theme.of(context)
+                      .textTheme
+                      .subtitle1
+                      .copyWith(fontSize: 12, fontFamily: "Inter"),
+                  overflow: TextOverflow.ellipsis,
                 ),
-                overflow: TextOverflow.ellipsis,
               ),
-            ),
-          ],
+            ],
+          ),
         ),
       ),
       onTap: () {
@@ -480,32 +578,48 @@ class CollectionItem extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    TextStyle albumTitleTextStyle = Theme.of(context)
+        .textTheme
+        .subtitle1
+        .copyWith(fontSize: 14, fontFamily: "Inter");
+    final double sideOfThumbnail =
+        (MediaQuery.of(context).size.width / 2) - 18.5;
     return GestureDetector(
       child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
         children: <Widget>[
           ClipRRect(
-            borderRadius: BorderRadius.circular(18.0),
+            borderRadius: BorderRadius.circular(4),
             child: SizedBox(
-              child: Hero(
-                  tag: "collection" + c.thumbnail.tag(),
-                  child: ThumbnailWidget(
-                    c.thumbnail,
-                    shouldShowArchiveStatus: c.collection.isArchived(),
-                    key: Key("collection" + c.thumbnail.tag(),),
-                  )),
-              height: 140,
-              width: 140,
-            ),
+                child: Hero(
+                    tag: "collection" + c.thumbnail.tag(),
+                    child: ThumbnailWidget(
+                      c.thumbnail,
+                      shouldShowArchiveStatus: c.collection.isArchived(),
+                      key: Key(
+                        "collection" + c.thumbnail.tag(),
+                      ),
+                    )),
+                height: sideOfThumbnail,
+                width: sideOfThumbnail),
           ),
-          Padding(padding: EdgeInsets.all(4)),
-          Expanded(
-            child: Text(
-              c.collection.name,
-              style: TextStyle(
-                fontSize: 16,
+          SizedBox(height: 4),
+          Row(
+            children: [
+              Container(
+                constraints: BoxConstraints(maxWidth: sideOfThumbnail - 40),
+                child: Text(
+                  c.collection.name,
+                  style: albumTitleTextStyle,
+                  overflow: TextOverflow.ellipsis,
+                ),
               ),
-              overflow: TextOverflow.ellipsis,
-            ),
+              Text(
+                '  \u2022  ' + '23', //need to query in db and bring this value
+                style: albumTitleTextStyle.copyWith(
+                    color: albumTitleTextStyle.color.withOpacity(0.5)),
+              ),
+            ],
           ),
         ],
       ),
@@ -538,12 +652,8 @@ class SectionTitle extends StatelessWidget {
             alignment: alignment,
             child: Text(
               title,
-              style: TextStyle(
-                fontWeight: FontWeight.bold,
-                color: Theme.of(context).buttonColor.withOpacity(opacity),
-                fontSize: 20,
-                letterSpacing: 1,
-              ),
+              style:
+                  Theme.of(context).textTheme.headline6.copyWith(fontSize: 22),
             ),
           ),
         ],

lib/ui/common_elements.dart

@@ -1,17 +1,20 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 
-final nothingToSeeHere = Center(
-  child: Padding(
-    padding: const EdgeInsets.all(8.0),
-    child: Text(
-      "nothing to see here! 👀",
-      style: TextStyle(
-        color: Colors.white30,
+Widget nothingToSeeHere({Color textColor}) {
+  return Center(
+    child: Padding(
+      padding: const EdgeInsets.all(8.0),
+      child: Text(
+        "nothing to see here! 👀",
+        style: TextStyle(
+          fontFamily: "Inter",
+          color: textColor.withOpacity(0.35),
+        ),
       ),
     ),
-  ),
-);
+  );
+}
 
 Widget button(
   String text, {

lib/ui/deduplicate_page.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:photos/core/constants.dart';
 import 'package:photos/core/event_bus.dart';
+import 'package:photos/ente_theme_data.dart';
 import 'package:photos/events/user_details_changed_event.dart';
 import 'package:photos/models/duplicate_files.dart';
 import 'package:photos/models/file.dart';
@@ -134,7 +135,9 @@ class _DeduplicatePageState extends State<DeduplicatePage> {
                 } else {
                   return Padding(
                     padding: EdgeInsets.only(top: 32),
-                    child: nothingToSeeHere,
+                    child: nothingToSeeHere(
+                        textColor:
+                            Theme.of(context).colorScheme.defaultTextColor),
                   );
                 }
               }

lib/ui/gallery.dart

@@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
 import 'package:logging/logging.dart';
 import 'package:photos/core/constants.dart';
 import 'package:photos/core/event_bus.dart';
+import 'package:photos/ente_theme_data.dart';
 import 'package:photos/events/event.dart';
 import 'package:photos/events/files_updated_event.dart';
 import 'package:photos/models/file.dart';
@@ -24,6 +25,7 @@ class Gallery extends StatefulWidget {
   final GalleryLoader asyncLoader;
   final List<File> initialFiles;
   final Stream<FilesUpdatedEvent> reloadEvent;
+  final bool smallerTodayFont;
   final List<Stream<Event>> forceReloadEvents;
   final Set<EventType> removalEventTypes;
   final SelectedFiles selectedFiles;
@@ -41,6 +43,7 @@ class Gallery extends StatefulWidget {
     this.removalEventTypes = const {},
     this.header,
     this.footer,
+    this.smallerTodayFont = false,
     Key key,
   }) : super(key: key);
 
@@ -173,7 +176,10 @@ class _GalleryState extends State<Gallery> {
         if (widget.header != null) {
           children.add(widget.header);
         }
-        children.add(Expanded(child: nothingToSeeHere));
+        children.add(Expanded(
+          child: nothingToSeeHere(
+              textColor: Theme.of(context).colorScheme.defaultTextColor),
+        ));
         if (widget.footer != null) {
           children.add(widget.footer);
         }
@@ -196,6 +202,7 @@ class _GalleryState extends State<Gallery> {
               .on<GalleryIndexUpdatedEvent>()
               .where((event) => event.tag == widget.tagPrefix)
               .map((event) => event.index),
+          smallerTodayFont: widget.smallerTodayFont,
         );
         if (widget.header != null && index == 0) {
           gallery = Column(children: [widget.header, gallery]);

lib/ui/gallery_app_bar_widget.dart

@@ -91,11 +91,10 @@ class _GalleryAppBarWidgetState extends State<GalleryAppBarWidget> {
             : TextButton(
                 child: Text(
                   _appBarTitle,
-                  style: TextStyle(
-                    color: Colors.white.withOpacity(0.80),
-                    fontWeight: FontWeight.bold,
-                    fontSize: 16,
-                  ),
+                  style: Theme.of(context)
+                      .textTheme
+                      .headline5
+                      .copyWith(fontSize: 16),
                 ),
                 onPressed: () => _renameAlbum(context),
               ),
@@ -158,7 +157,7 @@ class _GalleryAppBarWidgetState extends State<GalleryAppBarWidget> {
         Tooltip(
           message: "share",
           child: IconButton(
-            icon: Icon(Icons.person_add),
+            icon: Icon(Icons.adaptive.share),
             onPressed: () {
               _showShareCollectionDialog();
             },
@@ -192,11 +191,11 @@ class _GalleryAppBarWidgetState extends State<GalleryAppBarWidget> {
               value: 2,
               child: Row(
                 children: [
-                  Icon(isArchived ? Icons.unarchive : Icons.archive),
+                  Icon(isArchived ? Icons.visibility : Icons.visibility_off),
                   Padding(
                     padding: EdgeInsets.all(8),
                   ),
-                  Text(isArchived ? "unarchive" : "archive"),
+                  Text(isArchived ? "Unhide" : "Hide"),
                 ],
               ),
             ),
@@ -469,7 +468,8 @@ class _GalleryAppBarWidgetState extends State<GalleryAppBarWidget> {
   }
 
   void _shareSelected(BuildContext context) {
-    share(context, widget.selectedFiles.files.toList(), shareButtonKey: shareButtonKey);
+    share(context, widget.selectedFiles.files.toList(),
+        shareButtonKey: shareButtonKey);
   }
 
   void _showRemoveFromCollectionSheet(BuildContext context) {

lib/ui/home_widget.dart

@@ -277,7 +277,7 @@ class _HomeWidgetState extends State<HomeWidget> {
                 ? _getBackupFolderSelectionHook()
                 : _getMainGalleryWidget(),
             _deviceFolderGalleryWidget,
-            //_sharedCollectionGallery,
+            _sharedCollectionGallery,
             _settingsPage,
           ],
           onPageChanged: (page) {
@@ -467,26 +467,6 @@ class _HomeWidgetState extends State<HomeWidget> {
                     }
                   },
                 ),
-                // 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",
-                //         ),
-                //       );
-                //     }
-                //   },
-                // ),
               ),
             ),
           ),
@@ -504,7 +484,7 @@ class _HomeWidgetState extends State<HomeWidget> {
         child: Container(
           alignment: Alignment.bottomCenter,
           height: 52,
-          width: 180,
+          width: 240,
           child: ClipRect(
             child: BackdropFilter(
               filter: ImageFilter.blur(sigmaX: 4, sigmaY: 4),
@@ -543,14 +523,16 @@ class _HomeWidgetState extends State<HomeWidget> {
                           1); // To take care of occasional missing events
                     },
                   ),
-                  // GButton(
-                  //   icon: Icons.folder_shared_outlined,
-                  //   iconColor: Colors.black,
-                  //   text: '',
-                  //   onPressed: () {
-                  //     _onTabChange(2); // To take care of occasional missing events
-                  //   },
-                  // ),
+                  GButton(
+                    margin: EdgeInsets.fromLTRB(0, 6, 0, 6),
+                    icon: Icons.folder_shared,
+                    iconColor: Colors.black,
+                    text: '',
+                    onPressed: () {
+                      _onTabChange(
+                          2); // To take care of occasional missing events
+                    },
+                  ),
                   GButton(
                     margin: EdgeInsets.fromLTRB(0, 6, 6, 6),
                     icon: Icons.person,

lib/ui/huge_listview/lazy_loading_gallery.dart

@@ -26,6 +26,7 @@ class LazyLoadingGallery extends StatefulWidget {
   final SelectedFiles selectedFiles;
   final String tag;
   final Stream<int> currentIndexStream;
+  final bool smallerTodayFont;
 
   LazyLoadingGallery(
     this.files,
@@ -36,6 +37,7 @@ class LazyLoadingGallery extends StatefulWidget {
     this.selectedFiles,
     this.tag,
     this.currentIndexStream, {
+    this.smallerTodayFont,
     Key key,
   }) : super(key: key ?? UniqueKey());
 
@@ -148,7 +150,8 @@ class _LazyLoadingGalleryState extends State<LazyLoadingGallery> {
       padding: const EdgeInsets.only(bottom: 12),
       child: Column(
         children: [
-          getDayWidget(context, _files[0].creationTime),
+          getDayWidget(
+              context, _files[0].creationTime, widget.smallerTodayFont),
           _shouldRender ? _getGallery() : PlaceHolderWidget(_files.length),
         ],
       ),
@@ -298,23 +301,27 @@ class _LazyLoadingGridViewState extends State<LazyLoadingGridView> {
         _selectFile(file);
       },
       child: Container(
-        margin: const EdgeInsets.all(2.0),
+        margin: const EdgeInsets.all(1.5),
         decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(3),
           border: widget.selectedFiles.files.contains(file)
               ? Border.all(
                   width: 4.0,
-                  color: Theme.of(context).buttonColor,
+                  color: Theme.of(context).buttonColor, //selection
                 )
               : null,
         ),
-        child: Hero(
-          tag: widget.tag + file.tag(),
-          child: ThumbnailWidget(
-            file,
-            diskLoadDeferDuration: kThumbnailDiskLoadDeferDuration,
-            serverLoadDeferDuration: kThumbnailServerLoadDeferDuration,
-            shouldShowLivePhotoOverlay: true,
-            key: Key(widget.tag + file.tag()),
+        child: ClipRRect(
+          borderRadius: BorderRadius.circular(3),
+          child: Hero(
+            tag: widget.tag + file.tag(),
+            child: ThumbnailWidget(
+              file,
+              diskLoadDeferDuration: kThumbnailDiskLoadDeferDuration,
+              serverLoadDeferDuration: kThumbnailServerLoadDeferDuration,
+              shouldShowLivePhotoOverlay: true,
+              key: Key(widget.tag + file.tag()),
+            ),
           ),
         ),
       ),

lib/utils/date_time_util.dart

@@ -163,17 +163,21 @@ bool isLeapYear(DateTime dateTime) {
   }
 }
 
-Widget getDayWidget(BuildContext context, int timestamp) {
+Widget getDayWidget(
+    BuildContext context, int timestamp, bool smallerTodayFont) {
   return Container(
-      padding: const EdgeInsets.fromLTRB(10, 14, 0, 12),
-      alignment: Alignment.centerLeft,
-      child: Text(getDayTitle(timestamp),
-          style: getDayTitle(timestamp) == "Today"
-              ? Theme.of(context).textTheme.headline5
-              : Theme.of(context).textTheme.caption.copyWith(
-                  fontSize: 16,
-                  fontWeight: FontWeight.w600,
-                  fontFamily: 'Inter-SemiBold')));
+    padding: const EdgeInsets.fromLTRB(10, 14, 0, 12),
+    alignment: Alignment.centerLeft,
+    child: Text(
+      getDayTitle(timestamp),
+      style: (getDayTitle(timestamp) == "Today" && !smallerTodayFont)
+          ? Theme.of(context).textTheme.headline5
+          : Theme.of(context).textTheme.caption.copyWith(
+              fontSize: 16,
+              fontWeight: FontWeight.w600,
+              fontFamily: 'Inter-SemiBold'),
+    ),
+  );
 }
 
 String getDayTitle(int timestamp) {

lib/utils/local_settings.dart

@@ -2,8 +2,9 @@ import 'package:shared_preferences/shared_preferences.dart';
 
 enum AlbumSortKey {
   albumName,
+  newestPhoto,
+  oldestPhoto,
   lastUpdated,
-  recentPhoto,
 }
 
 class LocalSettings {

pubspec.lock

@@ -1006,42 +1006,42 @@ packages:
       name: share_plus
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "4.0.4"
+    version: "2.2.0"
   share_plus_linux:
     dependency: transitive
     description:
       name: share_plus_linux
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "3.0.0"
+    version: "2.0.4"
   share_plus_macos:
     dependency: transitive
     description:
       name: share_plus_macos
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "3.0.0"
+    version: "2.1.0"
   share_plus_platform_interface:
     dependency: transitive
     description:
       name: share_plus_platform_interface
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "3.0.2"
+    version: "2.1.0"
   share_plus_web:
     dependency: transitive
     description:
       name: share_plus_web
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "3.0.0"
+    version: "2.0.4"
   share_plus_windows:
     dependency: transitive
     description:
       name: share_plus_windows
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "3.0.0"
+    version: "2.0.3"
   shared_preferences:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -92,7 +92,7 @@ dependencies:
   receive_sharing_intent: ^1.4.5
   scrollable_positioned_list: ^0.2.2
   sentry: ^5.0.0
-  share_plus: ^4.0.4
+  share_plus: ^2.2.0
   shared_preferences: ^2.0.5
   sqflite: ^2.0.0+3
   sqflite_migration: ^0.3.0

thirdparty/plugins

@@ -1 +1 @@
-Subproject commit db016cc95c6337766617d644585a835f7693a7df
+Subproject commit a3216f71ee2376c671119c661d86500ae2849463