Skip to content

Commit 9eaf8ac

Browse files
a6iyyua6iyyu
committed
style: Revamp login, forgot password, and register screen.
1 parent e696461 commit 9eaf8ac

18 files changed

Lines changed: 625 additions & 252 deletions

‎assets/icons/forgot-password.png‎

398 KB
Loading

assets/logo.png renamed to assets/images/logo.png

File renamed without changes.

‎lib/core/constants/palette.dart‎

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,29 @@ import 'package:flutter/material.dart';
33
class Palette {
44
Palette._();
55

6-
static const Color accentText = Color(0xFF0C447C);
7-
static const Color border = Color(0xFFE2E0D7);
8-
static const Color borderStrong = Color(0xFFC9C7BC);
6+
// Brand & Action
7+
static const Color primary = Color(0xFF4F46E5);
8+
static const Color primaryVariant = Color(0xFF4338CA);
9+
static const Color accent = Color(0xFF38BDF8);
10+
static const Color glow = Color(0xFF6366F1);
11+
12+
// Background & Surface
13+
static const Color background = Color(0xFFF8FAFC);
14+
static const Color surface = Color(0xFFFFFFFF);
15+
static const Color surfaceSubtle = Color(0xFFF1F5F9);
916
static const Color card = Color(0xFFFFFFFF);
10-
static const Color controlFill = Color(0xFFE6E4DA);
11-
static const Color dangerFill = Color(0xFFE24B4A);
12-
static const Color fillSuccess = Color(0xFF639922);
13-
static const Color onDanger = Color(0xFFFFFFFF);
14-
static const Color page = Color(0xFFEEECE4);
15-
static const Color successBg = Color(0xFFEAF3DE);
16-
static const Color successText = Color(0xFF2E5309);
17-
static const Color surface = Color(0xFFF5F4EF);
18-
static const Color textMuted = Color(0xFF8A897F);
19-
static const Color textPrimary = Color(0xFF232320);
20-
static const Color textSecondary = Color(0xFF5F5E5A);
17+
18+
// Typography
19+
static const Color textPrimary = Color(0xFF0F172A);
20+
static const Color textSecondary = Color(0xFF64748B);
21+
static const Color textMuted = Color(0xFF94A3B8);
22+
23+
// Borders & Outlines
24+
static const Color border = Color(0xFFE2E8F0);
25+
static const Color borderFocused = Color(0xFF4F46E5);
26+
27+
// Feedback & Status
28+
static const Color success = Color(0xFF22C55E);
29+
static const Color danger = Color(0xFFEF4444);
30+
static const Color warning = Color(0xFFF59E0B);
2131
}

‎lib/core/widgets/input_style.dart‎

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import 'package:flutter/material.dart';
2+
import 'package:monet/core/constants/palette.dart';
23

34
/// A helper class that provides a consistent input decoration style for form fields.
45
/// Each input field will have a rounded border, a specific fill color, and a prefix icon.
@@ -19,33 +20,38 @@ import 'package:flutter/material.dart';
1920
class InputStyle {
2021
InputDecoration input(String label, IconData icon) {
2122
return InputDecoration(
23+
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 18),
24+
fillColor: Colors.white.withValues(alpha: 0.92),
25+
filled: true,
26+
floatingLabelStyle: const TextStyle(color: Palette.primary, fontSize: 12, fontWeight: FontWeight.w600),
27+
hintStyle: const TextStyle(color: Palette.textMuted, fontSize: 12),
28+
labelStyle: const TextStyle(color: Palette.textSecondary, fontSize: 12, fontWeight: FontWeight.w400),
29+
labelText: label,
30+
prefixIcon: Padding(
31+
padding: const EdgeInsets.only(left: 16, right: 12),
32+
child: Icon(icon, color: Palette.textSecondary, size: 20),
33+
),
34+
prefixIconConstraints: const BoxConstraints(minHeight: 48, minWidth: 48),
2235
border: OutlineInputBorder(
23-
borderRadius: BorderRadius.circular(12),
24-
borderSide: BorderSide.none,
36+
borderRadius: BorderRadius.circular(16),
37+
borderSide: const BorderSide(color: Palette.border, width: 1.2),
2538
),
26-
contentPadding: const EdgeInsets.symmetric(vertical: 18, horizontal: 12),
2739
enabledBorder: OutlineInputBorder(
28-
borderRadius: BorderRadius.circular(12),
29-
borderSide: BorderSide(color: Colors.grey.shade300),
30-
),
31-
errorBorder: OutlineInputBorder(
32-
borderRadius: BorderRadius.circular(12),
33-
borderSide: const BorderSide(color: Colors.redAccent, width: 1.5),
40+
borderRadius: BorderRadius.circular(16),
41+
borderSide: const BorderSide(color: Palette.border, width: 1.2),
3442
),
35-
fillColor: const Color(0xFFF5F4EF),
36-
filled: true,
3743
focusedBorder: OutlineInputBorder(
38-
borderRadius: BorderRadius.circular(12),
39-
borderSide: const BorderSide(color: Color(0xFF232320), width: 1.5),
44+
borderRadius: BorderRadius.circular(16),
45+
borderSide: const BorderSide(color: Palette.primary, width: 1.8),
4046
),
41-
hintStyle: const TextStyle(fontSize: 12.0),
42-
labelStyle: TextStyle(color: Colors.grey.shade600, fontSize: 12),
43-
labelText: label,
44-
prefixIcon: Padding(
45-
padding: const EdgeInsets.only(left: 12, right: 6),
46-
child: Icon(icon, color: const Color(0xFF232320), size: 20),
47+
errorBorder: OutlineInputBorder(
48+
borderRadius: BorderRadius.circular(16),
49+
borderSide: const BorderSide(color: Palette.danger, width: 1.5),
50+
),
51+
focusedErrorBorder: OutlineInputBorder(
52+
borderRadius: BorderRadius.circular(16),
53+
borderSide: const BorderSide(color: Palette.danger, width: 1.8),
4754
),
48-
prefixIconConstraints: const BoxConstraints(minHeight: 40, minWidth: 40),
4955
);
5056
}
5157
}

