Merge pull request #304 from ente-io/safeAreaShadow

Minor UI Fixes

lib/ui/deduplicate_page.dart

@@ -269,7 +269,7 @@ class _DeduplicatePageState extends State<DeduplicatePage> {
     if (_selectedFiles.length == 1) {
       text = "delete 1 item";
     } else {
-      text = "delete " + _selectedFiles.length.toString() + " items";
+      text = "Delete " + _selectedFiles.length.toString() + " items";
     }
     int size = 0;
     for (final file in _selectedFiles) {
@@ -277,39 +277,44 @@ class _DeduplicatePageState extends State<DeduplicatePage> {
     }
     return SizedBox(
       width: double.infinity,
-      child: TextButton(
-        style: OutlinedButton.styleFrom(
-          backgroundColor: Colors.red[700],
-        ),
-        child: Column(
-          children: [
-            Padding(padding: EdgeInsets.all(2)),
-            Text(
-              text,
-              style: TextStyle(
-                fontWeight: FontWeight.bold,
-                fontSize: 14,
-                color: Colors.white,
-              ),
-              textAlign: TextAlign.center,
+      child: SafeArea(
+        child: Padding(
+          padding: EdgeInsets.all(16),
+          child: TextButton(
+            style: OutlinedButton.styleFrom(
+              backgroundColor: Colors.red[700],
             ),
-            Padding(padding: EdgeInsets.all(2)),
-            Text(
-              formatBytes(size),
-              style: TextStyle(
-                color: Colors.white.withOpacity(0.7),
-                fontSize: 12,
-              ),
+            child: Column(
+              children: [
+                Padding(padding: EdgeInsets.all(2)),
+                Text(
+                  text,
+                  style: TextStyle(
+                    fontWeight: FontWeight.bold,
+                    fontSize: 14,
+                    color: Colors.white,
+                  ),
+                  textAlign: TextAlign.center,
+                ),
+                Padding(padding: EdgeInsets.all(2)),
+                Text(
+                  formatBytes(size),
+                  style: TextStyle(
+                    color: Colors.white.withOpacity(0.7),
+                    fontSize: 12,
+                  ),
+                ),
+                Padding(padding: EdgeInsets.all(2)),
+              ],
             ),
-            Padding(padding: EdgeInsets.all(2)),
-          ],
+            onPressed: () async {
+              await deleteFilesFromRemoteOnly(context, _selectedFiles.toList());
+              Bus.instance.fire(UserDetailsChangedEvent());
+              Navigator.of(context)
+                  .pop(DeduplicationResult(_selectedFiles.length, size));
+            },
+          ),
         ),
-        onPressed: () async {
-          await deleteFilesFromRemoteOnly(context, _selectedFiles.toList());
-          Bus.instance.fire(UserDetailsChangedEvent());
-          Navigator.of(context)
-              .pop(DeduplicationResult(_selectedFiles.length, size));
-        },
       ),
     );
   }

lib/ui/fading_bottom_bar.dart

@@ -151,32 +151,34 @@ class FadingBottomBarState extends State<FadingBottomBar> {
         ),
       );
     }
-    return SafeArea(
-      child: AnimatedOpacity(
-        child: Align(
-          alignment: Alignment.bottomCenter,
-          child: Container(
-            decoration: BoxDecoration(
-              gradient: LinearGradient(
-                begin: Alignment.topCenter,
-                end: Alignment.bottomCenter,
-                colors: [
-                  Colors.transparent,
-                  Colors.black.withOpacity(0.6),
-                  Colors.black.withOpacity(0.72),
-                ],
-                stops: const [0, 0.8, 1],
-              ),
+    var safeAreaBottomPadding = MediaQuery.of(context).padding.bottom * .5;
+    return AnimatedOpacity(
+      child: Align(
+        alignment: Alignment.bottomCenter,
+        child: Container(
+          decoration: BoxDecoration(
+            gradient: LinearGradient(
+              begin: Alignment.topCenter,
+              end: Alignment.bottomCenter,
+              colors: [
+                Colors.transparent,
+                Colors.black.withOpacity(0.6),
+                Colors.black.withOpacity(0.72),
+              ],
+              stops: const [0, 0.8, 1],
             ),
+          ),
+          child: Padding(
+            padding: EdgeInsets.only(bottom: safeAreaBottomPadding),
             child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceAround,
               children: children,
             ),
           ),
         ),
-        opacity: _shouldHide ? 0 : 1,
-        duration: Duration(milliseconds: 150),
       ),
+      opacity: _shouldHide ? 0 : 1,
+      duration: Duration(milliseconds: 150),
     );
   }