Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: padding and fonts in registration screens #338

Merged
merged 3 commits into from
Feb 14, 2025
Merged

fix: padding and fonts in registration screens #338

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
150d72c
fix: padding and fonts in registration screens
boxdot Feb 13, 2025
ff17129
Merge branch 'main' into dima/fix-registration-style
boxdot Feb 13, 2025
5d34a83
Merge branch 'main' into dima/fix-registration-style
boxdot Feb 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 23 additions & 21 deletions app/lib/registration/display_name_picture.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,28 +25,30 @@ class DisplayNameAvatarChoice extends StatelessWidget {
toolbarHeight: isPointer() ? 100 : null,
leading: const AppBarBackButton(),
),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
const _UserAvatarPicker(),
Column(
children: [
const Text('Choose a picture and a display name'),
const SizedBox(height: 20),
Form(
autovalidateMode: AutovalidateMode.always,
child: ConstrainedBox(
constraints: BoxConstraints.tight(const Size(300, 80)),
child: const _DisplayNameTextField(),
body: SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: Spacings.s),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
const _UserAvatarPicker(),
Column(
children: [
const Text('Choose a picture and a display name'),
const SizedBox(height: 20),
Form(
autovalidateMode: AutovalidateMode.always,
child: ConstrainedBox(
constraints: BoxConstraints.tight(const Size(300, 80)),
child: const _DisplayNameTextField(),
),
),
),
],
),
const _SignUpFooter()
],
],
),
const _SignUpFooter()
],
),
),
),
),
Expand Down
78 changes: 40 additions & 38 deletions app/lib/registration/server_choice.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,46 +25,48 @@ class ServerChoice extends StatelessWidget {
leading: const AppBarBackButton(),
),
body: SafeArea(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text(
'Choose a server where you want to create your account',
style: Theme.of(context).textTheme.labelMedium,
),
Form(
autovalidateMode: AutovalidateMode.always,
child: Column(
children: [
const SizedBox(height: 10),
ConstrainedBox(
constraints: BoxConstraints.tight(const Size(300, 80)),
child: TextFormField(
autofocus: (Platform.isIOS || Platform.isAndroid)
? false
: true,
decoration:
const InputDecoration(hintText: 'DOMAIN NAME'),
initialValue:
context.read<RegistrationCubit>().state.domain,
style: inputTextStyle,
onChanged: (String value) {
context.read<RegistrationCubit>().setDomain(value);
},
child: Container(
padding: const EdgeInsets.symmetric(horizontal: Spacings.s),
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
const Text(
'Choose a server where you want to create your account',
),
Form(
autovalidateMode: AutovalidateMode.always,
child: Column(
children: [
const SizedBox(height: 10),
ConstrainedBox(
constraints: BoxConstraints.tight(const Size(300, 80)),
child: TextFormField(
autofocus: (Platform.isIOS || Platform.isAndroid)
? false
: true,
decoration:
const InputDecoration(hintText: 'DOMAIN NAME'),
initialValue:
context.read<RegistrationCubit>().state.domain,
style: inputTextStyle,
onChanged: (String value) {
context.read<RegistrationCubit>().setDomain(value);
},
),
),
),
],
],
),
),
),
Column(
crossAxisAlignment: isSmallScreen(context)
? CrossAxisAlignment.stretch
: CrossAxisAlignment.center,
children: const [_NextButton()],
)
],
Column(
crossAxisAlignment: isSmallScreen(context)
? CrossAxisAlignment.stretch
: CrossAxisAlignment.center,
children: const [_NextButton()],
)
],
),
),
),
),
Expand Down
85 changes: 45 additions & 40 deletions app/lib/registration/username_password.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,48 +24,52 @@ class UsernamePasswordChoice extends StatelessWidget {
toolbarHeight: isPointer() ? 100 : null,
leading: const AppBarBackButton(),
),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text(
'Choose a username and password',
style: Theme.of(context).textTheme.labelMedium,
),
Form(
autovalidateMode: AutovalidateMode.always,
child: Column(
children: [
const SizedBox(height: 5),
ConstrainedBox(
constraints: BoxConstraints.tight(const Size(300, 80)),
child: const _UsernameTextField(),
),
const SizedBox(height: 5),
ConstrainedBox(
constraints: BoxConstraints.tight(const Size(300, 80)),
child: TextFormField(
decoration: const InputDecoration(hintText: 'PASSWORD'),
style: inputTextStyle,
obscureText: true,
onChanged: (String value) {
context.read<RegistrationCubit>().setPassword(value);
},
body: SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: Spacings.s),
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
const Text('Choose a username and password'),
Form(
autovalidateMode: AutovalidateMode.always,
child: Column(
children: [
const SizedBox(height: 5),
ConstrainedBox(
constraints: BoxConstraints.tight(const Size(300, 80)),
child: const _UsernameTextField(),
),
)
],
const SizedBox(height: 5),
ConstrainedBox(
constraints: BoxConstraints.tight(const Size(300, 80)),
child: TextFormField(
initialValue:
context.read<RegistrationCubit>().state.password,
decoration:
const InputDecoration(hintText: 'PASSWORD'),
style: inputTextStyle,
obscureText: true,
onChanged: (String value) {
context
.read<RegistrationCubit>()
.setPassword(value);
},
),
)
],
),
),
),
Column(
crossAxisAlignment: isSmallScreen(context)
? CrossAxisAlignment.stretch
: CrossAxisAlignment.center,
children: const [_NextButton()],
)
],
Column(
crossAxisAlignment: isSmallScreen(context)
? CrossAxisAlignment.stretch
: CrossAxisAlignment.center,
children: const [_NextButton()],
)
],
),
),
),
),
Expand All @@ -80,6 +84,7 @@ class _UsernameTextField extends StatelessWidget {
Widget build(BuildContext context) {
return TextFormField(
autofocus: (Platform.isIOS || Platform.isAndroid) ? false : true,
initialValue: context.read<RegistrationCubit>().state.username,
decoration: const InputDecoration(hintText: 'USERNAME'),
style: inputTextStyle,
validator: _usernameValidator,
Expand Down
4 changes: 4 additions & 0 deletions app/test/mocks.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import 'package:prototype/core/core.dart';
import 'package:prototype/message_list/message_cubit.dart';
import 'package:prototype/message_list/message_list_cubit.dart';
import 'package:prototype/navigation/navigation.dart';
import 'package:prototype/registration/registration.dart';
import 'package:prototype/user/user.dart';

class MockNavigationCubit extends MockCubit<NavigationState>
Expand Down Expand Up @@ -94,3 +95,6 @@ class MockLoadableUserCubit extends MockCubit<LoadableUser>
implements LoadableUserCubit {}

class MockUser extends Mock implements User {}

class MockRegistrationCubit extends MockCubit<RegistrationState>
implements RegistrationCubit {}
67 changes: 67 additions & 0 deletions app/test/registration/display_name_picture_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
// SPDX-FileCopyrightText: 2025 Phoenix R&D GmbH <[email protected]>
//
// SPDX-License-Identifier: AGPL-3.0-or-later

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:mocktail/mocktail.dart';
import 'package:prototype/registration/registration.dart';
import 'package:prototype/theme/theme.dart';

import '../mocks.dart';

void main() {
group('DisplayNameAvatarChoice', () {
late MockRegistrationCubit registrationCubit;

setUp(() async {
registrationCubit = MockRegistrationCubit();
});

Widget buildSubject() => MultiBlocProvider(
providers: [
BlocProvider<RegistrationCubit>.value(
value: registrationCubit,
),
],
child: Builder(
builder: (context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: themeData(context),
home: const Scaffold(
body: DisplayNameAvatarChoice(),
),
);
},
),
);

testWidgets('renders correctly when empty', (tester) async {
when(() => registrationCubit.state).thenReturn(const RegistrationState());

await tester.pumpWidget(buildSubject());

await expectLater(
find.byType(MaterialApp),
matchesGoldenFile('goldens/display_name_avatar_choice_empty.png'),
);
});

testWidgets('renders correctly', (tester) async {
when(() => registrationCubit.state).thenReturn(
const RegistrationState(
displayName: "Alice",
),
);

await tester.pumpWidget(buildSubject());

await expectLater(
find.byType(MaterialApp),
matchesGoldenFile('goldens/display_name_avatar_choice.png'),
);
});
});
}
3 changes: 3 additions & 0 deletions app/test/registration/goldens/display_name_avatar_choice.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions app/test/registration/goldens/display_name_avatar_choice_empty.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions app/test/registration/goldens/server_choice.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions app/test/registration/goldens/server_choice_empty.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions app/test/registration/goldens/username_password_choice.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions app/test/registration/goldens/username_password_choice_empty.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading