From 4929858ae4656842e4ec281ea3042d849bbf6638 Mon Sep 17 00:00:00 2001
From: krille-chan <krille-chan@posteo.de>
Date: Sat, 22 Jul 2023 13:00:27 +0200
Subject: [PATCH] design: Improve login UI

---
 .../homeserver_picker/homeserver_app_bar.dart |  1 +
 .../homeserver_picker_view.dart               | 84 ++++++++-----------
 lib/widgets/layouts/login_scaffold.dart       |  2 +-
 linux/my_application.cc                       |  2 +-
 4 files changed, 40 insertions(+), 49 deletions(-)

diff --git a/lib/pages/homeserver_picker/homeserver_app_bar.dart b/lib/pages/homeserver_picker/homeserver_app_bar.dart
index 82d25870..d1fd7149 100644
--- a/lib/pages/homeserver_picker/homeserver_app_bar.dart
+++ b/lib/pages/homeserver_picker/homeserver_app_bar.dart
@@ -59,6 +59,7 @@ class HomeserverAppBar extends StatelessWidget {
                   icon: const Icon(Icons.arrow_back),
                 )
               : null,
+          fillColor: Theme.of(context).colorScheme.onInverseSurface,
           prefixText: '${L10n.of(context)!.homeserver}: ',
           hintText: L10n.of(context)!.enterYourHomeserver,
           suffixIcon: const Icon(Icons.search),
diff --git a/lib/pages/homeserver_picker/homeserver_picker_view.dart b/lib/pages/homeserver_picker/homeserver_picker_view.dart
index 47f45e70..c9f83c8e 100644
--- a/lib/pages/homeserver_picker/homeserver_picker_view.dart
+++ b/lib/pages/homeserver_picker/homeserver_picker_view.dart
@@ -21,10 +21,7 @@ class HomeserverPickerView extends StatelessWidget {
     return LoginScaffold(
       appBar: AppBar(
         titleSpacing: 12,
-        title: Padding(
-          padding: const EdgeInsets.all(0.0),
-          child: HomeserverAppBar(controller: controller),
-        ),
+        title: HomeserverAppBar(controller: controller),
       ),
       body: SafeArea(
         child: Column(
@@ -61,34 +58,6 @@ class HomeserverPickerView extends StatelessWidget {
                           'assets/info-logo.png',
                           height: 96,
                         ),
-                        Padding(
-                          padding: const EdgeInsets.symmetric(horizontal: 12.0),
-                          child: Row(
-                            children: [
-                              Expanded(
-                                child: Divider(
-                                  thickness: 1,
-                                  height: 1,
-                                  color: Theme.of(context).dividerColor,
-                                ),
-                              ),
-                              Padding(
-                                padding: const EdgeInsets.all(12.0),
-                                child: Text(
-                                  L10n.of(context)!.continueWith,
-                                  style: const TextStyle(fontSize: 12),
-                                ),
-                              ),
-                              Expanded(
-                                child: Divider(
-                                  thickness: 1,
-                                  height: 1,
-                                  color: Theme.of(context).dividerColor,
-                                ),
-                              ),
-                            ],
-                          ),
-                        ),
                         if (errorText != null) ...[
                           const Center(
                             child: Icon(
@@ -140,9 +109,8 @@ class HomeserverPickerView extends StatelessWidget {
                                         height: 24,
                                       ),
                                     ),
-                              label: provider.name ??
-                                  provider.brand ??
-                                  L10n.of(context)!.singlesignon,
+                              label:
+                                  'Sign in with ${provider.name ?? provider.brand ?? L10n.of(context)!.singlesignon}',
                               onPressed: () =>
                                   controller.ssoLoginAction(provider.id!),
                             ),
@@ -156,12 +124,18 @@ class HomeserverPickerView extends StatelessWidget {
                           ),
                         Padding(
                           padding: const EdgeInsets.symmetric(horizontal: 12),
-                          child: TextButton(
-                            style: TextButton.styleFrom(
-                              padding: const EdgeInsets.symmetric(vertical: 12),
+                          child: Center(
+                            child: SizedBox(
+                              width: 256,
+                              child: TextButton(
+                                style: TextButton.styleFrom(
+                                  padding:
+                                      const EdgeInsets.symmetric(vertical: 12),
+                                ),
+                                onPressed: controller.restoreBackup,
+                                child: Text(L10n.of(context)!.hydrate),
+                              ),
                             ),
-                            onPressed: controller.restoreBackup,
-                            child: Text(L10n.of(context)!.hydrate),
                           ),
                         ),
                       ],
@@ -191,14 +165,30 @@ class _LoginButton extends StatelessWidget {
     return Container(
       padding: const EdgeInsets.symmetric(horizontal: 12),
       margin: const EdgeInsets.only(bottom: 16),
-      width: double.infinity,
-      child: ElevatedButton.icon(
-        style: ElevatedButton.styleFrom(
-          padding: const EdgeInsets.symmetric(vertical: 12),
+      alignment: Alignment.center,
+      child: SizedBox(
+        width: 256,
+        child: OutlinedButton(
+          style: OutlinedButton.styleFrom(
+            shape: RoundedRectangleBorder(
+              borderRadius: BorderRadius.circular(90),
+            ),
+            foregroundColor: Theme.of(context).colorScheme.onBackground,
+          ),
+          onPressed: onPressed,
+          child: Row(
+            children: [
+              icon,
+              const SizedBox(width: 16),
+              Expanded(
+                child: Text(
+                  label,
+                  overflow: TextOverflow.ellipsis,
+                ),
+              ),
+            ],
+          ),
         ),
-        onPressed: onPressed,
-        icon: icon,
-        label: Text(label),
       ),
     );
   }
diff --git a/lib/widgets/layouts/login_scaffold.dart b/lib/widgets/layouts/login_scaffold.dart
index 8a561d69..f1ee1d8b 100644
--- a/lib/widgets/layouts/login_scaffold.dart
+++ b/lib/widgets/layouts/login_scaffold.dart
@@ -54,7 +54,7 @@ class LoginScaffold extends StatelessWidget {
       ),
       child: Column(
         children: [
-          const SizedBox(height: 64),
+          const SizedBox(height: 16),
           Expanded(
             child: Center(
               child: Padding(
diff --git a/linux/my_application.cc b/linux/my_application.cc
index 4f0f0c09..7d5364d2 100644
--- a/linux/my_application.cc
+++ b/linux/my_application.cc
@@ -60,7 +60,7 @@ static void my_application_activate(GApplication* application) {
     gtk_window_set_title(window, "fluffychat");
   }
 
-  gtk_window_set_default_size(window, 864, 600);
+  gtk_window_set_default_size(window, 864, 680);
 
   g_autoptr(FlDartProject) project = fl_dart_project_new();
   fl_dart_project_set_dart_entrypoint_arguments(project, self->dart_entrypoint_arguments);