chore: Adjust onboarding design

This commit is contained in:
Krille Fear 2022-12-29 20:38:13 +01:00
parent 7da70ebeba
commit d930b569fc
7 changed files with 101 additions and 103 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB

View File

@ -2985,5 +2985,6 @@
"endToEndEncryption": "End to end encryption", "endToEndEncryption": "End to end encryption",
"disableEncryptionWarning": "For security reasons you can not disable encryption in a chat, where it has been enabled before.", "disableEncryptionWarning": "For security reasons you can not disable encryption in a chat, where it has been enabled before.",
"sorryThatsNotPossible": "Sorry... that is not possible", "sorryThatsNotPossible": "Sorry... that is not possible",
"deviceKeys": "Device keys:" "deviceKeys": "Device keys:",
"letsStart": "Let's start"
} }

View File

@ -40,9 +40,12 @@ class ConnectPageView extends StatelessWidget {
elevation: Theme.of(context) elevation: Theme.of(context)
.appBarTheme .appBarTheme
.scrolledUnderElevation ?? .scrolledUnderElevation ??
4, 10,
color: Colors.transparent, color: Colors.transparent,
shadowColor: Theme.of(context).appBarTheme.shadowColor, shadowColor: Theme.of(context)
.colorScheme
.onBackground
.withAlpha(64),
clipBehavior: Clip.hardEdge, clipBehavior: Clip.hardEdge,
child: CircleAvatar( child: CircleAvatar(
radius: 64, radius: 64,
@ -103,13 +106,14 @@ class ConnectPageView extends StatelessWidget {
padding: const EdgeInsets.all(12.0), padding: const EdgeInsets.all(12.0),
child: Hero( child: Hero(
tag: 'loginButton', tag: 'loginButton',
child: ElevatedButton( child: ElevatedButton.icon(
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
backgroundColor: Theme.of(context).colorScheme.primary, backgroundColor: Theme.of(context).colorScheme.primary,
foregroundColor: Theme.of(context).colorScheme.onPrimary, foregroundColor: Theme.of(context).colorScheme.onPrimary,
), ),
onPressed: controller.loading ? () {} : controller.signUp, onPressed: controller.loading ? () {} : controller.signUp,
child: controller.loading icon: const Icon(Icons.person_add_outlined),
label: controller.loading
? const LinearProgressIndicator() ? const LinearProgressIndicator()
: Text(L10n.of(context)!.signUp), : Text(L10n.of(context)!.signUp),
), ),
@ -198,7 +202,8 @@ class ConnectPageView extends StatelessWidget {
padding: const EdgeInsets.all(12.0), padding: const EdgeInsets.all(12.0),
child: Hero( child: Hero(
tag: 'signinButton', tag: 'signinButton',
child: ElevatedButton( child: ElevatedButton.icon(
icon: const Icon(Icons.login_outlined),
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
backgroundColor: backgroundColor:
Theme.of(context).colorScheme.primaryContainer, Theme.of(context).colorScheme.primaryContainer,
@ -206,7 +211,7 @@ class ConnectPageView extends StatelessWidget {
Theme.of(context).colorScheme.onPrimaryContainer, Theme.of(context).colorScheme.onPrimaryContainer,
), ),
onPressed: controller.loading ? () {} : controller.login, onPressed: controller.loading ? () {} : controller.login,
child: Text(L10n.of(context)!.login), label: Text(L10n.of(context)!.login),
), ),
), ),
), ),

View File

@ -48,75 +48,68 @@ class HomeserverPickerView extends StatelessWidget {
), ),
), ),
Expanded( Expanded(
child: ListView( child: controller.displayServerList
children: [ ? ListView(
if (controller.displayServerList) children: [
Padding( if (controller.displayServerList)
padding: const EdgeInsets.all(12.0), Padding(
child: Material( padding: const EdgeInsets.all(12.0),
borderRadius: child: Material(
BorderRadius.circular(AppConfig.borderRadius), borderRadius:
color: Theme.of(context).colorScheme.onInverseSurface, BorderRadius.circular(AppConfig.borderRadius),
clipBehavior: Clip.hardEdge, color: Theme.of(context)
child: benchmarkResults == null .colorScheme
? const Center( .onInverseSurface,
child: Padding( clipBehavior: Clip.hardEdge,
padding: EdgeInsets.all(12.0), child: benchmarkResults == null
child: CircularProgressIndicator.adaptive(), ? const Center(
)) child: Padding(
: Column( padding: EdgeInsets.all(12.0),
children: controller.filteredHomeservers child:
.map( CircularProgressIndicator.adaptive(),
(server) => ListTile( ))
trailing: IconButton( : Column(
icon: const Icon( children: controller.filteredHomeservers
Icons.info_outlined, .map(
color: Colors.black, (server) => ListTile(
), trailing: IconButton(
onPressed: () => icon: const Icon(
controller.showServerInfo(server), Icons.info_outlined,
), color: Colors.black,
onTap: () => controller.setServer( ),
server.homeserver.baseUrl.host), onPressed: () => controller
title: Text( .showServerInfo(server),
server.homeserver.baseUrl.host, ),
style: const TextStyle( onTap: () => controller.setServer(
color: Colors.black), server
), .homeserver.baseUrl.host),
subtitle: Text( title: Text(
server.homeserver.description ?? '', server.homeserver.baseUrl.host,
style: TextStyle( style: const TextStyle(
color: Colors.grey.shade700), color: Colors.black),
), ),
), subtitle: Text(
) server.homeserver.description ??
.toList(), '',
), style: TextStyle(
), color:
Colors.grey.shade700),
),
),
)
.toList(),
),
),
),
],
) )
else ...[ : Container(
Container( alignment: Alignment.topCenter,
alignment: Alignment.center,
height: 200,
child: Image.asset( child: Image.asset(
'assets/info-logo.png', 'assets/banner_transparent.png',
filterQuality: FilterQuality.medium, filterQuality: FilterQuality.medium,
), ),
), ),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Center(
child: Text(
AppConfig.applicationWelcomeMessage ??
L10n.of(context)!.welcomeText,
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20),
),
),
),
],
],
),
), ),
SafeArea( SafeArea(
child: Container( child: Container(
@ -126,21 +119,17 @@ class HomeserverPickerView extends StatelessWidget {
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch, crossAxisAlignment: CrossAxisAlignment.stretch,
children: [ children: [
TextButton(
style: TextButton.styleFrom(
foregroundColor:
Theme.of(context).colorScheme.onSurfaceVariant,
),
onPressed: controller.restoreBackup,
child: Text(L10n.of(context)!.hydrate),
),
TextButton( TextButton(
onPressed: () => launch(AppConfig.privacyUrl), onPressed: () => launch(AppConfig.privacyUrl),
child: Text(L10n.of(context)!.privacy), child: Text(L10n.of(context)!.privacy),
), ),
TextButton(
onPressed: controller.restoreBackup,
child: Text(L10n.of(context)!.hydrate),
),
Hero( Hero(
tag: 'loginButton', tag: 'loginButton',
child: ElevatedButton( child: ElevatedButton.icon(
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
backgroundColor: backgroundColor:
Theme.of(context).colorScheme.primary, Theme.of(context).colorScheme.primary,
@ -150,9 +139,10 @@ class HomeserverPickerView extends StatelessWidget {
onPressed: controller.isLoading onPressed: controller.isLoading
? null ? null
: controller.checkHomeserverAction, : controller.checkHomeserverAction,
child: controller.isLoading icon: const Icon(Icons.start_outlined),
label: controller.isLoading
? const LinearProgressIndicator() ? const LinearProgressIndicator()
: Text(L10n.of(context)!.connect), : Text(L10n.of(context)!.letsStart),
), ),
), ),
], ],

View File

@ -82,7 +82,7 @@ class LoginView extends StatelessWidget {
tag: 'signinButton', tag: 'signinButton',
child: Padding( child: Padding(
padding: const EdgeInsets.all(12.0), padding: const EdgeInsets.all(12.0),
child: ElevatedButton( child: ElevatedButton.icon(
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
backgroundColor: Theme.of(context).colorScheme.primary, backgroundColor: Theme.of(context).colorScheme.primary,
foregroundColor: Theme.of(context).colorScheme.onPrimary, foregroundColor: Theme.of(context).colorScheme.onPrimary,
@ -90,7 +90,8 @@ class LoginView extends StatelessWidget {
onPressed: controller.loading onPressed: controller.loading
? null ? null
: () => controller.login(context), : () => controller.login(context),
child: controller.loading icon: const Icon(Icons.login_outlined),
label: controller.loading
? const LinearProgressIndicator() ? const LinearProgressIndicator()
: Text(L10n.of(context)!.login), : Text(L10n.of(context)!.login),
), ),
@ -124,14 +125,15 @@ class LoginView extends StatelessWidget {
), ),
Padding( Padding(
padding: const EdgeInsets.all(12.0), padding: const EdgeInsets.all(12.0),
child: ElevatedButton( child: ElevatedButton.icon(
onPressed: onPressed:
controller.loading ? () {} : controller.passwordForgotten, controller.loading ? () {} : controller.passwordForgotten,
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
foregroundColor: Theme.of(context).colorScheme.error, foregroundColor: Theme.of(context).colorScheme.error,
backgroundColor: Theme.of(context).colorScheme.onError, backgroundColor: Theme.of(context).colorScheme.onError,
), ),
child: Text(L10n.of(context)!.passwordForgotten), icon: const Icon(Icons.safety_check_outlined),
label: Text(L10n.of(context)!.passwordForgotten),
), ),
), ),
], ],

View File

@ -94,13 +94,14 @@ class SignupPageView extends StatelessWidget {
tag: 'loginButton', tag: 'loginButton',
child: Padding( child: Padding(
padding: const EdgeInsets.all(12), padding: const EdgeInsets.all(12),
child: ElevatedButton( child: ElevatedButton.icon(
icon: const Icon(Icons.person_add_outlined),
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
foregroundColor: Theme.of(context).colorScheme.onPrimary, foregroundColor: Theme.of(context).colorScheme.onPrimary,
backgroundColor: Theme.of(context).colorScheme.primary, backgroundColor: Theme.of(context).colorScheme.primary,
), ),
onPressed: controller.loading ? () {} : controller.signup, onPressed: controller.loading ? () {} : controller.signup,
child: controller.loading label: controller.loading
? const LinearProgressIndicator() ? const LinearProgressIndicator()
: Text(L10n.of(context)!.signUp), : Text(L10n.of(context)!.signUp),
), ),

View File

@ -43,21 +43,20 @@ class LoginScaffold extends StatelessWidget {
), ),
), ),
child: Center( child: Center(
child: Material( child: Padding(
color: Theme.of(context).brightness == Brightness.light padding: const EdgeInsets.all(16.0),
? Theme.of(context).scaffoldBackgroundColor.withOpacity(0.9) child: Material(
: Theme.of(context).scaffoldBackgroundColor.withOpacity(0.75), color: Theme.of(context).scaffoldBackgroundColor.withOpacity(0.925),
borderRadius: isMobileMode borderRadius: BorderRadius.circular(AppConfig.borderRadius),
? null clipBehavior: Clip.hardEdge,
: BorderRadius.circular(AppConfig.borderRadius), elevation: 10,
elevation: isMobileMode ? 0 : 10, shadowColor: Colors.black,
clipBehavior: Clip.hardEdge, child: ConstrainedBox(
shadowColor: Colors.black, constraints: isMobileMode
child: ConstrainedBox( ? const BoxConstraints()
constraints: isMobileMode : const BoxConstraints(maxWidth: 480, maxHeight: 640),
? const BoxConstraints() child: scaffold,
: const BoxConstraints(maxWidth: 480, maxHeight: 640), ),
child: scaffold,
), ),
), ),
), ),