ember/fluffychat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Draw attention to relevant info in space code onboarding page (#5886)

Browse source 
* Initial plan

* Redesign space code onboarding page for better visual hierarchy

- Replace large glow logo (white circular bg) with small SVG logo in primary color
- Remove 'Welcome [username]' big text that was drawing attention away from the CTA
- Enlarge question text to headlineSmall bold so it becomes the focal point
- Restructure layout: logo top, question/input/join middle, skip separated at bottom
- Fix onSubmitted callback bug (was a bare reference, now correctly calls submitCode())"

Co-authored-by: ggurdin <46800240+ggurdin@users.noreply.github.com>

* visual tweaks

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: ggurdin <46800240+ggurdin@users.noreply.github.com>
Co-authored-by: ggurdin <ggurdin@gmail.com>
This commit is contained in:
Copilot 2026-03-05 09:28:00 -05:00 • committed by GitHub
parent 4661d2caf4
commit 3f7073571b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 61 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

121
lib/pages/onboarding/space_code_onboarding_view.dart
View file

@ -1,11 +1,11 @@
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:matrix/matrix.dart';
import 'package:fluffychat/l10n/l10n.dart';
import 'package:fluffychat/pages/onboarding/space_code_onboarding.dart';
import 'package:fluffychat/pangea/login/pages/pangea_login_scaffold.dart';
import 'package:fluffychat/pangea/common/widgets/pangea_logo_svg.dart';
import 'package:fluffychat/widgets/layouts/max_width_body.dart';
class SpaceCodeOnboardingView extends StatelessWidget {
final SpaceCodeOnboardingState controller;
@ -13,69 +13,70 @@ class SpaceCodeOnboardingView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return PangeaLoginScaffold(
customAppBar: AppBar(
title: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 450),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
BackButton(onPressed: Navigator.of(context).pop),
const SizedBox(width: 40.0),
],
),
),
final theme = Theme.of(context);
return Scaffold(
appBar: AppBar(
leading: BackButton(onPressed: Navigator.of(context).pop),
automaticallyImplyLeading: false,
),
showAppName: false,
mainAssetUrl: controller.profile?.avatarUrl,
children: [
Column(
spacing: 8.0,
children: [
Text(
L10n.of(context).welcomeUser(
controller.profile?.displayName ??
controller.client.userID?.localpart ??
"",
),
style: Theme.of(
context,
).textTheme.titleLarge?.copyWith(fontWeight: FontWeight.bold),
body: SafeArea(
child: MaxWidthBody(
maxWidth: 300,
withScrolling: false,
showBorder: false,
child: Container(
alignment: .center,
padding: const EdgeInsets.symmetric(
vertical: 24.0,
horizontal: 16.0,
),
Text(
L10n.of(context).joinSpaceOnboardingDesc,
textAlign: TextAlign.center,
child: Column(
spacing: 32.0,
mainAxisSize: .min,
children: [
PangeaLogoSvg(width: 72),
Column(
spacing: 12.0,
mainAxisSize: .min,
children: [
Text(
L10n.of(context).joinSpaceOnboardingDesc,
style: theme.textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.bold,
),
textAlign: .center,
),
TextField(
decoration: InputDecoration(
hintText: L10n.of(context).enterCodeToJoin,
),
controller: controller.codeController,
onSubmitted: (_) => controller.submitCode(),
),
ElevatedButton(
onPressed: controller.codeController.text.isNotEmpty
? controller.submitCode
: null,
style: ElevatedButton.styleFrom(
backgroundColor: theme.colorScheme.primaryContainer,
foregroundColor: theme.colorScheme.onPrimaryContainer,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [Text(L10n.of(context).join)],
),
),
],
),
TextButton(
onPressed: () => context.go("/rooms"),
child: Text(L10n.of(context).skipForNow),
),
],
),
TextField(
decoration: InputDecoration(
hintText: L10n.of(context).enterCodeToJoin,
),
controller: controller.codeController,
onSubmitted: (_) => controller.submitCode,
),
ElevatedButton(
onPressed: controller.codeController.text.isNotEmpty
? controller.submitCode
: null,
style: ElevatedButton.styleFrom(
backgroundColor: Theme.of(context).colorScheme.primaryContainer,
foregroundColor: Theme.of(
context,
).colorScheme.onPrimaryContainer,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [Text(L10n.of(context).join)],
),
),
TextButton(
child: Text(L10n.of(context).skipForNow),
onPressed: () => context.go("/rooms"),
),
],
),
),
],
),
);
}
}