feat: Redesign start page

assets/l10n/intl_de.arb

@@ -1277,7 +1277,7 @@
       "homeserver": {}
     }
   },
-  "loginWith": "Anmelden mit {brand}",
+  "loginWith": "Anmelden mit",
   "@loginWith": {
     "type": "text",
     "placeholders": {

assets/l10n/intl_en.arb

@@ -1309,13 +1309,7 @@
       "homeserver": {}
     }
   },
-  "loginWith": "Sign in with {brand}",
+  "loginWithOneClick": "Sign in with one click",
-  "@loginWith": {
-    "type": "text",
-    "placeholders": {
-      "brand": {}
-    }
-  },
   "logout": "Logout",
   "@logout": {
     "type": "text",

lib/config/themes.dart

@@ -97,15 +97,17 @@ abstract class FluffyThemes {
         ),
         inputDecorationTheme: InputDecorationTheme(
           border: OutlineInputBorder(
-              borderRadius: BorderRadius.circular(AppConfig.borderRadius)),
+            borderRadius: BorderRadius.circular(AppConfig.borderRadius),
+          ),
           enabledBorder: OutlineInputBorder(
             borderRadius: BorderRadius.circular(AppConfig.borderRadius),
             borderSide: BorderSide(
               color: lighten(AppConfig.chatColor, .51),
+              width: 1,
             ),
           ),
           filled: true,
-          fillColor: lighten(AppConfig.chatColor, .51),
+          fillColor: Colors.blueGrey.shade50,
         ),
         appBarTheme: const AppBarTheme(
           elevation: 6,
@@ -171,7 +173,7 @@ abstract class FluffyThemes {
           border: OutlineInputBorder(
               borderRadius: BorderRadius.circular(AppConfig.borderRadius)),
           filled: true,
-          fillColor: FluffyThemes.darken(AppConfig.chatColor, 0.4),
+          fillColor: Colors.blueGrey.shade900,
           enabledBorder: OutlineInputBorder(
             borderRadius: BorderRadius.circular(AppConfig.borderRadius),
             borderSide: BorderSide(

lib/pages/homeserver_picker/homeserver_picker.dart

@@ -40,7 +40,8 @@ class HomeserverPickerController extends State<HomeserverPicker> {
     this.domain = domain;
     _coolDown?.cancel();
     if (domain.isNotEmpty) {
-      _coolDown = Timer(const Duration(seconds: 1), checkHomeserverAction);
+      _coolDown =
+          Timer(const Duration(milliseconds: 500), checkHomeserverAction);
     }
   }
 

lib/pages/homeserver_picker/homeserver_picker_view.dart

@@ -11,7 +11,6 @@ import 'package:vrouter/vrouter.dart';
 import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/utils/platform_infos.dart';
 import 'package:fluffychat/widgets/default_app_bar_search_field.dart';
-import 'package:fluffychat/widgets/fluffy_banner.dart';
 import 'package:fluffychat/widgets/layouts/one_page_card.dart';
 import 'package:fluffychat/widgets/matrix.dart';
 import '../../utils/localized_exception_extension.dart';
@@ -44,9 +43,10 @@ class HomeserverPickerView extends StatelessWidget {
           elevation: 0,
         ),
         body: ListView(children: [
-          const Hero(
+          Image.asset(
-            tag: 'loginBanner',
+            Theme.of(context).brightness == Brightness.dark
-            child: FluffyBanner(),
+                ? 'assets/banner_dark.png'
+                : 'assets/banner.png',
           ),
           controller.isLoading
               ? const Center(
@@ -88,35 +88,34 @@ class HomeserverPickerView extends StatelessWidget {
                           ),
                           child: Column(
                             mainAxisSize: MainAxisSize.min,
-                            crossAxisAlignment: CrossAxisAlignment.stretch,
+                            children: [
+                              if (controller.ssoLoginSupported)
+                                Row(children: [
+                                  const Expanded(child: Divider()),
+                                  Padding(
+                                    padding: const EdgeInsets.all(12.0),
+                                    child: Text(
+                                        L10n.of(context).loginWithOneClick),
+                                  ),
+                                  const Expanded(child: Divider()),
+                                ]),
+                              Wrap(
                                 children: [
                                   if (controller.ssoLoginSupported) ...{
                                     for (final identityProvider
                                         in controller.identityProviders)
-                                  Center(
+                                      _SsoButton(
-                                    child: _LoginButton(
+                                        onPressed: () =>
-                                      onPressed: () => controller
+                                            controller.ssoLoginAction(
-                                          .ssoLoginAction(identityProvider.id),
+                                                identityProvider.id),
-                                      icon: identityProvider.icon == null
+                                        identityProvider: identityProvider,
-                                          ? const Icon(Icons.web_outlined)
-                                          : CachedNetworkImage(
-                                              imageUrl: Uri.parse(
-                                                      identityProvider.icon)
-                                                  .getDownloadLink(
-                                                      Matrix.of(context)
-                                                          .getLoginClient())
-                                                  .toString(),
-                                              width: 24,
-                                              height: 24,
                                       ),
-                                      labelText: L10n.of(context).loginWith(
+                                  },
-                                          identityProvider.name ??
+                                ].toList(),
-                                              identityProvider.brand ??
-                                              L10n.of(context).singlesignon),
                               ),
-                                  ),
+                              if (controller.ssoLoginSupported &&
-                                if (controller.registrationSupported ||
+                                  (controller.registrationSupported ||
-                                    controller.passwordLoginSupported)
+                                      controller.passwordLoginSupported))
                                 Row(children: [
                                   const Expanded(child: Divider()),
                                   Padding(
@@ -125,8 +124,7 @@ class HomeserverPickerView extends StatelessWidget {
                                   ),
                                   const Expanded(child: Divider()),
                                 ]),
-                              },
+                              if (controller.passwordLoginSupported) ...[
-                              if (controller.passwordLoginSupported)
                                 Center(
                                   child: _LoginButton(
                                     onPressed: () =>
@@ -141,6 +139,8 @@ class HomeserverPickerView extends StatelessWidget {
                                     labelText: L10n.of(context).login,
                                   ),
                                 ),
+                                const SizedBox(height: 12),
+                              ],
                               if (controller.registrationSupported)
                                 Center(
                                   child: _LoginButton(
@@ -155,19 +155,15 @@ class HomeserverPickerView extends StatelessWidget {
                                     labelText: L10n.of(context).register,
                                   ),
                                 ),
-                            ]
+                            ],
-                                .map(
-                                  (widget) => Container(
-                                      height: 64,
-                                      padding:
-                                          const EdgeInsets.only(bottom: 12),
-                                      child: widget),
-                                )
-                                .toList(),
                           ),
                         );
                       }),
-          Wrap(
+        ]),
+        bottomNavigationBar: Material(
+          elevation: 6,
+          color: Theme.of(context).scaffoldBackgroundColor,
+          child: Wrap(
             alignment: WrapAlignment.center,
             children: [
               TextButton(
@@ -192,7 +188,54 @@ class HomeserverPickerView extends StatelessWidget {
               ),
             ],
           ),
-        ]),
+        ),
+      ),
+    );
+  }
+}
+
+class _SsoButton extends StatelessWidget {
+  final IdentityProvider identityProvider;
+  final void Function() onPressed;
+  const _SsoButton({
+    Key key,
+    @required this.identityProvider,
+    this.onPressed,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: onPressed,
+      borderRadius: BorderRadius.circular(7),
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            identityProvider.icon == null
+                ? const Icon(Icons.web_outlined)
+                : CachedNetworkImage(
+                    imageUrl: Uri.parse(identityProvider.icon)
+                        .getDownloadLink(Matrix.of(context).getLoginClient())
+                        .toString(),
+                    width: 32,
+                    height: 32,
+                  ),
+            const SizedBox(height: 8),
+            Text(
+              identityProvider.name ??
+                  identityProvider.brand ??
+                  L10n.of(context).singlesignon,
+              style: TextStyle(
+                fontSize: 12,
+                fontWeight: FontWeight.bold,
+                color: Theme.of(context).textTheme.subtitle2.color,
+              ),
+            ),
+          ],
+        ),
       ),
     );
   }
