lock screen UI layout fix + made SmallGradientButton component

lib/ui/common/small_gradient_button_widget.dart

@@ -0,0 +1,88 @@
+import 'package:flutter/material.dart';
+
+class SmallGradientButton extends StatelessWidget {
+  final List<Color> linearGradientColors;
+  final Function onTap;
+  final Widget child;
+  // text is ignored if child is specified
+  final String text;
+  // nullable
+  final IconData iconData;
+  // padding between the text and icon
+  final double spacingBetweenItems;
+
+  const SmallGradientButton({
+    Key key,
+    this.child,
+    this.linearGradientColors = const [
+      Color(0xFF2CD267),
+      Color(0xFF1DB954),
+    ],
+    this.onTap,
+    this.text,
+    this.iconData,
+    this.spacingBetweenItems = 12,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    Widget buttonContent;
+    if (child != null) {
+      buttonContent = child;
+    } else if (iconData == null) {
+      buttonContent = Center(
+        child: Text(
+          text,
+          style: const TextStyle(
+            color: Colors.white,
+            fontWeight: FontWeight.w600,
+            fontFamily: 'Inter',
+            fontSize: 16,
+          ),
+        ),
+      );
+    } else {
+      buttonContent = Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          Icon(
+            iconData,
+            color: Colors.white,
+            size: 20,
+          ),
+          SizedBox(width: spacingBetweenItems),
+          Text(
+            text,
+            style: const TextStyle(
+              color: Colors.white,
+              fontWeight: FontWeight.w600,
+              fontFamily: 'Inter',
+              fontSize: 16,
+            ),
+          ),
+        ],
+      );
+    }
+    return InkWell(
+      onTap: onTap,
+      child: Container(
+        height: 44,
+        decoration: BoxDecoration(
+          gradient: LinearGradient(
+            begin: const Alignment(0.1, -0.9),
+            end: const Alignment(-0.6, 0.9),
+            colors: linearGradientColors,
+          ),
+          borderRadius: BorderRadius.circular(4),
+        ),
+        child: Center(
+          child: Container(
+            constraints: const BoxConstraints(minWidth: 118),
+            child: buttonContent,
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/ui/tools/lock_screen.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:logging/logging.dart';
-import 'package:photos/ui/common/gradient_button.dart';
+import 'package:photos/ui/common/small_gradient_button_widget.dart';
 import 'package:photos/ui/tools/app_lock.dart';
 import 'package:photos/utils/auth_util.dart';
 
@@ -31,18 +31,18 @@ class _LockScreenState extends State<LockScreen> {
             Stack(
               alignment: Alignment.center,
               children: [
-                Image.asset(
-                  MediaQuery.of(context).platformBrightness == Brightness.light
-                      ? 'assets/loading_photos_background.png'
-                      : 'assets/loading_photos_background_dark.png',
+                Opacity(
+                  opacity: 0.2,
+                  child: Image.asset('assets/loading_photos_background.png'),
                 ),
                 SizedBox(
-                  width: 172,
-                  child: GradientButton(
+                  width: 118,
+                  child: SmallGradientButton(
                     onTap: () async {
                       _showLockScreen();
                     },
-                    text: 'Unlock',
+                    text: "Unlock",
+                    iconData: Icons.lock_open_outlined,
                   ),
                 ),
               ],