From 068245eec91aced6ab6791d8c127ee6b8979a50d Mon Sep 17 00:00:00 2001
From: Yijing Huang <hyj891204@gmail.com>
Date: Wed, 29 Nov 2023 19:03:25 -0700
Subject: [PATCH] chore: improve UI in MobileSignInScreen (#4048)

---
 .../sign_in_screen/mobile_sign_in_screen.dart | 38 ++++++-----
 .../widgets/third_party_sign_in_buttons.dart  | 64 ++++++++++++-------
 2 files changed, 62 insertions(+), 40 deletions(-)

diff --git a/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/mobile_sign_in_screen.dart b/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/mobile_sign_in_screen.dart
index 34907401d9..9125e4ea67 100644
--- a/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/mobile_sign_in_screen.dart
+++ b/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/mobile_sign_in_screen.dart
@@ -69,24 +69,30 @@ class MobileSignInScreen extends StatelessWidget {
                   ),
                   const SignInAnonymousButton(),
                   const VSpace(spacing),
-                  Row(
-                    mainAxisAlignment: MainAxisAlignment.center,
-                    children: [
-                      const Expanded(child: Divider()),
-                      Padding(
-                        padding: const EdgeInsets.symmetric(horizontal: 8),
-                        child: Text(
-                          LocaleKeys.signIn_or.tr(),
-                          style: style.textTheme.bodyMedium?.copyWith(
-                            color: style.colorScheme.onSecondary,
+                  if (isAuthEnabled) ...[
+                    Row(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        const Expanded(child: Divider()),
+                        Padding(
+                          padding: const EdgeInsets.symmetric(horizontal: 8),
+                          child: Text(
+                            LocaleKeys.signIn_or.tr(),
+                            style: style.textTheme.bodyMedium?.copyWith(
+                              color: style.colorScheme.onSecondary,
+                            ),
                           ),
                         ),
-                      ),
-                      const Expanded(child: Divider()),
-                    ],
-                  ),
-                  const VSpace(spacing),
-                  if (isAuthEnabled) const ThirdPartySignInButtons(),
+                        const Expanded(child: Divider()),
+                      ],
+                    ),
+                    const VSpace(spacing),
+                    const ThirdPartySignInButtons(),
+                  ],
+                  if (!isAuthEnabled)
+                    const Spacer(
+                      flex: 2,
+                    ),
                   const VSpace(spacing),
                 ],
               ),
diff --git a/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/third_party_sign_in_buttons.dart b/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/third_party_sign_in_buttons.dart
index f63b738ca6..3becb92d32 100644
--- a/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/third_party_sign_in_buttons.dart
+++ b/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/third_party_sign_in_buttons.dart
@@ -20,9 +20,13 @@ class ThirdPartySignInButtons extends StatelessWidget {
   Widget build(BuildContext context) {
     // Get themeMode from AppearanceSettingsCubit
     // When user changes themeMode, it changes the state in AppearanceSettingsCubit, but the themeMode for the MaterialApp won't change, it only got updated(get value from AppearanceSettingsCubit) when user open the app again. Thus, we should get themeMode from AppearanceSettingsCubit rather than MediaQuery.
-    final isDarkMode =
-        context.read<AppearanceSettingsCubit>().state.themeMode ==
-            ThemeMode.dark;
+
+    final themeModeFromCubit =
+        context.read<AppearanceSettingsCubit>().state.themeMode;
+
+    final isDarkMode = themeModeFromCubit == ThemeMode.system
+        ? MediaQuery.of(context).platformBrightness == Brightness.dark
+        : themeModeFromCubit == ThemeMode.dark;
 
     return Column(
       children: [
@@ -78,35 +82,47 @@ class _ThirdPartySignInButton extends StatelessWidget {
     final style = Theme.of(context);
     final isMobile = PlatformExtension.isMobile;
     if (isMobile) {
-      // Use LayoutBuilder to get the maxWidth of parent widget(Column) and set the icon occupied area to 1/4 of maxWidth.
-      return LayoutBuilder(
-        builder: (context, constraints) {
-          return SizedBox(
-            height: 48,
-            child: OutlinedButton.icon(
-              icon: Container(
-                width: constraints.maxWidth / 4,
-                alignment: Alignment.centerRight,
-                child: SizedBox(
-                  width: 24,
-                  child: FlowySvg(
-                    icon,
-                    blendMode: null,
+      return Container(
+        height: 48,
+        decoration: BoxDecoration(
+          borderRadius: const BorderRadius.all(
+            Radius.circular(4),
+          ),
+          border: Border.all(
+            color: style.colorScheme.outline,
+            width: 0.5,
+          ),
+        ),
+        child: Center(
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              SizedBox(
+                // The icon could be in different height as original aspect ratio, we use a fixed sizebox to wrap it to make sure they all occupy the same space.
+                width: 30,
+                height: 30,
+                child: Center(
+                  child: SizedBox(
+                    width: 24,
+                    child: FlowySvg(
+                      icon,
+                      blendMode: null,
+                    ),
                   ),
                 ),
               ),
-              label: Container(
-                padding: const EdgeInsets.only(left: 4),
-                alignment: Alignment.centerLeft,
+              const HSpace(8),
+              SizedBox(
+                // To fit the longest label 'Log in with Discord'
+                width: 135,
                 child: Text(
                   labelText,
                   style: Theme.of(context).textTheme.titleSmall,
                 ),
               ),
-              onPressed: onPressed,
-            ),
-          );
-        },
+            ],
+          ),
+        ),
       );
     }
     // In desktop, the width of button is limited by [AuthFormContainer]