@@ -216,7 +259,9 @@ class _LoginButton extends StatelessWidget {
         minimumSize: const Size(256, 56),
         textStyle: const TextStyle(fontWeight: FontWeight.bold),
         backgroundColor: Theme.of(context).backgroundColor,
-        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(AppConfig.borderRadius),
+        ),
       ),
       onPressed: onPressed,
       icon: icon,

lib/utils/client_manager.dart

@@ -80,7 +80,7 @@ abstract class ClientManager {
         legacyDatabaseBuilder: FlutterMatrixHiveStore.hiveDatabaseBuilder,
         supportedLoginTypes: {
           AuthenticationTypes.password,
-          if (PlatformInfos.isMobile || PlatformInfos.isWeb)
+          //if (PlatformInfos.isMobile || PlatformInfos.isWeb)
           AuthenticationTypes.sso
         },
         compute: compute,

lib/widgets/fluffy_banner.dart

@@ -1,12 +0,0 @@
-import 'package:flutter/material.dart';
-
-class FluffyBanner extends StatelessWidget {
-  const FluffyBanner({Key key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return Image.asset(Theme.of(context).brightness == Brightness.dark
-        ? 'assets/banner_dark.png'
-        : 'assets/banner.png');
-  }
-}

lib/widgets/layouts/one_page_card.dart

@@ -14,6 +14,8 @@ class OnePageCard extends StatelessWidget {
   static num breakpoint = FluffyThemes.columnWidth * 2;
   @override
   Widget build(BuildContext context) {
+    final horizontalPadding =
+        max((MediaQuery.of(context).size.width - 600) / 2, 24);
     return MediaQuery.of(context).size.width <= breakpoint ||
             Matrix.of(context).client.isLogged()
         ? child
@@ -25,13 +27,13 @@ class OnePageCard extends StatelessWidget {
               ),
             ),
             child: Padding(
-              padding: EdgeInsets.symmetric(
+              padding: EdgeInsets.only(
-                horizontal:
+                top: 16,
-                    max((MediaQuery.of(context).size.width - 600) / 2, 24),
+                left: horizontalPadding,
-                vertical:
+                right: horizontalPadding,
-                    max((MediaQuery.of(context).size.height - 800) / 2, 24),
+                bottom: max((MediaQuery.of(context).size.height - 600) / 2, 24),
               ),
-              child: SafeArea(child: Card(elevation: 5, child: child)),
+              child: SafeArea(child: Card(elevation: 16, child: child)),
             ),
           );
   }