chore: layout updates to signup / login pages (#2465)

assets/l10n/intl_en.arb

@@ -4863,5 +4863,6 @@
   "areYouLikeMe": "Are you like me?",
   "tryAgainLater": "Too many attempts made. Please try again in 5 minutes.",
   "enterSpaceCode": "Enter the Space Code",
-  "shareSpaceLink": "Share link to space"
+  "shareSpaceLink": "Share link to space",
+  "byUsingPangeaChat": "By using Pangea Chat, I agree to the "
 }

lib/pangea/login/pages/pangea_login_scaffold.dart

@@ -3,6 +3,7 @@ import 'dart:typed_data';
 import 'package:flutter/material.dart';
 
 import 'package:fluffychat/config/app_config.dart';
+import 'package:fluffychat/config/themes.dart';
 
 class PangeaLoginScaffold extends StatelessWidget {
   final String mainAssetPath;
@@ -22,9 +23,13 @@ class PangeaLoginScaffold extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final isColumnMode = FluffyThemes.isColumnMode(context);
     return SafeArea(
       child: Scaffold(
-        appBar: customAppBar ?? AppBar(),
+        appBar: customAppBar ??
+            AppBar(
+              toolbarHeight: isColumnMode ? null : 40.0,
+            ),
         body: LayoutBuilder(
           builder: (context, constraints) {
             return SingleChildScrollView(
@@ -41,8 +46,8 @@ class PangeaLoginScaffold extends StatelessWidget {
                       mainAxisAlignment: MainAxisAlignment.center,
                       children: [
                         Container(
-                          width: 175,
+                          width: isColumnMode ? 175 : 125,
-                          height: 175,
+                          height: isColumnMode ? 175 : 125,
                           decoration: const BoxDecoration(
                             shape: BoxShape.circle,
                             color: Colors.transparent,
@@ -59,13 +64,12 @@ class PangeaLoginScaffold extends StatelessWidget {
                                   ),
                           ),
                         ),
-                        const SizedBox(height: 24),
                         if (showAppName)
                           Text(
                             AppConfig.applicationName,
                             style: Theme.of(context).textTheme.displaySmall,
                           ),
-                        if (showAppName) const SizedBox(height: 12),
+                        const SizedBox(height: 12),
                         ...children,
                       ],
                     ),

lib/pangea/login/pages/pangea_login_view.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 
+import 'package:fluffychat/config/themes.dart';
 import 'package:fluffychat/pages/login/login.dart';
 import 'package:fluffychat/pangea/common/widgets/pangea_logo_svg.dart';
 import 'package:fluffychat/pangea/login/pages/pangea_login_scaffold.dart';
@@ -18,6 +19,7 @@ class PangeaLoginView extends StatelessWidget {
     return Form(
       key: controller.formKey,
       child: PangeaLoginScaffold(
+        showAppName: FluffyThemes.isColumnMode(context),
         children: [
           AutofillGroup(
             child: Column(
@@ -66,24 +68,24 @@ class PangeaLoginView extends StatelessWidget {
             enabled: controller.enabledSignIn,
           ),
           Padding(
-            padding: const EdgeInsets.symmetric(vertical: 6.0),
+            padding: const EdgeInsets.all(4.0),
             child: TextButton(
               onPressed: controller.loadingSignIn
                   ? () {}
                   : controller.passwordForgotten,
               style: TextButton.styleFrom(
                 foregroundColor: Theme.of(context).colorScheme.error,
+                padding: const EdgeInsets.symmetric(
+                  horizontal: 16.0,
+                  vertical: 4.0,
                 ),
-              child: Row(
+                minimumSize: const Size(0, 0),
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  Text(L10n.of(context).passwordForgotten),
-                ],
               ),
+              child: Text(L10n.of(context).passwordForgotten),
             ),
           ),
           Padding(
-            padding: const EdgeInsets.all(20),
+            padding: const EdgeInsets.all(8.0),
             child: Row(
               children: [
                 const Expanded(child: Divider()),
@@ -107,6 +109,33 @@ class PangeaLoginView extends StatelessWidget {
             loading: controller.loadingAppleSSO,
             setLoading: controller.setLoadingSSO,
           ),
+          Padding(
+            padding: const EdgeInsets.symmetric(
+              vertical: 8.0,
+              horizontal: 8.0,
+            ),
+            child: RichText(
+              textAlign: TextAlign.justify,
+              text: TextSpan(
+                text: L10n.of(context).byUsingPangeaChat,
+                children: [
+                  TextSpan(
+                    text: L10n.of(context).termsAndConditions,
+                    style: const TextStyle(
+                      decoration: TextDecoration.underline,
+                    ),
+                  ),
+                  TextSpan(
+                    text: L10n.of(context).andCertifyIAmAtLeast13YearsOfAge,
+                  ),
+                ],
+                style: TextStyle(
+                  fontSize: 12,
+                  color: Theme.of(context).colorScheme.onSurface,
+                ),
+              ),
+            ),
+          ),
         ],
       ),
     );

lib/pangea/login/pages/signup.dart

@@ -146,13 +146,7 @@ class SignupPageController extends State<SignupPage> {
     return null;
   }
 
-  bool isTnCChecked = false;
   String? signupError;
-  void onTncChange(bool? value) {
-    isTnCChecked = value ?? false;
-    signupError = null;
-    setState(() {});
-  }
 
   void signup([_]) async {
     setState(() => signupError = null);

lib/pangea/login/pages/signup_view.dart

@@ -9,7 +9,6 @@ import 'package:fluffychat/pangea/common/widgets/pangea_logo_svg.dart';
 import 'package:fluffychat/pangea/login/pages/pangea_login_scaffold.dart';
 import 'package:fluffychat/pangea/login/widgets/full_width_button.dart';
 import 'package:fluffychat/pangea/login/widgets/p_sso_button.dart';
-import 'package:fluffychat/pangea/login/widgets/tos_checkbox.dart';
 import 'signup.dart';
 
 class SignupPageView extends StatelessWidget {
@@ -19,24 +18,13 @@ class SignupPageView extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     bool validator() {
-      final valid = controller.formKey.currentState?.validate() ?? false;
+      return controller.formKey.currentState?.validate() ?? false;
-      if (!valid) return false;
-      if (!controller.isTnCChecked) {
-        controller.setSignupError(L10n.of(context).pleaseAgreeToTOS);
-        return false;
-      }
-      return true;
     }
 
     return Form(
       key: controller.formKey,
       child: PangeaLoginScaffold(
         children: [
-          TosCheckbox(
-            controller.isTnCChecked,
-            controller.onTncChange,
-            error: controller.signupError,
-          ),
           FullWidthButton(
             title: L10n.of(context).signUpWithEmail,
             onPressed: () {
@@ -64,6 +52,33 @@ class SignupPageView extends StatelessWidget {
             loading: controller.loadingAppleSSO,
             validator: validator,
           ),
+          Padding(
+            padding: const EdgeInsets.symmetric(
+              vertical: 8.0,
+              horizontal: 8.0,
+            ),
+            child: RichText(
+              textAlign: TextAlign.justify,
+              text: TextSpan(
+                text: L10n.of(context).byUsingPangeaChat,
+                children: [
+                  TextSpan(
+                    text: L10n.of(context).termsAndConditions,
+                    style: const TextStyle(
+                      decoration: TextDecoration.underline,
+                    ),
+                  ),
+                  TextSpan(
+                    text: L10n.of(context).andCertifyIAmAtLeast13YearsOfAge,
+                  ),
+                ],
+                style: TextStyle(
+                  fontSize: 12,
+                  color: Theme.of(context).colorScheme.onSurface,
+                ),
+              ),
+            ),
+          ),
         ],
       ),
     );

lib/pangea/login/widgets/full_width_button.dart

@@ -35,7 +35,7 @@ class FullWidthButtonState extends State<FullWidthButton> {
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         Padding(
-          padding: EdgeInsets.fromLTRB(6, 6, 6, widget.error == null ? 6 : 0),
+          padding: EdgeInsets.fromLTRB(4, 4, 4, widget.error == null ? 4 : 0),
           child: AnimatedOpacity(
             duration: FluffyThemes.animationDuration,
             opacity: widget.enabled ? 1 : 0.5,
@@ -47,7 +47,7 @@ class FullWidthButtonState extends State<FullWidthButton> {
               child: Container(
                 // internal padding
                 padding: const EdgeInsets.symmetric(horizontal: 16),
-                height: 50,
+                height: 40,
                 decoration: BoxDecoration(
                   color: widget.enabled
                       ? Theme.of(context).colorScheme.primary
@@ -146,7 +146,9 @@ class FullWidthTextField extends StatelessWidget {
     final bool shouldShowError = showErrorText ?? errorText != null;
 
     return Padding(
-      padding: const EdgeInsets.all(6.0),
+      padding: const EdgeInsets.all(4.0),
+      child: SizedBox(
+        height: 40.0,
         child: TextFormField(
           obscureText: obscureText,
           autocorrect: autocorrect,
@@ -184,6 +186,7 @@ class FullWidthTextField extends StatelessWidget {
           controller: controller,
           onFieldSubmitted: onSubmitted,
         ),
+      ),
     );
   }
 }

lib/pangea/login/widgets/tos_checkbox.dart

@@ -1,94 +0,0 @@
-// Flutter imports:
-
-import 'package:flutter/material.dart';
-
-import 'package:flutter_gen/gen_l10n/l10n.dart';
-
-import 'package:fluffychat/config/app_config.dart';
-import 'package:fluffychat/config/themes.dart';
-import 'package:fluffychat/utils/url_launcher.dart';
-
-class TosCheckbox extends StatefulWidget {
-  final bool value;
-  final Function(bool?) onChange;
-  final String? error;
-
-  const TosCheckbox(
-    this.value,
-    this.onChange, {
-    this.error,
-    super.key,
-  });
-
-  @override
-  TosCheckboxState createState() => TosCheckboxState();
-}
-
-class TosCheckboxState extends State<TosCheckbox>
-    with SingleTickerProviderStateMixin {
-  @override
-  Widget build(BuildContext context) {
-    return Row(
-      crossAxisAlignment: CrossAxisAlignment.center,
-      children: [
-        Expanded(
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              InkWell(
-                onTap: () => UrlLauncher(context, AppConfig.termsOfServiceUrl)
-                    .launchUrl(),
-                child: Padding(
-                  padding: const EdgeInsets.fromLTRB(15, 8, 0, 8),
-                  child: RichText(
-                    text: TextSpan(
-                      text: L10n.of(context).iAgreeToThe,
-                      children: [
-                        TextSpan(
-                          text: L10n.of(context).termsAndConditions,
-                          style: const TextStyle(
-                            decoration: TextDecoration.underline,
-                          ),
-                        ),
-                        TextSpan(
-                          text:
-                              L10n.of(context).andCertifyIAmAtLeast13YearsOfAge,
-                        ),
-                      ],
-                      style: TextStyle(
-                        fontSize: 14,
-                        color: Theme.of(context).colorScheme.onSurface,
-                      ),
-                    ),
-                  ),
-                ),
-              ),
-              AnimatedSize(
-                duration: FluffyThemes.animationDuration,
-                child: widget.error == null
-                    ? const SizedBox.shrink()
-                    : Padding(
-                        padding:
-                            const EdgeInsets.only(top: 4, left: 15, bottom: 8),
-                        child: Text(
-                          widget.error!,
-                          style: TextStyle(
-                            color: Theme.of(context).colorScheme.error,
-                            fontSize: 12,
-                          ),
-                        ),
-                      ),
-              ),
-            ],
-          ),
-        ),
-        Checkbox(
-          value: widget.value,
-          activeColor: Theme.of(context).colorScheme.primary,
-          onChanged: widget.onChange,
-        ),
-      ],
-    );
-  }
-}