kevin/baron-sso
1
0
Fork 0
forked from baron/baron-sso
Code Pull Requests Activity

회원가입 UI 일관성 및 가시성 수정

Browse Source
This commit is contained in:
김용연
2026-05-22 16:03:25 +09:00
parent cb8c7d78c3
commit 4ca492b31c
1 changed files with 168 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

297
userfront/lib/features/auth/presentation/signup_screen.dart
View File

@@ -16,12 +16,6 @@ class SignupScreen extends StatefulWidget {
} }
class _SignupScreenState extends State<SignupScreen> { class _SignupScreenState extends State<SignupScreen> {
static const _signupInk = Color(0xFF111827);
static const _signupBorder = Color(0xFFE5E7EB);
static const _signupSurface = Color(0xFFF8FAFC);
static const _signupMuted = Color(0xFF6B7280);
static const _signupDone = Color(0xFF0F766E);
static const _signupDoneSurface = Color(0xFFECFDF5);
static const _agreementDesktopBreakpoint = 1024.0; static const _agreementDesktopBreakpoint = 1024.0;
static const _agreementCardMaxWidth = 880.0; static const _agreementCardMaxWidth = 880.0;
static const _stepIndicatorDesktopBreakpoint = 1024.0; static const _stepIndicatorDesktopBreakpoint = 1024.0;
@@ -69,6 +63,64 @@ class _SignupScreenState extends State<SignupScreen> {
Timer? _phoneTimer; Timer? _phoneTimer;
int _phoneSeconds = 0; int _phoneSeconds = 0;
ColorScheme get _scheme => Theme.of(context).colorScheme;
bool get _isDark => _scheme.brightness == Brightness.dark;
Color get _signupInk => _scheme.onSurface;
Color get _signupBorder => _scheme.outlineVariant;
Color get _signupSurface => _scheme.surfaceContainerLow;
Color get _signupCard => _scheme.surface;
Color get _signupMuted => _scheme.onSurfaceVariant;
Color get _signupDone => _signupAccent.withValues(alpha: _isDark ? 0.78 : 0.72);
Color get _signupDoneSurface =>
_signupAccent.withValues(alpha: _isDark ? 0.18 : 0.12);
Color get _signupAccent =>
_isDark ? const Color(0xFF93C5FD) : const Color(0xFF1E3A8A);
Color get _signupOnAccent =>
_isDark ? const Color(0xFF082F49) : Colors.white;
Color get _signupAccentSurface =>
_isDark ? const Color(0xFF172554) : const Color(0xFFDBEAFE);
Color get _signupAccentInk =>
_isDark ? const Color(0xFFBFDBFE) : const Color(0xFF1D4ED8);
Color get _signupRequiredSurface =>
_isDark ? const Color(0xFF312E81) : const Color(0xFFEEF2FF);
Color get _signupRequiredBorder =>
_isDark ? const Color(0xFF4F46E5) : const Color(0xFFC7D2FE);
Color get _signupRequiredInk =>
_isDark ? const Color(0xFFC7D2FE) : const Color(0xFF3730A3);
Color get _signupSummaryBorder =>
_signupAccent.withValues(alpha: _isDark ? 0.28 : 0.16);
BorderSide get _signupDividerSide => BorderSide(color: _signupBorder);
CheckboxThemeData get _signupCheckboxTheme => CheckboxThemeData(
side: _signupDividerSide,
fillColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.selected)) {
return _signupAccent;
}
return _signupCard;
}),
checkColor: WidgetStateProperty.all(_signupOnAccent),
);
ButtonStyle get _signupPrimaryButtonStyle => FilledButton.styleFrom(
minimumSize: const Size.fromHeight(55),
backgroundColor: _signupAccent,
foregroundColor: _signupOnAccent,
disabledBackgroundColor: _isDark
? _scheme.surfaceContainerHighest
: const Color(0xFFE5E7EB),
disabledForegroundColor: _isDark
? _scheme.onSurfaceVariant
: const Color(0xFF9CA3AF),
);
ButtonStyle get _signupSecondaryButtonStyle => OutlinedButton.styleFrom(
minimumSize: const Size.fromHeight(55),
foregroundColor: _signupInk,
side: BorderSide(color: _signupBorder),
);
String _renderTranslatedText( String _renderTranslatedText(
String key, { String key, {
String? fallback, String? fallback,
@@ -454,7 +506,7 @@ class _SignupScreenState extends State<SignupScreen> {
final circleRadius = isDesktop ? 17.0 : 12.0; final circleRadius = isDesktop ? 17.0 : 12.0;
final labelStyle = TextStyle( final labelStyle = TextStyle(
fontSize: isDesktop ? 12 : 9, fontSize: isDesktop ? 12 : 9,
color: isCurrent ? _signupInk : (isDone ? _signupDone : _signupMuted), color: isCurrent ? _signupAccent : (isDone ? _signupDone : _signupMuted),
fontWeight: isCurrent || isDone ? FontWeight.w700 : FontWeight.w500, fontWeight: isCurrent || isDone ? FontWeight.w700 : FontWeight.w500,
height: 1.2, height: 1.2,
); );
@@ -469,13 +521,13 @@ class _SignupScreenState extends State<SignupScreen> {
decoration: BoxDecoration( decoration: BoxDecoration(
color: isDone color: isDone
? _signupDone ? _signupDone
: (isCurrent ? _signupInk : _signupSurface), : (isCurrent ? _signupAccent : _signupSurface),
shape: BoxShape.circle, shape: BoxShape.circle,
border: Border.all( border: Border.all(
color: isDone color: isDone
? _signupDone ? _signupDone
: (isCurrent ? _signupInk : _signupBorder), : (isCurrent ? _signupAccent : _signupBorder),
width: isCurrent ? 1.5 : 1, width: isDone ? 0 : (isCurrent ? 1.5 : 1),
), ),
boxShadow: isDesktop && (isCurrent || isDone) boxShadow: isDesktop && (isCurrent || isDone)
? const [ ? const [
@@ -497,7 +549,7 @@ class _SignupScreenState extends State<SignupScreen> {
: Text( : Text(
'$step', '$step',
style: TextStyle( style: TextStyle(
color: isCurrent ? Colors.white : _signupMuted, color: isCurrent ? _signupOnAccent : _signupMuted,
fontSize: isDesktop ? 13 : 10, fontSize: isDesktop ? 13 : 10,
fontWeight: FontWeight.w700, fontWeight: FontWeight.w700,
), ),
@@ -564,9 +616,9 @@ class _SignupScreenState extends State<SignupScreen> {
), ),
child: DecoratedBox( child: DecoratedBox(
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: _signupCard,
borderRadius: BorderRadius.circular(isDesktop ? 24 : 18), borderRadius: BorderRadius.circular(isDesktop ? 24 : 18),
border: Border.all(color: _signupBorder), border: Border.all(color: _signupSummaryBorder),
boxShadow: isDesktop boxShadow: isDesktop
? const [ ? const [
BoxShadow( BoxShadow(
@@ -647,58 +699,60 @@ class _SignupScreenState extends State<SignupScreen> {
decoration: BoxDecoration( decoration: BoxDecoration(
color: _signupSurface, color: _signupSurface,
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(16),
border: Border.all(color: _signupBorder), border: Border.all(color: _signupSummaryBorder),
), ),
child: Padding( child: Padding(
padding: EdgeInsets.all(isDesktop ? 20 : 16), padding: EdgeInsets.all(isDesktop ? 20 : 16),
child: Column( child: CheckboxTheme(
crossAxisAlignment: CrossAxisAlignment.stretch, data: _signupCheckboxTheme,
children: [ child: Column(
CheckboxListTile( crossAxisAlignment: CrossAxisAlignment.stretch,
title: Text( children: [
tr('ui.userfront.signup.agreement.all'), CheckboxListTile(
style: TextStyle( title: Text(
fontSize: isDesktop ? 17 : 15, tr('ui.userfront.signup.agreement.all'),
fontWeight: FontWeight.w700, style: TextStyle(
color: _signupInk, fontSize: isDesktop ? 17 : 15,
), fontWeight: FontWeight.w700,
), color: _signupInk,
subtitle: Padding(
padding: const EdgeInsets.only(top: 4),
child: Text(
tr('msg.userfront.signup.agreement.all_hint'),
style: const TextStyle(
fontSize: 13,
height: 1.45,
color: _signupMuted,
), ),
), ),
subtitle: Padding(
padding: const EdgeInsets.only(top: 4),
child: Text(
tr('msg.userfront.signup.agreement.all_hint'),
style: TextStyle(
fontSize: 13,
height: 1.45,
color: _signupMuted,
),
),
),
value: _termsAccepted && _privacyAccepted,
onChanged: (val) {
setState(() {
final next = val ?? false;
_termsAccepted = next;
_privacyAccepted = next;
});
},
contentPadding: EdgeInsets.zero,
controlAffinity: ListTileControlAffinity.leading,
), ),
value: _termsAccepted && _privacyAccepted, const SizedBox(height: 8),
onChanged: (val) { Text(
setState(() { tr(
final next = val ?? false; 'msg.userfront.signup.agreement.progress',
_termsAccepted = next; params: {'count': '$acceptedCount', 'total': '2'},
_privacyAccepted = next; ),
}); style: TextStyle(
}, fontSize: 12,
contentPadding: EdgeInsets.zero, fontWeight: FontWeight.w600,
controlAffinity: ListTileControlAffinity.leading, color: _signupMuted,
activeColor: _signupInk, ),
),
const SizedBox(height: 8),
Text(
tr(
'msg.userfront.signup.agreement.progress',
params: {'count': '$acceptedCount', 'total': '2'},
), ),
style: const TextStyle( ],
fontSize: 12, ),
fontWeight: FontWeight.w600,
color: _signupMuted,
),
),
],
), ),
), ),
); );
@@ -716,13 +770,15 @@ class _SignupScreenState extends State<SignupScreen> {
return DecoratedBox( return DecoratedBox(
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: _signupCard,
borderRadius: BorderRadius.circular(18), borderRadius: BorderRadius.circular(18),
border: Border.all(color: _signupBorder), border: Border.all(color: _signupSummaryBorder),
), ),
child: Padding( child: Padding(
padding: EdgeInsets.all(isDesktop ? 20 : 16), padding: EdgeInsets.all(isDesktop ? 20 : 16),
child: Column( child: CheckboxTheme(
data: _signupCheckboxTheme,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch, crossAxisAlignment: CrossAxisAlignment.stretch,
children: [ children: [
Row( Row(
@@ -742,7 +798,7 @@ class _SignupScreenState extends State<SignupScreen> {
padding: const EdgeInsets.only(top: 6), padding: const EdgeInsets.only(top: 6),
child: Text( child: Text(
summary, summary,
style: const TextStyle( style: TextStyle(
fontSize: 13, fontSize: 13,
height: 1.45, height: 1.45,
color: _signupMuted, color: _signupMuted,
@@ -753,7 +809,6 @@ class _SignupScreenState extends State<SignupScreen> {
onChanged: onChanged, onChanged: onChanged,
controlAffinity: ListTileControlAffinity.leading, controlAffinity: ListTileControlAffinity.leading,
contentPadding: EdgeInsets.zero, contentPadding: EdgeInsets.zero,
activeColor: _signupInk,
), ),
), ),
const SizedBox(width: 12), const SizedBox(width: 12),
@@ -767,7 +822,7 @@ class _SignupScreenState extends State<SignupScreen> {
padding: EdgeInsets.all(isDesktop ? 18 : 14), padding: EdgeInsets.all(isDesktop ? 18 : 14),
decoration: BoxDecoration( decoration: BoxDecoration(
color: _signupSurface, color: _signupSurface,
border: Border.all(color: _signupBorder), border: Border.all(color: _signupSummaryBorder),
borderRadius: BorderRadius.circular(14), borderRadius: BorderRadius.circular(14),
), ),
child: SingleChildScrollView( child: SingleChildScrollView(
@@ -782,6 +837,7 @@ class _SignupScreenState extends State<SignupScreen> {
), ),
), ),
], ],
),
), ),
), ),
); );
@@ -791,16 +847,16 @@ class _SignupScreenState extends State<SignupScreen> {
return Container( return Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6), padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
decoration: BoxDecoration( decoration: BoxDecoration(
color: const Color(0xFFEEF2FF), color: _signupRequiredSurface,
borderRadius: BorderRadius.circular(999), borderRadius: BorderRadius.circular(999),
border: Border.all(color: const Color(0xFFC7D2FE)), border: Border.all(color: _signupRequiredBorder),
), ),
child: Text( child: Text(
tr('ui.userfront.signup.agreement.required'), tr('ui.userfront.signup.agreement.required'),
style: const TextStyle( style: TextStyle(
fontSize: 11, fontSize: 11,
fontWeight: FontWeight.w700, fontWeight: FontWeight.w700,
color: Color(0xFF3730A3), color: _signupRequiredInk,
), ),
), ),
); );
@@ -1234,7 +1290,7 @@ Matters not expressly provided in this Policy are governed by the Company's inte
), ),
child: DecoratedBox( child: DecoratedBox(
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: _signupCard,
borderRadius: BorderRadius.circular(isDesktop ? 24 : 18), borderRadius: BorderRadius.circular(isDesktop ? 24 : 18),
border: Border.all(color: _signupBorder), border: Border.all(color: _signupBorder),
boxShadow: isDesktop boxShadow: isDesktop
@@ -1331,7 +1387,7 @@ Matters not expressly provided in this Policy are governed by the Company's inte
Widget _buildAuthNoticeCard({required bool isDesktop}) { Widget _buildAuthNoticeCard({required bool isDesktop}) {
return DecoratedBox( return DecoratedBox(
decoration: BoxDecoration( decoration: BoxDecoration(
color: const Color(0xFFF8FAFC), color: _signupSurface,
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(16),
border: Border.all(color: _signupBorder), border: Border.all(color: _signupBorder),
), ),
@@ -1344,13 +1400,13 @@ Matters not expressly provided in this Policy are governed by the Company's inte
width: isDesktop ? 36 : 32, width: isDesktop ? 36 : 32,
height: isDesktop ? 36 : 32, height: isDesktop ? 36 : 32,
decoration: BoxDecoration( decoration: BoxDecoration(
color: const Color(0xFFDBEAFE), color: _signupAccentSurface,
borderRadius: BorderRadius.circular(999), borderRadius: BorderRadius.circular(999),
), ),
child: const Icon( child: Icon(
Icons.info_outline, Icons.info_outline,
size: 18, size: 18,
color: Color(0xFF1D4ED8), color: _signupAccentInk,
), ),
), ),
const SizedBox(width: 12), const SizedBox(width: 12),
@@ -1360,7 +1416,7 @@ Matters not expressly provided in this Policy are governed by the Company's inte
style: TextStyle( style: TextStyle(
fontSize: isDesktop ? 14 : 12, fontSize: isDesktop ? 14 : 12,
height: 1.4, height: 1.4,
color: const Color(0xFF1E3A8A), color: _signupAccent,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
), ),
), ),
@@ -1394,9 +1450,9 @@ Matters not expressly provided in this Policy are governed by the Company's inte
}) { }) {
return DecoratedBox( return DecoratedBox(
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: _signupCard,
borderRadius: BorderRadius.circular(18), borderRadius: BorderRadius.circular(18),
border: Border.all(color: _signupBorder), border: Border.all(color: _signupSummaryBorder),
), ),
child: Padding( child: Padding(
padding: EdgeInsets.all(isDesktop ? 20 : 16), padding: EdgeInsets.all(isDesktop ? 20 : 16),
@@ -1457,12 +1513,7 @@ Matters not expressly provided in this Policy are governed by the Company's inte
width: 108, width: 108,
child: FilledButton( child: FilledButton(
onPressed: buttonEnabled ? onRequestCode : null, onPressed: buttonEnabled ? onRequestCode : null,
style: FilledButton.styleFrom( style: _signupPrimaryButtonStyle,
backgroundColor: _signupInk,
foregroundColor: Colors.white,
disabledBackgroundColor: const Color(0xFFE5E7EB),
disabledForegroundColor: const Color(0xFF9CA3AF),
),
child: Text( child: Text(
buttonLabel, buttonLabel,
style: const TextStyle( style: const TextStyle(
@@ -1497,12 +1548,7 @@ Matters not expressly provided in this Policy are governed by the Company's inte
height: 52, height: 52,
child: FilledButton( child: FilledButton(
onPressed: buttonEnabled ? onRequestCode : null, onPressed: buttonEnabled ? onRequestCode : null,
style: FilledButton.styleFrom( style: _signupPrimaryButtonStyle,
backgroundColor: _signupInk,
foregroundColor: Colors.white,
disabledBackgroundColor: const Color(0xFFE5E7EB),
disabledForegroundColor: const Color(0xFF9CA3AF),
),
child: Text( child: Text(
buttonLabel, buttonLabel,
style: const TextStyle( style: const TextStyle(
@@ -1592,11 +1638,11 @@ Matters not expressly provided in this Policy are governed by the Company's inte
decoration: BoxDecoration( decoration: BoxDecoration(
color: _signupDoneSurface, color: _signupDoneSurface,
borderRadius: BorderRadius.circular(999), borderRadius: BorderRadius.circular(999),
border: Border.all(color: const Color(0xFFA7F3D0)), border: Border.all(color: _signupDone.withValues(alpha: 0.35)),
), ),
child: Text( child: Text(
text.replaceFirst('✅ ', ''), text.replaceFirst('✅ ', ''),
style: const TextStyle( style: TextStyle(
fontSize: 11, fontSize: 11,
fontWeight: FontWeight.w700, fontWeight: FontWeight.w700,
color: _signupDone, color: _signupDone,
@@ -1611,16 +1657,16 @@ Matters not expressly provided in this Policy are governed by the Company's inte
decoration: BoxDecoration( decoration: BoxDecoration(
color: _signupDoneSurface, color: _signupDoneSurface,
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(12),
border: Border.all(color: const Color(0xFFA7F3D0)), border: Border.all(color: _signupDone.withValues(alpha: 0.35)),
), ),
child: Row( child: Row(
children: [ children: [
const Icon(Icons.check_circle, size: 18, color: _signupDone), Icon(Icons.check_circle, size: 18, color: _signupDone),
const SizedBox(width: 8), const SizedBox(width: 8),
Expanded( Expanded(
child: Text( child: Text(
text.replaceFirst('✅ ', ''), text.replaceFirst('✅ ', ''),
style: const TextStyle( style: TextStyle(
color: _signupDone, color: _signupDone,
fontSize: 13, fontSize: 13,
fontWeight: FontWeight.w700, fontWeight: FontWeight.w700,
@@ -1647,9 +1693,9 @@ Matters not expressly provided in this Policy are governed by the Company's inte
), ),
child: DecoratedBox( child: DecoratedBox(
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: _signupCard,
borderRadius: BorderRadius.circular(isDesktop ? 24 : 18), borderRadius: BorderRadius.circular(isDesktop ? 24 : 18),
border: Border.all(color: _signupBorder), border: Border.all(color: _signupSummaryBorder),
boxShadow: isDesktop boxShadow: isDesktop
? const [ ? const [
BoxShadow( BoxShadow(
@@ -1820,13 +1866,13 @@ Matters not expressly provided in this Policy are governed by the Company's inte
width: isDesktop ? 36 : 32, width: isDesktop ? 36 : 32,
height: isDesktop ? 36 : 32, height: isDesktop ? 36 : 32,
decoration: BoxDecoration( decoration: BoxDecoration(
color: const Color(0xFFEEF2FF), color: _signupAccentSurface,
borderRadius: BorderRadius.circular(999), borderRadius: BorderRadius.circular(999),
), ),
child: const Icon( child: Icon(
Icons.badge_outlined, Icons.badge_outlined,
size: 18, size: 18,
color: Color(0xFF4338CA), color: _signupAccentInk,
), ),
), ),
const SizedBox(width: 12), const SizedBox(width: 12),
@@ -1836,7 +1882,7 @@ Matters not expressly provided in this Policy are governed by the Company's inte
style: TextStyle( style: TextStyle(
fontSize: isDesktop ? 14 : 12, fontSize: isDesktop ? 14 : 12,
height: 1.4, height: 1.4,
color: _signupInk, color: _signupAccent,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
), ),
), ),
@@ -1856,9 +1902,9 @@ Matters not expressly provided in this Policy are governed by the Company's inte
}) { }) {
return DecoratedBox( return DecoratedBox(
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: _signupCard,
borderRadius: BorderRadius.circular(18), borderRadius: BorderRadius.circular(18),
border: Border.all(color: _signupBorder), border: Border.all(color: _signupSummaryBorder),
), ),
child: Padding( child: Padding(
padding: EdgeInsets.all(isDesktop ? 20 : 16), padding: EdgeInsets.all(isDesktop ? 20 : 16),
@@ -1883,7 +1929,7 @@ Matters not expressly provided in this Policy are governed by the Company's inte
const SizedBox(height: 6), const SizedBox(height: 6),
Text( Text(
description, description,
style: const TextStyle( style: TextStyle(
fontSize: 13, fontSize: 13,
height: 1.45, height: 1.45,
color: _signupMuted, color: _signupMuted,
@@ -2018,9 +2064,9 @@ Matters not expressly provided in this Policy are governed by the Company's inte
), ),
child: DecoratedBox( child: DecoratedBox(
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: _signupCard,
borderRadius: BorderRadius.circular(isDesktop ? 24 : 18), borderRadius: BorderRadius.circular(isDesktop ? 24 : 18),
border: Border.all(color: _signupBorder), border: Border.all(color: _signupSummaryBorder),
boxShadow: isDesktop boxShadow: isDesktop
? const [ ? const [
BoxShadow( BoxShadow(
@@ -2154,13 +2200,13 @@ Matters not expressly provided in this Policy are governed by the Company's inte
width: isDesktop ? 36 : 32, width: isDesktop ? 36 : 32,
height: isDesktop ? 36 : 32, height: isDesktop ? 36 : 32,
decoration: BoxDecoration( decoration: BoxDecoration(
color: const Color(0xFFDBEAFE), color: _signupAccentSurface,
borderRadius: BorderRadius.circular(999), borderRadius: BorderRadius.circular(999),
), ),
child: const Icon( child: Icon(
Icons.security_rounded, Icons.security_rounded,
size: 18, size: 18,
color: Color(0xFF1D4ED8), color: _signupAccentInk,
), ),
), ),
const SizedBox(width: 12), const SizedBox(width: 12),
@@ -2170,7 +2216,7 @@ Matters not expressly provided in this Policy are governed by the Company's inte
style: TextStyle( style: TextStyle(
fontSize: isDesktop ? 14 : 12, fontSize: isDesktop ? 14 : 12,
height: 1.4, height: 1.4,
color: const Color(0xFF1E3A8A), color: _signupAccent,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
), ),
), ),
@@ -2189,9 +2235,9 @@ Matters not expressly provided in this Policy are governed by the Company's inte
}) { }) {
return DecoratedBox( return DecoratedBox(
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: _signupCard,
borderRadius: BorderRadius.circular(18), borderRadius: BorderRadius.circular(18),
border: Border.all(color: _signupBorder), border: Border.all(color: _signupSummaryBorder),
), ),
child: Padding( child: Padding(
padding: EdgeInsets.all(isDesktop ? 20 : 16), padding: EdgeInsets.all(isDesktop ? 20 : 16),
@@ -2209,7 +2255,7 @@ Matters not expressly provided in this Policy are governed by the Company's inte
const SizedBox(height: 6), const SizedBox(height: 6),
Text( Text(
description, description,
style: const TextStyle( style: TextStyle(
fontSize: 13, fontSize: 13,
height: 1.45, height: 1.45,
color: _signupMuted, color: _signupMuted,
@@ -2231,7 +2277,7 @@ Matters not expressly provided in this Policy are governed by the Company's inte
decoration: BoxDecoration( decoration: BoxDecoration(
color: _signupSurface, color: _signupSurface,
borderRadius: BorderRadius.circular(14), borderRadius: BorderRadius.circular(14),
border: Border.all(color: _signupBorder), border: Border.all(color: _signupSummaryBorder),
), ),
child: Padding( child: Padding(
padding: EdgeInsets.all(isDesktop ? 16 : 14), padding: EdgeInsets.all(isDesktop ? 16 : 14),
@@ -2283,15 +2329,17 @@ Matters not expressly provided in this Policy are governed by the Company's inte
} }
return Scaffold( return Scaffold(
backgroundColor: Colors.white, backgroundColor: _scheme.surfaceContainerLowest,
appBar: AppBar( appBar: AppBar(
title: Text( title: Text(
tr('ui.userfront.signup.title'), tr('ui.userfront.signup.title'),
style: const TextStyle(fontWeight: FontWeight.bold), style: const TextStyle(fontWeight: FontWeight.bold),
), ),
elevation: 0, elevation: 0,
backgroundColor: Colors.white, backgroundColor: _signupCard,
foregroundColor: Colors.black, foregroundColor: _signupInk,
surfaceTintColor: Colors.transparent,
shape: Border(bottom: _signupDividerSide),
), ),
body: SafeArea( body: SafeArea(
child: Column( child: Column(
@@ -2309,14 +2357,8 @@ Matters not expressly provided in this Policy are governed by the Company's inte
Expanded( Expanded(
child: OutlinedButton( child: OutlinedButton(
onPressed: () => setState(() => _currentStep--), onPressed: () => setState(() => _currentStep--),
style: OutlinedButton.styleFrom( style: _signupSecondaryButtonStyle,
minimumSize: const Size.fromHeight(55), child: Text(tr('ui.common.prev')),
side: const BorderSide(color: Colors.black),
),
child: Text(
tr('ui.common.prev'),
style: const TextStyle(color: Colors.black),
),
), ),
), ),
const SizedBox(width: 12), const SizedBox(width: 12),
@@ -2328,16 +2370,13 @@ Matters not expressly provided in this Policy are governed by the Company's inte
? () => setState(() => _currentStep++) ? () => setState(() => _currentStep++)
: null) : null)
: (_isLoading ? null : _handleSignup), : (_isLoading ? null : _handleSignup),
style: FilledButton.styleFrom( style: _signupPrimaryButtonStyle,
minimumSize: const Size.fromHeight(55),
backgroundColor: Colors.black,
),
child: _isLoading child: _isLoading
? const SizedBox( ? SizedBox(
height: 20, height: 20,
width: 20, width: 20,
child: CircularProgressIndicator( child: CircularProgressIndicator(
color: Colors.white, color: _scheme.onPrimary,
strokeWidth: 2, strokeWidth: 2,
), ),
) )