design: Improve login design

lib/pages/connect/connect_page_view.dart

@@ -19,13 +19,11 @@ class ConnectPageView extends StatelessWidget {
     final identityProviders = controller.identityProviders;
     return LoginScaffold(
       appBar: AppBar(
-        leading:
+        leading: controller.loading ? null : const BackButton(),
-            controller.loading ? null : const BackButton(color: Colors.white),
         automaticallyImplyLeading: !controller.loading,
         centerTitle: true,
         title: Text(
           Matrix.of(context).getLoginClient().homeserver?.host ?? '',
-          style: const TextStyle(color: Colors.white),
         ),
       ),
       body: ListView(
@@ -43,7 +41,7 @@ class ConnectPageView extends StatelessWidget {
                       clipBehavior: Clip.hardEdge,
                       child: CircleAvatar(
                         radius: 64,
-                        backgroundColor: Colors.white.withAlpha(200),
+                        backgroundColor: Colors.white,
                         child: avatar == null
                             ? const Icon(
                                 Icons.person_outlined,
@@ -93,10 +91,7 @@ class ConnectPageView extends StatelessWidget {
                   hintText: L10n.of(context)!.chooseAUsername,
                   errorText: controller.signupError,
                   errorStyle: const TextStyle(color: Colors.orange),
-                  fillColor: Theme.of(context)
+                  fillColor: Theme.of(context).colorScheme.background,
-                      .colorScheme
-                      .background
-                      .withOpacity(0.75),
                 ),
               ),
             ),
@@ -114,26 +109,25 @@ class ConnectPageView extends StatelessWidget {
             ),
             Row(
               children: [
-                const Expanded(
+                Expanded(
-                    child: Divider(
+                  child: Divider(
-                  color: Colors.white,
+                    thickness: 1,
-                  thickness: 1,
+                    color: Theme.of(context).textTheme.subtitle1?.color,
-                )),
+                  ),
+                ),
                 Padding(
                   padding: const EdgeInsets.all(12.0),
                   child: Text(
                     L10n.of(context)!.or,
-                    style: const TextStyle(
+                    style: const TextStyle(fontSize: 18),
-                      color: Colors.white,
+                  ),
-                      fontSize: 18,
+                ),
-                    ),
+                Expanded(
+                  child: Divider(
+                    thickness: 1,
+                    color: Theme.of(context).textTheme.subtitle1?.color,
                   ),
                 ),
-                const Expanded(
-                    child: Divider(
-                  color: Colors.white,
-                  thickness: 1,
-                )),
               ],
             ),
           ],
@@ -141,10 +135,7 @@ class ConnectPageView extends StatelessWidget {
             identityProviders == null
                 ? const SizedBox(
                     height: 74,
-                    child: Center(
+                    child: Center(child: CircularProgressIndicator.adaptive()),
-                        child: CircularProgressIndicator.adaptive(
-                      backgroundColor: Colors.white,
-                    )),
                   )
                 : Center(
                     child: identityProviders.length == 1

lib/pages/connect/sso_button.dart

@@ -52,7 +52,6 @@ class SsoButton extends StatelessWidget {
               style: const TextStyle(
                 fontSize: 12,
                 fontWeight: FontWeight.bold,
-                color: Colors.white,
               ),
             ),
           ],

lib/pages/homeserver_picker/homeserver_picker_view.dart

@@ -18,23 +18,22 @@ class HomeserverPickerView extends StatelessWidget {
     final benchmarkResults = controller.benchmarkResults;
     return LoginScaffold(
       appBar: AppBar(
+        title: Text(AppConfig.applicationName),
+        backgroundColor: Colors.transparent,
         actions: [
           IconButton(
             onPressed: controller.restoreBackup,
             tooltip: L10n.of(context)!.hydrate,
-            color: Colors.white,
             icon: const Icon(Icons.restore_outlined),
           ),
           IconButton(
             tooltip: L10n.of(context)!.privacy,
             onPressed: () => launch(AppConfig.privacyUrl),
-            color: Colors.white,
             icon: const Icon(Icons.shield_outlined),
           ),
           IconButton(
             tooltip: L10n.of(context)!.about,
             onPressed: () => PlatformInfos.showDialog(context),
-            color: Colors.white,
             icon: const Icon(Icons.info_outlined),
           ),
         ],
@@ -84,10 +83,7 @@ class HomeserverPickerView extends StatelessWidget {
                         hintText: L10n.of(context)!.enterYourHomeserver,
                         suffixIcon: const Icon(Icons.search),
                         errorText: controller.error,
-                        fillColor: Theme.of(context)
+                        fillColor: Theme.of(context).colorScheme.background,
-                            .colorScheme
-                            .background
-                            .withOpacity(0.75),
                       ),
                       readOnly: !AppConfig.allowOtherHomeservers,
                       onSubmitted: (_) => controller.checkHomeserverAction(),

lib/pages/login/login_view.dart

@@ -15,8 +15,7 @@ class LoginView extends StatelessWidget {
   Widget build(BuildContext context) {
     return LoginScaffold(
       appBar: AppBar(
-        leading:
+        leading: controller.loading ? null : const BackButton(),
-            controller.loading ? null : const BackButton(color: Colors.white),
         automaticallyImplyLeading: !controller.loading,
         centerTitle: true,
         title: Text(
@@ -25,7 +24,6 @@ class LoginView extends StatelessWidget {
               .homeserver
               .toString()
               .replaceFirst('https://', '')),
-          style: const TextStyle(color: Colors.white),
         ),
       ),
       body: Builder(builder: (context) {
@@ -49,10 +47,7 @@ class LoginView extends StatelessWidget {
                     errorText: controller.usernameError,
                     errorStyle: const TextStyle(color: Colors.orange),
                     hintText: L10n.of(context)!.emailOrUsername,
-                    fillColor: Theme.of(context)
+                    fillColor: Theme.of(context).colorScheme.background,
-                        .colorScheme
-                        .background
-                        .withOpacity(0.75),
                   ),
                 ),
               ),
@@ -82,10 +77,7 @@ class LoginView extends StatelessWidget {
                       onPressed: controller.toggleShowPassword,
                     ),
                     hintText: L10n.of(context)!.password,
-                    fillColor: Theme.of(context)
+                    fillColor: Theme.of(context).colorScheme.background,
-                        .colorScheme
-                        .background
-                        .withOpacity(0.75),
                   ),
                 ),
               ),
@@ -105,26 +97,25 @@ class LoginView extends StatelessWidget {
               ),
               Row(
                 children: [
-                  const Expanded(
+                  Expanded(
-                      child: Divider(
+                    child: Divider(
-                    color: Colors.white,
+                      thickness: 1,
-                    thickness: 1,
+                      color: Theme.of(context).textTheme.subtitle1?.color,
-                  )),
+                    ),
+                  ),
                   Padding(
                     padding: const EdgeInsets.all(12.0),
                     child: Text(
                       L10n.of(context)!.or,
-                      style: const TextStyle(
+                      style: const TextStyle(fontSize: 18),
-                        color: Colors.white,
+                    ),
-                        fontSize: 18,
+                  ),
-                      ),
+                  Expanded(
+                    child: Divider(
+                      thickness: 1,
+                      color: Theme.of(context).textTheme.subtitle1?.color,
                     ),
                   ),
-                  const Expanded(
-                      child: Divider(
-                    color: Colors.white,
-                    thickness: 1,
-                  )),
                 ],
               ),
               Padding(

lib/pages/sign_up/signup_view.dart

@@ -13,13 +13,9 @@ class SignupPageView extends StatelessWidget {
   Widget build(BuildContext context) {
     return LoginScaffold(
       appBar: AppBar(
-        leading:
+        leading: controller.loading ? null : const BackButton(),
-            controller.loading ? null : const BackButton(color: Colors.white),
         automaticallyImplyLeading: !controller.loading,
-        title: Text(
+        title: Text(L10n.of(context)!.signUp),
-          L10n.of(context)!.signUp,
-          style: const TextStyle(color: Colors.white),
-        ),
       ),
       body: Form(
         key: controller.formKey,
@@ -50,10 +46,7 @@ class SignupPageView extends StatelessWidget {
                   ),
                   errorStyle: const TextStyle(color: Colors.orange),
                   hintText: L10n.of(context)!.chooseAStrongPassword,
-                  fillColor: Theme.of(context)
+                  fillColor: Theme.of(context).colorScheme.background,
-                      .colorScheme
-                      .background
-                      .withOpacity(0.75),
                 ),
               ),
             ),
@@ -72,10 +65,7 @@ class SignupPageView extends StatelessWidget {
                     prefixIcon: const Icon(Icons.repeat_outlined),
                     hintText: L10n.of(context)!.repeatPassword,
                     errorStyle: const TextStyle(color: Colors.orange),
-                    fillColor: Theme.of(context)
+                    fillColor: Theme.of(context).colorScheme.background,
-                        .colorScheme
-                        .background
-                        .withOpacity(0.75),
                   ),
                 ),
               ),
@@ -93,10 +83,8 @@ class SignupPageView extends StatelessWidget {
                   prefixIcon: const Icon(Icons.mail_outlined),
                   hintText: L10n.of(context)!.enterAnEmailAddress,
                   errorText: controller.error,
-                  fillColor: Theme.of(context)
+                  fillColor: Theme.of(context).colorScheme.background,
-                      .colorScheme
+                  errorMaxLines: 4,
-                      .background
-                      .withOpacity(0.75),
                   errorStyle: TextStyle(
                     color: controller.emailController.text.isEmpty
                         ? Colors.orangeAccent

lib/widgets/layouts/login_scaffold.dart

@@ -1,6 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 
+import 'package:fluffychat/config/app_config.dart';
+import 'package:fluffychat/config/themes.dart';
+
 class LoginScaffold extends StatelessWidget {
   final Widget body;
   final AppBar? appBar;
@@ -13,32 +16,46 @@ class LoginScaffold extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    final isMobileMode = !FluffyThemes.isColumnMode(context);
-      appBar: AppBar(
+    return Container(
-        automaticallyImplyLeading: appBar?.automaticallyImplyLeading ?? true,
+      decoration: const BoxDecoration(
-        centerTitle: appBar?.centerTitle,
+        image: DecorationImage(
-        title: appBar?.title,
+          image: AssetImage('assets/login_wallpaper.png'),
-        leading: appBar?.leading,
+          fit: BoxFit.cover,
-        actions: appBar?.actions,
-        iconTheme: const IconThemeData(color: Colors.white),
-        elevation: 0,
-        scrolledUnderElevation: 0,
-        backgroundColor: Colors.transparent,
-        systemOverlayStyle: SystemUiOverlayStyle.light,
-      ),
-      extendBodyBehindAppBar: true,
-      extendBody: true,
-      body: Container(
-        decoration: const BoxDecoration(
-          image: DecorationImage(
-            fit: BoxFit.cover,
-            image: AssetImage('assets/login_wallpaper.png'),
-          ),
         ),
-        alignment: Alignment.center,
+      ),
-        child: ConstrainedBox(
+      child: Center(
-          constraints: const BoxConstraints(maxWidth: 480),
+        child: Material(
-          child: body,
+          color: Theme.of(context).brightness == Brightness.light
+              ? Theme.of(context).scaffoldBackgroundColor.withOpacity(0.9)
+              : Theme.of(context).scaffoldBackgroundColor.withOpacity(0.5),
+          borderRadius: isMobileMode
+              ? null
+              : BorderRadius.circular(AppConfig.borderRadius),
+          elevation: isMobileMode ? 0 : 10,
+          clipBehavior: Clip.hardEdge,
+          shadowColor: Colors.black,
+          child: ConstrainedBox(
+            constraints: isMobileMode
+                ? const BoxConstraints()
+                : const BoxConstraints(maxWidth: 480, maxHeight: 640),
+            child: Scaffold(
+              backgroundColor: Colors.transparent,
+              appBar: AppBar(
+                automaticallyImplyLeading:
+                    appBar?.automaticallyImplyLeading ?? true,
+                centerTitle: appBar?.centerTitle,
+                title: appBar?.title,
+                leading: appBar?.leading,
+                actions: appBar?.actions,
+                backgroundColor: Colors.transparent,
+                systemOverlayStyle: SystemUiOverlayStyle.light,
+              ),
+              extendBodyBehindAppBar: true,
+              extendBody: true,
+              body: body,
+            ),
+          ),
         ),
       ),
     );