chore: Polish login design

assets/l10n/intl_en.arb

@@ -2804,5 +2804,6 @@
   "supportPage": "Support page",
   "serverInformation": "Server information:",
   "name": "Name",
-  "version": "Version"
+  "version": "Version",
+  "website": "Website"
 }

lib/config/app_config.dart

@@ -21,6 +21,7 @@ abstract class AppConfig {
   static String _privacyUrl =
       'https://github.com/krille-chan/fluffychat/blob/main/PRIVACY.md';
   static String get privacyUrl => _privacyUrl;
+  static const String website = 'https://fluffychat.im';
   static const String enablePushTutorial =
       'https://github.com/krille-chan/fluffychat/wiki/Push-Notifications-without-Google-Services';
   static const String encryptionTutorial =

lib/config/themes.dart

@@ -97,7 +97,7 @@ abstract class FluffyThemes {
       appBarTheme: AppBarTheme(
         toolbarHeight: FluffyThemes.isColumnMode(context) ? 72 : 56,
         shadowColor: FluffyThemes.isColumnMode(context)
-            ? Colors.grey.withAlpha(64)
+            ? colorScheme.surfaceContainer.withAlpha(64)
             : null,
         surfaceTintColor:
             FluffyThemes.isColumnMode(context) ? colorScheme.surface : null,

lib/widgets/layouts/login_scaffold.dart

@@ -1,5 +1,3 @@
-import 'dart:ui';
-
 import 'package:flutter/material.dart';
 
 import 'package:flutter_gen/gen_l10n/l10n.dart';
@@ -27,30 +25,23 @@ class LoginScaffold extends StatelessWidget {
 
     final isMobileMode =
         enforceMobileMode || !FluffyThemes.isColumnMode(context);
-    final scaffold = Scaffold(
+    if (isMobileMode) {
-      key: const Key('LoginScaffold'),
+      return Scaffold(
-      appBar: appBar == null
+        key: const Key('LoginScaffold'),
-          ? null
+        appBar: appBar,
-          : AppBar(
+        body: SafeArea(child: body),
-              titleSpacing: appBar?.titleSpacing,
+      );
-              automaticallyImplyLeading:
+    }
-                  appBar?.automaticallyImplyLeading ?? true,
-              centerTitle: appBar?.centerTitle,
-              title: appBar?.title,
-              leading: appBar?.leading,
-              actions: appBar?.actions,
-              backgroundColor: isMobileMode ? null : Colors.transparent,
-            ),
-      body: SafeArea(child: body),
-      backgroundColor:
-          isMobileMode ? null : theme.colorScheme.surface.withOpacity(0.8),
-    );
-    if (isMobileMode) return scaffold;
     return Container(
-      decoration: const BoxDecoration(
+      decoration: BoxDecoration(
-        image: DecorationImage(
+        gradient: LinearGradient(
-          fit: BoxFit.cover,
+          colors: [
-          image: AssetImage('assets/login_wallpaper.png'),
+            theme.colorScheme.surfaceContainerLow,
+            theme.colorScheme.surfaceContainer,
+            theme.colorScheme.surfaceContainerHighest,
+          ],
+          begin: Alignment.topLeft,
+          end: Alignment.bottomRight,
         ),
       ),
       child: Column(
@@ -61,7 +52,6 @@ class LoginScaffold extends StatelessWidget {
               child: Padding(
                 padding: const EdgeInsets.symmetric(horizontal: 16.0),
                 child: Material(
-                  color: Colors.transparent,
                   borderRadius: BorderRadius.circular(AppConfig.borderRadius),
                   clipBehavior: Clip.hardEdge,
                   elevation: theme.appBarTheme.scrolledUnderElevation ?? 4,
@@ -70,12 +60,10 @@ class LoginScaffold extends StatelessWidget {
                     constraints: isMobileMode
                         ? const BoxConstraints()
                         : const BoxConstraints(maxWidth: 480, maxHeight: 640),
-                    child: BackdropFilter(
+                    child: Scaffold(
-                      filter: ImageFilter.blur(
+                      key: const Key('LoginScaffold'),
-                        sigmaX: 10.0,
+                      appBar: appBar,
-                        sigmaY: 10.0,
+                      body: SafeArea(child: body),
-                      ),
-                      child: scaffold,
                     ),
                   ),
                 ),
@@ -95,18 +83,8 @@ class _PrivacyButtons extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final shadowTextStyle = FluffyThemes.isColumnMode(context)
+    final theme = Theme.of(context);
-        ? const TextStyle(
+    final shadowTextStyle = TextStyle(color: theme.colorScheme.secondary);
-            color: Colors.white,
-            shadows: [
-              Shadow(
-                offset: Offset(0.0, 0.0),
-                blurRadius: 3,
-                color: Colors.black,
-              ),
-            ],
-          )
-        : null;
     return SizedBox(
       height: 64,
       child: Padding(
@@ -115,9 +93,16 @@ class _PrivacyButtons extends StatelessWidget {
           mainAxisAlignment: mainAxisAlignment,
           children: [
             TextButton(
-              onPressed: () => PlatformInfos.showDialog(context),
+              onPressed: () => launchUrlString(AppConfig.website),
               child: Text(
-                L10n.of(context).about,
+                L10n.of(context).website,
+                style: shadowTextStyle,
+              ),
+            ),
+            TextButton(
+              onPressed: () => launchUrlString(AppConfig.supportUrl),
+              child: Text(
+                L10n.of(context).help,
                 style: shadowTextStyle,
               ),
             ),
@@ -128,6 +113,13 @@ class _PrivacyButtons extends StatelessWidget {
                 style: shadowTextStyle,
               ),
             ),
+            TextButton(
+              onPressed: () => PlatformInfos.showDialog(context),
+              child: Text(
+                L10n.of(context).about,
+                style: shadowTextStyle,
+              ),
+            ),
           ],
         ),
       ),