diff --git a/lib/core/presentation/theming/colors/colors.dart b/lib/core/presentation/theming/colors/colors.dart index 5da0cc5..c3cb520 100644 --- a/lib/core/presentation/theming/colors/colors.dart +++ b/lib/core/presentation/theming/colors/colors.dart @@ -4,12 +4,14 @@ class _AppColors { static Color primaryColorW = const Color(0xff48A2DF); static Color secondaryColorW = const Color(0xff000000); static Color secondaryContainerW = const Color(0xffDF602F); - static Color onSurfaceW = const Color(0xffD9D9D9); - static Color bgColorW = const Color(0xffF5F5F5); // ; static Color errorContainerW = const Color(0xffFFE5E7); static Color onErrorW = const Color(0xffFF000D); // static Color bgColorW = const Color(0xffF7F7F7); - static Color onBgColorW = Color(0xffFFFFFF); + static Color bgColorW = Color(0xffFFFFFF); + static Color onBgColorW = Color(0xffD9D9D9); + static Color surfaceW = const Color(0xffF5F5F5); // ; + // static Color surfacerW = Color(0xffFFFFFF); + static Color onSurfaceW = Color(0xffD9D9D9); // const Color(0xff808191); static Color getShade(Color color, {bool darker = false, double value = .1}) { assert(value >= 0 && value <= 1, 'verify domain interval'); diff --git a/lib/core/presentation/theming/themes/light_theme.dart b/lib/core/presentation/theming/themes/light_theme.dart index b49e654..895238d 100644 --- a/lib/core/presentation/theming/themes/light_theme.dart +++ b/lib/core/presentation/theming/themes/light_theme.dart @@ -6,21 +6,20 @@ const borderRaduis = 0.025; ThemeData whiteTheme(BuildContext context, BoxConstraints cts) { final theme = Theme.of(context); final style = theme.textTheme; - // final colors = theme.colorScheme; return ThemeData( colorScheme: ColorScheme.light( primary: _AppColors.primaryColorW, + onPrimary: _AppColors.onSurfaceW, primaryContainer: _AppColors.primaryColorW, secondary: _AppColors.secondaryColorW, + onSecondary: _AppColors.primaryColorW, secondaryContainer: _AppColors.secondaryContainerW, surface: _AppColors.bgColorW, - background: _AppColors.bgColorW, - error: _AppColors.primaryColorW, - onPrimary: _AppColors.onSurfaceW, - onSecondary: _AppColors.primaryColorW, onSurface: _AppColors.onSurfaceW, + background: _AppColors.bgColorW, onBackground: _AppColors.onBgColorW, + error: _AppColors.primaryColorW, onError: _AppColors.onErrorW, errorContainer: _AppColors.errorContainerW, @@ -51,6 +50,7 @@ ThemeData whiteTheme(BuildContext context, BoxConstraints cts) { ), titleSmall: style.titleSmall?.copyWith( fontSize: cts.maxWidth * 0.04, + color: _AppColors.onSurfaceW, ), bodyLarge: style.bodyLarge?.copyWith( fontSize: cts.maxWidth * 0.042, @@ -99,7 +99,9 @@ ThemeData whiteTheme(BuildContext context, BoxConstraints cts) { inputDecorationTheme: InputDecorationTheme( focusColor: Colors.red, - labelStyle: style.bodySmall, + labelStyle: style.bodySmall?.copyWith( + color: _AppColors.onSurfaceW, + ), hintStyle: style.bodySmall, enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(cts.maxWidth * borderRaduis), @@ -127,8 +129,10 @@ ThemeData whiteTheme(BuildContext context, BoxConstraints cts) { contentPadding: EdgeInsets.symmetric( horizontal: cts.maxWidth * 0.035, vertical: cts.maxWidth * 0.05), ), - scaffoldBackgroundColor: _AppColors.bgColorW, + scaffoldBackgroundColor: _AppColors.onSurfaceW, tabBarTheme: TabBarTheme( + overlayColor: MaterialStateProperty.all(Colors.blue), + // indicatorColor: Colors.black, labelStyle: style.bodySmall, unselectedLabelStyle: style.bodySmall, unselectedLabelColor: theme.colorScheme.onSurface, @@ -136,7 +140,7 @@ ThemeData whiteTheme(BuildContext context, BoxConstraints cts) { indicator: BoxDecoration( borderRadius: BorderRadius.all(Radius.circular(cts.maxWidth * borderRaduis)), - color: theme.shadowColor, + color: _AppColors.secondaryColorW, ), indicatorSize: TabBarIndicatorSize.tab, ), diff --git a/lib/core/presentation/widget/my_textformfield.dart b/lib/core/presentation/widget/my_textformfield.dart index ee9fadf..a226fab 100644 --- a/lib/core/presentation/widget/my_textformfield.dart +++ b/lib/core/presentation/widget/my_textformfield.dart @@ -59,7 +59,8 @@ class _FpbTextFormFieldState extends State { : TextInputType.none, onChanged: widget.onChanged, obscureText: hidePassword ?? false, - style: textTheme.bodyMedium, + style: textTheme + .titleSmall, //bodyMedium //.copyWith(color: colors.onSurface), decoration: InputDecoration( errorText: widget.errorText, suffixIcon: !widget.isPassword diff --git a/lib/l10n/arb/app_en.arb b/lib/l10n/arb/app_en.arb index bace54d..ffa5f38 100644 --- a/lib/l10n/arb/app_en.arb +++ b/lib/l10n/arb/app_en.arb @@ -48,11 +48,11 @@ "@signInPhoneNumberLogInLabel": { "description": "This is the label displayed on the sign in screen on the phone number tab" }, - "signInForgotPasswordText": "Forgot Password?", + "signInForgotPasswordText": "Forgot password?", "@signInForgotPasswordText": { "description": "This is the text displayed on the sign in screen after login password field" }, - "signInOrLogInWithText": "Or Login with", + "signInOrLogInWithText": "Or login with", "@signInPhoneNumberLogIn": { "description": "This is the text displayed on the sign in screen after the log in button" }, @@ -88,6 +88,10 @@ "@signInPasswordFieldLabel": { "description": "This is the label displayed on the sign in screen for the Password field" }, + "signInPhoneNumberFieldLabel": "Phone Number", + "@signInPhoneNumberFieldLabel": { + "description": "This is the label displayed on the sign in screen for the Phone number field" + }, "signInPasswordFieldHintText": "Enter your password", "@signInPasswordFieldHintText": { "description": "This is the hint text displayed on the sign in screen for the Password field" @@ -228,4 +232,4 @@ "@signUpAlreadyAMemberText": { "description": "This is the text displayed on the sign up screen after the social media icon buttons" } -} \ No newline at end of file +} diff --git a/lib/l10n/arb/app_fr.arb b/lib/l10n/arb/app_fr.arb index a4eaffe..2b52341 100644 --- a/lib/l10n/arb/app_fr.arb +++ b/lib/l10n/arb/app_fr.arb @@ -92,6 +92,10 @@ "@signInPasswordFieldHintText": { "description": "Il s'agit du texte d'indication affiché sur l'écran de connexion pour le champ Mot de passe." }, + "signInPhoneNumberFieldLabel": "Numéro de Téléphone", + "@signInPhoneNumberFieldLabel": { + "description": "Il s'agit de l'étiquette affichée sur l'écran d'ouverture de session pour le champ Numéro de téléphone." + }, "homeScreenCashBalance": "Solde d'encaisse", "@homeScreenCashBalance": { "description": "Il s'agit du texte affiché sur l'écran d'accueil du premier widget de carte" @@ -232,4 +236,4 @@ "@signUpAlreadyAMemberText": { "description": "Il s'agit du texte affiché sur l'écran d'inscription après les boutons d'icône de médias sociaux." } -} \ No newline at end of file +} diff --git a/lib/sign_in/view/sign_in_page.dart b/lib/sign_in/view/sign_in_page.dart index d6ffe38..9374181 100644 --- a/lib/sign_in/view/sign_in_page.dart +++ b/lib/sign_in/view/sign_in_page.dart @@ -17,6 +17,7 @@ import 'package:fpb/router/app_route.gr.dart'; import 'package:fpb/sign_in/view/widgets/email_input.dart'; import 'package:fpb/sign_in/view/widgets/login_button.dart'; import 'package:fpb/sign_in/view/widgets/password_input.dart'; +import 'package:fpb/sign_in/view/widgets/phone_number_input.dart'; class SignInScreen extends StatelessWidget { const SignInScreen({super.key}); @@ -161,7 +162,15 @@ class _SignInBodyState extends State Text(l10n.signInForgotPasswordText), ], ), - Container(), + Column( + mainAxisAlignment: + MainAxisAlignment.center, + children: [ + PhoneNumberInput( + l10n: l10n, cts: cts), + PasswordInput(box: cts), + ], + ), ], ), ), diff --git a/lib/sign_in/view/widgets/login_button.dart b/lib/sign_in/view/widgets/login_button.dart index a1de1b0..9b0ed97 100644 --- a/lib/sign_in/view/widgets/login_button.dart +++ b/lib/sign_in/view/widgets/login_button.dart @@ -19,7 +19,7 @@ class LoginButton extends StatelessWidget { return FormzStatus.submissionInProgress == state.status ? const FpbButton(label: 'Log in', onTap: null) : FpbButton( - label: l10n.signInEmailLogInLabel, + label: l10n.signInLogInButtonLabel, onTap: () => context .read() .add(const EmailPasswordEvent.submitted()), diff --git a/lib/sign_in/view/widgets/phone_number_input.dart b/lib/sign_in/view/widgets/phone_number_input.dart new file mode 100644 index 0000000..29eb964 --- /dev/null +++ b/lib/sign_in/view/widgets/phone_number_input.dart @@ -0,0 +1,62 @@ +import 'package:flutter/material.dart'; +import 'package:fpb/l10n/l10n.dart'; +import 'package:intl_phone_field/intl_phone_field.dart'; + + +class PhoneNumberInput extends StatelessWidget { + const PhoneNumberInput({ + super.key, + required this.l10n, + required this.cts, + this.node, + this.textController, + }); + + final AppLocalizations l10n; + final FocusNode? node; + final TextEditingController? textController; + final BoxConstraints cts; + + @override + Widget build(BuildContext context) { + final theme = Theme.of(context); + final style = theme.textTheme; + + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + l10n.signInPhoneNumberFieldLabel, + style: style.titleSmall, + ), + SizedBox( + height: cts.maxHeight * 0.01, + ), + IntlPhoneField( + disableLengthCheck: true, + flagsButtonPadding: EdgeInsets.all( + cts.maxHeight * 0.01, + ), + dropdownIconPosition: IconPosition.trailing, + decoration: InputDecoration( + contentPadding: EdgeInsets.all( + cts.maxHeight * 0.025, + ), + labelText: '1 234 89 9000', + border: OutlineInputBorder( + borderRadius: BorderRadius.all( + Radius.circular( + cts.maxHeight * 0.025, + ), + ), + ), + ), + initialCountryCode: 'US', + ), + SizedBox( + height: cts.maxHeight * .02, + ) + ], + ); + } +} diff --git a/pubspec.yaml b/pubspec.yaml index dd590cf..509aa51 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -8,6 +8,7 @@ environment: flutter: 3.3.7 dependencies: + intl_phone_field: ^3.1.0 bloc: ^8.1.1 device_preview: ^1.1.0 flutter: