applied size utils to onboarding and account created screens

modules/auth/lib/src/features/link_phone/presentation/request_phone/request_link_phone_screen.dart

@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:navigation/navigation.dart';
 import 'package:sf_localizations/sf_localizations.dart';
+import 'package:utils/utils.dart';
 
 class RequestLinkPhoneScreen extends ConsumerWidget {
   final NavigationContract navigationContract;
@@ -27,19 +28,22 @@ class RequestLinkPhoneScreen extends ConsumerWidget {
             Text(
               context.translate(I18n.linkPhoneTitle),
               textAlign: TextAlign.center,
-              style: const TextStyle(
+              style: TextStyle(
-                fontSize: 30,
+                fontSize: SizeUtils.getByScreen(small: 30, big: 28, xl: 26),
                 fontWeight: FontWeight.w500,
                 letterSpacing: 0,
               ),
             ),
-            const SizedBox(height: 24),
+            SizedBox(height: SizeUtils.getByScreen(small: 24, big: 22, xl: 20)),
             Text(
               context.translate(I18n.linkPhoneSubtitle),
               textAlign: TextAlign.center,
-              style: const TextStyle(fontSize: 16, letterSpacing: 0),
+              style: TextStyle(
+                fontSize: SizeUtils.getByScreen(small: 16, big: 16, xl: 14),
+                letterSpacing: 0
               ),
-            const SizedBox(height: 48),
+            ),
+            SizedBox(height: SizeUtils.getByScreen(small: 48, big: 46, xl: 44)),
 
             Column(
               spacing: 8,
@@ -89,7 +93,7 @@ class RequestLinkPhoneScreen extends ConsumerWidget {
               ),
             ],
 
-            const SizedBox(height: 24),
+            SizedBox(height: SizeUtils.getByScreen(small: 10, big: 10)),
 
             PrimaryButton(
               onPressed: () async {

modules/auth/lib/src/features/link_phone/presentation/verify_code/verify_link_phone_code_screen.dart

@@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
 import 'package:navigation/navigation.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:sf_localizations/sf_localizations.dart';
+import 'package:utils/utils.dart';
 
 class VerifyLinkPhoneCodeScreen extends ConsumerWidget {
   final NavigationContract navigationContract;
@@ -34,30 +35,32 @@ class VerifyLinkPhoneCodeScreen extends ConsumerWidget {
                 children: [
                   Text(
                     context.translate(I18n.connect),
-                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
+                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: SizeUtils.getByScreen(small: 30, big: 28)),
                   ),
                   const SizedBox(height: 24),
                   Text.rich(
                     TextSpan(
                       text: context.translate(I18n.verificationCodeSentTo),
+                      style: TextStyle(
+                        fontSize: SizeUtils.getByScreen(small: 18, big: 15),
+                      ),
                       children: [
                         TextSpan(
                           text: '${viewState.dialCode}${viewState.phoneNumber}',
-                          style: const TextStyle(
+                          style: TextStyle(
                             fontWeight: FontWeight.bold,
-                            fontSize: 18,
                           ),
                         ),
                       ],
                     ),
                     textAlign: TextAlign.center,
                   ),
-                  const SizedBox(height: 48),
+                  SizedBox(height: SizeUtils.getByScreen(small: 48, big: 42, xl: 36)),
                   Text(
                     context.translate(I18n.enterCodeHere),
                     style: TextStyle(fontSize: 16),
                   ),
-                  const SizedBox(height: 24),
+                  SizedBox(height: SizeUtils.getByScreen(small: 24, big: 24, xl: 20)),
 
                   LinkPhoneCodeInput(
                     length: 6,
@@ -90,21 +93,22 @@ class VerifyLinkPhoneCodeScreen extends ConsumerWidget {
                     },
                     text: context.translate(I18n.enter),
                     color: theme.getColorFor(ThemeCode.buttonPrimary),
+                    size: SizeUtils.getByScreen(small: 18, big: 17, xl: 16),
                   ),
                   const SizedBox(height: 24),
                   Text(
                     context.translate(I18n.didNotReceiveIt),
                     style: TextStyle(
-                      fontSize: 18,
+                      fontSize: SizeUtils.getByScreen(small: 18, big: 17, xl: 16),
                       letterSpacing: 0,
-                      height: 1.5,
+                      height: SizeUtils.getByScreen(small: 1.5, big: 0),
                     ),
                   ),
-                  const SizedBox(height: 8),
+                  SizedBox(height: SizeUtils.getByScreen(small: 8, big: 0)),
                   CustomTextButton(
                     onPressed: () => navigationContract.goBack(),
                     text: context.translate(I18n.tryAgain),
-                    size: 18,
+                    size: SizeUtils.getByScreen(small: 18, big: 17, xl: 16),
                     weight: FontWeight.w500,
                   ),
                 ],

modules/auth/lib/src/features/link_phone/presentation/widgets/link_phone_code_input.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:utils/utils.dart';
 
 class LinkPhoneCodeInput extends StatefulWidget {
   const LinkPhoneCodeInput({
@@ -74,8 +75,9 @@ class _LinkPhoneCodeInputState extends State<LinkPhoneCodeInput> {
             decoration: const InputDecoration(
               hintText: '0',
               counterText: '',
-              border: OutlineInputBorder(),
+              border: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(14))),
             ),
+            style: TextStyle(fontSize: SizeUtils.getByScreen(small: 20, big: 22, xl: 17)),
             maxLength: 1,
             onChanged: (value) => _onDigitChanged(i, value),
           ),

modules/auth/lib/src/features/login/presentation/login_screen.dart

@@ -6,6 +6,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:navigation/navigation.dart';
 import 'package:sf_localizations/sf_localizations.dart';
+import 'package:utils/utils.dart';
 
 class LoginScreen extends ConsumerWidget {
   final NavigationContract navigationContract;
@@ -98,27 +99,28 @@ class LoginScreen extends ConsumerWidget {
         child: AbsorbPointer(
           absorbing: isLoading,
           child: SingleChildScrollView(
-            padding: EdgeInsets.symmetric(horizontal: 24),
+            padding: EdgeInsets.symmetric(horizontal: SizeUtils.getByScreen(small: 24, big: 24)),
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.stretch,
+              mainAxisAlignment: MainAxisAlignment.center,
               children: [
+                SizedBox(height: SizeUtils.getByScreen(small: 0, big: 30, xl: 44)),
                 _Header(theme: theme),
-                SizedBox(height: 48),
+                SizedBox(height: SizeUtils.getByScreen(small: 26, big: 30, xl: 40)),
                 const _EmailSection(),
-                SizedBox(height: 24),
+                SizedBox(height: SizeUtils.getByScreen(small: 18, big: 24, xl: 20)),
                 _PasswordSection(onSubmitted: () => _onLogIn(context, ref)),
-                SizedBox(height: 16),
                 _ForgotPassword(navigationContract: navigationContract),
-                SizedBox(height: 30),
+                SizedBox(height: SizeUtils.getByScreen(small: 0, big: 24, xl: 22)),
                 _SignInSection(
                   theme: theme,
                   onSignIn: () => _onLogIn(context, ref),
                 ),
-                SizedBox(height: 30),
+                SizedBox(height: SizeUtils.getByScreen(small: 30, big: 60, xl: 56)),
                 _OrContinueWith(theme: theme),
-                SizedBox(height: 24),
+                SizedBox(height: SizeUtils.getByScreen(small: 24, big: 24, xl: 26)),
                 _SocialButtons(theme: theme),
-                SizedBox(height: 30),
+                SizedBox(height: SizeUtils.getByScreen(small: 18, big: 36)),
                 _Footer(navigationContract: navigationContract),
               ],
             ),
@@ -140,12 +142,15 @@ class _Header extends StatelessWidget {
         Icon(
           Icons.check,
           color: theme.getColorFor(ThemeCode.buttonPrimary),
-          size: 54,
+          size: SizeUtils.getByScreen(small: 54, big: 50, xl: 46),
         ),
         Text(
           context.translate(I18n.welcome),
           textAlign: TextAlign.center,
-          style: const TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
+          style: TextStyle(
+            fontSize: SizeUtils.getByScreen(small: 30, big: 28, xl: 27),
+            fontWeight: FontWeight.w500
+          ),
         ),
       ],
     );
@@ -168,6 +173,7 @@ class _EmailSection extends ConsumerWidget {
         CustomTextField(
           hint: context.translate(I18n.username),
           label: context.translate(I18n.username),
+          labelSize: SizeUtils.getByScreen(small: 14, big: 14, xl: 12),
           controller: vm.emailController,
           keyboardType: TextInputType.emailAddress,
           textInputAction: TextInputAction.next,
@@ -199,6 +205,7 @@ class _PasswordSection extends ConsumerWidget {
         CustomTextField(
           showPassword: passwordVisible,
           label: context.translate(I18n.password),
+          labelSize: SizeUtils.getByScreen(small: 14, big: 14, xl: 12),
           hint: '********',
           controller: vm.passwordController,
           textInputAction: TextInputAction.done,
@@ -227,7 +234,7 @@ class _ForgotPassword extends ConsumerWidget {
         onPressed: isLoading
             ? () {}
             : () => navigationContract.pushTo(AppRoutes.recoverPassword),
-        size: 16,
+        size: SizeUtils.getByScreen(small: 16, big: 15, xl: 14),
       ),
     );
   }
@@ -265,6 +272,7 @@ class _SignInSection extends ConsumerWidget {
                   ),
                 )
               : null,
+          size: SizeUtils.getByScreen(small: 18, big: 17, xl: 16),
         ),
         if (errorMessage.isNotEmpty)
           Padding(
@@ -274,7 +282,7 @@ class _SignInSection extends ConsumerWidget {
               textAlign: TextAlign.center,
               style: TextStyle(
                 color: Theme.of(context).colorScheme.error,
-                fontSize: 13,
+                fontSize: SizeUtils.getByScreen(small: 13, big: 12, xl: 11),
               ),
             ),
           ),
@@ -328,7 +336,7 @@ class _SocialButtons extends ConsumerWidget {
                   ),
                 ),
           radius: 16,
-          padding: 44,
+          padding: SizeUtils.getByScreen(small: 44, big: 40, xl: 36),
           text: context.translate(I18n.google),
           label: 'Google',
         ),
@@ -336,7 +344,7 @@ class _SocialButtons extends ConsumerWidget {
         SecondaryButton(
           onPressed: isLoading ? () {} : () {},
           radius: 16,
-          padding: 44,
+          padding: SizeUtils.getByScreen(small: 44, big: 40, xl: 36),
           icon: Icons.apple,
           label: 'Apple',
         ),
@@ -359,20 +367,15 @@ class _Footer extends ConsumerWidget {
       children: [
         Text(
           context.translate(I18n.dontHaveAccount),
-          style: const TextStyle(fontSize: 18, letterSpacing: 0),
+          style: TextStyle(fontSize: SizeUtils.getByScreen(small: 18, big: 17, xl: 16), letterSpacing: 0, height: 0),
         ),
-        TextButton(
+        CustomTextButton(
           onPressed: isLoading
               ? null
               : () => navigationContract.pushTo(AppRoutes.signup),
-          child: Text(
+          text: context.translate(I18n.createOneNow),
-            context.translate(I18n.createOneNow),
+          size: SizeUtils.getByScreen(small: 18, big: 17, xl: 16),
-            style: const TextStyle(
+          weight: FontWeight.w500,
-              fontSize: 18,
-              fontWeight: FontWeight.w500,
-              letterSpacing: 0,
-            ),
-          ),
         ),
       ],
     );

modules/auth/lib/src/features/login/presentation/widgets/two_factor_bottom_sheet.dart

@@ -3,6 +3,7 @@ import 'dart:async';
 import 'package:auth/src/features/login/presentation/widgets/otp_code_fields.dart';
 import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
+import 'package:utils/utils.dart';
 
 class TwoFactorBottomSheetView extends StatelessWidget {
   const TwoFactorBottomSheetView({
@@ -82,8 +83,9 @@ class TwoFactorBottomSheetView extends StatelessWidget {
               if (isOtpLoading || !_isValidOtp) return;
               unawaited(onVerify());
             },
+            gap: SizeUtils.getByScreen(small: 10, big: 8, xl: 4),
           ),
-          const SizedBox(height: 20),
+          SizedBox(height: SizeUtils.getByScreen(small: 24, big: 38)),
 
           PrimaryButton(
             onPressed: (isOtpLoading || !_isValidOtp)
@@ -103,7 +105,7 @@ class TwoFactorBottomSheetView extends StatelessWidget {
                 : null,
           ),
 
-          const SizedBox(height: 12),
+          SizedBox(height: SizeUtils.getByScreen(small: 12, big: 9)),
 
           TextButton(
             onPressed: isOtpLoading ? null : onClose,

modules/auth/lib/src/features/onboarding/presentation/onboarding_screen.dart

@@ -7,6 +7,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:navigation/navigation.dart';
 import 'package:sf_localizations/sf_localizations.dart';
+import 'package:utils/utils.dart';
 
 final onboardingPageControllerProvider = Provider.autoDispose<PageController>((
   ref,
@@ -57,19 +58,22 @@ class OnboardingScreen extends ConsumerWidget {
                     image: page.image,
                     title: page.title,
                     subtitle: page.subtitle,
+                    isLast: isLast,
                   );
                 },
               ),
             ),
+            SizedBox(height: SizeUtils.getByScreen(small: 36, big: 28)),
             StepIndicator(
               current: state.cardIndex + 1,
               total: onboardingPages.length,
               color: const Color(0xFF4A4A4A),
             ),
-            const SizedBox(height: 38),
+            SizedBox(height: SizeUtils.getByScreen(small: 38, big: 38)),
             Container(
               padding: const EdgeInsets.symmetric(horizontal: 24),
               width: double.infinity,
+              height: SizeUtils.getByScreen(small: 64, big: 62),
               child: TextButton(
                 onPressed: goToNext,
                 style: TextButton.styleFrom(
@@ -117,7 +121,7 @@ class OnboardingScreen extends ConsumerWidget {
                       ),
               ),
             ),
-            const SizedBox(height: 48),
+            SizedBox(height: SizeUtils.getByScreen(small: 24, big: 48)),
           ],
         ),
       ),

modules/auth/lib/src/features/onboarding/presentation/widgets/onboarding_content.dart

@@ -1,17 +1,20 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:sf_localizations/sf_localizations.dart';
+import 'package:utils/utils.dart';
 
 class OnboardingContent extends StatelessWidget {
   final String image;
   final String title;
   final String subtitle;
+  final bool isLast;
 
   const OnboardingContent({
     super.key,
     required this.image,
     required this.title,
     required this.subtitle,
+    required this.isLast,
   });
 
   @override
@@ -22,13 +25,15 @@ class OnboardingContent extends StatelessWidget {
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
           Flexible(flex: 3, child: SvgPicture.asset(image)),
-          const SizedBox(height: 48),
+          isLast
+            ? SizedBox(height: SizeUtils.getByScreen(small: 24, big: 48))
+            : SizedBox(height: SizeUtils.getByScreen(small: 48, big: 68)),
           Text(
             context.translate(title),
             textAlign: TextAlign.center,
-            style: const TextStyle(
+            style: TextStyle(
-              fontWeight: FontWeight.w700,
+              fontWeight: FontWeight.w500,
-              fontSize: 28,
+              fontSize: SizeUtils.getByScreen(small: 28, big: 28),
               height: 1.4,
               letterSpacing: 0.3,
               color: Color(0xFF4A4A4A),
@@ -38,7 +43,7 @@ class OnboardingContent extends StatelessWidget {
           Text(
             context.translate(subtitle),
             textAlign: TextAlign.center,
-            style: const TextStyle(
+            style: TextStyle(
               fontSize: 18,
               height: 1.4,
               letterSpacing: 0.3,

modules/auth/lib/src/features/recover_password/presentation/new_password/new_password_screen.dart

@@ -58,7 +58,7 @@ class NewPasswordScreen extends ConsumerWidget {
                   // color: viewState.equalPasswords ? const Color(0xFF4B4B4B) : const Color.fromRGBO(239, 17, 17, 1),
                 ),
                 if (!viewState.equalPasswords) ...[
-                  SizedBox(height: 4),
+                  SizedBox(height: SizeUtils.getByScreen(small: 8, big: 8)),
                   Row(
                     spacing: 8,
                     children: [
@@ -79,7 +79,7 @@ class NewPasswordScreen extends ConsumerWidget {
                     ],
                   ),
                 ],
-                SizedBox(height: 12),
+                SizedBox(height: SizeUtils.getByScreen(small: 14, big: 12)),
                 Row(
                   spacing: 8,
                   children: [
@@ -176,7 +176,7 @@ class NewPasswordScreen extends ConsumerWidget {
                   ],
                 ),
                 SizedBox(
-                  height: SizeUtils.getByScreen(small: 32, big: 32, xl: 24),
+                  height: SizeUtils.getByScreen(small: 28, big: 32, xl: 24),
                 ),
                 Align(
                   alignment: Alignment.bottomLeft,

modules/auth/lib/src/features/recover_password/presentation/request_recovery/request_recovery_screen.dart

@@ -23,14 +23,14 @@ class RequestRecoveryScreen extends ConsumerWidget {
     return Scaffold(
       backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
       body: Container(
-        margin: EdgeInsets.all(SizeUtils.getByScreen(small: 30, big: 30, xl: 20)),
+        margin: EdgeInsets.symmetric(horizontal: SizeUtils.getByScreen(small: 30, big: 30, xl: 20)),
         child: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               Text(
                 context.translate(I18n.recoverPasswordTitle),
-                style: TextStyle(fontWeight: FontWeight.bold, fontSize: SizeUtils.getByScreen(small: 29, big: 29, xl: 26)),
+                style: TextStyle(fontWeight: FontWeight.w500, fontSize: SizeUtils.getByScreen(small: 29, big: 27, xl: 26)),
               ),
               SizedBox(height: SizeUtils.getByScreen(small: 24, big: 32)),
               Text(
@@ -38,13 +38,13 @@ class RequestRecoveryScreen extends ConsumerWidget {
                 textAlign: TextAlign.center,
                 style: TextStyle(letterSpacing: 0, fontSize: SizeUtils.getByScreen(small: 18, big: 18, xl: 16)),
               ),
-              SizedBox(height: SizeUtils.getByScreen(small: 56, big: 48)),
+              SizedBox(height: SizeUtils.getByScreen(small: 56, big: 52)),
               CustomTextField(
                 label: context.translate(I18n.email),
                 hint: context.translate(I18n.email),
                 controller: viewModel.emailController,
               ),
-              SizedBox(height: SizeUtils.getByScreen(small: 40, big: 40, xl: 28)),
+              SizedBox(height: SizeUtils.getByScreen(small: 36, big: 36, xl: 26)),
               Align(
                 alignment: Alignment.bottomLeft,
                 child: Text(

modules/auth/lib/src/features/recover_password/presentation/sent/sent_screen.dart

@@ -60,9 +60,9 @@ class SentScreen extends ConsumerWidget {
                     ? context.translate(I18n.checkEmail1)
                     : context.translate(I18n.checkSms1),
                 textAlign: TextAlign.center,
-                style: TextStyle(fontSize: SizeUtils.getByScreen(small: 17, big: 17, xl: 15), letterSpacing: 0),
+                style: TextStyle(fontSize: SizeUtils.getByScreen(small: 17, big: 17, xl: 14), letterSpacing: 0),
               ),
-              SizedBox(height: 16),
+              SizedBox(height: SizeUtils.getByScreen(small: 16, big: 16, xl: 14)),
               Text(
                 viewState.recoveryFormat == "email"
                     ? context.translate(I18n.checkEmail2)
@@ -70,7 +70,7 @@ class SentScreen extends ConsumerWidget {
                 textAlign: TextAlign.center,
                 style: TextStyle(fontSize: SizeUtils.getByScreen(small: 14, big: 14, xl: 12), letterSpacing: 0),
               ),
-              SizedBox(height: SizeUtils.getByScreen(small: 48, big: 48, xl: 40)),
+              SizedBox(height: SizeUtils.getByScreen(small: 48, big: 48, xl: 38)),
               Row(
                 children: [
                   Expanded(

modules/auth/lib/src/features/sign_up/presentation/screens/account_created_screen.dart

@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:navigation/navigation.dart';
 import 'package:sf_localizations/sf_localizations.dart';
+import 'package:utils/utils.dart';
 
 class AccountCreatedScreen extends ConsumerWidget {
   final NavigationContract navigationContract;
@@ -23,10 +24,9 @@ class AccountCreatedScreen extends ConsumerWidget {
       backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
       body: Container(
         margin: const EdgeInsets.all(30),
-        child: Center(
         child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
           children: [
-              const Spacer(flex: 10),
             Icon(
               Icons.check,
               color: theme.getColorFor(ThemeCode.buttonPrimary),
@@ -46,6 +46,7 @@ class AccountCreatedScreen extends ConsumerWidget {
               textAlign: TextAlign.center,
               TextSpan(
                 text: '${context.translate(I18n.accountCreatedForLabel)}\n',
+                style: TextStyle(fontSize: SizeUtils.getByScreen(small: 16, big: 15, xl: 14)),
                 children: [
                   TextSpan(
                     text: fullName,
@@ -55,12 +56,13 @@ class AccountCreatedScreen extends ConsumerWidget {
               ),
             ),
 
-              const SizedBox(height: 16),
+            SizedBox(height: SizeUtils.getByScreen(small: 40, big: 40)),
             Text.rich(
               textAlign: TextAlign.center,
               TextSpan(
                 text:
                   '${context.translate(I18n.accountCreatedEmailVerificationSentLabel)}\n',
+                style: TextStyle(fontSize: SizeUtils.getByScreen(small: 15, big: 15, xl: 13)),
                 children: [
                   TextSpan(
                     text: email,
@@ -70,23 +72,22 @@ class AccountCreatedScreen extends ConsumerWidget {
               ),
             ),
 
-              const SizedBox(height: 20),
+            SizedBox(height: SizeUtils.getByScreen(small: 40, big: 40)),
             Text(
               context.translate(I18n.accountCreatedChildSetupHint),
               textAlign: TextAlign.center,
+              style: TextStyle(fontSize: SizeUtils.getByScreen(small: 16, big: 15, xl: 13)),
             ),
 
-              const SizedBox(height: 20),
+            SizedBox(height: SizeUtils.getByScreen(small: 40, big: 40)),
             PrimaryButton(
               onPressed: () => navigationContract.goTo(AppRoutes.login),
               text: context.translate(I18n.accountCreatedContinue),
               color: theme.getColorFor(ThemeCode.buttonPrimary),
             ),
-              const Spacer(flex: 8),
           ],
         ),
       ),
-      ),
     );
   }
 }

modules/auth/lib/src/features/sign_up/presentation/screens/sign_up_address_screen.dart

@@ -2,6 +2,7 @@ import 'package:country_code_picker/country_code_picker.dart';
 import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:sf_localizations/sf_localizations.dart';
+import 'package:utils/utils.dart';
 
 class SignupAddressScreen extends StatelessWidget {
   const SignupAddressScreen({
@@ -145,7 +146,9 @@ class SignupAddressScreen extends StatelessWidget {
         const SizedBox(height: 8),
         Align(
           alignment: Alignment.bottomLeft,
-          child: Text(birthCountryLabel, style: const TextStyle(fontSize: 14)),
+          child: Text(birthCountryLabel, style: TextStyle(
+            fontSize: SizeUtils.getByScreen(small: 14, big: 13, xl: 12),
+          )),
         ),
         const SizedBox(height: 8),
         Row(
@@ -168,6 +171,7 @@ class SignupAddressScreen extends StatelessWidget {
 
         CustomTextField(
           label: streetLabel,
+          labelSize: SizeUtils.getByScreen(small: 14, big: 13, xl: 12),
           hint: streetHint,
           controller: streetController,
         ),
@@ -175,6 +179,7 @@ class SignupAddressScreen extends StatelessWidget {
 
         CustomTextField(
           label: cityLabel,
+          labelSize: SizeUtils.getByScreen(small: 14, big: 13, xl: 12),
           hint: cityHint,
           controller: cityController,
         ),
@@ -182,6 +187,7 @@ class SignupAddressScreen extends StatelessWidget {
 
         CustomTextField(
           label: provinceLabel,
+          labelSize: SizeUtils.getByScreen(small: 14, big: 13, xl: 12),
           hint: provinceHint,
           controller: provinceController,
         ),
@@ -189,6 +195,7 @@ class SignupAddressScreen extends StatelessWidget {
 
         CustomTextField(
           label: stateLabel,
+          labelSize: SizeUtils.getByScreen(small: 14, big: 13, xl: 12),
           hint: stateHint,
           controller: stateController,
         ),
@@ -222,6 +229,7 @@ class SignupAddressScreen extends StatelessWidget {
 
         CustomTextField(
           label: postCodeLabel,
+          labelSize: SizeUtils.getByScreen(small: 14, big: 13, xl: 12),
           hint: postCodeHint,
           keyboardType: TextInputType.number,
           controller: postCodeController,

modules/auth/lib/src/features/sign_up/presentation/screens/sign_up_personal_screen.dart

@@ -2,6 +2,7 @@ import 'package:country_code_picker/country_code_picker.dart';
 import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:sf_localizations/sf_localizations.dart';
+import 'package:utils/utils.dart';
 
 class SignupPersonalScreen extends StatelessWidget {
   final TextEditingController firstNameTextFieldController;
@@ -72,12 +73,14 @@ class SignupPersonalScreen extends StatelessWidget {
         children: [
           CustomTextField(
             label: firstNameLabel,
+            labelSize: SizeUtils.getByScreen(small: 14, big: 13, xl: 12),
             hint: firstNameHint,
             controller: firstNameTextFieldController,
           ),
           const SizedBox(height: 8),
           CustomTextField(
             label: lastNameLabel,
+            labelSize: SizeUtils.getByScreen(small: 14, big: 13, xl: 12),
             hint: lastNameHint,
             controller: lastNameTextFieldController,
           ),
@@ -99,6 +102,7 @@ class SignupPersonalScreen extends StatelessWidget {
               Expanded(
                 child: CustomTextField(
                   label: documentNumberLabel,
+                  labelSize: SizeUtils.getByScreen(small: 14, big: 13, xl: 12),
                   hint: documentNumberHint,
                   controller: documentNumberTextFieldController,
                 ),
@@ -108,7 +112,9 @@ class SignupPersonalScreen extends StatelessWidget {
           const SizedBox(height: 8),
           Align(
             alignment: Alignment.bottomLeft,
-            child: Text(phoneLabel, style: const TextStyle(fontSize: 14)),
+            child: Text(phoneLabel, style: TextStyle(
+              fontSize: SizeUtils.getByScreen(small: 14, big: 13, xl: 12)
+            )),
           ),
           const SizedBox(height: 8),
           Row(
@@ -130,11 +136,12 @@ class SignupPersonalScreen extends StatelessWidget {
           const SizedBox(height: 8),
           CustomTextField(
             label: emailLabel,
+            labelSize: SizeUtils.getByScreen(small: 14, big: 13, xl: 12),
             hint: emailHint,
             keyboardType: TextInputType.emailAddress,
             controller: emailTextFieldController,
           ),
-
+          const SizedBox(height: 8),
           CheckboxListTile(
             value: acceptTerms,
             onChanged: onAcceptTermsPressed,

modules/auth/lib/src/widgets/layouts/form_step_layout.dart

@@ -1,6 +1,7 @@
 import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:utils/utils.dart';
 
 class FormStepLayout extends ConsumerWidget {
   final int currentStep;
@@ -70,7 +71,7 @@ class FormStepLayout extends ConsumerWidget {
                       Text(
                         subtitle!,
                         textAlign: TextAlign.center,
-                        style: TextStyle(fontSize: 18),
+                        style: TextStyle(fontSize: SizeUtils.getByScreen(small: 18, big: 17)),
                       ),
                   ],
                 ),

modules/auth/lib/src/widgets/layouts/sign_up_layout.dart

@@ -1,6 +1,7 @@
 import 'package:auth/src/widgets/form_error_banner.dart';
 import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
+import 'package:utils/utils.dart';
 
 class SignUpLayout extends StatelessWidget {
   final ThemePort theme;
@@ -53,24 +54,24 @@ class SignUpLayout extends StatelessWidget {
               Text(
                 supertitle,
                 textAlign: TextAlign.center,
-                style: const TextStyle(fontSize: 18),
+                style: TextStyle(fontSize: SizeUtils.getByScreen(small: 18, big: 16, xl: 15)),
               ),
-              const SizedBox(height: 10),
+              SizedBox(height: SizeUtils.getByScreen(small: 8, big: 5)),
               Text(
                 title,
                 textAlign: TextAlign.center,
-                style: const TextStyle(
+                style: TextStyle(
-                  fontSize: 30,
+                  fontSize: SizeUtils.getByScreen(small: 30, big: 28, xl: 26),
-                  fontWeight: FontWeight.bold,
+                  fontWeight: FontWeight.w500,
                 ),
               ),
               const SizedBox(height: 16),
               Text(
                 subtitle,
                 textAlign: TextAlign.center,
-                style: const TextStyle(fontSize: 18),
+                style: TextStyle(fontSize: SizeUtils.getByScreen(small: 18, big: 17, xl: 15)),
               ),
-              const SizedBox(height: 16),
+              SizedBox(height: SizeUtils.getByScreen(small: 16, big: 20, xl: 36)),
 
               Expanded(
                 child: SingleChildScrollView(

packages/design_system/lib/src/buttons/custom_text_button.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 
 class CustomTextButton extends StatelessWidget {
-  final VoidCallback onPressed;
+  final VoidCallback? onPressed;
   final String text;
   final double size;
   final FontWeight weight;

packages/design_system/lib/src/inputs/textfields.dart

@@ -78,7 +78,7 @@ class CustomTextFieldState extends State<CustomTextField> {
             suffixIcon: widget.showPassword != null
               ? IconButton(
                 icon: Icon(
-                      _showPassword ? Icons.visibility_off : Icons.visibility,
+                  _showPassword ? Icons.visibility_off_outlined : Icons.visibility_outlined,
                 ),
                 onPressed: () {
                   setState(() {

packages/sf_localizations/assets/l10n/es.json

@@ -10,7 +10,7 @@
   "next": "Siguiente",
   "skip": "Omitir",
   "linkPhoneTitle": "¡Nos alegra mucho tenerte por aquí!",
-  "linkPhoneSubtitle": "Para poder entrar de forma segura, te vamos a enviar un código al teléfono",
+  "linkPhoneSubtitle": "Para poder entrar de forma segura,\nte vamos a enviar un código al teléfono",
   "mobilePhone": "Teléfono móvil",
   "phoneNumber": "Teléfono",
   "selectYourCountry": "Selecciona tu país",
@@ -18,7 +18,7 @@
   "connect": "Conéctate",
   "verificationCodeSentTo": "Hemos enviado el código al ",
   "enterCodeHere": "Introduce el código aquí",
-  "enter": "entrar",
+  "enter": "Entrar",
   "didNotReceiveIt": "¿No lo has recibido?",
   "tryAgain": "Volver a intentarlo",
   "welcome": "¡Te damos la bienvenida!",