‎lib/core/widgets/navbar.dart‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,8 +77,8 @@ class MainNavBar extends StatelessWidget {
7777
top: -24,
7878
child: FloatingActionButton(
7979
onPressed: () => onTapBranch(2),
80-
backgroundColor: Palette.dangerFill,
81-
foregroundColor: Palette.onDanger,
80+
backgroundColor: Palette.danger,
81+
foregroundColor: Color(0xFFFFFFFF),
8282
elevation: 8,
8383
highlightElevation: 12,
8484
hoverElevation: 10,

‎lib/core/widgets/primary_action_button.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ class PrimaryActionButton extends StatelessWidget {
1717

1818
@override
1919
Widget build(BuildContext context) {
20-
final activeColor = backgroundColor ?? Palette.dangerFill;
20+
final activeColor = backgroundColor ?? Palette.danger;
2121

2222
return Container(
2323
decoration: BoxDecoration(

‎lib/core/widgets/social_button.dart‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
3+
4+
class SocialButton extends StatelessWidget {
5+
final FaIconData icon;
6+
final Color iconColor;
7+
final VoidCallback onTap;
8+
9+
const SocialButton({ super.key, required this.icon, required this.iconColor, required this.onTap });
10+
11+
@override
12+
Widget build(BuildContext context) {
13+
return Container(
14+
height: 52,
15+
width: 64,
16+
decoration: BoxDecoration(
17+
color: Colors.white,
18+
borderRadius: BorderRadius.circular(14),
19+
border: Border.all(color: Colors.grey.shade200),
20+
boxShadow: [BoxShadow(blurRadius: 8, color: Colors.black.withValues(alpha: 0.02), offset: const Offset(0, 2))],
21+
),
22+
child: Material(
23+
color: Colors.transparent,
24+
child: InkWell(
25+
borderRadius: BorderRadius.circular(14),
26+
onTap: onTap,
27+
child: Center(child: FaIcon(icon, color: iconColor, size: 20)),
28+
),
29+
),
30+
);
31+
}
32+
}

‎lib/features/auth/presentation/screens/forgot_password_screen.dart‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,16 @@ class ForgotPasswordScreen extends StatelessWidget {
88
@override
99
Widget build(BuildContext context) {
1010
return Scaffold(
11-
backgroundColor: Palette.page,
12-
appBar: AppBar(backgroundColor: Colors.transparent, elevation: 0, iconTheme: const IconThemeData(color: Palette.textPrimary)),
13-
body: const SafeArea(
14-
child: SingleChildScrollView(
15-
padding: EdgeInsets.symmetric(horizontal: 24.0),
16-
child: ForgotPasswordForm(),
11+
backgroundColor: Palette.background,
12+
body: SafeArea(
13+
child: LayoutBuilder(
14+
builder: (context, constraints) => SingleChildScrollView(
15+
physics: const ClampingScrollPhysics(),
16+
child: ConstrainedBox(
17+
constraints: BoxConstraints(minHeight: constraints.maxHeight),
18+
child: const ForgotPasswordForm(),
19+
),
20+
),
1721
),
1822
),
1923
);

‎lib/features/auth/presentation/screens/login_screen.dart‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,8 @@ class LoginScreen extends StatelessWidget {
88
@override
99
Widget build(BuildContext context) {
1010
return const Scaffold(
11-
backgroundColor: Palette.page,
12-
body: SafeArea(
13-
child: SingleChildScrollView(
14-
padding: EdgeInsets.all(24.0),
15-
child: LoginForm(),
16-
),
17-
),
11+
backgroundColor: Palette.background,
12+
body: SafeArea(child: SingleChildScrollView(child: LoginForm())),
1813
);
1914
}
2015
}

‎lib/features/auth/presentation/screens/otp_screen.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ class OtpScreen extends StatelessWidget {
99
@override
1010
Widget build(BuildContext context) {
1111
return Scaffold(
12-
backgroundColor: Palette.page,
12+
backgroundColor: Palette.background,
1313
appBar: AppBar(
1414
backgroundColor: Colors.transparent,
1515
elevation: 0,

0 commit comments

Comments
 (0)