add goldens

Reviewed-on: #2

apps/mobile_app/lib/main.dart

@@ -23,6 +23,8 @@ class PlatformApp extends ConsumerWidget {
     return MaterialApp.router(
       title: 'SaveFamily',
       theme: ThemeData(
+        fontFamily: 'Stolzl',
+        package: 'fonts',
         colorScheme: ColorScheme.fromSeed(seedColor: Color(0xFF329E95)),
       ),
       routerConfig: appRouter,
@@ -46,4 +48,4 @@ class PlatformApp extends ConsumerWidget {
       },
     );
   }
-}
+}

apps/mobile_app/lib/navigation/app_router.dart

@@ -15,7 +15,7 @@ late final GoRouter appRouter;
 void configureAppRouter() {
   appRouter = GoRouter(
     navigatorKey: rootNavigatorKey,
-    initialLocation: AppRoutes.login,
+    initialLocation: AppRoutes.onboarding,
     debugLogDiagnostics: true,
     routes: [
       GoRoute(
@@ -23,6 +23,11 @@ void configureAppRouter() {
         name: 'login',
         pageBuilder: LoginBuilder().buildPage,
       ),
+      GoRoute(
+        path: AppRoutes.signup,
+        name: 'signup',
+        pageBuilder: SignupBuilder().buildPage,
+      ),
       GoRoute(
         path: AppRoutes.onboarding,
         name: 'onboarding',
@@ -43,7 +48,11 @@ void configureAppRouter() {
         name: 'recover_password',
         pageBuilder: RecoverPasswordBuilder().buildPage,
       ),
-
+      GoRoute(
+        path: AppRoutes.deviceSignup,
+        name: 'device_signup',
+        pageBuilder: DeviceSignupBuilder().buildPage,
+      ),
       StatefulShellRoute.indexedStack(
         builder: (context, state, navShell) {
           return DashboardBuilder().build(context, navShell);

apps/mobile_app/pubspec.yaml

@@ -54,7 +54,9 @@ dependencies:
   design_system:
     path: ../../packages/design_system
   sf_localizations:
-    path: ../../packages/sf_localizations 
+    path: ../../packages/sf_localizations
+  fonts:
+    path: ../../packages/fonts
 
   #dependencies go here
   cupertino_icons: ^1.0.8

apps/mobile_app/test/widget_test.dart

@@ -1,28 +0,0 @@
-// This is a basic Flutter widget test.
-//
-// To perform an interaction with a widget in your test, use the WidgetTester
-// utility in the flutter_test package. For example, you can send tap and scroll
-// gestures. You can also use WidgetTester to find child widgets in the widget
-// tree, read text, and verify that the values of widget properties are correct.
-
-import 'package:flutter/material.dart';
-import 'package:flutter_test/flutter_test.dart';
-
-void main() {
-  testWidgets('Counter increments smoke test', (WidgetTester tester) async {
-    // Build our app and trigger a frame.
-    //await tester.pumpWidget(const PaymentsApp(di: di));
-
-    // Verify that our counter starts at 0.
-    expect(find.text('0'), findsOneWidget);
-    expect(find.text('1'), findsNothing);
-
-    // Tap the '+' icon and trigger a frame.
-    await tester.tap(find.byIcon(Icons.add));
-    await tester.pump();
-
-    // Verify that our counter has incremented.
-    expect(find.text('0'), findsNothing);
-    expect(find.text('1'), findsOneWidget);
-  });
-}

modules/auth/lib/auth.dart

@@ -4,3 +4,5 @@ export 'src/login/link_phone_builder.dart';
 export 'src/login/phone_code_builder.dart';
 export 'src/login/login_builder.dart';
 export 'src/recover_password/recover_password_builder.dart';
+export 'src/device_sign_up/device_signup_builder.dart';
+export 'src/sign_up/signup_builder.dart';

modules/auth/lib/src/device_sign_up/add_kid_screen.dart

@@ -1,28 +1,60 @@
-import 'package:auth/src/device_sign_up/link_watch/create_profile_screen.dart';
+import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 
-class AddKidScreen extends StatelessWidget {
+class AddKidScreen extends ConsumerWidget {
-  const AddKidScreen({super.key});
+  final nextStep;
+
+  const AddKidScreen({super.key, required this.nextStep});
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
+    final theme = ref.watch(themePortProvider);
+
     return Scaffold(
+      backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
       body: Container(
         margin: EdgeInsets.all(30),
         child: Column(
           spacing: 15,
           children: [
             Spacer(flex: 6),
-            Text("Añade a tu peque"),
+            Text("Añade a tu peque", style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold)),
             Text(
               "Controla su gasto a la vez que aprende hábitos financieros responsables",
+              textAlign: TextAlign.center,
             ),
             Container(
               margin: EdgeInsets.symmetric(vertical: 30, horizontal: 50),
               child: Row(
+                spacing: 10,
                 children: [
-                  Column(children: [Text("1"), Text("2"), Text("3")]),
+                  Stack(
+                    children: [
+                      Column(
+                        spacing: 16,
+                        children: List<Widget>.generate(3, (int index) =>
+                          Container(
+                            decoration: ShapeDecoration(
+                              shape: CircleBorder(),
+                              color: theme.getColorFor(ThemeCode.buttonPrimary)
+                            ),
+                            width: 32,
+                            height: 32,
+                            child: Center(child: Text(
+                              (index + 1).toString(),
+                              style: TextStyle(
+                                color: theme.getColorFor(ThemeCode.backgroundPrimary)
+                              )
+                            ))
+                          )
+                        )
+                      ),
+                      Divider(color: Colors.red, thickness: 4,),
+                    ],
+                  ),
                   Column(
+                    spacing: 16,
                     children: [
                       Text("Crea su perfil"),
                       Text("Vincula su correa y su reloj"),
@@ -32,21 +64,28 @@ class AddKidScreen extends StatelessWidget {
                 ],
               ),
             ),
-            Text("¡Y todo listo para que tenga su dinero!"),
+            Text(
-            Text("Recuerda que necesitas tener un Plan SaveFamily"),
+              "¡Y todo listo para que tenga su dinero!",
+              textAlign: TextAlign.center,
+              style: TextStyle(
+                fontSize: 18,
+                fontWeight: FontWeight.bold,
+                letterSpacing: 0
+              )
+            ),
+            Text(
+              "Recuerda que necesitas tener un Plan SaveFamily",
+              textAlign: TextAlign.center
+            ),
             Text(
               "Si aún no lo tienes, puedes conseguirlo a través de nuestra web",
+              textAlign: TextAlign.center,
             ),
             Spacer(flex: 8),
-            SizedBox(
+            PrimaryButton(
-              width: double.infinity,
+              onPressed: nextStep,
-              child: FilledButton(
+              text: "¡Empezar!",
-                onPressed: () => Navigator.push(
+              color: theme.getColorFor(ThemeCode.buttonPrimary)
-                  context,
-                  MaterialPageRoute(builder: (_) => CreateProfileScreen()),
-                ),
-                child: Text("¡Empezar!"),
-              ),
             ),
           ],
         ),

modules/auth/lib/src/device_sign_up/contact_screen.dart

@@ -1,11 +1,16 @@
+import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 
-class ContactScreen extends StatelessWidget {
+class ContactScreen extends ConsumerWidget {
   const ContactScreen({super.key});
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
+    final theme = ref.watch(themePortProvider);
+    
     return Scaffold(
+      backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
       body: Container(
         margin: EdgeInsets.all(30),
         child: Center(
@@ -36,32 +41,22 @@ class ContactScreen extends StatelessWidget {
                 ],
               ),
               Expanded(
-                child: TextField(
+                child: CustomTextField(
-                  decoration: InputDecoration(
+                  label: "Nombre",
-                    labelText: "Nombre",
+                  hint: "Nombre y apellidos",
-                    hintText: "Nombre y apellidos",
-                    border: OutlineInputBorder(),
-                  ),
                 ),
               ),
               Expanded(
-                child: TextField(
+                child: CustomTextField(
-                  decoration: InputDecoration(
+                  label: "Correo electrónico",
-                    labelText: "Correo electrónico",
+                  hint: "Correo electrónico",
-                    hintText: "Correo electrónico",
-                    border: OutlineInputBorder(),
-                  ),
                 ),
               ),
               Expanded(
-                child: TextField(
+                child: CustomTextField(
-                  minLines: 3,
+                  lines: 3,
-                  maxLines: 3,
+                  label: "Asunto del mensaje",
-                  decoration: InputDecoration(
+                  hint: "Escribe tu mensaje",
-                    labelText: "Asunto del mensaje",
-                    hintText: "Escribe tu mensaje",
-                    border: OutlineInputBorder(),
-                  ),
                 ),
               ),
               Expanded(

modules/auth/lib/src/device_sign_up/device_signup_builder.dart

@@ -0,0 +1,18 @@
+import 'package:auth/src/device_sign_up/device_signup_screen.dart';
+import 'package:flutter/material.dart';
+import 'package:get_it/get_it.dart';
+import 'package:go_router/go_router.dart';
+import 'package:navigation/navigation.dart';
+
+class DeviceSignupBuilder {
+  const DeviceSignupBuilder();
+
+  Page<void> buildPage(BuildContext context, GoRouterState state) {
+    final NavigationContract navigationContract = GetIt.I<NavigationContract>();
+
+    return MaterialPage<void>(
+      key: state.pageKey,
+      child: DeviceSignupScreen(navigationContract: navigationContract),
+    );
+  }
+}

modules/auth/lib/src/device_sign_up/device_signup_screen.dart

@@ -0,0 +1,99 @@
+import 'package:auth/auth.dart';
+import 'package:auth/src/device_sign_up/add_kid_screen.dart';
+import 'package:auth/src/device_sign_up/link_watch/link_watch_screen.dart';
+import 'package:auth/src/device_sign_up/link_watch/link_watch_previous_screen.dart';
+import 'package:auth/src/sign_up/account_created_screen.dart';
+import 'package:auth/src/widgets/layouts/form_step_layout.dart';
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:navigation/navigation.dart';
+
+class DeviceSignupScreen extends ConsumerStatefulWidget{
+  final NavigationContract navigationContract;
+
+  const DeviceSignupScreen({super.key, required this.navigationContract});
+
+  @override
+  ConsumerState<DeviceSignupScreen> createState() => DeviceSignupScreenState(navigationContract);
+}
+
+class DeviceSignupScreenState extends ConsumerState<DeviceSignupScreen>{
+  late int currentStep;
+  final NavigationContract navigationContract;
+
+  DeviceSignupScreenState(this.navigationContract);
+
+  @override
+  void initState() {
+    currentStep = 0;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return getSteps()[currentStep];
+  }
+
+  List<Widget> getSteps(){
+    final theme = ref.watch(themePortProvider);
+
+    final continueBtn = Container(
+      color: theme.getColorFor(ThemeCode.backgroundPrimary),
+      child: PrimaryButton(
+        onPressed: ()=>{setState(() {
+          currentStep++;
+        })},
+        text: "Continuar",
+        color: theme.getColorFor(ThemeCode.buttonPrimary)
+      )
+    );
+    
+    return [
+      AddKidScreen(nextStep: ()=>{setState(() {
+        currentStep++;
+      })}),
+      FormStepLayout(
+        title: "Crea su perfil",
+        subtitle: "Necesitamos estos datos para crear su cuenta y gestionar sus pagos y gastos",
+        currentStep: 1,
+        numSteps: 3,
+        body: [CreateProfileScreen()],
+        footer: [Container(
+          padding: EdgeInsets.all(24),
+          color: theme.getColorFor(ThemeCode.backgroundPrimary),
+          child: continueBtn
+        )],
+        nextStep: ()=>{},
+        previousStep: ()=>{}
+      ),
+      FormStepLayout(
+        title: "Vincula su correa y su reloj",
+        currentStep: 2,
+        numSteps: 3,
+        body: [LinkWatchPreviousScreen()],
+        footer: [continueBtn],
+        nextStep: ()=>{},
+        previousStep: ()=>{}
+      ),
+      FormStepLayout(
+        title: "Vincula su correa\ny su reloj",
+        currentStep: 2,
+        numSteps: 3,
+        body: [LinkWatchScreen(step:1)],
+        footer: [continueBtn],
+        nextStep: ()=>{},
+        previousStep: ()=>{}
+      ),
+      FormStepLayout(
+        title: "Vincula su correa\ny su reloj",
+        currentStep: 2,
+        numSteps: 3,
+        body: [LinkWatchScreen(step:2)],
+        footer: [continueBtn],
+        nextStep: ()=>{},
+        previousStep: ()=>{}
+      ),
+      AccountCreatedScreen(navigationContract: navigationContract, kidAccount: true)
+    ];
+  }
+}

modules/auth/lib/src/device_sign_up/link_watch/account_created_kid_screen.dart

@@ -1,87 +0,0 @@
-import 'package:design_system/design_system.dart';
-import 'package:flutter/material.dart';
-import 'package:auth/src/device_sign_up/add_kid_screen.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
-
-class AccountCreatedKidScreen extends ConsumerWidget {
-  const AccountCreatedKidScreen({super.key});
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final theme = ref.watch(themePortProvider);
-
-    final model = "SaveWatch Plus 2";
-    final id = "1106652524";
-    final fullName = "Carlos Pérez Cruz";
-
-    return Scaffold(
-      backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
-      body: Container(
-        margin: EdgeInsets.all(30),
-        child: Center(
-          child: Column(
-            spacing: 20,
-            children: [
-              Spacer(flex: 2),
-              Icon(
-                Icons.check,
-                color: theme.getColorFor(ThemeCode.backgroundPrimary),
-                size: 50,
-              ),
-              Text(
-                "Cuenta creada",
-                style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
-              ),
-              Text.rich(
-                TextSpan(
-                  text: "Has creado la cuenta para:\n",
-                  children: [
-                    TextSpan(
-                      text: fullName,
-                      style: TextStyle(fontWeight: FontWeight.bold),
-                    ),
-                  ],
-                ),
-              ),
-              Text("Reloj: $model"),
-              Text("ID del reloj: $id"),
-              Text(
-                "Ya puedes darle su primera paga paa que empiece a disfrutarla en su reloj",
-                style: TextStyle(fontWeight: FontWeight.bold),
-              ),
-              Spacer(flex: 6),
-              Container(
-                padding: EdgeInsets.all(20),
-                decoration: BoxDecoration(
-                  borderRadius: BorderRadius.only(
-                    topRight: Radius.circular(20),
-                    topLeft: Radius.circular(20),
-                  ),
-                ),
-                child: Column(
-                  children: [
-                    Expanded(
-                      child: FilledButton(
-                        onPressed: () => {
-                          Navigator.pushReplacement(
-                            context,
-                            MaterialPageRoute(builder: (_) => AddKidScreen()),
-                          ),
-                        },
-                        child: Text("Dale su primera paga"),
-                      ),
-                    ),
-                    TextButton(
-                      onPressed: () => {},
-                      child: Text("Añadir otro peque"),
-                    ),
-                  ],
-                ),
-              ),
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-}

modules/auth/lib/src/device_sign_up/link_watch/create_profile_screen.dart

@@ -1,304 +1,84 @@
 import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:flutter_svg/flutter_svg.dart';
 
 class CreateProfileScreen extends ConsumerWidget {
   const CreateProfileScreen({super.key});
 
-  final int currentStep = 0;
+  final bool firstTime = false;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final theme = ref.watch(themePortProvider);
 
-    return Scaffold(
+    return Column(
-      backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
+      spacing: 24,
-      body: Container(
+      children: [
-        margin: EdgeInsets.all(30),
+        Text(
-        child: Center(
+          "Comienza con un peque; luego podrás agregar más",
-          child: Column(
+          textAlign: TextAlign.center,
-            spacing: 10,
+          style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, letterSpacing: 0),
-            children: [
-              Stepper(
-                type: StepperType.horizontal,
-                currentStep: currentStep,
-                onStepCancel: () => currentStep == 0,
-                // ? null
-                // :
-                // setState(() {
-                //     currentStep -= 1;
-                //   }),
-                controlsBuilder:
-                    (BuildContext context, ControlsDetails controls) {
-                      return FilledButton(
-                        style: ButtonStyle(
-                          backgroundColor: WidgetStatePropertyAll<Color>(
-                            theme.getColorFor(ThemeCode.buttonPrimary),
-                          ),
-                        ),
-                        onPressed: controls.onStepContinue,
-                        child: const Text('Continuar'),
-                      );
-                    },
-                steps: [
-                  Step(
-                    state: currentStep > 0
-                        ? StepState.complete
-                        : StepState.indexed,
-                    isActive: currentStep >= 0,
-                    stepStyle: currentStep >= 0
-                        ? StepStyle(
-                            connectorThickness: 0,
-                            color: Color(0xFF329e95),
-                            indexStyle: TextStyle(color: Colors.transparent),
-                          )
-                        : StepStyle(
-                            connectorThickness: 0,
-                            color: Colors.transparent,
-                            boxShadow: BoxShadow(spreadRadius: 5),
-                            indexStyle: TextStyle(color: Colors.transparent),
-                          ),
-                    title: Text(""),
-                    content: Column(
-                      spacing: 10,
-                      children: [
-                        Text(
-                          "Crea su perfil",
-                          style: TextStyle(
-                            fontWeight: FontWeight.bold,
-                            fontSize: 30,
-                          ),
-                        ),
-                        Text(
-                          "Necesitamos estos datos para crear su cuenta y gestionar sus pagas y gastos",
-                        ),
-                        Text(
-                          "Comienza con un peque; luego podrás agregar más",
-                          style: TextStyle(fontWeight: FontWeight.bold),
-                        ),
-                        TextField(
-                          decoration: InputDecoration(
-                            labelText: "Nombre",
-                            hintText: "Nombre",
-                            border: OutlineInputBorder(),
-                          ),
-                        ),
-                        TextField(
-                          decoration: InputDecoration(
-                            labelText: "Apellidos",
-                            hintText: "Apellidos",
-                            border: OutlineInputBorder(),
-                          ),
-                        ),
-                        Row(
-                          spacing: 10,
-                          children: [
-                            Expanded(
-                              child: TextField(
-                                decoration: InputDecoration(
-                                  label: Text("Fecha de nacimiento"),
-                                  hintText: "DD",
-                                  border: OutlineInputBorder(),
-                                ),
-                                keyboardType: TextInputType.number,
-                                inputFormatters: [
-                                  FilteringTextInputFormatter.digitsOnly,
-                                ],
-                              ),
-                            ),
-                            Expanded(
-                              child: TextField(
-                                decoration: InputDecoration(
-                                  hintText: "MM",
-                                  border: OutlineInputBorder(),
-                                ),
-                                keyboardType: TextInputType.number,
-                                inputFormatters: [
-                                  FilteringTextInputFormatter.digitsOnly,
-                                ],
-                              ),
-                            ),
-                            Expanded(
-                              child: TextField(
-                                decoration: InputDecoration(
-                                  hintText: "AAAA",
-                                  border: OutlineInputBorder(),
-                                ),
-                                keyboardType: TextInputType.number,
-                                inputFormatters: [
-                                  FilteringTextInputFormatter.digitsOnly,
-                                ],
-                              ),
-                            ),
-                          ],
-                        ),
-                        TextField(
-                          decoration: InputDecoration(
-                            labelText: "Dirección completa",
-                            hintText: "Nombre de la calle",
-                            border: OutlineInputBorder(),
-                          ),
-                        ),
-                        TextButton(
-                          onPressed: () => {},
-                          child: Text(
-                            "Cambiar dirección",
-                            style: TextStyle(fontWeight: FontWeight.bold),
-                          ),
-                        ),
-                      ],
-                    ),
-                  ),
-                  Step(
-                    state: currentStep > 1
-                        ? StepState.complete
-                        : StepState.indexed,
-                    isActive: currentStep >= 1,
-                    stepStyle: currentStep >= 1
-                        ? StepStyle(
-                            connectorThickness: 0,
-                            color: Color(0xFF329e95),
-                            indexStyle: TextStyle(color: Colors.transparent),
-                          )
-                        : StepStyle(
-                            connectorThickness: 0,
-                            color: Colors.transparent,
-                            boxShadow: BoxShadow(spreadRadius: 5),
-                            indexStyle: TextStyle(color: Colors.transparent),
-                          ),
-                    title: Text(""),
-                    content: Column(
-                      spacing: 10,
-                      children: [
-                        Text(
-                          "Vincula su correa y su reloj",
-                          style: TextStyle(
-                            fontWeight: FontWeight.bold,
-                            fontSize: 30,
-                          ),
-                        ),
-                        SvgPicture.asset("assets/images/ui/formulario.svg"),
-                        Row(
-                          spacing: 10,
-                          children: [
-                            Text("1"),
-                            Column(
-                              children: [
-                                Text("Escanea la correa"),
-                                Text("El peque podrá realizar pagos"),
-                              ],
-                            ),
-                          ],
-                        ),
-                        Row(
-                          spacing: 10,
-                          children: [
-                            Text("2"),
-                            Column(
-                              children: [
-                                Text("Escanea el reloj"),
-                                Text("Visualizarás los gastos que se hagan"),
-                              ],
-                            ),
-                          ],
-                        ),
-                      ],
-                    ),
-                  ),
-                  Step(
-                    state: currentStep > 2
-                        ? StepState.complete
-                        : StepState.indexed,
-                    isActive: currentStep >= 2,
-                    stepStyle: currentStep >= 2
-                        ? StepStyle(
-                            connectorThickness: 0,
-                            color: Color(0xFF329e95),
-                            indexStyle: TextStyle(color: Colors.transparent),
-                          )
-                        : StepStyle(
-                            connectorThickness: 0,
-                            color: Colors.transparent,
-                            boxShadow: BoxShadow(spreadRadius: 5),
-                            indexStyle: TextStyle(color: Colors.transparent),
-                          ),
-                    title: Text(""),
-                    content: Column(
-                      spacing: 10,
-                      children: [
-                        Text(
-                          "¡Dale su primera paga!",
-                          style: TextStyle(
-                            fontWeight: FontWeight.bold,
-                            fontSize: 30,
-                          ),
-                        ),
-                        Text(
-                          "Enséñales a gestionar su dinero recargando su reloj",
-                        ),
-                        TextField(
-                          decoration: InputDecoration(
-                            labelText: "Cantidad de dinero de la paga",
-                            hintText: "0€",
-                            border: OutlineInputBorder(),
-                          ),
-                          keyboardType: TextInputType.number,
-                          inputFormatters: [
-                            FilteringTextInputFormatter.digitsOnly,
-                          ],
-                        ),
-                        Text("Cantidad mínima: 10€"),
-                        Text(
-                          "Por seguridad sólo se puede disponer de un máximo de 150€ por wallet",
-                        ),
-                        Text("Método de ingreso"),
-                        Row(
-                          spacing: 20,
-                          children: [
-                            OutlinedButton(
-                              onPressed: () => {},
-                              child: SvgPicture.asset(
-                                "assets/images/ui/visa.svg",
-                              ),
-                            ),
-                            OutlinedButton(
-                              onPressed: () => {},
-                              child: SvgPicture.asset(
-                                "assets/images/ui/paypal.svg",
-                              ),
-                            ),
-                            OutlinedButton(
-                              onPressed: () => {},
-                              child: Row(
-                                children: [
-                                  SvgPicture.asset(
-                                    "assets/images/ui/banco.svg",
-                                  ),
-                                  Text("Transferencia"),
-                                ],
-                              ),
-                            ),
-                          ],
-                        ),
-                        Row(
-                          children: [
-                            Icon(Icons.lock_outline),
-                            Text(
-                              "EL pago en esta app es seguro y cumple la normativa europea. Sólo se usará el dinero que decidas para las huchas de tus hijos.",
-                            ),
-                          ],
-                        ),
-                      ],
-                    ),
-                  ),
-                ],
-              ),
-            ],
-          ),
         ),
-      ),
+        CustomTextField(
+          label: "Nombre",
+          hint: "Nombre",
+        ),
+        CustomTextField(
+          label: "Apellidos",
+          hint: "Apellidos",
+        ),
+        Column(
+          spacing: 8,
+          children: [
+            Align(
+              alignment: Alignment.bottomLeft,
+              child: Text(
+                "Fecha de nacimiento",
+                style: TextStyle(fontSize: 14, letterSpacing: 0),
+              ),
+            ),
+            Row(
+              spacing: 10,
+              children: [
+                Expanded(
+                  child: CustomTextField(
+                    numeric: true,
+                    hint: "DD",
+                    length: 2,
+                  ),
+                ),
+                Expanded(
+                  child: CustomTextField(
+                    numeric: true,
+                    hint: "MM",
+                    length: 2,
+                  ),
+                ),
+                Expanded(
+                  child: CustomTextField(
+                    numeric: true,
+                    hint: "AAAA",
+                    length: 4,
+                  ),
+                ),
+              ],
+            ),
+          ],
+        ),
+        CustomTextField(
+          label: "Dirección completa",
+          hint: "Nombre de la calle",
+        ),
+        Align(
+          alignment: Alignment.topLeft,
+          child: CustomTextButton(
+            onPressed: () => {},
+            text: "Cambiar dirección",
+            size: 18,
+            weight: FontWeight.w500,
+          ),
+        )
+      ],
     );
   }
 }

modules/auth/lib/src/device_sign_up/link_watch/link_watch_previous_screen.dart

@@ -0,0 +1,58 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_svg/svg.dart';
+
+class LinkWatchPreviousScreen extends ConsumerWidget{
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final theme = ref.watch(themePortProvider);
+
+    return Column(
+      spacing: 10,
+      children: [
+        SvgPicture.asset("assets/images/ui/formulario.svg"),
+        Row(
+          spacing: 16,
+          children: [
+            Container(
+              decoration: ShapeDecoration(
+                shape: CircleBorder(side: BorderSide(color: theme.getColorFor(ThemeCode.backgroundSecondary))),
+                color: theme.getColorFor(ThemeCode.backgroundSecondary)
+              ),
+              width: 48,
+              height: 48,
+              child: Center(child: Text("1", style: TextStyle(fontSize: 24))),
+            ),
+            Column(
+              children: [
+                Text("Escanea la correa", textAlign: TextAlign.left, style: TextStyle(fontSize: 24)),
+                Text("El peque podrá realizar pagos"),
+              ],
+            ),
+          ],
+        ),
+        Row(
+          spacing: 16,
+          children: [
+            Container(
+              decoration: ShapeDecoration(
+                shape: CircleBorder(side: BorderSide(color: theme.getColorFor(ThemeCode.backgroundSecondary))),
+                color: theme.getColorFor(ThemeCode.backgroundSecondary)
+              ),
+              width: 48,
+              height: 48,
+              child: Center(child: Text("2", style: TextStyle(fontSize: 24))),
+            ),
+            Column(
+              children: [
+                Text("Escanea el reloj", textAlign: TextAlign.left, style: TextStyle(fontSize: 24)),
+                Text("Visualizarás los gastos que se hagan"),
+              ]
+            )
+          ],
+        ),
+      ],
+    );
+  }
+}

modules/auth/lib/src/device_sign_up/link_watch/link_watch_screen.dart

@@ -0,0 +1,128 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+class LinkWatchScreen extends ConsumerStatefulWidget{
+  final int step;
+
+  const LinkWatchScreen({super.key, required this.step});
+
+  @override
+  ConsumerState<LinkWatchScreen> createState() => LinkWatchScreenState();
+}
+
+class LinkWatchScreenState extends ConsumerState<LinkWatchScreen>{
+  
+  @override
+  Widget build(BuildContext context) {
+    final theme = ref.watch(themePortProvider);
+    
+    return Column(
+      spacing: 32,
+      children: [
+        Stack(
+          children: [
+            Divider(
+              color: theme.getColorFor(ThemeCode.buttonPrimary),
+              thickness: 4,
+              indent: 93,
+              endIndent: 93,
+              height: 48,
+            ),
+            if (widget.step==1)Divider(
+              color: theme.getColorFor(ThemeCode.backgroundSecondary),
+              thickness: 4,
+              indent: 186,
+              endIndent: 93,
+              height: 48,
+            ),
+            Container(
+              padding: EdgeInsets.symmetric(horizontal: 69),
+              child: Row(
+                children: [
+                  Container(
+                    decoration: ShapeDecoration(
+                      shape: CircleBorder(),
+                      color: theme.getColorFor(ThemeCode.buttonPrimary)
+                    ),
+                    width: 48,
+                    height: 48,
+                    child: Center(child: Text(
+                      "1",
+                      style: TextStyle(
+                        color: theme.getColorFor(ThemeCode.backgroundPrimary),
+                        fontSize: 24
+                      )
+                    ))
+                  ),
+                  Spacer(),
+                  Container(
+                    decoration: ShapeDecoration(
+                      shape: CircleBorder(),
+                      color: theme.getColorFor(widget.step==1 ? ThemeCode.backgroundSecondary : ThemeCode.buttonPrimary)
+                    ),
+                    width: 48,
+                    height: 48,
+                    child: Center(child: Text(
+                      "2",
+                      style: TextStyle(
+                        color: theme.getColorFor(widget.step==1 ? ThemeCode.textPrimary : ThemeCode.backgroundSecondary),
+                        fontSize: 24
+                      )
+                    ))
+                  ),
+                ],
+              ),
+            )
+          ],
+        ),
+        Row(children: [
+          Spacer(),
+          Text("Escanea la correa"),
+          Spacer(),
+          Text("Escanea el reloj"),
+          Spacer(),
+        ]),
+        Container(
+          padding: EdgeInsets.all(40),
+          decoration: BoxDecoration(
+            border: Border.all(color: theme.getColorFor(ThemeCode.textPrimary)),
+            borderRadius: BorderRadius.all(Radius.circular(16))
+          ),
+          child: SvgPicture.asset("assets/images/ui/qr.svg")
+        ),
+        if (widget.step == 2)Column(
+          spacing: 16,
+          children: [
+            Align(
+              alignment: Alignment.bottomLeft,
+              child: Text("O inserta el código del reloj"),
+            ),
+            Row(
+              spacing: 16,
+              children: [
+                Expanded(child: CustomTextField(
+                  hint: "XXXXXXXXXX",
+                )),
+                Expanded(child: PrimaryButton(
+                  onPressed: ()=>{},
+                  text: "Continuar con código",
+                  size: 16,
+                  color: theme.getColorFor(ThemeCode.buttonSecondary)
+                ))
+              ],
+            ),
+          ],
+        ),
+        Column(
+          spacing: 8,
+          children: [
+            Text("Si no consigues vincular su correa o reloj"),
+            CustomTextButton(onPressed: ()=>{}, text: "Contáctanos", weight: FontWeight.w500, size: 18)
+          ],
+        )
+      ],
+    );
+  }
+}

modules/auth/lib/src/login/presentation/link_phone_screen.dart

@@ -1,3 +1,4 @@
+import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:navigation/navigation.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
@@ -9,68 +10,69 @@ class LinkPhoneScreen extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    TextEditingController phoneController = TextEditingController();
+    final theme = ref.watch(themePortProvider);
+
+    // TextEditingController phoneController = TextEditingController();
     // String? phone;
 
     return Scaffold(
-      body: Container(
+      backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
-        margin: EdgeInsets.all(30),
+      body: SafeArea(
-        child: Expanded(
+        child: Container(
-          child: Center(
+          margin: EdgeInsets.symmetric(horizontal: 24),
-            child: Column(
+          child: Expanded(
-              spacing: 10,
+            child: Center(
-              children: [
+              child: Column(
-                Text(
+                spacing: 48,
-                  "¡Nos alegra mucho tenerte por aquí!",
+                children: [
-                  style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
+                  Spacer(flex: 8),
-                ),
+                  Text(
-                Text(
+                    "¡Nos alegra mucho tenerte por aquí!",
-                  "Para poder entrar de forma segura, te vamos a enviar un código al teléfono",
+                    textAlign: TextAlign.center,
-                ),
+                    style: TextStyle(fontSize: 30, fontWeight: FontWeight.w500, letterSpacing: 0),
-                Row(
-                  spacing: 10,
-                  children: [
-                    DropdownMenu(
-                      initialSelection: "es",
-                      dropdownMenuEntries: List<DropdownMenuEntry>.generate(3, (
-                        int index,
-                      ) {
-                        return DropdownMenuEntry(
-                          labelWidget: Icon(Icons.outlined_flag),
-                          label: "es",
-                          value: "es",
-                        );
-                      }),
-                    ),
-                    Expanded(
-                      child: TextField(
-                        onSubmitted: (String value) {
-                          // phone = value;
-                        },
-                        controller: phoneController,
-                        decoration: InputDecoration(
-                          labelText: "Teléfono móvil",
-                          hintText: "Teléfono",
-                          border: OutlineInputBorder(),
-                        ),
-                        keyboardType: TextInputType.number,
-                      ),
-                    ),
-                  ],
-                ),
-                SizedBox(
-                  width: double.infinity,
-                  child: FilledButton(
-                    onPressed: () =>
-                        navigationContract.pushTo(AppRoutes.phoneCode),
-                    child: Text("Siguiente"),
                   ),
-                ),
+                  Text(
-              ],
+                    "Para poder entrar de forma segura, te vamos a enviar un código al teléfono",
+                    textAlign: TextAlign.center,
+                    style: TextStyle(fontSize: 16, letterSpacing: 0),
+                  ),
+                  Column(
+                    spacing: 8,
+                    children: [
+                      Align(alignment: Alignment.bottomLeft, child: Text(
+                        "Teléfono móvil",
+                        style: TextStyle(fontSize: 14, letterSpacing: 0),
+                      )),
+                      Row(
+                        spacing: 10,
+                        children: [
+                          CustomDropdown(
+                            value: 0,
+                            items: [Icon(Icons.outlined_flag), Icon(Icons.outlined_flag), Icon(Icons.outlined_flag)],
+                            onChanged: (value)=> {},
+                            width: 80,
+                          ),
+                          Expanded(
+                            child: CustomTextField(
+                              hint: "Teléfono",
+                              numeric: true
+                            )
+                          ),
+                        ],
+                      ),
+                    ],
+                  ),
+                  PrimaryButton(
+                    onPressed: () => navigationContract.pushTo(AppRoutes.phoneCode),
+                    text: "Siguiente",
+                    color: theme.getColorFor(ThemeCode.buttonPrimary),
+                  ),
+                  Spacer(flex: 10)
+                ],
+              ),
             ),
           ),
         ),
-      ),
+    ));
-    );
   }
 }

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

@@ -1,5 +1,6 @@
 import 'package:auth/src/login/presentation/loading_google_screen.dart';
 import 'package:auth/src/sign_up/signup_screen.dart';
+import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:navigation/navigation.dart';
@@ -11,97 +12,149 @@ class LoginScreen extends ConsumerStatefulWidget {
   const LoginScreen({super.key, required this.navigationContract});
 
   @override
-  ConsumerState<LoginScreen> createState() => _LoginScreenState();
+  ConsumerState<ConsumerStatefulWidget> createState() => _LoginScreenState();
 }
 
-class _LoginScreenState extends ConsumerState<LoginScreen> {
+class _LoginScreenState extends ConsumerState<LoginScreen>{
   bool passwordVisible = false;
 
   @override
   Widget build(BuildContext context) {
-    // final l10n = SfLocalizations.of(context);
+    final theme = ref.watch(themePortProvider);
 
-    return Scaffold(
+    bool passwordVisible = true;
-      body: Center(
+
-        child: Container(
+    final content = [
-          margin: const EdgeInsets.all(30),
+      Column(
-          child: Column(
+        spacing: 8,
-            spacing: 10,
+        children: [
+          Icon(Icons.check, color: theme.getColorFor(ThemeCode.buttonPrimary), size: 50),
+          Text(
+            // context.translate(I18n.example)
+            "¡Te damos la bienvenida!",
+            textAlign: TextAlign.center,
+            style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
+          ),
+        ],
+      ),
+      Column(
+        spacing: 32,
+        children: [
+          Column(
+            spacing: 24,
             children: [
-              const Icon(Icons.check, color: Color(0xFF329e95), size: 50),
+              CustomTextField(
-              const Text(
+                hint: "Nombre de usuario",
-                // context.translate(I18n.example)
+                label: "Nombre de usuario",
-                '¡Te damos la bienvenida!',
-                style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
               ),
-              const TextField(
+              Column(
-                decoration: InputDecoration(
+                spacing: 12,
-                  hintText: 'Nombre de usuario',
-                  labelText: 'Nombre de usuario',
-                  border: OutlineInputBorder(),
-                ),
-              ),
-              TextField(
-                obscureText: !passwordVisible,
-                enableSuggestions: false,
-                autocorrect: false,
-                decoration: InputDecoration(
-                  labelText: 'Contraseña',
-                  hintText: '********',
-                  border: const OutlineInputBorder(),
-                  suffixIcon: IconButton(
-                    icon: Icon(
-                      passwordVisible ? Icons.visibility : Icons.visibility_off,
-                    ),
-                    onPressed: () {
-                      setState(() {
-                        passwordVisible = !passwordVisible;
-                      });
-                    },
-                  ),
-                ),
-              ),
-              TextButton(
-                onPressed: () =>
-                    widget.navigationContract.pushTo(AppRoutes.recoverPassword),
-                child: const Text('¿Has olvidado la contraseña?'),
-              ),
-              FilledButton(
-                onPressed: () =>
-                    widget.navigationContract.pushTo(AppRoutes.dashboardHome),
-                child: const Text('Iniciar sesión'),
-              ),
-              const Stack(children: [Divider(), Text('o continúa con')]),
-              Row(
-                spacing: 20,
                 children: [
-                  OutlinedButton(
+                  CustomTextField(
-                    onPressed: () => Navigator.push(
+                      showPassword: passwordVisible,
-                      context,
+                      label: "Contraseña",
-                      MaterialPageRoute(
+                      hint: "********"
-                        builder: (_) => const LoadingGoogleScreen(),
-                      ),
-                    ),
-                    child: const Text('Google', semanticsLabel: 'Google'),
-                  ),
-                  OutlinedButton(
-                    onPressed: () {},
-                    child: const Icon(Icons.apple, semanticLabel: 'Apple'),
                   ),
+                  Align(
+                    alignment: Alignment.topLeft,
+                    child: CustomTextButton(
+                      text: "¿Has olvidado la contraseña?",
+                      onPressed: () =>
+                          widget.navigationContract.pushTo(AppRoutes.recoverPassword),
+                      size: 16,
+                  )),
                 ],
-              ),
+              )
-              const Text('¿No tienes cuenta?'),
-              TextButton(
-                onPressed: () => Navigator.push(
-                  context,
-                  MaterialPageRoute(builder: (_) => const SignupScreen()),
-                ),
-                child: const Text('Crear una ahora'),
-              ),
             ],
           ),
-        ),
+          PrimaryButton(
+              onPressed: () => widget.navigationContract.goTo(AppRoutes.dashboardHome),
+              text: "Iniciar sesión",
+              color: theme.getColorFor(ThemeCode.buttonPrimary)
+          ),
+          Container(
+            padding: EdgeInsets.only(top: 24),
+            child: Column(
+              spacing: 24,
+              children: [
+                Stack(children: [
+                  Divider(endIndent: 74, indent: 74),
+                  Align(
+                      alignment: Alignment.center,
+                      child: Container(
+                        padding: const EdgeInsets.symmetric(horizontal: 14),
+                        color: theme.getColorFor(ThemeCode.backgroundPrimary),
+                        child: Text("o continúa con"),
+                      )
+                  )
+                ]),
+                Row(
+                  spacing: 20,
+                  children: [
+                    Spacer(),
+                    SecondaryButton(
+                      onPressed: () => Navigator.push(
+                        context,
+                        MaterialPageRoute(
+                          builder: (_) => LoadingGoogleScreen(),
+                        ),
+                      ),
+                      radius: 16,
+                      padding: 44,
+                      text: "Google",
+                      label: "Google",
+                    ),
+                    SecondaryButton(
+                      onPressed: ()=>{},
+                      radius: 16,
+                      padding: 44,
+                      icon: Icons.apple,
+                      label: "Apple",
+                    ),
+                    Spacer(),
+                  ],
+                ),
+              ],
+            ),
+          ),
+          Column(
+            spacing: 8,
+            children: [
+              Text(
+                  "¿No tienes cuenta?",
+                  style: TextStyle(fontSize: 18, letterSpacing: 0)
+              ),
+              TextButton(
+                onPressed: () => widget.navigationContract.goTo(AppRoutes.signup),
+                child: Text(
+                  "Crear una ahora",
+                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500, letterSpacing: 0)
+                )
+              ),
+            ],
+          )
+        ],
       ),
+    ];
+
+    return Scaffold(
+      backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
+      body: Expanded(
+        child: Center(
+          child: Container(
+            margin: EdgeInsets.all(30),
+            child: ListView.separated(
+              itemBuilder: (BuildContext context, int index) {
+                return content[index];
+              },
+              separatorBuilder: (BuildContext context, int index) {
+                return Divider(color: Colors.transparent, height: 48);
+              },
+              itemCount: content.length,
+            ),
+          ),
+        )
+      )
     );
   }
 }

modules/auth/lib/src/login/presentation/phone_code_screen.dart

@@ -1,15 +1,14 @@
+import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:navigation/navigation.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-// import 'package:sf_app_platform/payments/view/screens/core/dashboard_screen.dart';
-// import 'package:sf_app_platform/payments/view/screens/login_screen.dart';
 
 class PhoneCodeScreen extends ConsumerWidget {
   // final String phone;
   final NavigationContract navigationContract;
 
   PhoneCodeScreen({super.key, required this.navigationContract});
-  // const PhoneCodeScreen({super.key, required this.phone});
 
   // class PhoneCodeScreenState extends State<PhoneCodeScreen> {
   final focusNodes = List<FocusNode>.generate(6, (int i) {
@@ -18,64 +17,87 @@ class PhoneCodeScreen extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final theme = ref.watch(themePortProvider);
+
     return Scaffold(
+      backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
       body: Container(
         margin: EdgeInsets.all(30),
         child: Expanded(
           child: Center(
             child: Column(
-              spacing: 15,
+              spacing: 48,
               children: [
                 Spacer(flex: 8),
-                Text(
+                Column(
-                  "Conéctate",
+                  spacing: 24,
-                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
+                  children: [
-                ),
+                    Text(
-                Text.rich(
+                      "Conéctate",
-                  TextSpan(
+                      style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
-                    text: "Hemos enviado el código al ",
+                    ),
-                    children: [
+                    Text.rich(
                       TextSpan(
-                        // text: widget.phone,
+                        text: "Hemos enviado el código al ",
-                        style: TextStyle(fontWeight: FontWeight.bold),
+                        children: [
+                          TextSpan(
+                            // text: widget.phone,
+                            style: TextStyle(fontWeight: FontWeight.bold),
+                          ),
+                        ],
                       ),
-                    ],
+                    ),
-                  ),
+                    Text("Introduce el código aquí"),
+                    Row(
+                      spacing: 8,
+                      children: List<Widget>.generate(6, (int i) {
+                        return Expanded(
+                          child: TextField(
+                            focusNode: focusNodes[i],
+                            keyboardType: TextInputType.number,
+                            inputFormatters: [FilteringTextInputFormatter.digitsOnly],
+                            textAlign: TextAlign.center,
+                            decoration: InputDecoration(
+                              hintText: "0",
+                              counterText: "",
+                              border: OutlineInputBorder(),
+                            ),
+                            maxLength: 1,
+                            onChanged: (String value) => {
+                              value != ""
+                                  ? focusNodes[i + 1].requestFocus()
+                                  : focusNodes[i - 1].requestFocus(),
+                            },
+                          ),
+                        );
+                      }),
+                    ),
+                  ],
                 ),
-                Text("Introduce el código aquí"),
+                Column(
-                Row(
+                  spacing: 24,
-                  spacing: 20,
+                  children: [
-                  children: List<Widget>.generate(6, (int i) {
+                    PrimaryButton(
-                    return Expanded(
+                      onPressed: () => {navigationContract.pushTo(AppRoutes.login)},
-                      child: TextField(
+                      text: "Entrar",
-                        focusNode: focusNodes[i],
+                      color: theme.getColorFor(ThemeCode.buttonPrimary),
-                        keyboardType: TextInputType.number,
+                    ),
-                        decoration: InputDecoration(
+                    Column(
-                          hintText: "0",
+                      spacing: 8,
-                          counterText: "",
+                      children: [
-                          border: OutlineInputBorder(),
+                        Text(
+                          "¿No lo has recibido?",
+                          style: TextStyle(fontSize: 18, letterSpacing: 0, height: 1.5),
                         ),
-                        maxLength: 1,
+                        CustomTextButton(
-                        onChanged: (String value) => {
+                          onPressed: () => {},
-                          value != ""
+                          text: "Volver a intentarlo",
-                              ? focusNodes[i + 1].requestFocus()
+                          size: 18,
-                              : focusNodes[i - 1].requestFocus(),
+                          weight: FontWeight.w500,
-                        },
+                        ),
-                      ),
+                      ],
-                    );
+                    )
-                  }),
+                  ],
-                ),
-                FilledButton(
-                  onPressed: () => {navigationContract.pushTo(AppRoutes.login)},
-                  child: Text("Entrar"),
-                ),
-                Text("¿No lo has recibido?"),
-                TextButton(
-                  onPressed: () => {},
-                  child: Text(
-                    "Volver a intentarlo",
-                    style: TextStyle(fontWeight: FontWeight.bold),
-                  ),
                 ),
                 Spacer(flex: 10),
               ],

modules/auth/lib/src/onboarding/domain/onboarding_page.dart

@@ -0,0 +1,31 @@
+import 'package:sf_localizations/sf_localizations.dart';
+
+class OnboardingPage {
+  final String image;
+  final String title;
+  final String subtitle;
+
+  const OnboardingPage({
+    required this.image,
+    required this.title,
+    required this.subtitle,
+  });
+}
+
+const List<OnboardingPage> onboardingPages = <OnboardingPage>[
+  OnboardingPage(
+    image: 'assets/images/ui/bienvenida_paso1.svg',
+    title: I18n.onboardingTitle1,
+    subtitle: I18n.onboardingSubtitle1,
+  ),
+  OnboardingPage(
+    image: 'assets/images/ui/bienvenida_paso2.svg',
+    title: I18n.onboardingTitle2,
+    subtitle: I18n.onboardingSubtitle2,
+  ),
+  OnboardingPage(
+    image: 'assets/images/ui/bienvenida_paso3.svg',
+    title: I18n.onboardingTitle3,
+    subtitle: I18n.onboardingSubtitle3,
+  ),
+];

modules/auth/lib/src/onboarding/onboarding_builder.dart

@@ -1,4 +1,4 @@
-import 'package:auth/src/onboarding/presentation/welcome_screen.dart';
+import 'package:auth/src/onboarding/presentation/onboarding_screen.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:get_it/get_it.dart';
@@ -12,7 +12,7 @@ class OnboardingBuilder {
 
     return MaterialPage<void>(
       key: state.pageKey,
-      child: WelcomeScreen(navigationContract: navigationContract),
+      child: OnboardingScreen(navigationContract: navigationContract),
     );
   }
 }

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

@@ -0,0 +1,128 @@
+import 'package:auth/src/onboarding/domain/onboarding_page.dart';
+import 'package:auth/src/onboarding/presentation/onboarding_view_model.dart';
+import 'package:auth/src/onboarding/presentation/widgets/onboarding_content.dart';
+import 'package:design_system/design_system.dart';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:navigation/navigation.dart';
+import 'package:sf_localizations/sf_localizations.dart';
+
+final onboardingPageControllerProvider = Provider.autoDispose<PageController>((
+  ref,
+) {
+  final controller = PageController();
+  ref.onDispose(controller.dispose);
+  return controller;
+});
+
+class OnboardingScreen extends ConsumerWidget {
+  final NavigationContract navigationContract;
+
+  const OnboardingScreen({super.key, required this.navigationContract});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final state = ref.watch(onBoardingViewModelProvider);
+    final viewModel = ref.read(onBoardingViewModelProvider.notifier);
+    final pageController = ref.watch(onboardingPageControllerProvider);
+
+    final isLast = state.cardIndex >= onboardingPages.length - 1;
+
+    void goToNext() {
+      if (isLast) {
+        navigationContract.goTo(AppRoutes.linkPhone);
+      } else {
+        pageController.nextPage(
+          duration: const Duration(milliseconds: 400),
+          curve: Curves.easeOut,
+        );
+      }
+    }
+
+    return Scaffold(
+      backgroundColor: Colors.white,
+      body: SafeArea(
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 24),
+          child: Column(
+            children: [
+              Expanded(
+                child: PageView.builder(
+                  controller: pageController,
+                  itemCount: onboardingPages.length,
+                  onPageChanged: viewModel.onPageChanged,
+                  itemBuilder: (context, index) {
+                    final page = onboardingPages[index];
+                    return OnboardingContent(
+                      image: page.image,
+                      title: page.title,
+                      subtitle: page.subtitle,
+                    );
+                  },
+                ),
+              ),
+              StepIndicator(
+                current: state.cardIndex,
+                total: onboardingPages.length,
+                color: const Color(0xFF4A4A4A),
+              ),
+              const SizedBox(height: 38),
+              Container(
+                padding: const EdgeInsets.symmetric(horizontal: 24),
+                width: double.infinity,
+                child: TextButton(
+                  onPressed: goToNext,
+                  style: TextButton.styleFrom(
+                    backgroundColor: isLast
+                        ? const Color(0xFF329E95)
+                        : const Color(0xFF333333),
+                    foregroundColor: Colors.white,
+                    padding: const EdgeInsets.symmetric(
+                      vertical: 16,
+                      horizontal: 24,
+                    ),
+                    shape: RoundedRectangleBorder(
+                      borderRadius: BorderRadius.circular(18),
+                    ),
+                  ),
+                  child: Text(
+                    isLast
+                        ? context.translate(I18n.start)
+                        : context.translate(I18n.next),
+                    style: const TextStyle(
+                      fontSize: 18,
+                      fontWeight: FontWeight.w600,
+                    ),
+                  ),
+                ),
+              ),
+              const SizedBox(height: 8),
+              SizedBox(
+                height: 48,
+                child: Center(
+                  child: isLast
+                      ? const SizedBox.shrink()
+                      : TextButton(
+                          onPressed: () =>
+                              navigationContract.goTo(AppRoutes.linkPhone),
+                          child: Text(
+                            context.translate(I18n.skip),
+                            style: TextStyle(
+                              color: Color(0xFF333333),
+                              decoration: TextDecoration.underline,
+                              fontWeight: FontWeight.w500,
+                              fontSize: 18,
+                            ),
+                          ),
+                        ),
+                ),
+              ),
+              const SizedBox(height: 36),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

modules/auth/lib/src/onboarding/presentation/onboarding_view_model.dart

@@ -0,0 +1,19 @@
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import 'package:auth/src/onboarding/presentation/onboarding_view_state.dart';
+
+final onBoardingViewModelProvider =
+    NotifierProvider.autoDispose<OnBoardingViewModel, OnboardingViewState>(
+      OnBoardingViewModel.new,
+    );
+
+class OnBoardingViewModel extends Notifier<OnboardingViewState> {
+  @override
+  OnboardingViewState build() {
+    return const OnboardingViewState();
+  }
+
+  void onPageChanged(int index) {
+    state = state.copyWith(cardIndex: index);
+  }
+}

modules/auth/lib/src/onboarding/presentation/onboarding_view_state.dart

@@ -0,0 +1,11 @@
+import 'package:freezed_annotation/freezed_annotation.dart';
+
+part 'onboarding_view_state.freezed.dart';
+
+@freezed
+abstract class OnboardingViewState with _$OnboardingViewState {
+  const factory OnboardingViewState({
+    @Default(0) int cardIndex,
+    String? error,
+  }) = _OnboardingViewState;
+}

modules/auth/lib/src/onboarding/presentation/onboarding_view_state.freezed.dart

@@ -0,0 +1,274 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+// coverage:ignore-file
+// ignore_for_file: type=lint
+// ignore_for_file: unused_element, deprecated_member_use, deprecated_member_use_from_same_package, use_function_type_syntax_for_parameters, unnecessary_const, avoid_init_to_null, invalid_override_different_default_values_named, prefer_expression_function_bodies, annotate_overrides, invalid_annotation_target, unnecessary_question_mark
+
+part of 'onboarding_view_state.dart';
+
+// **************************************************************************
+// FreezedGenerator
+// **************************************************************************
+
+// dart format off
+T _$identity<T>(T value) => value;
+/// @nodoc
+mixin _$OnboardingViewState {
+
+ int get cardIndex; String? get error;
+/// Create a copy of OnboardingViewState
+/// with the given fields replaced by the non-null parameter values.
+@JsonKey(includeFromJson: false, includeToJson: false)
+@pragma('vm:prefer-inline')
+$OnboardingViewStateCopyWith<OnboardingViewState> get copyWith => _$OnboardingViewStateCopyWithImpl<OnboardingViewState>(this as OnboardingViewState, _$identity);
+
+
+
+@override
+bool operator ==(Object other) {
+  return identical(this, other) || (other.runtimeType == runtimeType&&other is OnboardingViewState&&(identical(other.cardIndex, cardIndex) || other.cardIndex == cardIndex)&&(identical(other.error, error) || other.error == error));
+}
+
+
+@override
+int get hashCode => Object.hash(runtimeType,cardIndex,error);
+
+@override
+String toString() {
+  return 'OnboardingViewState(cardIndex: $cardIndex, error: $error)';
+}
+
+
+}
+
+/// @nodoc
+abstract mixin class $OnboardingViewStateCopyWith<$Res>  {
+  factory $OnboardingViewStateCopyWith(OnboardingViewState value, $Res Function(OnboardingViewState) _then) = _$OnboardingViewStateCopyWithImpl;
+@useResult
+$Res call({
+ int cardIndex, String? error
+});
+
+
+
+
+}
+/// @nodoc
+class _$OnboardingViewStateCopyWithImpl<$Res>
+    implements $OnboardingViewStateCopyWith<$Res> {
+  _$OnboardingViewStateCopyWithImpl(this._self, this._then);
+
+  final OnboardingViewState _self;
+  final $Res Function(OnboardingViewState) _then;
+
+/// Create a copy of OnboardingViewState
+/// with the given fields replaced by the non-null parameter values.
+@pragma('vm:prefer-inline') @override $Res call({Object? cardIndex = null,Object? error = freezed,}) {
+  return _then(_self.copyWith(
+cardIndex: null == cardIndex ? _self.cardIndex : cardIndex // ignore: cast_nullable_to_non_nullable
+as int,error: freezed == error ? _self.error : error // ignore: cast_nullable_to_non_nullable
+as String?,
+  ));
+}
+
+}
+
+
+/// Adds pattern-matching-related methods to [OnboardingViewState].
+extension OnboardingViewStatePatterns on OnboardingViewState {
+/// A variant of `map` that fallback to returning `orElse`.
+///
+/// It is equivalent to doing:
+/// ```dart
+/// switch (sealedClass) {
+///   case final Subclass value:
+///     return ...;
+///   case _:
+///     return orElse();
+/// }
+/// ```
+
+@optionalTypeArgs TResult maybeMap<TResult extends Object?>(TResult Function( _OnboardingViewState value)?  $default,{required TResult orElse(),}){
+final _that = this;
+switch (_that) {
+case _OnboardingViewState() when $default != null:
+return $default(_that);case _:
+  return orElse();
+
+}
+}
+/// A `switch`-like method, using callbacks.
+///
+/// Callbacks receives the raw object, upcasted.
+/// It is equivalent to doing:
+/// ```dart
+/// switch (sealedClass) {
+///   case final Subclass value:
+///     return ...;
+///   case final Subclass2 value:
+///     return ...;
+/// }
+/// ```
+
+@optionalTypeArgs TResult map<TResult extends Object?>(TResult Function( _OnboardingViewState value)  $default,){
+final _that = this;
+switch (_that) {
+case _OnboardingViewState():
+return $default(_that);case _:
+  throw StateError('Unexpected subclass');
+
+}
+}
+/// A variant of `map` that fallback to returning `null`.
+///
+/// It is equivalent to doing:
+/// ```dart
+/// switch (sealedClass) {
+///   case final Subclass value:
+///     return ...;
+///   case _:
+///     return null;
+/// }
+/// ```
+
+@optionalTypeArgs TResult? mapOrNull<TResult extends Object?>(TResult? Function( _OnboardingViewState value)?  $default,){
+final _that = this;
+switch (_that) {
+case _OnboardingViewState() when $default != null:
+return $default(_that);case _:
+  return null;
+
+}
+}
+/// A variant of `when` that fallback to an `orElse` callback.
+///
+/// It is equivalent to doing:
+/// ```dart
+/// switch (sealedClass) {
+///   case Subclass(:final field):
+///     return ...;
+///   case _:
+///     return orElse();
+/// }
+/// ```
+
+@optionalTypeArgs TResult maybeWhen<TResult extends Object?>(TResult Function( int cardIndex,  String? error)?  $default,{required TResult orElse(),}) {final _that = this;
+switch (_that) {
+case _OnboardingViewState() when $default != null:
+return $default(_that.cardIndex,_that.error);case _:
+  return orElse();
+
+}
+}
+/// A `switch`-like method, using callbacks.
+///
+/// As opposed to `map`, this offers destructuring.
+/// It is equivalent to doing:
+/// ```dart
+/// switch (sealedClass) {
+///   case Subclass(:final field):
+///     return ...;
+///   case Subclass2(:final field2):
+///     return ...;
+/// }
+/// ```
+
+@optionalTypeArgs TResult when<TResult extends Object?>(TResult Function( int cardIndex,  String? error)  $default,) {final _that = this;
+switch (_that) {
+case _OnboardingViewState():
+return $default(_that.cardIndex,_that.error);case _:
+  throw StateError('Unexpected subclass');
+
+}
+}
+/// A variant of `when` that fallback to returning `null`
+///
+/// It is equivalent to doing:
+/// ```dart
+/// switch (sealedClass) {
+///   case Subclass(:final field):
+///     return ...;
+///   case _:
+///     return null;
+/// }
+/// ```
+
+@optionalTypeArgs TResult? whenOrNull<TResult extends Object?>(TResult? Function( int cardIndex,  String? error)?  $default,) {final _that = this;
+switch (_that) {
+case _OnboardingViewState() when $default != null:
+return $default(_that.cardIndex,_that.error);case _:
+  return null;
+
+}
+}
+
+}
+
+/// @nodoc
+
+
+class _OnboardingViewState implements OnboardingViewState {
+  const _OnboardingViewState({this.cardIndex = 0, this.error});
+  
+
+@override@JsonKey() final  int cardIndex;
+@override final  String? error;
+
+/// Create a copy of OnboardingViewState
+/// with the given fields replaced by the non-null parameter values.
+@override @JsonKey(includeFromJson: false, includeToJson: false)
+@pragma('vm:prefer-inline')
+_$OnboardingViewStateCopyWith<_OnboardingViewState> get copyWith => __$OnboardingViewStateCopyWithImpl<_OnboardingViewState>(this, _$identity);
+
+
+
+@override
+bool operator ==(Object other) {
+  return identical(this, other) || (other.runtimeType == runtimeType&&other is _OnboardingViewState&&(identical(other.cardIndex, cardIndex) || other.cardIndex == cardIndex)&&(identical(other.error, error) || other.error == error));
+}
+
+
+@override
+int get hashCode => Object.hash(runtimeType,cardIndex,error);
+
+@override
+String toString() {
+  return 'OnboardingViewState(cardIndex: $cardIndex, error: $error)';
+}
+
+
+}
+
+/// @nodoc
+abstract mixin class _$OnboardingViewStateCopyWith<$Res> implements $OnboardingViewStateCopyWith<$Res> {
+  factory _$OnboardingViewStateCopyWith(_OnboardingViewState value, $Res Function(_OnboardingViewState) _then) = __$OnboardingViewStateCopyWithImpl;
+@override @useResult
+$Res call({
+ int cardIndex, String? error
+});
+
+
+
+
+}
+/// @nodoc
+class __$OnboardingViewStateCopyWithImpl<$Res>
+    implements _$OnboardingViewStateCopyWith<$Res> {
+  __$OnboardingViewStateCopyWithImpl(this._self, this._then);
+
+  final _OnboardingViewState _self;
+  final $Res Function(_OnboardingViewState) _then;
+
+/// Create a copy of OnboardingViewState
+/// with the given fields replaced by the non-null parameter values.
+@override @pragma('vm:prefer-inline') $Res call({Object? cardIndex = null,Object? error = freezed,}) {
+  return _then(_OnboardingViewState(
+cardIndex: null == cardIndex ? _self.cardIndex : cardIndex // ignore: cast_nullable_to_non_nullable
+as int,error: freezed == error ? _self.error : error // ignore: cast_nullable_to_non_nullable
+as String?,
+  ));
+}
+
+
+}
+
+// dart format on

modules/auth/lib/src/onboarding/presentation/welcome_screen.dart

@@ -1,75 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_svg/svg.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:navigation/navigation.dart';
-
-class WelcomeScreen extends ConsumerWidget {
-  final NavigationContract navigationContract;
-
-  const WelcomeScreen({super.key, required this.navigationContract});
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    return Scaffold(
-      body: Center(
-        child: Column(
-          children: [
-            Spacer(),
-            Expanded(
-              child: CarouselView(
-                scrollDirection: Axis.horizontal,
-                itemExtent: double.infinity,
-                itemSnapping: true,
-                shrinkExtent: 400,
-                children: generateSteps(),
-              ),
-            ),
-            FilledButton(
-              onPressed: () => navigationContract.goTo(AppRoutes.linkPhone),
-              child: const Text('Continuar'),
-            ),
-            Spacer(),
-          ],
-        ),
-      ),
-    );
-  }
-
-  void jumpToNext(BuildContext context) {
-    // Navigator.pushReplacement(
-    //   context,
-    //   MaterialPageRoute(builder: (_) => LinkPhoneScreen()),
-    // );
-    return;
-  }
-
-  List<Widget> generateSteps() {
-    return [
-      Column(
-        spacing: 30,
-        children: [
-          SvgPicture.asset("assets/images/ui/bienvenida_paso1.svg"),
-          Text(
-            "Aprende a gestionar su dinero",
-            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
-          ),
-          Text("Tu peque crea hábitos y se divierte mientras lo hace"),
-        ],
-      ),
-      Column(
-        children: [
-          SvgPicture.asset("assets/images/ui/bienvenida_paso2.svg"),
-          Text("Tranquilidad en cada pago que hacen"),
-          Text("Supervisa gastos, fija límites y acompáñalos en cada paso"),
-        ],
-      ),
-      Column(
-        children: [
-          SvgPicture.asset("assets/images/ui/bienvenida_paso3.svg"),
-          Text("Pagos fáciles y seguros en sus manos"),
-          Text("Podrá pagar desde su reloj.\n Sin móvil ni efectivo"),
-        ],
-      ),
-    ];
-  }
-}

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

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:sf_localizations/sf_localizations.dart';
+
+class OnboardingContent extends StatelessWidget {
+  final String image;
+  final String title;
+  final String subtitle;
+
+  const OnboardingContent({
+    super.key,
+    required this.image,
+    required this.title,
+    required this.subtitle,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 16),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Flexible(flex: 3, child: SvgPicture.asset(image)),
+          const SizedBox(height: 48),
+          Text(
+            context.translate(title),
+            textAlign: TextAlign.center,
+            style: const TextStyle(
+              fontWeight: FontWeight.w700,
+              fontSize: 28,
+              height: 1.4,
+              letterSpacing: 0.3,
+              color: Color(0xFF4A4A4A),
+            ),
+          ),
+          const SizedBox(height: 16),
+          Text(
+            context.translate(subtitle),
+            textAlign: TextAlign.center,
+            style: const TextStyle(
+              fontSize: 18,
+              height: 1.4,
+              letterSpacing: 0.3,
+              color: Color(0xFF9B9B9B),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

modules/auth/lib/src/recover_password/presentation/email_sent_screen.dart

@@ -1,83 +0,0 @@
-import 'package:design_system/design_system.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
-
-class EmailSentScreen extends ConsumerWidget {
-  final String email;
-
-  const EmailSentScreen({super.key, required this.email});
-
-  @override
-  Widget build(BuildContext contex, WidgetRef ref) {
-    final theme = ref.watch(themePortProvider);
-
-    return Scaffold(
-      body: Container(
-        margin: EdgeInsets.all(30),
-        child: Center(
-          child: Column(
-            spacing: 20,
-            children: [
-              Spacer(flex: 8),
-              Text(
-                "Recuperar contraseña",
-                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
-              ),
-              Spacer(flex: 1),
-              Row(
-                spacing: 10,
-                children: [
-                  Icon(
-                    Icons.check,
-                    color: theme.getColorFor(ThemeCode.buttonPrimary),
-                  ),
-                  Text(
-                    "Correo enviado correctamente",
-                    style: TextStyle(fontWeight: FontWeight.bold),
-                  ),
-                ],
-              ),
-              Spacer(flex: 1),
-              Text(
-                "Revisa tu email y haz clic en el enlace para crear una nueva contraseña",
-              ),
-              Text(
-                "Si no recibes el correo en unos minutos, revisa tu carpeta de spam o pulsa \"Reenviar correo\"",
-              ),
-              Row(
-                spacing: 10,
-                children: [
-                  Expanded(
-                    child: OutlinedButton(
-                      onPressed: () => {},
-                      child: Text("Reenviar correo"),
-                    ),
-                  ),
-                  Expanded(
-                    child: FilledButton(
-                      onPressed: () => {
-                        // Navigator.push(
-                        //   context,
-                        //   MaterialPageRoute(
-                        //     builder: (_) => NewPasswordScreen(),
-                        //   ),
-                        // ),
-                      },
-                      style: ButtonStyle(
-                        backgroundColor: WidgetStatePropertyAll<Color>(
-                          theme.getColorFor(ThemeCode.buttonSecondary),
-                        ),
-                      ),
-                      child: Text("Continuar"),
-                    ),
-                  ),
-                ],
-              ),
-              Spacer(flex: 10),
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-}

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

@@ -1,6 +1,8 @@
 import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:get_it/get_it.dart';
+import 'package:navigation/navigation.dart';
 
 class NewPasswordScreen extends ConsumerStatefulWidget {
   const NewPasswordScreen({super.key});
@@ -37,141 +39,141 @@ class NewPasswordScreenState extends ConsumerState<NewPasswordScreen> {
 
   @override
   Widget build(BuildContext context) {
+    final NavigationContract navigationContract = GetIt.I<NavigationContract>();
     final theme = ref.watch(themePortProvider);
 
     return Scaffold(
+      backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
       body: Container(
-        margin: const EdgeInsets.all(30),
+        margin: const EdgeInsets.all(24),
         child: Center(
           child: Column(
-            spacing: 10,
+            spacing: 48,
             children: [
-              const Spacer(flex: 4),
+              const Spacer(),
-              const Text(
+              Column(
-                'Recuperar contraseña',
+                spacing: 32,
-                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
-              ),
-              TextField(
-                obscureText: !passwordVisible,
-                enableSuggestions: false,
-                autocorrect: false,
-                decoration: InputDecoration(
-                  labelText: 'Nueva contraseña',
-                  hintText: '********',
-                  border: const OutlineInputBorder(),
-                  suffixIcon: IconButton(
-                    icon: Icon(
-                      passwordVisible ? Icons.visibility : Icons.visibility_off,
-                    ),
-                    onPressed: () {
-                      setState(() {
-                        passwordVisible = !passwordVisible;
-                      });
-                    },
-                  ),
-                ),
-                onChanged: (value) {
-                  setState(() {
-                    password = value;
-                    securityChecks = checkSecurity(value);
-                  });
-                },
-              ),
-              TextField(
-                obscureText: !passwordVisible,
-                enableSuggestions: false,
-                autocorrect: false,
-                decoration: InputDecoration(
-                  labelText: 'Repetir contraseña',
-                  hintText: '********',
-                  border: const OutlineInputBorder(),
-                  suffixIcon: IconButton(
-                    icon: Icon(
-                      passwordVisible ? Icons.visibility : Icons.visibility_off,
-                    ),
-                    onPressed: () {
-                      setState(() {
-                        passwordVisible = !passwordVisible;
-                      });
-                    },
-                  ),
-                ),
-                onChanged: (value) {
-                  setState(() {
-                    equalPasswords = password == value;
-                  });
-                },
-              ),
-              Row(
                 children: [
-                  Icon(
+                  const Text(
-                    securityChecks['min']!
+                    "Recuperar contraseña",
-                        ? Icons.check
+                    textAlign: TextAlign.center,
-                        : Icons.cancel_outlined,
+                    style: TextStyle(fontWeight: FontWeight.w500, fontSize: 30, letterSpacing: 0),
-                    color: securityChecks['min']!
-                        ? theme.getColorFor(ThemeCode.buttonPrimary)
-                        : theme.getColorFor(ThemeCode.buttonSecondary),
                   ),
-                  const SizedBox(width: 8),
+                  Column(
-                  const Text('Al menos 8 caracteres'),
+                    spacing: 16,
+                    children: [
+                      CustomTextField(
+                        showPassword: passwordVisible,
+                        label: "Nueva contraseña",
+                        hint: "********",
+                        onChanged: (value) => {
+                          setState(() {
+                            password = value;
+                            securityChecks = checkSecurity(value);
+                          }),
+                        },
+                      ),
+                      CustomTextField(
+                        showPassword: passwordVisible,
+                        label: "Repetir contraseña",
+                        hint: "********",
+                        onChanged: (value) => {
+                          setState(() {
+                            equalPasswords = password == value;
+                          }),
+                        },
+                      ),
+                      Column(
+                        spacing: 4,
+                        children: [
+                          Row(
+                            spacing: 8,
+                            children: [
+                              Icon(
+                                Icons.check,
+                                color: theme.getColorFor(securityChecks["min"]!
+                                    ? ThemeCode.buttonPrimary
+                                    : ThemeCode.buttonSecondary),
+                              ),
+                              const Text("Al menos 8 caracteres", style: TextStyle(fontSize: 14)),
+                            ],
+                          ),
+                          Row(
+                            spacing: 8,
+                            children: [
+                              Icon(
+                                Icons.check,
+                                color: theme.getColorFor(securityChecks["capital"]!
+                                    ? ThemeCode.buttonPrimary
+                                    : ThemeCode.buttonSecondary),
+                              ),
+                              const Text("Una mayúscula", style: TextStyle(fontSize: 14)),
+                            ],
+                          ),
+                          Row(
+                            spacing: 8,
+                            children: [
+                              Icon(
+                                Icons.check,
+                                color: theme.getColorFor(securityChecks["number"]!
+                                    ? ThemeCode.buttonPrimary
+                                    : ThemeCode.buttonSecondary),
+                              ),
+                              const Text("Un número", style: TextStyle(fontSize: 14)),
+                            ],
+                          ),
+                          Row(
+                            spacing: 8,
+                            children: [
+                              Icon(
+                                Icons.check,
+                                color: theme.getColorFor(securityChecks["special"]!
+                                    ? ThemeCode.buttonPrimary
+                                    : ThemeCode.buttonSecondary),
+                              ),
+                              const Text("Un carácter especial", style: TextStyle(fontSize: 14)),
+                            ],
+                          ),
+                        ],
+                      )
+                    ],
+                  ),
+                  Column(
+                    spacing: 8,
+                    children: [
+                      Align(
+                        alignment: Alignment.bottomLeft,
+                        child: const Text(
+                          "Teléfono móvil",
+                          style: TextStyle(fontSize: 14, letterSpacing: 0),
+                        )
+                      ),
+                      Row(
+                        spacing: 8,
+                        children: [
+                          CustomDropdown(
+                            value: 0,
+                            items: [Icon(Icons.outlined_flag), Icon(Icons.outlined_flag), Icon(Icons.outlined_flag)],
+                            onChanged: (value)=> {},
+                            width: 80,
+                          ),
+                          Expanded(child: CustomTextField(
+                            hint: "Teléfono",
+                            numeric: true
+                          ))
+                        ]
+                      ),
+                    ],
+                  )
+
                 ],
               ),
-              Row(
+              PrimaryButton(
-                children: [
+                onPressed: ()=>{navigationContract.goTo(AppRoutes.dashboardHome)},
-                  Icon(
+                text: "Aceptar",
-                    securityChecks['capital']!
+                color: theme.getColorFor(ThemeCode.buttonPrimary)
-                        ? Icons.check
-                        : Icons.cancel_outlined,
-                    color: securityChecks['capital']!
-                        ? theme.getColorFor(ThemeCode.buttonPrimary)
-                        : theme.getColorFor(ThemeCode.buttonSecondary),
-                  ),
-                  const SizedBox(width: 8),
-                  const Text('Una mayúscula'),
-                ],
               ),
-              Row(
+              const Spacer(),
-                children: [
-                  Icon(
-                    securityChecks['number']!
-                        ? Icons.check
-                        : Icons.cancel_outlined,
-                    color: securityChecks['number']!
-                        ? theme.getColorFor(ThemeCode.buttonPrimary)
-                        : theme.getColorFor(ThemeCode.buttonSecondary),
-                  ),
-                  const SizedBox(width: 8),
-                  const Text('Un número'),
-                ],
-              ),
-              Row(
-                children: [
-                  Icon(
-                    securityChecks['special']!
-                        ? Icons.check
-                        : Icons.cancel_outlined,
-                    color: securityChecks['special']!
-                        ? theme.getColorFor(ThemeCode.buttonPrimary)
-                        : theme.getColorFor(ThemeCode.buttonSecondary),
-                  ),
-                  const SizedBox(width: 8),
-                  const Text('Un carácter especial'),
-                ],
-              ),
-              const Spacer(flex: 1),
-              FilledButton(
-                onPressed:
-                    equalPasswords &&
-                        securityChecks.values.every((check) => check)
-                    ? () {}
-                    : null,
-                child: Container(
-                  width: double.infinity,
-                  padding: const EdgeInsets.all(20),
-                  child: const Center(child: Text('Aceptar')),
-                ),
-              ),
-              const Spacer(flex: 4),
             ],
           ),
         ),

modules/auth/lib/src/recover_password/presentation/restore_password_screen.dart

@@ -1,4 +1,4 @@
-import 'package:auth/src/recover_password/presentation/email_sent_screen.dart';
+import 'package:auth/src/recover_password/presentation/sent_screen.dart';
 import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:navigation/navigation.dart';
@@ -14,53 +14,85 @@ class RestorePasswordScreen extends ConsumerWidget {
     final theme = ref.watch(themePortProvider);
 
     return Scaffold(
+      backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
       body: Container(
         margin: EdgeInsets.all(30),
         child: Center(
           child: Column(
-            spacing: 30,
+            spacing: 48,
             children: [
               Spacer(flex: 8),
-              Text(
+              Column(
-                "Recuperar contaseña",
+                spacing: 32,
-                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
-              ),
-              Text(
-                "Introduce tu email para enviarte un enlace de recuperación",
-              ),
-              TextField(
-                decoration: InputDecoration(
-                  labelText: "Correo electrónico",
-                  hintText: "Correo electrónico",
-                  border: OutlineInputBorder(),
-                ),
-              ),
-              Row(
-                spacing: 20,
                 children: [
-                  Expanded(
+                  Text(
-                    child: OutlinedButton(
+                    "Recuperar contaseña",
-                      onPressed: () => {Navigator.pop(context)},
+                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
-                      child: Text("Volver"),
-                    ),
                   ),
-                  Expanded(
+                  Text(
-                    child: FilledButton(
+                    "Introduce tu email para enviarte un enlace de recuperación",
-                      onPressed: () => {
+                    textAlign: TextAlign.center,
-                        Navigator.push(
+                    style: TextStyle(fontSize: 18, letterSpacing: 0),
-                          context,
+                  ),
-                          MaterialPageRoute(
+                ],
-                            builder: (_) => EmailSentScreen(email: ""),
+              ),
-                          ),
+              Column(
-                        ),
+                spacing: 40,
-                      },
+                children: [
-                      style: ButtonStyle(
+                  CustomTextField(
-                        backgroundColor: WidgetStatePropertyAll<Color>(
+                    label: "Correo electrónico",
-                          theme.getColorFor(ThemeCode.buttonSecondary),
+                    hint: "Correo electrónico",
-                        ),
+                  ),
+                  Column(
+                    spacing: 8,
+                    children: [
+                      Align(
+                          alignment: Alignment.bottomLeft,
+                          child: Text(
+                            "Teléfono móvil",
+                            style: TextStyle(fontSize: 14, letterSpacing: 0),
+                          )
                       ),
-                      child: Text("Enviar"),
+                      Row(
-                    ),
+                        spacing: 10,
+                        children: [
+                          CustomDropdown(
+                            value: 0,
+                            items: [Icon(Icons.outlined_flag), Icon(Icons.outlined_flag), Icon(Icons.outlined_flag)],
+                            onChanged: (value)=> {},
+                            width: 80,
+                          ),
+                          Expanded(
+                              child: CustomTextField(
+                                  hint: "Teléfono",
+                                  numeric: true
+                              )
+                          ),
+                        ],
+                      ),
+                    ],
+                  ),
+                  Row(
+                    spacing: 20,
+                    children: [
+                      Expanded( child: SecondaryButton(
+                          onPressed: () => {Navigator.pop(context)},
+                          text: "Volver"
+                      )),
+                      Expanded( child: PrimaryButton(
+                          onPressed: () => {
+                            Navigator.push(
+                              context,
+                              MaterialPageRoute(
+                                builder: (_) => SentScreen(format: "email"),
+                              ),
+                            ),
+                          },
+                          text: "Enviar",
+                          size: 16,
+                          color: theme.getColorFor(ThemeCode.buttonSecondary)
+                      )),
+                    ],
                   ),
                 ],
               ),

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

@@ -0,0 +1,98 @@
+import 'package:auth/src/recover_password/presentation/new_password_screen.dart';
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+class SentScreen extends ConsumerWidget {
+  final String format;
+
+  const SentScreen({
+    super.key,
+    required this.format
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final theme = ref.watch(themePortProvider);
+
+    return Scaffold(
+      backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
+      body: Container(
+        margin: EdgeInsets.all(24),
+        child: Center(
+          child: Column(
+            spacing: 48,
+            children: [
+              Spacer(flex: 8),
+              Text(
+                "Recuperar contraseña",
+                textAlign: TextAlign.center,
+                style: TextStyle(fontWeight: FontWeight.w500, fontSize: 30, letterSpacing: 0),
+              ),
+              Row(
+                spacing: 10,
+                children: [
+                  Spacer(),
+                  Icon(
+                    Icons.check,
+                    color: theme.getColorFor(ThemeCode.buttonPrimary),
+                  ),
+                  Text(
+                    format=="email"
+                      ?"Correo enviado correctamente"
+                      :"SMS enviado correctamente",
+                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+                  ),
+                  Spacer(),
+                ],
+              ),
+              Column(
+                spacing: 16,
+                children: [
+                  Text(
+                    format=="email"
+                      ?"Revisa tu email y haz clic en el enlace para crear una nueva contraseña."
+                      :"Revisa tu móvil y sigue las instrucciones para crear una nueva contraseña.",
+                    textAlign: TextAlign.center,
+                    style: TextStyle(fontSize: 18, letterSpacing: 0),
+                  ),
+                  Text(
+                    format=="email"
+                    ?"Si no recibes el correo en unos minutos, revisa tu carpeta de spam o pulsa \"Reenviar correo\"."
+                    :"Si no recibes el SMS en unos minutos, asegúrate de tener cobertura o pulsa \"Reenviar SMS \".",
+                    textAlign: TextAlign.center,
+                    style: TextStyle(fontSize: 14, letterSpacing: 0),
+                  ),
+                ],
+              ),
+              Row(
+                spacing: 10,
+                children: [
+                  Expanded( child: SecondaryButton(
+                    onPressed: () => {},
+                    text: format=="email"
+                      ?"Reenviar correo"
+                      :"Reenviar SMS"
+                  )),
+                  Expanded(
+                    child: PrimaryButton(
+                      onPressed: ()=>Navigator.push(
+                        context,
+                        MaterialPageRoute(
+                          builder: (_) => NewPasswordScreen(),
+                        ),
+                      ),
+                      text: "Continuar",
+                      color: theme.getColorFor(ThemeCode.buttonSecondary)
+                    ),
+                  ),
+                ],
+              ),
+              Spacer(flex: 10),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

modules/auth/lib/src/sign_up/account_created_screen.dart

@@ -1,10 +1,17 @@
-import 'package:auth/src/device_sign_up/add_kid_screen.dart';
 import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:navigation/navigation.dart';
 
 class AccountCreatedScreen extends ConsumerWidget {
-  const AccountCreatedScreen({super.key});
+  final bool kidAccount;
+  final NavigationContract navigationContract;
+
+  const AccountCreatedScreen({
+    super.key,
+    required this.kidAccount,
+    required this.navigationContract,
+  });
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -12,6 +19,8 @@ class AccountCreatedScreen extends ConsumerWidget {
 
     final email = "usuario@example.com";
     final fullName = "Carlos Pérez Cruz";
+    final model = "SaveWatch Plus 2";
+    final id = "1106652524";
 
     return Scaffold(
       backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
@@ -24,7 +33,7 @@ class AccountCreatedScreen extends ConsumerWidget {
               Spacer(flex: 10),
               Icon(
                 Icons.check,
-                color: theme.getColorFor(ThemeCode.backgroundPrimary),
+                color: theme.getColorFor(ThemeCode.buttonPrimary),
                 size: 50,
               ),
               Text(
@@ -32,6 +41,7 @@ class AccountCreatedScreen extends ConsumerWidget {
                 style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
               ),
               Text.rich(
+                textAlign: TextAlign.center,
                 TextSpan(
                   text: "Has creado la cuenta para:\n",
                   children: [
@@ -42,7 +52,8 @@ class AccountCreatedScreen extends ConsumerWidget {
                   ],
                 ),
               ),
-              Text.rich(
+              if (!kidAccount) Text.rich(
+                textAlign: TextAlign.center,
                 TextSpan(
                   text: "Hemos enviado un email de verificación a:\n",
                   children: [
@@ -53,17 +64,21 @@ class AccountCreatedScreen extends ConsumerWidget {
                   ],
                 ),
               ),
+              if (kidAccount) Text("Reloj: $model\nID del reloj: $id"),
               Text(
                 "Crea la cuenta de tu peque e ingresa su \nprimera paga para utilizarla con su reloj",
+                textAlign: TextAlign.center,
               ),
-              FilledButton(
+              PrimaryButton(
                 onPressed: () => {
-                  Navigator.pushReplacement(
+                  if (kidAccount){
-                    context,
+                    navigationContract.goTo(AppRoutes.dashboardHome)
-                    MaterialPageRoute(builder: (_) => AddKidScreen()),
+                  } else {
-                  ),
+                    navigationContract.pushTo(AppRoutes.deviceSignup)
+                  }
                 },
-                child: Text("Continuar"),
+                text: "Continuar",
+                color: theme.getColorFor(ThemeCode.buttonPrimary)
               ),
               Spacer(flex: 8),
             ],

modules/auth/lib/src/sign_up/signup_address_screen.dart

@@ -1,46 +1,102 @@
+ import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 
-class SignupAddressScreen extends StatelessWidget {
+class SignupAddressScreen extends ConsumerStatefulWidget {
   const SignupAddressScreen({super.key});
 
+  @override
+  ConsumerState<SignupAddressScreen> createState() => SignupAddressScreenState();
+
+}
+
+class SignupAddressScreenState extends ConsumerState<SignupAddressScreen>{
+
+  late String country;
+  late int relation;
+
+  @override
+  void initState() {
+    relation = 0;
+    super.initState();
+  }
+
   @override
   Widget build(BuildContext context) {
     return Column(
-      spacing: 30,
+      spacing: 24,
       children: [
-        Text("Domicilio"),
+        Column(
-        Text(
+          spacing: 8,
-          "Tu dirección",
+          children: [
-          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
+            Align(alignment: Alignment.bottomLeft, child: Text(
+              "Fecha de nacimiento",
+              style: TextStyle(fontSize: 14, letterSpacing: 0),
+            )),
+            Row(
+                spacing: 8,
+                children: [
+                  Expanded(child: CustomTextField(
+                    //label: "Fecha de nacimiento",
+                    hint: "DD",
+                    length: 2,
+                    numeric: true,
+                  )),
+                  Expanded(child: CustomTextField(
+                    hint: "MM",
+                    length: 2,
+                    numeric: true,
+                  )),
+                  Expanded(child: CustomTextField(
+                    hint: "AAAA",
+                    length: 4,
+                    numeric: true,
+                  )),
+                ]
+            ),
+          ],
         ),
-        Text(
+        Column(
-          "Tu dirección nos ayuda a verificar y mantener la seguridad de tu cuenta",
+          spacing: 8,
+          children: [
+            Align(
+              alignment: Alignment.bottomLeft,
+              child: Text(
+                "¿Qué familiar eres?",
+                style: TextStyle(fontSize: 14, letterSpacing: 0),
+              ),
+            ),
+            CustomDropdown(
+              items: [Text("Padre"), Text("Madre"), Text("Tutor")],
+              hint: "¿Qué familiar eres?",
+              onChanged: (value)=>setState(() {
+                relation = value;
+              })
+            ),
+          ],
         ),
-        TextField(
+        CustomTextField(label: "Dirección completa", hint: "Calle Gran Vía 30 6º, 28013"),
-          decoration: InputDecoration(
+        CustomTextField(label: "Ciudad", hint: "Ciudad"),
-            hintText: "Dirección completa",
+        Column(
-            border: OutlineInputBorder(),
+          spacing: 8,
-          ),
+          children: [
-        ),
+            Align(
-        TextField(
+              alignment: Alignment.bottomLeft,
-          decoration: InputDecoration(
+              child: Text(
-            hintText: "Ciudad",
+                "País",
-            border: OutlineInputBorder(),
+                style: TextStyle(fontSize: 14, letterSpacing: 0),
-          ),
+              ),
-        ),
+            ),
-        DropdownMenu(
+            CustomDropdown(
-          dropdownMenuEntries: List<DropdownMenuEntry>.generate(3, (int index) {
+              items: [Text("España"), Text("Francia"), Text("Portugal")],
-            return DropdownMenuEntry(value: "España", label: "España");
+              hint: "País",
-          }),
+              onChanged: (value)=>setState(() {
-          hintText: "País",
+                country = value;
-          width: double.infinity,
+              })
-        ),
+            ),
-        TextField(
+          ],
-          decoration: InputDecoration(
-            hintText: "Nacionalidad",
-            border: OutlineInputBorder(),
-          ),
         ),
+        CustomTextField(label: "Nacionalidad", hint: "España"),
       ],
     );
   }

modules/auth/lib/src/sign_up/signup_builder.dart

@@ -0,0 +1,18 @@
+import 'package:auth/src/sign_up/signup_screen.dart';
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:get_it/get_it.dart';
+import 'package:navigation/navigation.dart';
+
+class SignupBuilder {
+  const SignupBuilder();
+
+  Page<void> buildPage(BuildContext context, GoRouterState state) {
+    final NavigationContract navigationContract = GetIt.I<NavigationContract>();
+
+    return MaterialPage<void>(
+      key: state.pageKey,
+      child: SignupScreen(navigationContract: navigationContract),
+    );
+  }
+}

modules/auth/lib/src/sign_up/signup_personal_screen.dart

@@ -1,5 +1,5 @@
+import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 
 class SignupPersonalScreen extends StatelessWidget{
   const SignupPersonalScreen({super.key});
@@ -7,41 +7,28 @@ class SignupPersonalScreen extends StatelessWidget{
   @override
   Widget build(BuildContext context) {
     return Column(
-      spacing: 30,
+      spacing: 24,
       children: [
-        Text("Datos personales"),
+        CustomTextField(label: "Nombre", hint: "Nombre"),
-        Text("Identifícate", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30)),
+        CustomTextField(label: "Apellidos", hint: "Apellidos"),
-        Text("Nos aseguraremos de que la cuenta está a nombre del adulto responsable"),
+        CustomTextField(label: "DNI", hint: "DNI"),
-        TextField(decoration: InputDecoration(labelText: "Nombre", hintText: "Nombre", border: OutlineInputBorder())),
-        TextField(decoration: InputDecoration(labelText: "Apellidos", hintText: "Apellidos", border: OutlineInputBorder())),
         Row(
+          spacing: 8,
           children: [
-            Expanded( child: TextField(
+            /*CustomDropdown(
-              decoration: InputDecoration(label: Text("Fecha de nacimiento"), hintText: "DD", border: OutlineInputBorder()),
+              value: 0,
-              keyboardType: TextInputType.number,
+              items: [Icon(Icons.outlined_flag), Icon(Icons.outlined_flag), Icon(Icons.outlined_flag)],
-              inputFormatters: [FilteringTextInputFormatter.digitsOnly],
+              onChanged: (value)=> {},
-            )),
+              width: 80,
-            Expanded( child: TextField(
+            ),*/
-              decoration: InputDecoration(hintText: "MM", border: OutlineInputBorder()),
+            Expanded(child: CustomTextField(
-              keyboardType: TextInputType.number,
+              label: "Teléfono móvil",
-              inputFormatters: [FilteringTextInputFormatter.digitsOnly],
+              hint: "123456789",
-            )),
+              numeric: true
-            Expanded( child: TextField(
+            ))
-              decoration: InputDecoration(hintText: "AAAA", border: OutlineInputBorder()),
+          ]
-              keyboardType: TextInputType.number,
-              inputFormatters: [FilteringTextInputFormatter.digitsOnly],
-            )),
-          ],
-        ),
-        DropdownMenu(
-          width: double.infinity,
-          label: Text("¿Qué familiar eres?"),
-          dropdownMenuEntries: [
-            DropdownMenuEntry(label: "Padre", value: "Padre"),
-            DropdownMenuEntry(label: "Madre", value: "Madre"),
-            DropdownMenuEntry(label: "Tutor", value: "Tutor"),
-          ],
         ),
+        CustomTextField(label: "Correo electrónico", hint: "Correo electrónico"),
       ],
     );
   }

modules/auth/lib/src/sign_up/signup_screen.dart

@@ -1,13 +1,22 @@
-import 'package:auth/src/sign_up/account_created_screen.dart';
+import 'package:auth/src/widgets/layouts/form_step_layout.dart';
 import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:auth/src/sign_up/signup_address_screen.dart';
 import 'package:auth/src/sign_up/signup_personal_screen.dart';
 import 'package:auth/src/sign_up/signup_user_screen.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:get_it/get_it.dart';
+import 'package:navigation/navigation.dart';
+
+import 'account_created_screen.dart';
 
 class SignupScreen extends ConsumerStatefulWidget {
-  const SignupScreen({super.key});
+  NavigationContract navigationContract;
+
+  SignupScreen({
+    super.key,
+    required this.navigationContract
+  });
 
   @override
   ConsumerState<SignupScreen> createState() => _SignupScreenState();
@@ -15,133 +24,92 @@ class SignupScreen extends ConsumerStatefulWidget {
 
 class _SignupScreenState extends ConsumerState<SignupScreen> {
   int currentStep = 0;
+  bool acceptTerms = false;
 
   @override
   Widget build(BuildContext context) {
-    final theme = ref.watch(themePortProvider);
+    return getSteps()[currentStep];
-
-    return Scaffold(
-      body: Center(
-        child: Container(
-          color: theme.getColorFor(ThemeCode.backgroundPrimary),
-          padding: const EdgeInsets.all(20),
-          child: SizedBox(
-            child: Stepper(
-              type: StepperType.horizontal,
-              currentStep: currentStep,
-              steps: getSteps(),
-              controlsBuilder:
-                  (BuildContext context, ControlsDetails controls) {
-                    final canGoBack = currentStep > 0;
-
-                    return Row(
-                      children: <Widget>[
-                        Expanded(
-                          child: OutlinedButton(
-                            onPressed: canGoBack ? controls.onStepCancel : null,
-                            child: const Text('Atrás'),
-                          ),
-                        ),
-                        Expanded(
-                          child: FilledButton(
-                            style: ButtonStyle(
-                              backgroundColor: WidgetStatePropertyAll<Color>(
-                                theme.getColorFor(ThemeCode.buttonSecondary),
-                              ),
-                            ),
-                            onPressed: controls.onStepContinue,
-                            child: const Text('Siguiente'),
-                          ),
-                        ),
-                      ],
-                    );
-                  },
-              onStepCancel: () {
-                if (currentStep > 0) {
-                  setState(() {
-                    currentStep -= 1;
-                  });
-                }
-              },
-              onStepContinue: () {
-                final isLastStep = currentStep == getSteps().length - 1;
-
-                if (isLastStep) {
-                  Navigator.pushReplacement(
-                    context,
-                    MaterialPageRoute(
-                      builder: (_) => const AccountCreatedScreen(),
-                    ),
-                  );
-                } else {
-                  setState(() {
-                    currentStep += 1;
-                  });
-                }
-              },
-            ),
-          ),
-        ),
-      ),
-    );
   }
 
-  List<Step> getSteps() {
+  List<Widget> getSteps() {
-    return <Step>[
+    final theme = ref.watch(themePortProvider);
-      Step(
+
-        state: currentStep > 0 ? StepState.complete : StepState.indexed,
+    return [
-        isActive: currentStep >= 0,
+      FormStepLayout(
-        stepStyle: currentStep >= 0
+        title: "Crea tu usuario",
-            ? const StepStyle(
+        subtitle: "Con tu email y tu número podremos mantenerte siempre informado",
-                connectorThickness: 0,
+          supertitle: "Usuario y contacto",
-                color: Color(0xFF329e95),
+        currentStep: 1,
-                indexStyle: TextStyle(color: Colors.transparent),
+        numSteps: 3,
-              )
+        body: [SignupPersonalScreen()],
-            : const StepStyle(
+        footer: [
-                connectorThickness: 0,
+          Row(
-                color: Colors.transparent,
+            spacing: 16,
-                boxShadow: BoxShadow(spreadRadius: 5),
+            children: [
-                indexStyle: TextStyle(color: Colors.transparent),
+              Expanded(child: SecondaryButton(
-              ),
+                onPressed: ()=>{},
-        title: const Text(""),
+                text: "Atrás",
-        content: const SignupPersonalScreen(),
+                size: 16,
+              )),
+              Expanded(child: PrimaryButton(
+                onPressed: ()=>{setState(() {
+                  currentStep++;
+                })},
+                text: "Siguiente",
+                size: 16,
+                color: theme.getColorFor(ThemeCode.buttonSecondary)
+              ))
+            ]
+          ),
+          CheckboxListTile(
+            value: acceptTerms,
+            onChanged: (_) => setState(() {
+              acceptTerms = !acceptTerms;
+            }),
+            title: Text(
+              "Acepto los términos y condiciones",
+              style: TextStyle(fontSize: 16, letterSpacing: 0),
+            ),
+            checkboxScaleFactor: 1.5,
+            contentPadding: EdgeInsets.zero,
+            activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
+            controlAffinity: ListTileControlAffinity.leading,
+          )
+        ],
+        nextStep: ()=>{setState(() {
+          currentStep++;
+        })},
+        previousStep: ()=>{},
       ),
-      Step(
+      FormStepLayout(
-        state: currentStep > 1 ? StepState.complete : StepState.indexed,
+        title: "Tu dirección",
-        isActive: currentStep >= 1,
+        subtitle: "Tu dirección nos ayudará a verificar y mantener la seguridad de tu cuenta",
-        stepStyle: currentStep >= 1
+        supertitle: "Domicilio",
-            ? const StepStyle(
+        currentStep: 2,
-                connectorThickness: 0,
+        numSteps: 3,
-                color: Color(0xFF329e95),
+        body: [SignupAddressScreen()],
-                indexStyle: TextStyle(color: Colors.transparent),
+        nextStep: ()=>{setState(() {
-              )
+          currentStep++;
-            : const StepStyle(
+        })},
-                connectorThickness: 0,
+        previousStep: ()=>{setState(() {
-                color: Colors.white,
+          currentStep--;
-                boxShadow: BoxShadow(spreadRadius: 1),
+        })},
-                indexStyle: TextStyle(color: Colors.transparent),
-              ),
-        title: const Text(""),
-        content: const SignupAddressScreen(),
       ),
-      Step(
+      FormStepLayout(
-        state: currentStep > 2 ? StepState.complete : StepState.indexed,
+        title: "Identifícate",
-        isActive: currentStep >= 2,
+        subtitle: "Contraseña mínima de 8 caracteres, con una mayúscula, un número y un carácter especial",
-        stepStyle: currentStep >= 2
+        supertitle: "Usuario y contacto",
-            ? const StepStyle(
+        currentStep: 3,
-                connectorThickness: 0,
+        numSteps: 3,
-                color: Color(0xFF329e95),
+        body: [SignupUserScreen()],
-                indexStyle: TextStyle(color: Colors.transparent),
+        nextStep: ()=>{setState(() {
-              )
+          currentStep++;
-            : const StepStyle(
+        })},
-                connectorThickness: 0,
+        previousStep: ()=>{setState(() {
-                color: Colors.white,
+          currentStep--;
-                boxShadow: BoxShadow(spreadRadius: 1),
+        })},
-                indexStyle: TextStyle(color: Colors.transparent),
-              ),
-        title: const Text(""),
-        content: const SignupUserScreen(),
       ),
+      AccountCreatedScreen(navigationContract: widget.navigationContract, kidAccount: false)
     ];
   }
 }

modules/auth/lib/src/sign_up/signup_user_screen.dart

@@ -1,3 +1,4 @@
+import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
 
 class SignupUserScreen extends StatefulWidget{
@@ -13,62 +14,17 @@ class SignupUserScreenState extends State<SignupUserScreen>{
   @override
   Widget build(BuildContext context) {
     return Column(
-      spacing: 30,
+      spacing: 24,
       children: [
-        Text("Usuario y contacto"),
+        CustomTextField(
-        Text("Crea tu usuario", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30)),
+          showPassword: passwordVisible,
-        Text("Con tu email y tu número podremos mantenerte siempre informado"),
+          label: "Contraseña",
-        TextField(decoration: InputDecoration(labelText: "Correo electrónico", hintText: "Correo electrónico", border: OutlineInputBorder())),
+          hint: "********"
-        Row(children: [
-          DropdownMenu(
-              initialSelection: "es",
-              dropdownMenuEntries: List<DropdownMenuEntry>.generate(3, (int index){
-                return DropdownMenuEntry(labelWidget: Icon(Icons.outlined_flag), label: "es", value: "es");
-              })
-          ),
-          Expanded(child: TextField(
-              decoration: InputDecoration(labelText: "Teléfono móvil", hintText: "Teléfono", border: OutlineInputBorder()),
-              keyboardType: TextInputType.number)
-          )
-        ]),
-        TextField(
-            obscureText: passwordVisible,
-            enableSuggestions: false,
-            autocorrect: false,
-            decoration: InputDecoration(
-              labelText: "Contraseña",
-              hintText: "********",
-              border: OutlineInputBorder(),
-              suffixIcon: IconButton(
-                icon: Icon(passwordVisible
-                    ? Icons.visibility
-                    : Icons.visibility_off),
-                onPressed: () {
-                  setState(() {
-                    passwordVisible = !passwordVisible;
-                  });
-                },
-              ),
-            )
         ),
-        TextField(obscureText: passwordVisible,
+        CustomTextField(
-            enableSuggestions: false,
+          showPassword: passwordVisible,
-            autocorrect: false,
+          label: "Repetir contraseña",
-            decoration: InputDecoration(
+          hint: "*******"
-              labelText: "Repetir contraseña",
-              hintText: "*******",
-              border: OutlineInputBorder(),
-              suffixIcon: IconButton(
-                icon: Icon(passwordVisible
-                    ? Icons.visibility
-                    : Icons.visibility_off),
-                onPressed: () {
-                  setState(() {
-                    passwordVisible = !passwordVisible;
-                  });
-                },
-              ),
-            )
         ),
       ],
     );

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

@@ -0,0 +1,94 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+class FormStepLayout extends ConsumerWidget{
+  final int currentStep;
+  final int numSteps;
+  final String? supertitle;
+  final String title;
+  final String? subtitle;
+  final List<Widget> body;
+  final List<Widget>? footer;
+  final VoidCallback nextStep;
+  final VoidCallback previousStep;
+
+  const FormStepLayout({
+    super.key,
+    required this.title,
+    this.subtitle,
+    this.supertitle,
+    required this.currentStep,
+    required this.numSteps,
+    required this.body,
+    this.footer,
+    required this.nextStep,
+    required this.previousStep
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final theme = ref.watch(themePortProvider);
+
+    return Scaffold(
+      backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
+      body: SafeArea(child: SingleChildScrollView(child: Container(
+        color: theme.getColorFor(ThemeCode.backgroundPrimary),
+        padding: EdgeInsets.only(top: 40, left: 24, right: 24),
+        child: Column(
+          spacing: 32,
+          children: [
+            Column(
+              spacing: 24,
+              children: [
+                StepIndicator(
+                  total: numSteps,
+                  current: currentStep,
+                  color: theme.getColorFor(ThemeCode.buttonPrimary)
+                ),
+                if (supertitle!=null) Text(supertitle!, textAlign: TextAlign.center, style: TextStyle(fontSize: 18)),
+                Text(title, textAlign: TextAlign.center, style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold)),
+                if (subtitle!=null) Text(subtitle!, textAlign: TextAlign.center, style: TextStyle(fontSize: 18)),
+              ]
+            ),
+            Column(
+              spacing: 40,
+              children: [
+                ...body,
+                if (footer==null) navigationButtons(currentStep, numSteps, nextStep, previousStep, theme),
+                ...(footer?? [])
+              ]
+            )
+          ]
+        )
+      )))
+    );
+  }
+
+  Widget navigationButtons(int currentStep, int numSteps, VoidCallback nextStep, VoidCallback previousStep, ThemePort theme) {
+    if (currentStep == numSteps){
+      return PrimaryButton(
+        onPressed: nextStep,
+        text: "Continuar",
+        color: theme.getColorFor(ThemeCode.buttonPrimary)
+      );
+    } else {
+      return Row(
+        spacing: 16,
+        children: [
+          Expanded(child: SecondaryButton(
+            onPressed: previousStep,
+            text: "Atrás",
+            size: 16,
+          )),
+          Expanded(child: PrimaryButton(
+            onPressed: nextStep,
+            text: "Siguiente",
+            size: 16,
+            color: theme.getColorFor(ThemeCode.buttonSecondary)
+          ))
+        ]
+      );
+    }
+  }
+}

modules/auth/pubspec.yaml

@@ -27,12 +27,16 @@ dependencies:
   get_it: ^9.0.5
   go_router: ^17.0.0
   flutter_riverpod: ^3.0.3
-
+  freezed_annotation: ^3.1.0
+  freezed: ^3.2.3
+  
 dev_dependencies:
   flutter_test:
     sdk: flutter
   flutter_lints: ^5.0.0
-
+  riverpod_generator: ^3.0.3
+  build_runner: ^2.7.1
+  riverpod_lint: ^3.0.3
 # For information on the generic Dart part of this file, see the
 # following page: https://dart.dev/tools/pub/pubspec
 

modules/home/lib/src/presentation/deposit_screen.dart

@@ -1,6 +1,5 @@
 import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import 'package:home/src/presentation/wallet_management_layout.dart';
 import 'package:sf_shared/sf_shared.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
@@ -32,13 +31,10 @@ class _DepositScreenState extends ConsumerState<DepositScreen> {
         padding: const EdgeInsets.all(10),
         child: Column(
           children: [
-            FilledButton(
+            PrimaryButton(
-              onPressed: () {},
+              onPressed: ()=>{},
-              child: Container(
+              text: "Añadir dinero",
-                width: double.infinity,
+              color: theme.getColorFor(ThemeCode.buttonPrimary)
-                padding: const EdgeInsets.all(20),
-                child: const Center(child: Text('Añadir dinero')),
-              ),
             ),
             TextButton(
               onPressed: () => Navigator.pop(context),
@@ -61,14 +57,10 @@ class _DepositScreenState extends ConsumerState<DepositScreen> {
                 'Ingresar dinero en el wallet',
                 style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
               ),
-              TextField(
+              CustomTextField(
-                decoration: const InputDecoration(
+                numeric: true,
-                  labelText: 'Cantidad',
+                label: "Cantidad",
-                  hintText: '0€',
+                hint: "0€",
-                  border: OutlineInputBorder(),
-                ),
-                keyboardType: TextInputType.number,
-                inputFormatters: [FilteringTextInputFormatter.digitsOnly],
               ),
               const Align(
                 alignment: Alignment.topLeft,
@@ -93,6 +85,7 @@ class _DepositScreenState extends ConsumerState<DepositScreen> {
               ),
               const Text('Este dato aparecerá en el reloj del peque'),
               CheckboxListTile(
+                contentPadding: EdgeInsets.zero,
                 title: const Text('Paga semanal'),
                 controlAffinity: ListTileControlAffinity.leading,
                 value: reason == 'weekly',
@@ -104,6 +97,7 @@ class _DepositScreenState extends ConsumerState<DepositScreen> {
                 activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
               ),
               CheckboxListTile(
+                contentPadding: EdgeInsets.zero,
                 title: const Text('Objetivo semanal cumplido'),
                 controlAffinity: ListTileControlAffinity.leading,
                 value: reason == 'goal',
@@ -115,6 +109,7 @@ class _DepositScreenState extends ConsumerState<DepositScreen> {
                 activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
               ),
               CheckboxListTile(
+                contentPadding: EdgeInsets.zero,
                 title: const Text('Gastos extraordinarios'),
                 controlAffinity: ListTileControlAffinity.leading,
                 value: reason == 'extraordinary',
@@ -126,6 +121,7 @@ class _DepositScreenState extends ConsumerState<DepositScreen> {
                 activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
               ),
               CheckboxListTile(
+                contentPadding: EdgeInsets.zero,
                 title: const Text('Otro'),
                 controlAffinity: ListTileControlAffinity.leading,
                 value: reason == 'other',
@@ -136,16 +132,11 @@ class _DepositScreenState extends ConsumerState<DepositScreen> {
                 },
                 activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
               ),
-              TextField(
+              CustomTextField(
-                minLines: 3,
+                lines: 3,
-                maxLines: 3,
+                length: 150,
-                maxLength: 150,
+                label: "Escribir mensaje a ${widget.kid.name} del motivo del ingreso",
-                decoration: InputDecoration(
+                hint: "Escribe tu mensaje",
-                  labelText:
-                      'Escribir mensaje a ${widget.kid.name} del motivo del ingreso',
-                  hintText: 'Escribe tu mensaje',
-                  border: const OutlineInputBorder(),
-                ),
               ),
               const Align(
                 alignment: Alignment.topLeft,
@@ -170,6 +161,7 @@ class _DepositScreenState extends ConsumerState<DepositScreen> {
               ),
               const Text('Este dato aparecerá en el reloj del peque'),
               CheckboxListTile(
+                contentPadding: EdgeInsets.zero,
                 title: const Text('Ahora'),
                 controlAffinity: ListTileControlAffinity.leading,
                 value: !program,
@@ -181,6 +173,7 @@ class _DepositScreenState extends ConsumerState<DepositScreen> {
                 activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
               ),
               CheckboxListTile(
+                contentPadding: EdgeInsets.zero,
                 title: const Text('Programar'),
                 controlAffinity: ListTileControlAffinity.leading,
                 value: program,
@@ -191,17 +184,11 @@ class _DepositScreenState extends ConsumerState<DepositScreen> {
                 },
                 activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
               ),
-              if (program)
+              if (program) CustomTextField(),
-                const TextField(
-                  decoration: InputDecoration(
-                    labelText: 'Fecha / hora (placeholder)',
-                    border: OutlineInputBorder(),
-                  ),
-                ),
             ],
           ),
         ),
       ],
     );
   }
-}
+}

modules/home/lib/src/presentation/extract_screen.dart

@@ -0,0 +1,111 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:home/src/presentation/wallet_management_layout.dart';
+import 'package:sf_shared/sf_shared.dart';
+
+class ExtractScreen extends ConsumerWidget{
+  final Kid kid;
+
+  @override
+  ExtractScreen({
+    super.key,
+    required this.kid,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final theme = ref.watch(themePortProvider);
+
+    return WalletManagementLayout(
+      kid: kid,
+      children: [Container(
+        padding: EdgeInsets.all(24),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.all(Radius.circular(24)),
+          color: theme.getColorFor(ThemeCode.backgroundPrimary)
+        ),
+        child: Column(
+          spacing: 24,
+          children: [
+            Column(
+              spacing: 8,
+              children: [
+                Align(alignment: Alignment.topLeft, child: Text(
+                    "Retirar dinero de la cuenta",
+                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500, letterSpacing: 0)
+                )),
+                Align(alignment: Alignment.topLeft, child: Text(
+                    "Este dato aparecerá en el reloj del peque",
+                    style: TextStyle(fontSize: 14, letterSpacing: 0)
+                ))
+              ],
+            ),
+            CustomTextField(
+              label: "Selecciona la cantidad de dinero",
+              hint: "2€",
+              numeric: true,
+            ),
+            Column(
+              spacing: 8,
+              children: [
+                Align(alignment: Alignment.topLeft, child: Text(
+                    "Este es el mensaje fijado por defecto:",
+                    style: TextStyle(fontSize: 16, letterSpacing: 0)
+                )),
+                Align(alignment: Alignment.topLeft, child: Text(
+                    "\"Hemos quitado el dinero del reloj, ya no puedes pagar con él\"",
+                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500, letterSpacing: 0)
+                ))
+              ],
+            ),
+            Column(
+              spacing: 8,
+              children: [
+                Align(alignment: Alignment.topLeft, child: Text(
+                    "Escribir mensaje a ${kid.name} del motivo de la retirada de su dinero",
+                    style: TextStyle(fontSize: 14, letterSpacing: 0)
+                )),
+                CustomTextField(
+                  hint: "Escribe tu mensaje",
+                  lines: 4,
+                  length: 150,
+                ),
+                Row(
+                  spacing: 4,
+                  children: [
+                    Icon(Icons.info_outline, size: 16),
+                    Text("Máximo 150 caracteres", style: TextStyle(fontSize: 14, letterSpacing: 0))
+                  ],
+                )
+              ],
+            )
+          ],
+        ),
+      )],
+      footer: Container(
+        padding: EdgeInsets.all(24),
+        decoration: BoxDecoration(
+          color: theme.getColorFor(ThemeCode.backgroundPrimary),
+          borderRadius: BorderRadius.only(topRight: Radius.circular(24), topLeft: Radius.circular(24))
+        ),
+        child: Column(
+          spacing: 16,
+          children: [
+            PrimaryButton(
+              onPressed: ()=>{Navigator.pop(context)},
+              text: "Enviar mensaje y bloquear",
+              color: theme.getColorFor(ThemeCode.buttonPrimary),
+            ),
+            TextButton(
+              style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
+              onPressed: ()=>Navigator.pop(context),
+              child: Text("Cancelar", style: TextStyle(fontSize: 18))
+            )
+          ],
+        ),
+      )
+    );
+  }
+}

modules/home/lib/src/presentation/goals_screen.dart

@@ -0,0 +1,786 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:home/src/presentation/wallet_management_layout.dart';
+import 'package:sf_shared/sf_shared.dart';
+
+class GoalsScreen extends ConsumerStatefulWidget{
+  final Kid kid;
+  List<Task> tasks = [Task(rewardAmount: 10, subtasks: [
+    Subtask(name: "Hacer la cama", completed: false),
+    Subtask(name: "Terminar los deberes", completed: true),
+    Subtask(name: "Recoger la mesa", completed: true),
+    Subtask(name: "Lavarse los dientes", completed: false)
+  ]), Task(rewardAmount: 10)];
+  final List<SavingsGoal> savingsGoals;
+
+  @override
+  GoalsScreen({
+    super.key,
+    required this.kid,
+    this.savingsGoals = const [
+      SavingsGoal(name: "Cumpleaños de Emma", goal: 24, saved: 12.09),
+      SavingsGoal(name: "Protecciones nuevas de patines", goal: 10, saved: 0)
+    ]
+  });
+
+  @override
+  ConsumerState<GoalsScreen> createState() => GoalsScreenState();
+}
+
+class GoalsScreenState extends ConsumerState<GoalsScreen>{
+  late bool fullPlan;
+
+  @override
+  void initState() {
+    super.initState();
+    fullPlan = true;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ref.watch(themePortProvider);
+
+    return WalletManagementLayout(
+      kid: widget.kid,
+      children: [
+        Container(
+          padding: EdgeInsets.all(24),
+          decoration: BoxDecoration(
+            color: theme.getColorFor(ThemeCode.backgroundPrimary),
+            borderRadius: BorderRadius.all(Radius.circular(24))
+          ),
+          child: Column(
+            spacing: 24,
+            children: [
+              Row(
+                spacing: 8,
+                children: [
+                  Text("Metas", style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500, letterSpacing: 0)),
+                  Icon(Icons.workspace_premium),
+                  Spacer(),
+                  Text("Sólo con Plan Completo", style: TextStyle(fontSize: 14, letterSpacing: 0))
+                ],
+              ),
+              Text(
+                "Enséñale a ahorrar y refuerza la importancia de no malgastar su dinero",
+                style: TextStyle(fontSize: 14, letterSpacing: 0),
+              ),
+            ],
+          ),
+        ),
+        SavingsBlock(fullPlan: fullPlan, savings: widget.savingsGoals),
+        TasksBlock(fullPlan: fullPlan, tasks: widget.tasks),
+      ],
+      footer: Container()
+    );
+  }
+}
+
+class SavingsBlock extends ConsumerStatefulWidget {
+  final bool fullPlan;
+  final List savings;
+
+  @override
+  const SavingsBlock({
+    super.key,
+    required this.fullPlan,
+    required this.savings
+  });
+
+  @override
+  ConsumerState<SavingsBlock> createState() => SavingsBlockState();
+}
+
+class SavingsBlockState extends ConsumerState<SavingsBlock>{
+  late List<bool> showEdit;
+  late List<bool> showAdd;
+  late bool showNew;
+
+  @override
+  void initState() {
+    super.initState();
+    showEdit = widget.savings.map((_)=>false).toList();
+    showAdd = widget.savings.map((_)=>false).toList();
+    showNew = false;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ref.watch(themePortProvider);
+
+    var emptyBlock = ({fullPlan}) => Container(
+      padding: EdgeInsets.all(24),
+      decoration: BoxDecoration(
+        color: theme.getColorFor(ThemeCode.backgroundPrimary),
+        borderRadius: BorderRadius.all(Radius.circular(24)),
+        border: BoxBorder.all(color: theme.getColorFor(ThemeCode.textPrimary))
+      ),
+      child: Stack(
+        children: [
+          Align(alignment: Alignment.topRight, child: SvgPicture.asset("assets/images/ui/ahorros.svg")),
+          Column(
+            spacing: 24,
+            children: [
+              Align(alignment: Alignment.topLeft, child: Text(
+                "Ahorros",
+                style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500, letterSpacing: 0),
+              )),
+              Align(alignment: Alignment.topLeft, child: SizedBox(
+                width: 200,
+                child: Text(
+                  "Enséñale a ahorrar y refuerza la importancia de no malgastar su dinero",
+                  style: TextStyle(fontSize: 14, letterSpacing: 0),
+                ),
+              )),
+              if (fullPlan) Column(
+                spacing: 24,
+                children: [
+                  Align(
+                    alignment: Alignment.topLeft,
+                    child: SecondaryButton(
+                      onPressed: ()=>setState(() {
+                        showNew = true;
+                      }),
+                      text: "Crear objetivo de ahorro",
+                      radius: 8,
+                      height: 44,
+                      size: 14,
+                      width: 230,
+                    ),
+                  ),
+                  Align(
+                    alignment: Alignment.topLeft,
+                    child: TextButton(
+                      onPressed: ()=>{},
+                      style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.zero)),
+                      child: Text(
+                        "Ver estado de ahorros",
+                        style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, letterSpacing: 0)
+                      )
+                    )
+                  )
+                ],
+              ),
+              if (!fullPlan) TextButton(
+                onPressed: ()=>{},
+                child: Row(
+                  spacing: 4,
+                  children: [
+                    Icon(Icons.workspace_premium, size: 16),
+                    Text("Suscribirme al Plan Completo")
+                  ],
+                )
+              )
+            ],
+          )
+        ],
+      )
+    );
+
+    var editBlock = ({create, index}) => Column(
+      spacing: 24,
+      children: [
+        CustomTextField(
+          hint: create? "Ponle un título para reconocerlo" : widget.savings[index].name,
+          label: "Motivo del ahorro",
+          lines: create? 2 : 1,
+        ),
+        CustomTextField(
+          hint: "30€",
+          label: "Seleciona la cantidad a ahorrar",
+          numeric: true,
+        ),
+        CheckboxListTile(
+          value: false,
+          onChanged: (_) => {},
+          checkboxScaleFactor: 2,
+          controlAffinity: ListTileControlAffinity.leading,
+          activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
+          contentPadding: EdgeInsets.zero,
+          title: Text(
+            "Ahorro automático desde su paga",
+            style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500, letterSpacing: 0),
+          ),
+        ),
+        CustomTextField(
+          hint: "2€",
+          label: "Selecciona la cantidad de dinero",
+          numeric: true,
+        ),
+        CheckboxListTile(
+          value: false,
+          onChanged: (_) => {},
+          checkboxScaleFactor: 2,
+          controlAffinity: ListTileControlAffinity.leading,
+          activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
+          contentPadding: EdgeInsets.zero,
+          title: Text(
+            "Mandar automáticamente el dinero al reloj del peque cuando consiga su objetivo",
+            style: TextStyle(fontSize: 16, letterSpacing: 0),
+          ),
+        ),
+        Column(
+          spacing: 10,
+          children: [
+            Text(
+              "Este es el mensaje fijado por defecto que le llegará a su reloj:",
+              style: TextStyle(fontSize: 16, letterSpacing: 0),
+            ),
+            Text(
+              "\"¡Genial, has conseguido ahorrar lo que querías!\"",
+              style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500, letterSpacing: 0),
+            )
+          ],
+        ),
+        Column(
+          spacing: 8,
+          children: [
+            CustomTextField(
+              hint: "Escribe tu mensaje",
+              label: "Escribir otro mensaje diferente:",
+              lines: 4,
+              length: 150,
+            ),
+            Row(
+              spacing: 4,
+              children: [
+                Icon(Icons.info_outline, size: 16,),
+                Text(
+                  "Máximo 150 caracteres",
+                  style: TextStyle(fontSize: 14, letterSpacing: 0),
+                )
+              ],
+            )
+          ],
+        ),
+        Column(
+          spacing: 24,
+          children: [
+            PrimaryButton(
+              onPressed: () => {},
+              text: "Guardar cambios",
+              color: theme.getColorFor(
+                ThemeCode.buttonPrimary)
+            ),
+            TextButton(
+              onPressed: () {
+                if (create){
+                  setState(() {
+                    showNew = false;
+                  });
+                } else {
+                  setState(() {
+                    showEdit[index] = false;
+                  });
+                }
+              },
+              child: Text(
+                "Cancelar",
+                style: TextStyle(fontSize: 16,
+                  fontWeight: FontWeight.w500,
+                  letterSpacing: 0),
+              )
+            )
+          ],
+        )
+      ],
+    );
+
+    if (widget.fullPlan) {
+      if (showNew){
+        return Container(
+          padding: EdgeInsets.fromLTRB(24, 24, 24, 32),
+          decoration: BoxDecoration(
+            color: theme.getColorFor(ThemeCode.backgroundSecondary),
+            border: Border.all(color: theme.getColorFor(ThemeCode.textPrimary)),
+            borderRadius: BorderRadius.all(Radius.circular(24))
+          ),
+          child: Column(
+            spacing: 24,
+            children: [
+              Align(alignment: Alignment.topLeft, child: Text(
+                "Ahorros",
+                style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500, letterSpacing: 0),
+              )),
+              Text(
+                "Enséñale a ahorrar y refuerza la importancia de no malgastar su dinero",
+                style: TextStyle(fontSize: 14, letterSpacing: 0),
+              ),
+              Container(
+                padding: EdgeInsets.all(24),
+                decoration: BoxDecoration(
+                  borderRadius: BorderRadius.all(Radius.circular(24)),
+                  color: theme.getColorFor(ThemeCode.backgroundPrimary)
+                ),
+                child: editBlock(create: true, index: null)
+              )
+            ],
+          ),
+        );
+      } else {
+        if (widget.savings.isNotEmpty) {
+          return Container(
+            padding: EdgeInsets.all(24),
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.all(Radius.circular(24)),
+              color: theme.getColorFor(ThemeCode.backgroundPrimary),
+              //border: BoxBorder.all(color: theme.getColorFor(ThemeCode.textPrimary))
+            ),
+            child: Column(
+              spacing: 24,
+              children: [
+                Align(alignment: Alignment.topLeft,
+                  child: Text(
+                    "Ahorros",
+                    style: TextStyle(fontSize: 20,
+                      fontWeight: FontWeight.w500,
+                      letterSpacing: 0),
+                  )
+                ),
+                ...List<Widget>.generate(widget.savings.length, (int index) =>
+                  Container(
+                    decoration: BoxDecoration(
+                      border: BoxBorder.all(
+                        color: theme.getColorFor(ThemeCode.textPrimary)),
+                      color: theme.getColorFor(ThemeCode.backgroundPrimary),
+                      borderRadius: BorderRadius.all(Radius.circular(24)),
+                    ),
+                    padding: EdgeInsets.all(16),
+                    child: Column(
+                      spacing: 24,
+                      children: [
+                        Row(
+                          spacing: 16,
+                          children: [
+                            Expanded(child: Column(
+                              spacing: 8,
+                              children: [
+                                Align(
+                                  alignment: Alignment.topLeft,
+                                  child: Text(
+                                    "Ahorro para",
+                                    textAlign: TextAlign.left,
+                                    style: TextStyle(
+                                      fontSize: 16, letterSpacing: 0),
+                                  ),
+                                ),
+
+                                Text(
+                                  widget.savings[index].name,
+                                  style: TextStyle(fontSize: 16,
+                                    fontWeight: FontWeight.w500,
+                                    letterSpacing: 0),
+                                )
+                              ],
+                            )),
+                            Container(
+                              decoration: BoxDecoration(
+                                color: theme.getColorFor(
+                                  ThemeCode.backgroundTertiary),
+                                borderRadius: BorderRadius.all(
+                                  Radius.circular(16)),
+                              ),
+                              padding: EdgeInsets.symmetric(
+                                horizontal: 8, vertical: 4),
+                              child: Row(
+                                spacing: 8,
+                                children: [
+                                  Icon(Icons.account_balance, size: 24,
+                                    color: theme.getColorFor(
+                                      ThemeCode.buttonPrimary)),
+                                  MoneyText(
+                                    text: "${widget.savings[index]
+                                      .goal}€",
+                                    size: 30,
+                                    secondarySize: 14,
+                                    color: theme.getColorFor(
+                                      ThemeCode.buttonPrimary)
+                                  )
+                                ],
+                              ),
+                            )
+                          ]
+                        ),
+                        if (index == 0)Column(
+                          spacing: 8,
+                          children: [
+                            ProgressBar(
+                              max: widget.savings[index].goal+0.0,
+                              value: widget.savings[index].saved,
+                              height: 64,
+                              textSize: 40,
+                              textSecondarySize: 24,
+                              backgroundColor: theme.getColorFor(
+                                ThemeCode.backgroundTertiary),
+                              foregroundColor: theme.getColorFor(
+                                ThemeCode.buttonPrimary),
+                              textColor: theme.getColorFor(
+                                ThemeCode.textSecondary)
+                            ),
+                            Center(child: Text("Ahorrado")),
+                            if (!showAdd[index]) TextButton(
+                              style: ButtonStyle(
+                                padding: WidgetStatePropertyAll(
+                                  EdgeInsets.zero)),
+                              onPressed: () =>
+                                setState(() {
+                                  showAdd[index] = true;
+                                }),
+                              child: Text(
+                                "+ Añadir dinero extra a este ahorro",
+                                textAlign: TextAlign.left,
+                                style: TextStyle(
+                                  fontSize: 16, letterSpacing: 0),
+                              )
+                            ),
+                            if (showAdd[index]) CustomTextField(
+                              hint: "5€",
+                              numeric: true,
+                            )
+                          ],
+                        ),
+                        if (!showEdit[index]) Row(
+                          children: [
+                            TextButton(
+                              style: ButtonStyle(
+                                padding: WidgetStatePropertyAll(
+                                  EdgeInsets.zero)),
+                              onPressed: () =>
+                                setState(() {
+                                  showEdit[index] = true;
+                                }),
+                              child: Row(
+                                spacing: 4,
+                                children: [
+                                  Icon(Icons.edit_outlined, size: 24),
+                                  Text(
+                                    "Editar",
+                                    style: TextStyle(fontSize: 16,
+                                      fontWeight: FontWeight.w500,
+                                      letterSpacing: 0),
+                                  ),
+                                ],
+                              )
+                            ),
+                            Spacer(),
+                            TextButton(
+                              style: ButtonStyle(
+                                padding: WidgetStatePropertyAll(
+                                  EdgeInsets.zero)),
+                              onPressed: () => {},
+                              child: Row(
+                                spacing: 4,
+                                children: [
+                                  Icon(Icons.delete_outline_outlined,
+                                    size: 24),
+                                  Text(
+                                    "Eliminar",
+                                    style: TextStyle(fontSize: 16,
+                                      fontWeight: FontWeight.w500,
+                                      letterSpacing: 0),
+                                  )
+                                ],
+                              )
+                            ),
+                          ],
+                        ),
+                        if(showEdit[index]) editBlock(
+                          create: false, index: index)
+                      ],
+                    ),
+                  ),
+                ),
+                TextButton(
+                  onPressed: () =>
+                    setState(() {
+                      showNew = true;
+                    }),
+                  child: Row(
+                    spacing: 4,
+                    children: [
+                      Spacer(),
+                      Icon(Icons.account_balance, size: 24),
+                      Text(
+                        "Crear otro ahorro",
+                        style: TextStyle(fontSize: 18,
+                          fontWeight: FontWeight.w500,
+                          letterSpacing: 0),
+                      ),
+                      Spacer()
+                    ],
+                  )
+                ),
+              ],
+            ),
+          );
+        } else {
+          return emptyBlock(fullPlan: true);
+        }
+      }
+    } else {
+      return emptyBlock(fullPlan: false);
+    }
+  }
+}
+
+class TasksBlock extends ConsumerStatefulWidget {
+
+  final bool fullPlan;
+  final List<Task> tasks;
+
+  @override
+  const TasksBlock({
+    super.key,
+    required this.fullPlan,
+    required this.tasks
+  });
+
+  @override
+  ConsumerState<ConsumerStatefulWidget> createState() => TasksBlockState();
+}
+
+class TasksBlockState extends ConsumerState<TasksBlock>{
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ref.watch(themePortProvider);
+
+    final emptyBlock = ({fullPlan})=>Container(
+      padding: EdgeInsets.all(24),
+      decoration: BoxDecoration(
+        color: theme.getColorFor(ThemeCode.backgroundPrimary),
+        borderRadius: BorderRadius.all(Radius.circular(24)),
+        border: BoxBorder.all(color: theme.getColorFor(ThemeCode.textPrimary))
+      ),
+      child: Stack(
+        children: [
+          Align(alignment: Alignment.topRight, child: SvgPicture.asset("assets/images/ui/tareas.svg")),
+          Column(
+            spacing: 24,
+            children: [
+              Align(alignment: Alignment.topLeft, child: Text(
+                "Tareas",
+                style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500, letterSpacing: 0),
+              )),
+              Align(alignment: Alignment.topLeft, child: SizedBox(
+                width: 200,
+                child: Text(
+                  "Refuerza su sentido de la responsabilidad con pequeñas tareas que cumplir",
+                  style: TextStyle(fontSize: 14, letterSpacing: 0),
+                ),
+              )),
+              if (fullPlan) Align(
+                alignment: Alignment.topLeft,
+                child: SecondaryButton(
+                  onPressed: ()=>{},
+                  text: "Crear lista de tareas",
+                  size: 14,
+                  width: 190,
+                  height: 44,
+                )
+              ),
+              if (!fullPlan) TextButton(
+                onPressed: ()=>{},
+                child: Row(
+                  spacing: 4,
+                  children: [
+                    Icon(Icons.workspace_premium, size: 16),
+                    Text("Suscribirme al Plan Completo")
+                  ],
+                )
+              )
+            ],
+          )
+        ],
+      )
+    );
+
+    if (widget.fullPlan) {
+      if (widget.tasks.isNotEmpty) {
+        return Container(
+            padding: EdgeInsets.all(24),
+            decoration: BoxDecoration(
+                borderRadius: BorderRadius.all(Radius.circular(24)),
+                border: BoxBorder.all(
+                    color: theme.getColorFor(ThemeCode.textPrimary)),
+                color: theme.getColorFor(ThemeCode.backgroundSecondary)
+            ),
+            child: Column(
+              spacing: 24,
+              children: [
+                Column(
+                  spacing: 8,
+                  children: [
+                    Align(alignment: Alignment.topLeft, child: Text(
+                      "Tareas",
+                      style: TextStyle(fontSize: 20,
+                          fontWeight: FontWeight.w500,
+                          letterSpacing: 0),
+                    )),
+                    Text(
+                      "Refuerza su sentido de la responsabilidad con pequeñas tareas que cumplir",
+                      style: TextStyle(fontSize: 14, letterSpacing: 0),
+                    )
+                  ],
+                ),
+                ...List<Widget>.generate(widget.tasks.length, (int i) =>
+                    Container(
+                      decoration: BoxDecoration(
+                          border: BoxBorder.fromLTRB(top: BorderSide(
+                              color: theme.getColorFor(ThemeCode.buttonPrimary),
+                              width: 8)),
+                          borderRadius: BorderRadius.all(Radius.circular(24)),
+                          color: theme.getColorFor(ThemeCode.backgroundPrimary)
+                      ),
+                      padding: EdgeInsets.all(24),
+                      child: Column(
+                        spacing: 16,
+                        children: [
+                          Row(children: [
+                            Text(
+                              "Lista de tareas",
+                              style: TextStyle(fontSize: 20,
+                                  fontWeight: FontWeight.w500,
+                                  letterSpacing: 0),
+                            ),
+                            Spacer(),
+                            Text(
+                              "10 oct - 17 oct",
+                              style: TextStyle(fontSize: 14, letterSpacing: 0),
+                            )
+                          ]),
+                          ...List<CheckboxListTile>.generate(
+                              widget.tasks[i].subtasks.length, (int j) =>
+                              CheckboxListTile(
+                                contentPadding: EdgeInsets.zero,
+                                checkboxScaleFactor: 2,
+                                value: widget.tasks[i].subtasks[j].completed,
+                                title: Text(widget.tasks[i].subtasks[j].name),
+                                controlAffinity: ListTileControlAffinity
+                                    .leading,
+                                activeColor: theme.getColorFor(
+                                    ThemeCode.buttonPrimary),
+                                onChanged: (_) =>
+                                    setState(() {
+                                      widget.tasks[i].subtasks[j] = Subtask(
+                                          name: widget.tasks[i].subtasks[j]
+                                              .name,
+                                          completed: !widget.tasks[i]
+                                              .subtasks[j].completed);
+                                    }),
+                              )
+                          ),
+                          TextButton(
+                              style: ButtonStyle(
+                                  padding: WidgetStatePropertyAll(EdgeInsets
+                                      .zero)),
+                              onPressed: () => {},
+                              child: Align(
+                                  alignment: Alignment.topLeft,
+                                  child: Text(
+                                    "+ Añadir tarea",
+                                    style: TextStyle(fontSize: 18,
+                                        fontWeight: FontWeight.w500,
+                                        letterSpacing: 0),
+                                  )
+                              )
+                          ),
+                          Container(
+                            decoration: BoxDecoration(
+                                color: theme.getColorFor(ThemeCode
+                                    .backgroundTertiary),
+                                borderRadius: BorderRadius.all(Radius.circular(
+                                    24))
+                            ),
+                            padding: EdgeInsets.symmetric(
+                                horizontal: 20, vertical: 16),
+                            child: Row(
+                              spacing: 16,
+                              children: [
+                                Expanded(child: Text(
+                                  "Recompensa por cumplimiento",
+                                  style: TextStyle(
+                                      fontSize: 16, letterSpacing: 0),
+                                )),
+                                Row(
+                                  spacing: 8,
+                                  children: [
+                                    Icon(Icons.emoji_events_outlined, size: 16,
+                                        color: theme.getColorFor(
+                                            ThemeCode.buttonPrimary)),
+                                    MoneyText(
+                                        text: "${widget.tasks[i]
+                                            .rewardAmount}€",
+                                        size: 40,
+                                        secondarySize: 24,
+                                        color: theme.getColorFor(
+                                            ThemeCode.buttonPrimary)
+                                    )
+                                  ],
+                                )
+                              ],
+                            ),
+                          ),
+                          Column(
+                            spacing: 8,
+                            children: [
+                              Align(
+                                alignment: Alignment.topLeft,
+                                child: Text(
+                                  "Este es el mensaje que se enviará al cumplir con todas las tareas:",
+                                  style: TextStyle(
+                                      fontSize: 14, letterSpacing: 0),
+                                ),
+                              ),
+                              Align(
+                                alignment: Alignment.topLeft,
+                                child: Text(
+                                  "¡Enhorabuena, has cumplido todas las tareas de esta semana!",
+                                  style: TextStyle(fontSize: 14,
+                                      fontWeight: FontWeight.w500,
+                                      letterSpacing: 0),
+                                ),
+                              ),
+                            ],
+                          ),
+                          Align(
+                            alignment: Alignment.topLeft,
+                            child: TextButton(
+                                onPressed: () => {},
+                                child: Row(
+                                  spacing: 4,
+                                  children: [
+                                    Icon(Icons.delete_outline_outlined,
+                                        size: 24),
+                                    Text(
+                                      "Eliminar lista de tareas",
+                                      style: TextStyle(fontSize: 16,
+                                          fontWeight: FontWeight.w500,
+                                          letterSpacing: 0),
+                                    )
+                                  ],
+                                )
+                            ),
+                          )
+                        ],
+                      ),
+                    )
+                ),
+                SecondaryButton(
+                  onPressed: () => {},
+                  text: "Crear una lista de tareas nueva",
+                  size: 14,
+                ),
+              ],
+            )
+        );
+      } else {
+        return emptyBlock(fullPlan: true);
+      }
+    } else {
+      return emptyBlock(fullPlan: false);
+    }
+  }
+}

modules/home/lib/src/presentation/home_screen.dart

@@ -1,29 +1,31 @@
-import 'package:auth/auth.dart';
 import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/svg.dart';
+import 'package:get_it/get_it.dart';
-import 'package:home/src/presentation/deposit_screen.dart';
+import 'package:home/src/presentation/wallet_item.dart';
-import 'package:home/src/presentation/kid_wallet_screen.dart';
-import 'package:home/src/presentation/money_text.dart';
 import 'package:sf_shared/sf_shared.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:navigation/navigation.dart';
 
 class HomeScreen extends ConsumerWidget {
   final String name = "Juan";
   final double total = 95.03;
   final List<Kid> kids = [
-    Kid(name: "Carlos", balance: 25.47),
+    Kid(name: "Carlos", balance: 25.47, savings: 8.32),
-    Kid(name: "Ana", balance: 25.47),
+    Kid(name: "Ana", balance: 25.47, savings: 8.32),
   ];
   late final double available = double.parse(
     kids.fold(total, (t, e) => t - e.balance).toStringAsFixed(2),
   );
+  late final double savings = double.parse(
+    kids.fold(0.0, (t, e) => t + e.savings).toStringAsFixed(2),
+  );
 
   HomeScreen({super.key});
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final theme = ref.watch(themePortProvider);
+    final NavigationContract navigationContract = GetIt.I<NavigationContract>();
 
     return SafeArea(
       child: SingleChildScrollView(
@@ -41,7 +43,7 @@ class HomeScreen extends ConsumerWidget {
                     children: <TextSpan>[
                       TextSpan(
                         text: name,
-                        style: TextStyle(fontWeight: FontWeight.bold),
+                        style: TextStyle(fontWeight: FontWeight.w500),
                       ),
                     ],
                   ),
@@ -51,10 +53,7 @@ class HomeScreen extends ConsumerWidget {
               Align(
                 alignment: Alignment.topLeft,
                 child: TextButton(
-                  onPressed: () => Navigator.push(
+                  onPressed: () => navigationContract.pushTo(AppRoutes.deviceSignup),
-                    context,
-                    MaterialPageRoute(builder: (_) => CreateProfileScreen()),
-                  ),
                   child: Text(
                     "+ Añadir otro peque",
                     style: TextStyle(
@@ -64,66 +63,7 @@ class HomeScreen extends ConsumerWidget {
                   ),
                 ),
               ),
-              Container(
+              WalletBalanceBlock(max: total, value: total - available, savings: savings),
-                padding: EdgeInsets.all(20),
-                decoration: BoxDecoration(
-                  color: theme.getColorFor(ThemeCode.backgroundPrimary),
-                  borderRadius: BorderRadius.all(Radius.circular(20)),
-                ),
-                child: Column(
-                  spacing: 5,
-                  children: [
-                    Row(
-                      children: [
-                        Text(
-                          "Wallet",
-                          style: TextStyle(
-                            fontWeight: FontWeight.bold,
-                            fontSize: 20,
-                          ),
-                        ),
-                        Spacer(),
-                        MoneyText(
-                          text: "$total€ total",
-                          size: 25,
-                          resize: true,
-                          color: theme.getColorFor(ThemeCode.textPrimary),
-                        ),
-                      ],
-                    ),
-                    Stack(
-                      children: [
-                        LinearProgressIndicator(
-                          value: available / total,
-                          minHeight: 70,
-                          borderRadius: BorderRadius.all(Radius.circular(16)),
-                          color: theme.getColorFor(ThemeCode.buttonPrimary),
-                          backgroundColor: theme.getColorFor(
-                            ThemeCode.backgroundTertiary,
-                          ),
-                        ),
-                        FractionallySizedBox(
-                          widthFactor: available / total,
-                          child: Container(
-                            padding: EdgeInsets.symmetric(vertical: 10),
-                            child: Center(
-                              child: MoneyText(
-                                text: "$available€",
-                                size: 35,
-                                resize: true,
-                                color: theme.getColorFor(
-                                  ThemeCode.textSecondary,
-                                ),
-                              ),
-                            ),
-                          ),
-                        ),
-                      ],
-                    ),
-                    Center(child: Text("Disponible")),
-                  ],
-                ),
-              ),
               DepositBlock(max: 150 - total),
             ],
           ),
@@ -133,141 +73,11 @@ class HomeScreen extends ConsumerWidget {
   }
 
   Widget walletsList(BuildContext context, List<Kid> kids, WidgetRef ref) {
-    final theme = ref.watch(themePortProvider);
 
     return Column(
       spacing: 20,
       children: List<Widget>.generate(kids.length, (int index) {
-        return GestureDetector(
+        return WalletItem(context, kids[index], index);
-          onTap: () => {
-            Navigator.push(
-              context,
-              MaterialPageRoute(
-                builder: (_) => KidWalletScreen(kid: kids[index]),
-              ),
-            ),
-          },
-          child: ClipRRect(
-            borderRadius: const BorderRadius.all(Radius.circular(16.0)),
-            child: Container(
-              padding: EdgeInsets.symmetric(horizontal: 20, vertical: 8),
-              decoration: BoxDecoration(
-                gradient: LinearGradient(
-                  begin: Alignment.topLeft,
-                  end: Alignment.bottomRight,
-                  colors: theme.getCardColorFor(index),
-                ),
-              ),
-              child: Column(
-                children: [
-                  Align(
-                    alignment: Alignment.topLeft,
-                    child: Text(
-                      kids[index].name,
-                      style: TextStyle(
-                        fontWeight: FontWeight.bold,
-                        fontSize: 25,
-                        color: theme.getColorFor(ThemeCode.textSecondary),
-                      ),
-                    ),
-                  ),
-                  Row(
-                    spacing: 10,
-                    children: [
-                      SizedBox(
-                        height: 60,
-                        width: 60,
-                        child: SvgPicture.asset("assets/images/ui/face.svg"),
-                      ),
-                      Spacer(),
-                      Column(
-                        children: [
-                          MoneyText(
-                            text: "${kids[index].balance}€",
-                            size: 50,
-                            resize: true,
-                            color: theme.getColorFor(ThemeCode.textSecondary),
-                          ),
-                          Text(
-                            "en su hucha",
-                            style: TextStyle(
-                              color: theme.getColorFor(ThemeCode.textSecondary),
-                            ),
-                          ),
-                        ],
-                      ),
-                    ],
-                  ),
-                  Row(
-                    children: [
-                      TextButton(
-                        onPressed: () => showDialog(
-                          context: context,
-                          builder: (BuildContext context) => Dialog(
-                            child: SizedBox(
-                              height: 100,
-                              width: double.infinity,
-                              child: Column(
-                                children: [
-                                  FilledButton(
-                                    onPressed: () => {},
-                                    child: Text("Cámara"),
-                                  ),
-                                  OutlinedButton(
-                                    onPressed: () => {},
-                                    child: Text("Galería de fotos"),
-                                  ),
-                                ],
-                              ),
-                            ),
-                          ),
-                        ),
-                        child: Row(
-                          spacing: 10,
-                          children: [
-                            Icon(
-                              Icons.edit,
-                              color: theme.getColorFor(ThemeCode.textSecondary),
-                            ),
-                            Text(
-                              "Editar",
-                              style: TextStyle(
-                                color: theme.getColorFor(
-                                  ThemeCode.textSecondary,
-                                ),
-                              ),
-                            ),
-                          ],
-                        ),
-                      ),
-                      Spacer(),
-                      FilledButton(
-                        onPressed: () => Navigator.push(
-                          context,
-                          MaterialPageRoute(
-                            builder: (_) => DepositScreen(kid: kids[index]),
-                          ),
-                        ),
-                        style: ButtonStyle(
-                          backgroundColor: WidgetStatePropertyAll<Color>(
-                            theme.getColorFor(ThemeCode.buttonSecondary),
-                          ),
-                        ),
-                        child: Container(
-                          padding: EdgeInsets.symmetric(
-                            horizontal: 0,
-                            vertical: 10,
-                          ),
-                          child: Text("+ Añadir dinero"),
-                        ),
-                      ),
-                    ],
-                  ),
-                ],
-              ),
-            ),
-          ),
-        );
       }),
     );
   }

modules/home/lib/src/presentation/kid_wallet_screen.dart

@@ -2,9 +2,11 @@ import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:home/src/presentation/deposit_screen.dart';
+import 'package:home/src/presentation/extract_screen.dart';
+import 'package:home/src/presentation/goals_screen.dart';
+import 'package:home/src/presentation/lock_card_screen.dart';
 import 'package:sf_shared/sf_shared.dart';
 import 'package:home/src/presentation/limits_screen.dart';
-import 'package:home/src/presentation/money_text.dart';
 import 'package:home/src/presentation/wage_screen.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
@@ -16,6 +18,7 @@ class KidWalletScreen extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final theme = ref.watch(themePortProvider);
+    final bool locked = false;
 
     return Scaffold(
       backgroundColor: theme.getColorFor(ThemeCode.backgroundSecondary),
@@ -23,19 +26,19 @@ class KidWalletScreen extends ConsumerWidget {
         children: [
           DecoratedBox(
             decoration: BoxDecoration(
-              borderRadius: const BorderRadius.all(Radius.circular(30)),
+              borderRadius: const BorderRadius.only(bottomRight: Radius.circular(24), bottomLeft: Radius.circular(24)),
               gradient: LinearGradient(
                 begin: Alignment.topLeft,
                 end: Alignment.bottomRight,
-                colors: theme.getCardColorFor(0),
+                colors: locked? theme.getDisabledCardColors() : theme.getCardColorFor(0)
-              ),
+              )
             ),
-            child: SizedBox(width: double.infinity, height: 300),
+            child: SizedBox(width: double.infinity, height: 420)
           ),
           Container(
             margin: EdgeInsets.symmetric(vertical: 50, horizontal: 20),
             child: Column(
-              spacing: 15,
+              spacing: 24,
               children: [
                 Row(
                   spacing: 7,
@@ -45,191 +48,257 @@ class KidWalletScreen extends ConsumerWidget {
                       icon: Icon(
                         Icons.arrow_back_ios_new_outlined,
                         color: theme.getColorFor(ThemeCode.backgroundPrimary),
-                      ),
+                        size: 24
+                      )
                     ),
                     SizedBox(
                       height: 50,
-                      child: SvgPicture.asset("assets/images/ui/face.svg"),
+                      child: SvgPicture.asset("assets/images/ui/face.svg")
                     ),
                     Text(
                       kid.name,
                       style: TextStyle(
                         color: theme.getColorFor(ThemeCode.backgroundPrimary),
                         fontWeight: FontWeight.bold,
-                        fontSize: 20,
+                        fontSize: 20
-                      ),
+                      )
                     ),
                     Spacer(),
                     SizedBox(
                       height: 30,
-                      child: SvgPicture.asset("assets/images/ui/face.svg"),
+                      child: SvgPicture.asset("assets/images/ui/face.svg")
+                    )
+                  ]
+                ),
+                Column(
+                  spacing: 16,
+                  children: [
+                    MoneyText(
+                      text: "${kid.balance.toString()}€",
+                      size: 60,
+                      secondarySize: 24,
+                      color: theme.getColorFor(ThemeCode.textSecondary)
                     ),
-                  ],
+                    Text(
-                ),
+                      "Saldo disponible",
-                MoneyText(
+                      style: TextStyle(
-                  text: "${kid.balance.toString()}€",
+                        color: theme.getColorFor(ThemeCode.backgroundPrimary)
-                  size: 60,
+                      )
-                  resize: true,
+                    ),
-                  color: theme.getColorFor(ThemeCode.textSecondary),
+                    LinearProgressIndicator(
-                ),
+                      value: 0.7,
-                Text(
+                      color: theme.getColorFor(ThemeCode.backgroundPrimary),
-                  "Saldo disponible",
+                      backgroundColor: theme
-                  style: TextStyle(
+                          .getColorFor(ThemeCode.backgroundPrimary)
-                    color: theme.getColorFor(ThemeCode.backgroundPrimary),
+                          .withAlpha(0x4C),
-                  ),
+                      minHeight: 10,
-                ),
+                      borderRadius: BorderRadius.all(Radius.circular(5)),
-                LinearProgressIndicator(
+                    ),
-                  value: 0.7,
+                    TextButton(
-                  color: theme.getColorFor(ThemeCode.backgroundPrimary),
+                      style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
-                  backgroundColor: theme
+                      onPressed: () => Navigator.push(
-                      .getColorFor(ThemeCode.backgroundPrimary)
+                          context,
-                      .withAlpha(0x4C),
+                          MaterialPageRoute(
-                  minHeight: 10,
+                          builder: (_) => LockCardScreen(kid: kid)
-                  borderRadius: BorderRadius.all(Radius.circular(5)),
+                        )
-                ),
+                      ),
-                Container(
-                  padding: EdgeInsets.all(10),
-                  margin: EdgeInsets.only(top: 30),
-                  decoration: BoxDecoration(
-                    color: theme.getColorFor(ThemeCode.backgroundPrimary),
-                    borderRadius: BorderRadius.all(Radius.circular(20)),
-                  ),
-                  child: Expanded(
-                    child: Center(
                       child: Row(
                         spacing: 10,
                         children: [
-                          TextButton(
+                          Icon(Icons.lock_outline, size: 24, color: theme.getColorFor(ThemeCode.textSecondary)),
-                            onPressed: () => Navigator.push(
+                          locked ?
-                              context,
+                          Text("Desbloquear tarjeta", style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16, color: theme.getColorFor(ThemeCode.textSecondary))) :
-                              MaterialPageRoute(
+                          Text("Bloquear tarjeta", style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16, color: theme.getColorFor(ThemeCode.textSecondary)))
-                                builder: (_) => DepositScreen(kid: kid),
+                        ]
+                      )
+                    )
+                  ]
+                ),
+                Column(
+                  spacing: 16,
+                  children: [
+                    Container(
+                      padding: EdgeInsets.all(16),
+                      margin: EdgeInsets.only(top: 30),
+                      decoration: BoxDecoration(
+                        color: theme.getColorFor(ThemeCode.backgroundPrimary),
+                        borderRadius: BorderRadius.all(Radius.circular(20))
+                      ),
+                      child: Expanded(
+                        child: Center(
+                          child: Row(
+                            children: [
+                              TextButton(
+                                style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
+                                onPressed: () => Navigator.push(
+                                  context,
+                                  MaterialPageRoute(
+                                    builder: (_) => DepositScreen(kid: kid)
+                                  )
+                                ),
+                                child: Column(
+                                  spacing: 8,
+                                  children: [
+                                    Icon(
+                                      Icons.add_circle_outline,
+                                      color: theme.getColorFor(
+                                        ThemeCode.textPrimary,
+                                      )
+                                    ),
+                                    Text(
+                                      "Añadir",
+                                      style: TextStyle(
+                                        color: theme.getColorFor(
+                                          ThemeCode.textPrimary
+                                        )
+                                      )
+                                    )
+                                  ]
+                                )
                               ),
-                            ),
+                              Spacer(),
-                            child: Column(
+                              TextButton(
-                              spacing: 10,
+                                style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
-                              children: [
+                                onPressed: () => Navigator.push(
-                                Icon(
+                                  context,
-                                  Icons.add_circle_outline,
+                                  MaterialPageRoute(
-                                  color: theme.getColorFor(
+                                    builder: (_) => WageScreen(kid: kid),
-                                    ThemeCode.textPrimary,
                                   ),
                                 ),
-                                Text(
+                                child: Column(
-                                  "Añadir",
+                                  spacing: 10,
-                                  style: TextStyle(
+                                  children: [
-                                    color: theme.getColorFor(
+                                    Icon(
-                                      ThemeCode.textPrimary,
+                                      Icons.account_balance_wallet_outlined,
+                                      color: theme.getColorFor(
+                                        ThemeCode.textPrimary,
+                                      ),
                                     ),
-                                  ),
+                                    Text(
+                                      "Paga",
+                                      style: TextStyle(
+                                        color: theme.getColorFor(
+                                          ThemeCode.textPrimary,
+                                        ),
+                                      ),
+                                    ),
+                                  ],
                                 ),
-                              ],
-                            ),
-                          ),
-                          Spacer(),
-                          TextButton(
-                            onPressed: () => Navigator.push(
-                              context,
-                              MaterialPageRoute(
-                                builder: (_) => WageScreen(kid: kid),
                               ),
-                            ),
+                              Spacer(),
-                            child: Column(
+                              TextButton(
-                              spacing: 10,
+                                style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
-                              children: [
+                                onPressed: () => Navigator.push(
-                                Icon(
+                                  context,
-                                  Icons.account_balance_wallet_outlined,
+                                  MaterialPageRoute(
-                                  color: theme.getColorFor(
+                                    builder: (_) => LimitsScreen(kid: kid),
-                                    ThemeCode.textPrimary,
                                   ),
                                 ),
-                                Text(
+                                child: Column(
-                                  "Paga",
+                                  spacing: 10,
-                                  style: TextStyle(
+                                  children: [
-                                    color: theme.getColorFor(
+                                    Icon(
-                                      ThemeCode.textPrimary,
+                                      Icons.list_alt_outlined,
+                                      color: theme.getColorFor(
+                                        ThemeCode.textPrimary,
+                                      ),
                                     ),
-                                  ),
+                                    Text(
+                                      "Límites",
+                                      style: TextStyle(
+                                        color: theme.getColorFor(
+                                          ThemeCode.textPrimary,
+                                        ),
+                                      ),
+                                    ),
+                                  ],
                                 ),
-                              ],
-                            ),
-                          ),
-                          Spacer(),
-                          TextButton(
-                            onPressed: () => Navigator.push(
-                              context,
-                              MaterialPageRoute(
-                                builder: (_) => LimitsScreen(kid: kid),
                               ),
-                            ),
+                              Spacer(),
-                            child: Column(
+                              TextButton(
-                              spacing: 10,
+                                style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
-                              children: [
+                                onPressed: () => Navigator.push(
-                                Icon(
+                                    context,
-                                  Icons.list_alt_outlined,
+                                    MaterialPageRoute(
-                                  color: theme.getColorFor(
+                                        builder: (_) => GoalsScreen(kid: kid)
-                                    ThemeCode.textPrimary,
+                                    )
-                                  ),
                                 ),
-                                Text(
+                                child: Column(
-                                  "Límites",
+                                  spacing: 10,
-                                  style: TextStyle(
+                                  children: [
-                                    color: theme.getColorFor(
+                                    Icon(
-                                      ThemeCode.textPrimary,
+                                      Icons.emoji_events_outlined,
+                                      color: theme.getColorFor(
+                                        ThemeCode.textPrimary,
+                                      ),
                                     ),
-                                  ),
+                                    Text(
-                                ),
+                                      "Metas",
-                              ],
+                                      style: TextStyle(
-                            ),
+                                        color: theme.getColorFor(
-                          ),
+                                          ThemeCode.textPrimary,
-                          Spacer(),
+                                        ),
-                          TextButton(
+                                      ),
-                            onPressed: () => {},
-                            child: Column(
-                              spacing: 10,
-                              children: [
-                                Icon(
-                                  Icons.emoji_events_outlined,
-                                  color: theme.getColorFor(
-                                    ThemeCode.textPrimary,
-                                  ),
-                                ),
-                                Text(
-                                  "Metas",
-                                  style: TextStyle(
-                                    color: theme.getColorFor(
-                                      ThemeCode.textPrimary,
                                     ),
-                                  ),
+                                  ],
                                 ),
-                              ],
+                              ),
-                            ),
+                              Spacer(),
+                              TextButton(
+                                style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
+                                onPressed: () => Navigator.push(
+                                    context,
+                                    MaterialPageRoute(
+                                        builder: (_) => ExtractScreen(kid: kid)
+                                    )
+                                ),
+                                child: Column(
+                                  spacing: 10,
+                                  children: [
+                                    Icon(
+                                      Icons.cancel_outlined,
+                                      color: theme.getColorFor(
+                                        ThemeCode.textPrimary,
+                                      ),
+                                    ),
+                                    Text(
+                                      "Quitar",
+                                      style: TextStyle(
+                                        color: theme.getColorFor(
+                                          ThemeCode.textPrimary,
+                                        ),
+                                      ),
+                                    ),
+                                  ],
+                                ),
+                              ),
+                            ],
                           ),
-                        ],
+                        ),
                       ),
                     ),
-                  ),
+                    Container(
-                ),
+                      padding: EdgeInsets.all(15),
-                Container(
+                      height: 300,
-                  padding: EdgeInsets.all(15),
+                      decoration: BoxDecoration(
-                  height: 400,
+                        color: theme.getColorFor(ThemeCode.backgroundPrimary),
-                  decoration: BoxDecoration(
+                        borderRadius: BorderRadius.all(Radius.circular(20))
-                    color: theme.getColorFor(ThemeCode.backgroundPrimary),
+                      ),
-                    borderRadius: BorderRadius.all(Radius.circular(20)),
+                      child: Expanded(child: Column(
-                  ),
+                        //spacing: 24,
-                  child: Column(
+                        children: [
-                    children: [
+                          Text("Últimos movimientos", style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500)),
-                      Text("Últimos movimientos"),
+                          activityList(context, theme)
-                      activityList(context, theme),
+                        ]
-                      TextButton(onPressed: () => {}, child: Text("Ver todos")),
+                      ))
-                    ],
+                    )
-                  ),
+                  ]
-                ),
+                )
-              ],
+              ]
-            ),
+            )
-          ),
+          )
-        ],
+        ]
-      ),
+      )
     );
   }
 
@@ -251,58 +320,62 @@ class KidWalletScreen extends ConsumerWidget {
 
     return Expanded(
       child: ListView(
-        children: List<Widget>.generate(activity.length, (int index) {
+        padding: EdgeInsets.symmetric(vertical: 0),
-          return Column(
+        children: [
-            spacing: 20,
+          ...List<Widget>.generate(activity.length, (int index) {
-            children: [
+            return Container(padding: EdgeInsets.only(top: 24),
-              Text(activity[index]["date"].toString()),
+              child: Column(
-              Column(
+              spacing: 8,
-                spacing: 15,
+              children: [
-                children: List<Widget>.generate(
+                Align(alignment: Alignment.bottomLeft, child: Text(activity[index]["date"].toString(), style: TextStyle(fontSize: 18, height: 1.5))),
-                  (activity[index]["payments"] as List<Object>).length,
+                Column(
-                  (int i) {
+                  spacing: 16,
-                    //var a = (activity[index]["payments"] as List<Object>)[i];
+                  children: List<Widget>.generate(
-                    return Row(
+                    (activity[index]["payments"] as List<Object>).length,
-                      spacing: 7,
+                    (int i) {
-                      children: [
+                      return Row(
-                        Container(
+                        spacing: 12,
-                          padding: EdgeInsets.all(9),
+                        children: [
-                          decoration: BoxDecoration(
+                          Container(
-                            color: theme.getColorFor(
+                            padding: EdgeInsets.all(9),
-                              ThemeCode.backgroundTertiary,
+                            decoration: BoxDecoration(
+                              color: theme.getColorFor(
+                                ThemeCode.backgroundTertiary,
+                              ),
+                              borderRadius: BorderRadius.all(Radius.circular(16))
                             ),
-                            borderRadius: BorderRadius.all(Radius.circular(16)),
+                            child: Icon(
+                              Icons.local_pizza_outlined,
+                              color: theme.getColorFor(ThemeCode.buttonPrimary)
+                            )
                           ),
-                          child: Icon(
+                          Column(
-                            Icons.local_pizza_outlined,
+                            children: [
-                            color: theme.getColorFor(ThemeCode.buttonPrimary),
+                              Text(
+                                "Vips",
+                                style: TextStyle(fontWeight: FontWeight.bold)
+                              ),
+                              Text("20:15")
+                            ]
                           ),
-                        ),
+                          Spacer(),
-                        Column(
+                          MoneyText(
-                          children: [
+                            text: "5.1€",
-                            Text(
+                            size: 16,
-                              "Vips",
+                            secondarySize: 12,
-                              style: TextStyle(fontWeight: FontWeight.bold),
+                            color: theme.getColorFor(ThemeCode.textPrimary),
-                            ),
+                          )
-                            Text("20:15"),
+                        ]
-                          ],
+                      );
-                        ),
+                    }
-                        Spacer(),
+                  )
-                        MoneyText(
+                )
-                          text: "5.1€",
+              ]
-                          size: 20,
+            ));
-                          resize: true,
+          }),
-                          color: theme.getColorFor(ThemeCode.textPrimary),
+          TextButton(onPressed: () => {}, child: Align(alignment: Alignment.bottomLeft, child: Text("Ver todos"))),
-                        ),
+        ]
-                      ],
+      )
-                    );
-                  },
-                ),
-              ),
-            ],
-          );
-        }),
-      ),
     );
   }
-}
+}

modules/home/lib/src/presentation/limits_screen.dart

@@ -22,7 +22,7 @@ class LimitsScreenState extends ConsumerState<LimitsScreen> {
   @override
   void initState() {
     super.initState();
-    dailyLimits = [
+    dailyLimits = [ //dey, week, month, year
       {"title": "Diario L-V", "limit": "5", "edit": false},
       {"title": "Fines de semana", "limit": "8", "edit": false},
       {"title": "Semanal", "limit": "30", "edit": false},
@@ -41,14 +41,27 @@ class LimitsScreenState extends ConsumerState<LimitsScreen> {
         "end": "21:00",
         "edit": false,
       },
-      {"title": "Vacaciones", "start": "09:00", "end": "22:00", "edit": false},
+      {
+        "title": "Vacaciones",
+        "start": "09:00",
+        "end": "22:00",
+        "edit": false
+      },
     ];
     conditions = [
-      {"title": "Alimentación", "limit": "10", "edit": false},
+      {"title": "Alimentación", "limit": "10", "active": true, "edit": false},
-      {"title": "Transporte", "limit": "10", "edit": false},
+      {"title": "Transporte", "limit": "10", "active": false, "edit": false},
-      {"title": "Alimentación", "limit": "10", "edit": false},
+      {"title": "Alimentación", "limit": "10", "active": false, "edit": false},
+    ];
+    blocks = [
+      {"title": "Alojamiento y Hoteles", "active": true},
+      {"title": "Supermercados", "active": true},
+      {"title": "Gasolineras", "active": true},
+      {"title": "Restaurantes", "active": true},
+      {"title": "Bares y discotecas", "active": true},
+      {"title": "Licorerías", "active": true},
+      {"title": "Estancos", "active": true},
     ];
-    blocks = [];
   }
 
   @override
@@ -57,16 +70,32 @@ class LimitsScreenState extends ConsumerState<LimitsScreen> {
 
     return WalletManagementLayout(
       kid: widget.kid,
-      footer: Column(
+      footer: Container(
-        children: [
+        decoration: BoxDecoration(
-          FilledButton(
+          color: theme.getColorFor(ThemeCode.backgroundPrimary),
-            onPressed: () => {},
+          borderRadius: BorderRadius.only(topLeft: Radius.circular(24), topRight: Radius.circular(24))
-            child: SizedBox(
+        ),
-              width: double.infinity,
+        padding: EdgeInsets.all(24),
-              child: Center(child: Text("Guardar límites")),
+        child: Column(
+          children: [
+            PrimaryButton(
+              onPressed: () => {},
+              text: "Guardar límites",
+              color: theme.getColorFor(ThemeCode.buttonPrimary)
             ),
-          ),
+            TextButton(
-        ],
+              onPressed: ()=>Navigator.pop(context),
+              child: Text(
+                "Cancelar",
+                style: TextStyle(
+                  fontSize: 18,
+                  fontWeight: FontWeight.bold,
+                  color: theme.getColorFor(ThemeCode.textPrimary)
+                )
+              )
+            )
+          ],
+        ),
       ),
       children: [
         Container(
@@ -78,9 +107,12 @@ class LimitsScreenState extends ConsumerState<LimitsScreen> {
           child: Column(
             spacing: 10,
             children: [
-              Text(
+              Align(
-                "Pon límite de gastos",
+                alignment: Alignment.topLeft,
-                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
+                child: Text(
+                  "Pon límite de gastos",
+                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
+                )
               ),
               Text("Libertad para ellos, tranquilidad para ti"),
               ...List<Widget>.generate(dailyLimits.length, (int index) {
@@ -103,7 +135,9 @@ class LimitsScreenState extends ConsumerState<LimitsScreen> {
                         ),
                       ],
                     ),
-                    if (dailyLimits[index]["edit"]) TextField(),
+                    if (dailyLimits[index]["edit"]) CustomTextField(
+                      hint: "5€",
+                    ),
                   ],
                 );
               }),
@@ -136,22 +170,113 @@ class LimitsScreenState extends ConsumerState<LimitsScreen> {
                         TextButton(
                           onPressed: () => {
                             setState(() {
-                              timeLimits[index]["edit"] =
+                              timeLimits[index]["edit"] = !timeLimits[index]["edit"];
-                                  !timeLimits[index]["edit"];
                             }),
                           },
                           child: Text("Editar"),
                         ),
                       ],
                     ),
-                    if (timeLimits[index]["edit"]) TextField(),
+                    if (timeLimits[index]["edit"]) CustomTextField(
+                      hint: "5€",
+                    ),
                   ],
                 );
               }),
             ],
           ),
         ),
+        Container(
+          padding: EdgeInsets.all(24),
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.all(Radius.circular(24)),
+            color: theme.getColorFor(ThemeCode.backgroundPrimary),
+          ),
+          child: Column(
+            spacing: 24,
+            children: [
+              Text(
+                "Condiciones",
+                style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500, letterSpacing: 0),
+              ),
+              Column(
+                spacing: 8,
+                children: List<Widget>.generate(conditions.length, (int index)=>
+                  Column(
+                    spacing: 8,
+                    children: [
+                      Row(children: [
+                        Expanded(child: CheckboxListTile(
+                          value: conditions[index]["active"],
+                          onChanged: (_)=>setState(() {
+                            conditions[index]["active"] = !conditions[index]["active"];
+                          }),
+                          title: Text(
+                            "${conditions[index]["title"]}: ${conditions[index]["limit"]}€/sem",
+                            style: TextStyle(fontSize: 16, letterSpacing: 0),
+                          ),
+                          checkboxScaleFactor: 2,
+                          controlAffinity: ListTileControlAffinity.leading,
+                          activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
+                          contentPadding: EdgeInsets.zero,
+                        )),
+                        TextButton(
+                          onPressed: ()=>setState(() {
+                            conditions[index]["edit"] = ! conditions[index]["edit"];
+                          }),
+                          child: Text(
+                            "Editar",
+                            style: TextStyle(fontSize: 16, letterSpacing: 0),
+                          )
+                        )
+                      ]),
+                      if (conditions[index]["edit"]) CustomTextField(
+                        hint: "5€",
+                        numeric: true,
+                      )
+                    ]
+                  )
+                ),
+              )
+            ],
+          )
+        ),
+        Container(
+          padding: EdgeInsets.all(24),
+          decoration: BoxDecoration(
+            color: theme.getColorFor(ThemeCode.backgroundPrimary),
+            borderRadius: BorderRadius.all(Radius.circular(24))
+          ),
+          child: Column(
+            spacing: 24,
+            children: [
+              Text(
+                "Comercios bloqueados",
+                style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500, letterSpacing: 0),
+              ),
+              Column(
+                spacing: 8,
+                children: List<Widget>.generate(blocks.length, (int index) =>
+                  CheckboxListTile(
+                    value: blocks[index]["active"],
+                    onChanged: (_) => setState(() {
+                      blocks[index]["active"] = !blocks[index]["active"];
+                    }),
+                    title: Text(
+                      blocks[index]["title"],
+                      style: TextStyle(fontSize: 16, letterSpacing: 0),
+                    ),
+                    checkboxScaleFactor: 2,
+                    controlAffinity: ListTileControlAffinity.leading,
+                    activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
+                    contentPadding: EdgeInsets.zero,
+                  )
+                )
+              )
+            ],
+          ),
+        )
       ],
     );
   }
-}
+}

modules/home/lib/src/presentation/lock_card_screen.dart

@@ -0,0 +1,105 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:home/src/presentation/wallet_management_layout.dart';
+import 'package:sf_shared/sf_shared.dart';
+
+class LockCardScreen extends ConsumerWidget{
+  final Kid kid;
+
+  @override
+  LockCardScreen({
+    super.key,
+    required this.kid,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final theme = ref.watch(themePortProvider);
+
+    return WalletManagementLayout(
+      kid: kid,
+      children: [Container(
+        padding: EdgeInsets.all(24),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.all(Radius.circular(24)),
+          color: theme.getColorFor(ThemeCode.backgroundPrimary)
+        ),
+        child: Column(
+          spacing: 24,
+          children: [
+            Column(
+              spacing: 8,
+              children: [
+                Align(alignment: Alignment.topLeft, child: Text(
+                    "Bloqueo de tarjeta",
+                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500, letterSpacing: 0)
+                )),
+                Align(alignment: Alignment.topLeft, child: Text(
+                    "Este dato aparecerá en el reloj del peque",
+                    style: TextStyle(fontSize: 14, letterSpacing: 0)
+                ))
+              ],
+            ),
+            Column(
+              spacing: 8,
+              children: [
+                Align(alignment: Alignment.topLeft, child: Text(
+                  "Este es el mensaje fijado por defecto:",
+                  style: TextStyle(fontSize: 16, letterSpacing: 0)
+                )),
+                Align(alignment: Alignment.topLeft, child: Text(
+                  "\"De momento hemos bloqueado el dinero del reloj\"",
+                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500, letterSpacing: 0)
+                ))
+              ],
+            ),
+            Column(
+              spacing: 8,
+              children: [
+                Text(
+                  "Escribir mensaje a ${kid.name} del motivo del bloqueo",
+                  style: TextStyle(fontSize: 14, letterSpacing: 0),
+                ),
+                CustomTextField(
+                  hint: "Escribe tu mensaje",
+                  lines: 4,
+                  length: 150,
+                ),
+                Row(
+                  spacing: 4,
+                  children: [
+                    Icon(Icons.info_outline, size: 16),
+                    Text("Máximo 150 caracteres", style: TextStyle(fontSize: 14, letterSpacing: 0))
+                  ],
+                )
+              ],
+            )
+          ],
+        ),
+      )],
+      footer: Container(
+        padding: EdgeInsets.all(24),
+        decoration: BoxDecoration(
+          color: theme.getColorFor(ThemeCode.backgroundPrimary),
+          borderRadius: BorderRadius.only(topRight: Radius.circular(24), topLeft: Radius.circular(24))
+        ),
+        child: Column(
+          spacing: 16,
+          children: [
+            PrimaryButton(
+              onPressed: ()=>{Navigator.pop(context)},
+              text: "Enviar mensaje y bloquear",
+              color: theme.getColorFor(ThemeCode.buttonPrimary),
+            ),
+            TextButton(
+              style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
+              onPressed: ()=>Navigator.pop(context),
+              child: Text("Cancelar", style: TextStyle(fontSize: 18))
+            )
+          ],
+        ),
+      )
+    );
+  }
+}

modules/home/lib/src/presentation/money_text.dart

@@ -1,35 +0,0 @@
-import 'package:flutter/material.dart';
-
-class MoneyText extends StatelessWidget {
-  final String text;
-  final double size;
-  final bool resize;
-  final Color color;
-
-  const MoneyText({super.key, required this.text, required this.size, required this.resize, required this.color});
-
-  @override
-  Widget build(BuildContext context) {
-    final units = text.split(".")[0];
-    final cents = ",${text.split(".")[1]}";
-
-    return Text.rich(TextSpan(
-      text: units,
-      style: TextStyle(
-        fontWeight: FontWeight.bold,
-        fontSize: size,
-        color: color
-      ),
-      children: [
-        TextSpan(
-          text: cents,
-          style: TextStyle(
-            fontWeight: FontWeight.normal,
-            fontSize: resize ? size/2 : size
-          )
-        )
-      ]
-    ));
-  }
-
-}

modules/home/lib/src/presentation/wage_screen.dart

@@ -1,6 +1,5 @@
 import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import 'package:home/src/presentation/wallet_management_layout.dart';
 import 'package:sf_shared/sf_shared.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
@@ -41,13 +40,10 @@ class _WageScreenState extends ConsumerState<WageScreen> {
         child: Column(
           spacing: 10,
           children: [
-            FilledButton(
+            PrimaryButton(
-              onPressed: () {},
+              onPressed: () => {},
-              child: Container(
+              text: "Activar paga automática",
-                width: double.infinity,
+              color: theme.getColorFor(ThemeCode.buttonPrimary)
-                padding: const EdgeInsets.all(20),
-                child: const Center(child: Text('Activar paga automática')),
-              ),
             ),
             TextButton(onPressed: () {}, child: const Text('Cancelar')),
           ],
@@ -63,18 +59,16 @@ class _WageScreenState extends ConsumerState<WageScreen> {
           child: Column(
             spacing: 10,
             children: [
-              const Text(
+              Align(alignment: Alignment.topLeft,
-                'Paga automática',
+                child: const Text(
-                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
+                  "Paga automática",
-              ),
+                  style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20),
-              TextField(
-                decoration: const InputDecoration(
-                  labelText: 'Cantidad',
-                  hintText: '0€',
-                  border: OutlineInputBorder(),
                 ),
-                keyboardType: TextInputType.number,
+              ),
-                inputFormatters: [FilteringTextInputFormatter.digitsOnly],
+              CustomTextField(
+                numeric: true,
+                label: "Cantidad",
+                hint: "0€",
               ),
               const Text('Saldo total disponible después: 30 €'),
             ],
@@ -86,16 +80,21 @@ class _WageScreenState extends ConsumerState<WageScreen> {
             color: theme.getColorFor(ThemeCode.backgroundPrimary),
             borderRadius: const BorderRadius.all(Radius.circular(20)),
           ),
-          padding: const EdgeInsets.all(10),
+          padding: const EdgeInsets.all(24),
           child: Column(
             spacing: 10,
             children: [
-              const Text(
+              Align(alignment: Alignment.topLeft,
-                'Frecuencia',
+                child: const Text(
-                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
+                  "Frecuencia",
+                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
+                )
+              ),
+              Align(alignment: Alignment.topLeft,
+                child: const Text("Cuándo se envía el dinero"),
               ),
-              const Text('Cuándo se envía el dinero'),
               CheckboxListTile(
+                contentPadding: EdgeInsets.zero,
                 title: const Text('Semanal'),
                 controlAffinity: ListTileControlAffinity.leading,
                 value: frequence == 'weekly',
@@ -107,6 +106,7 @@ class _WageScreenState extends ConsumerState<WageScreen> {
                 activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
               ),
               CheckboxListTile(
+                contentPadding: EdgeInsets.zero,
                 title: const Text('Cada dos semanas'),
                 controlAffinity: ListTileControlAffinity.leading,
                 value: frequence == 'biweekly',
@@ -118,6 +118,7 @@ class _WageScreenState extends ConsumerState<WageScreen> {
                 activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
               ),
               CheckboxListTile(
+                contentPadding: EdgeInsets.zero,
                 title: const Text('Mensual'),
                 controlAffinity: ListTileControlAffinity.leading,
                 value: frequence == 'monthly',
@@ -128,50 +129,33 @@ class _WageScreenState extends ConsumerState<WageScreen> {
                 },
                 activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
               ),
-              SizedBox(
+              CustomDropdown(
-                width: double.infinity,
+                items: [
-                child: DropdownMenu<String>(
+                  Text("Lunes"),
-                  label: const Text('Día de la semana'),
+                  Text("Martes"),
-                  initialSelection: 'Domingo',
+                  Text("Miércoles"),
-                  dropdownMenuEntries: () {
+                  Text("Jueves"),
-                    const days = [
+                  Text("Viernes"),
-                      'Lunes',
+                  Text("Sábado"),
-                      'Martes',
+                  Text("Domingo"),
-                      'Miércoles',
+                ],
-                      'Jueves',
+                values: ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"],
-                      'Viernes',
+                onChanged: (value)=> {},
-                      'Sábado',
+                hint: "Día de la semana",
-                      'Domingo',
-                    ];
-                    return List<DropdownMenuEntry<String>>.generate(
-                      days.length,
-                      (index) => DropdownMenuEntry<String>(
-                        value: days[index],
-                        label: days[index],
-                      ),
-                    );
-                  }(),
-                ),
               ),
-              DropdownMenu<int>(
+              CustomDropdown(
-                label: const Text('Hora del día'),
+                hint: "Hora del día",
-                initialSelection: 9,
+                items: List<Widget>.generate(24,(int index){
-                dropdownMenuEntries: List<DropdownMenuEntry<int>>.generate(
+                  return Text("$index:00");
-                  24,
+                }),
-                  (index) =>
+                onChanged: (value)=> {},
-                      DropdownMenuEntry<int>(value: index, label: '$index:00'),
-                ),
               ),
-              TextField(
+              CustomTextField(
-                minLines: 3,
+                lines: 3,
-                maxLines: 3,
+                length: 150,
-                maxLength: 150,
+                label:
-                decoration: InputDecoration(
+                  "Escribir mensaje a ${widget.kid.name} del motivo del ingreso",
-                  labelText:
+                hint: "Escribe tu mensaje",
-                      'Escribir mensaje a ${widget.kid.name} del motivo del ingreso',
-                  hintText: 'Escribe tu mensaje',
-                  border: const OutlineInputBorder(),
-                ),
               ),
               const Align(
                 alignment: Alignment.topLeft,
@@ -186,16 +170,21 @@ class _WageScreenState extends ConsumerState<WageScreen> {
             color: theme.getColorFor(ThemeCode.backgroundPrimary),
             borderRadius: const BorderRadius.all(Radius.circular(20)),
           ),
-          padding: const EdgeInsets.all(10),
+          padding: const EdgeInsets.all(24),
           child: Column(
             spacing: 10,
             children: [
-              const Text(
+              const Align(alignment: Alignment.topLeft,
-                'Condiciones',
+                child: Text(
-                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
+                  "Condiciones",
+                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
+                ),
+              ),
+              const Align(alignment: Alignment.topLeft,
+                child: Text("Este dato aparecerá en el reloj del peque"),
               ),
-              const Text('Este dato aparecerá en el reloj del peque'),
               CheckboxListTile(
+                contentPadding: EdgeInsets.zero,
                 title: const Text('Sólo si cumple límites semanales'),
                 controlAffinity: ListTileControlAffinity.leading,
                 value: conditions['weeklyLimits'],
@@ -208,6 +197,7 @@ class _WageScreenState extends ConsumerState<WageScreen> {
                 activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
               ),
               CheckboxListTile(
+                contentPadding: EdgeInsets.zero,
                 title: const Text('Sólo si no ha tenido incidencias'),
                 controlAffinity: ListTileControlAffinity.leading,
                 value: conditions['incidences'],
@@ -220,6 +210,7 @@ class _WageScreenState extends ConsumerState<WageScreen> {
                 activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
               ),
               CheckboxListTile(
+                contentPadding: EdgeInsets.zero,
                 title: const Text('Pausar durante vacaciones'),
                 controlAffinity: ListTileControlAffinity.leading,
                 value: conditions['holidays'],

modules/home/lib/src/presentation/wallet_item.dart

@@ -0,0 +1,244 @@
+import 'dart:ui' as ui;
+
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:home/src/presentation/deposit_screen.dart';
+import 'package:home/src/presentation/kid_wallet_screen.dart';
+import 'package:sf_shared/sf_shared.dart';
+
+
+class WalletItem extends ConsumerWidget{
+  final BuildContext context;
+  final Kid kid;
+  final int index;
+
+  WalletItem(this.context, this.kid, this.index);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref){
+    final theme = ref.watch(themePortProvider);
+
+    return GestureDetector(
+      onTap: ()=>{Navigator.push(context, MaterialPageRoute(builder: (_)=>KidWalletScreen(kid: kid)))},
+      child: SizedBox(
+        height: 227,
+        width: 382,
+        child: Stack(
+          children: [
+            SizedBox(height:227, width:382, child: CustomPaint(painter: WalletPainter(ref, index))),
+            Column(
+              children: [
+                Container(
+                  padding: EdgeInsets.only(left: 24, right: 24, top: 10, bottom: 0),
+                  child: Column(
+                    children: [
+                      Align(
+                        alignment: Alignment.topLeft,
+                        child: Text(kid.name,
+                          style: TextStyle(
+                            fontWeight: FontWeight.w500,
+                            fontSize: 30,
+                            color: theme.getColorFor(ThemeCode.textSecondary),
+                          )
+                        )
+                      ),
+                      Row(
+                        children: [
+                          SizedBox(
+                            height: 100,
+                            child: Align(
+                              alignment: Alignment.topLeft,
+                              child: SizedBox(
+                                height: 70,
+                                width: 70,
+                                child: SvgPicture.asset("assets/images/ui/face.svg"),
+                              )
+                            )
+                          ),
+                          Spacer(),
+                          Column(children: [
+                            MoneyText(
+                              text: "${kid.balance}€",
+                              size: 50,
+                              secondarySize: 30,
+                              color: theme.getColorFor(ThemeCode.textSecondary),
+                              height: 0
+                            ),
+                            Text("en su hucha", style: TextStyle(fontSize: 16, color: theme.getColorFor(ThemeCode.textSecondary), height: 0)),
+                            Text("Ahorrado ${kid.savings}€", style: TextStyle(fontSize: 14, color: theme.getColorFor(ThemeCode.textSecondary), height: 0))
+                          ])
+                        ]
+                      ),
+                    ],
+                  ),
+                ),
+                Spacer(),
+                Row(children: [
+                  TextButton(
+                    onPressed: ()=>showModalBottomSheet<void>(
+                      context: context,
+                      builder: (BuildContext context) => PhotoDialog()
+                    ),
+                    child: Row(
+                      spacing: 8,
+                      children: [
+                        Icon(Icons.edit_outlined, size: 24, color: theme.getColorFor(ThemeCode.textSecondary)),
+                        Text("Editar", style: TextStyle(fontSize: 16, color: theme.getColorFor(ThemeCode.textSecondary)))
+                      ]
+                    )
+                  ),
+                  Spacer(),
+                  SizedBox(
+                    width: 169,
+                    height: 60,
+                    child: PrimaryButton(
+                      onPressed: ()=>Navigator.push(context, MaterialPageRoute(builder: (_)=>DepositScreen(kid: kid))),
+                      text: "+ Añadir dinero",
+                      color: theme.getColorFor(ThemeCode.buttonSecondary),
+                      radius: 12,
+                    )
+                    /*FilledButton(
+                      onPressed: ()=>Navigator.push(context, MaterialPageRoute(builder: (_)=>DepositScreen(kid: kid))),
+                      style: ButtonStyle(
+                        shape: WidgetStateProperty.all<RoundedRectangleBorder>(
+                          RoundedRectangleBorder(
+                            borderRadius: BorderRadius.circular(12),
+                          )
+                        ),
+                        backgroundColor: WidgetStatePropertyAll<Color>(theme.getColorFor(ThemeCode.buttonSecondary)),
+                        padding: WidgetStatePropertyAll(EdgeInsets.all(0))
+                      ),
+                      child: Center(
+                        child: Text(
+                          "+ Añadir dinero",
+                          style: TextStyle(
+                            fontSize: 18,
+                            fontWeight: FontWeight.w500
+                          )
+                        )
+                      )
+                    )*/
+                  )
+                ])
+              ]
+            )
+          ]
+        )
+      )
+  );
+  }
+}
+
+class PhotoDialog extends ConsumerWidget{
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final theme = ref.watch(themePortProvider);
+
+    return Container(
+      height: 247,
+      width: double.infinity,
+      padding: EdgeInsets.all(24),
+      decoration: BoxDecoration(
+        color: theme.getColorFor(ThemeCode.backgroundPrimary),
+        borderRadius: BorderRadius.only(
+          topRight: Radius.circular(16), topLeft: Radius.circular(16)
+        )
+      ),
+      child: Column(
+        spacing: 24,
+        children: [
+          Column(
+            spacing: 16,
+            children: [
+              PrimaryButton(
+                onPressed: ()=>{},
+                text: "Cámara",
+                color: theme.getColorFor(ThemeCode.buttonPrimary)
+              ),
+              OutlinedButton(
+                onPressed: () => {},
+                child: Expanded(
+                  child: Center(
+                    child: Text(
+                      "Galería de fotos",
+                      style: TextStyle(
+                        fontSize: 18,
+                        fontWeight: FontWeight.w500,
+                        color: theme.getColorFor(
+                          ThemeCode.textPrimary)
+                      )
+                    )
+                  )
+                )
+              )
+            ]
+          ),
+          TextButton(
+            onPressed: () => {Navigator.pop(context)},
+            child: Text(
+              "Cancelar",
+              style: TextStyle(
+                fontWeight: FontWeight.w500,
+                fontSize: 16
+              )
+            )
+          )
+        ],
+      )
+    );
+  }
+}
+
+class WalletPainter extends CustomPainter {
+
+  final WidgetRef ref;
+  final int index;
+
+  WalletPainter(this.ref, this.index);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final theme = ref.watch(themePortProvider);
+    final gradient = theme.getCardColorFor(index);
+
+    final brush = Paint()
+      ..shader = ui.Gradient.linear(
+          Offset(0, 0),
+          Offset(size.width, size.height),
+          gradient,
+          List<double>.generate(gradient.length, (int index){
+            return index/(gradient.length-1);
+          })
+      )
+      ..strokeWidth = 3
+      ..strokeCap = StrokeCap.round;
+
+    final double radius = 20;
+    final double buttonHeight = 60;
+    final double buttonWidth = 169;
+
+    final path = Path()
+      ..moveTo(radius, 0)
+      ..lineTo(size.width-radius, 0)
+      ..arcToPoint(Offset(size.width, radius), radius: Radius.circular(radius))
+      ..lineTo(size.width, size.height-buttonHeight-1.5*radius)
+      ..arcToPoint(Offset(size.width-radius, size.height-buttonHeight-0.5*radius), radius: Radius.circular(radius))
+      ..lineTo(size.width-buttonWidth+0.5*radius, size.height-buttonHeight-0.5*radius)
+      ..arcToPoint(Offset(size.width-buttonWidth-0.5*radius, size.height-buttonHeight+0.5*radius), radius: Radius.circular(radius), clockwise: false)
+      ..lineTo(size.width-buttonWidth-0.5*radius, size.height-radius)
+      ..arcToPoint(Offset(size.width-buttonWidth-1.5*radius, size.height), radius: Radius.circular(radius))
+      ..lineTo(radius, size.height)
+      ..arcToPoint(Offset(0, size.height-radius), radius: Radius.circular(radius))
+      ..lineTo(0, radius)
+      ..arcToPoint(Offset(radius, 0), radius: Radius.circular(radius))
+      ..close();
+
+    canvas.drawPath(path, brush);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

modules/home/lib/src/presentation/wallet_management_layout.dart

@@ -19,6 +19,8 @@ class WalletManagementLayout extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final theme = ref.watch(themePortProvider);
 
+    final bool locked = false;
+
     final content = [
       Container(
         padding: EdgeInsets.symmetric(horizontal: 15, vertical: 20),
@@ -82,11 +84,11 @@ class WalletManagementLayout extends ConsumerWidget {
         children: [
           DecoratedBox(
             decoration: BoxDecoration(
-              borderRadius: const BorderRadius.all(Radius.circular(30)),
+              borderRadius: const BorderRadius.all(Radius.circular(24)),
               gradient: LinearGradient(
                 begin: Alignment.topLeft,
                 end: Alignment.bottomRight,
-                colors: theme.getCardColorFor(0),
+                colors: locked? theme.getDisabledCardColors() : theme.getCardColorFor(0)
               ),
             ),
             child: SizedBox(width: double.infinity, height: 200),

modules/home/pubspec.yaml

@@ -23,6 +23,8 @@ dependencies:
     path: ../../packages/design_system
   sf_shared:
     path: ../../packages/sf_shared
+  fonts:
+    path: ../../packages/fonts
   #dependencies go here
   flutter_svg: ^2.2.1
   flutter_riverpod: ^3.0.3

modules/notifications/lib/src/core/activity_list.dart

@@ -47,46 +47,47 @@ class ActivityListState extends ConsumerState<ActivityList> {
     };
 
     return Column(
-      spacing: 20,
+      spacing: 32,
       children: List<Widget>.generate(widget.activity.length, (int index) {
         final color = colors[index % colors.length];
         final type = widget.activity[index]["type"] as String;
 
         final logItem = Container(
-          padding: const EdgeInsets.all(20),
+          padding: const EdgeInsets.all(24),
           decoration: BoxDecoration(
             color: theme.getColorFor(ThemeCode.backgroundPrimary),
             borderRadius: const BorderRadius.all(Radius.circular(20)),
-            border: Border(left: BorderSide(color: color, width: 5)),
+            border: Border(left: BorderSide(color: color, width: 8)),
           ),
           child: Column(
-            spacing: 15,
+            spacing: 24,
             children: [
               Row(
+                spacing: 8,
                 children: [
                   Icon(icons[type], color: color),
                   const SizedBox(width: 8),
-                  Text(
+                  Expanded(child: Text(
                     titles[type]!,
                     style: const TextStyle(
                       fontWeight: FontWeight.bold,
                       fontSize: 16,
                     ),
-                  ),
+                  )),
-                  const Spacer(),
                   const Text("14/01/2005"),
                 ],
               ),
               const Align(
                 alignment: Alignment.topLeft,
-                child: Text("Ana ya tiene su paga de 5€ en el reloj"),
+                child: Text("Ana ya tiene su paga de 5€ en el reloj", style: TextStyle(fontSize: 14, letterSpacing: 0)),
-              ),
+              )
-            ],
+            ]
-          ),
+          )
         );
 
         if (widget.edit) {
           return Row(
+            spacing: 10,
             children: [
               Checkbox(
                 value: values[index],
@@ -96,15 +97,15 @@ class ActivityListState extends ConsumerState<ActivityList> {
                   });
                 },
                 activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
-                semanticLabel: "Eliminar",
+                semanticLabel: "Eliminar"
               ),
-              Expanded(child: logItem),
+              Expanded(child: logItem)
-            ],
+            ]
           );
         } else {
           return logItem;
         }
-      }),
+      })
     );
   }
-}
+}

modules/notifications/lib/src/presentation/activity_screen.dart

@@ -21,7 +21,7 @@ class ActivityScreen extends ConsumerWidget {
     final content = [
       Text(
         "Movimientos recientes",
-        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
+        style: TextStyle(fontWeight: FontWeight.w500, fontSize: 24),
       ),
       Row(
         spacing: 20,
@@ -32,7 +32,7 @@ class ActivityScreen extends ConsumerWidget {
           TextButton(onPressed: () => {}, child: Text("Mes")),
         ],
       ),
-      SizedBox(height: 200, child: LineGraph()),
+      LineGraph(),
       ActivityList(activity: activity, edit: false),
     ];
 
@@ -54,4 +54,4 @@ class ActivityScreen extends ConsumerWidget {
       ),
     );
   }
-}
+}

modules/notifications/lib/src/presentation/alert_screen.dart

@@ -29,25 +29,37 @@ class AlertScreenState extends ConsumerState<AlertScreen> {
   Widget build(BuildContext context) {
     final theme = ref.watch(themePortProvider);
 
-    return Scaffold(
+    return SafeArea(
-      backgroundColor: theme.getColorFor(ThemeCode.backgroundSecondary),
+      child: Container(
-      body: Container(
+        color: theme.getColorFor(ThemeCode.backgroundSecondary),
-        margin: EdgeInsets.all(30),
+        margin: EdgeInsets.symmetric(horizontal: 24, vertical: 16),
         child: Column(
+          spacing: 32,
           children: [
             Row(
               children: [
-                Text("Alertas"),
+                Text(
+                  "Alertas",
+                    style: TextStyle(
+                      fontSize: 24,
+                      letterSpacing: 0,
+                      fontWeight: FontWeight.w500
+                    )
+                ),
                 Spacer(),
                 TextButton(
                   onPressed: () => setState(() {
                     edit = !edit;
                   }),
-                  child: Text("Editar"),
+                  child: Text("Editar", style: TextStyle(fontSize: 16, letterSpacing: 0)),
                 ),
               ],
             ),
-            ActivityList(activity: activity, edit: edit),
+            Expanded(
+              child: SingleChildScrollView(
+                child: ActivityList(activity: activity, edit: edit)
+              )
+            )
           ],
         ),
       ),

modules/profile/lib/src/core/kid_line_chart.dart

@@ -0,0 +1,178 @@
+import 'package:design_system/design_system.dart';
+import 'package:fl_chart/fl_chart.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:sf_shared/sf_shared.dart';
+
+class KidLineChart extends ConsumerWidget{
+  final int index;
+  final Kid kid;
+
+  final weekDays = const ["L", "M", "X", "J", "V", "S", "D"];
+
+  const KidLineChart({
+    super.key,
+    required this.kid,
+    this.index = 0
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final theme = ref.watch(themePortProvider);
+
+    return Container(
+      width: 183,
+      padding: EdgeInsets.all(24),
+      decoration: BoxDecoration(
+        gradient: LinearGradient(colors: theme.getCardColorFor(index)),
+        borderRadius: BorderRadius.all(Radius.circular(16)),
+      ),
+      child: Column(
+        spacing: 16,
+        children: [
+          Row(
+            spacing: 16,
+            children: [
+              SizedBox(
+                height: 50,
+                width: 50,
+                child: SvgPicture.asset("assets/images/ui/face.svg"),
+              ),
+              Column(children: [
+                Text(
+                  kid.name,
+                  textAlign: TextAlign.left,
+                  style: TextStyle(
+                    fontWeight: FontWeight.w500,
+                    fontSize: 16,
+                    color: theme.getColorFor(ThemeCode.textSecondary)
+                  )
+                ),
+                MoneyText(
+                  text: "${kid.balance}€",
+                  size: 26,
+                  secondarySize: 16,
+                  color: theme.getColorFor(ThemeCode.textSecondary)
+                )
+              ])
+            ],
+          ),
+          SizedBox(
+            height: 93,
+            child: LineChart(LineChartData(
+              gridData: FlGridData(
+                show: true,
+                drawHorizontalLine: false,
+                drawVerticalLine: true,
+                verticalInterval: 1,
+                getDrawingVerticalLine: (value)=>FlLine(strokeWidth: 12, color: Colors.black26)
+              ),
+              titlesData: FlTitlesData(
+                bottomTitles: AxisTitles(
+                  sideTitles: SideTitles(
+                    interval: 1,
+                    showTitles: true,
+                    reservedSize: 29,
+                    getTitlesWidget: (double value, TitleMeta meta){
+                      String text = weekDays[value.toInt()];
+
+                      return SideTitleWidget(
+                        space: 4,
+                        meta: meta,
+                        child: Expanded(
+                          child: Center(
+                            child: Text(
+                              text,
+                              style: TextStyle(
+                                fontSize: 12,
+                                fontWeight: FontWeight.w500,
+                                color: theme.getColorFor(ThemeCode.textSecondary)
+                              )
+                            )
+                          )
+                        ),
+                      );
+                    },
+                  ),
+                ),
+                leftTitles: AxisTitles(),
+                topTitles: AxisTitles(),
+                rightTitles: AxisTitles()
+              ),
+              lineTouchData: LineTouchData(
+                touchTooltipData: LineTouchTooltipData(
+                  tooltipBorderRadius: BorderRadius.all(Radius.circular(7)),
+                  getTooltipColor: (spot) => theme.getColorFor(ThemeCode.buttonSecondary),
+                  getTooltipItems: (List<LineBarSpot> touchedSpots) {
+                    return touchedSpots.map((LineBarSpot touchedSpot) {
+                      return LineTooltipItem(
+                        "${touchedSpot.y}€",
+                        TextStyle(
+                          fontWeight: FontWeight.w500,
+                          fontSize: 14,
+                          color: theme.getColorFor(ThemeCode.textSecondary)
+                        ),
+                      );
+                    }).toList();
+                  },
+                ),
+                getTouchedSpotIndicator: (
+                    _,
+                    indicators,
+                    ) {
+                  return indicators
+                      .map((int index) => const TouchedSpotIndicatorData(
+                    FlLine(color: Colors.transparent),
+                    FlDotData(show: false),
+                  ))
+                      .toList();
+                },
+                touchSpotThreshold: 25,
+                distanceCalculator:
+                    (Offset touchPoint, Offset spotPixelCoordinates) =>
+                (touchPoint - spotPixelCoordinates).distance,
+              ),
+              borderData: FlBorderData(
+                show: true,
+                border: Border(
+                  bottom: BorderSide(
+                    color: Colors.lightBlue.withValues(alpha: 0.2),
+                    width: 4
+                  ),
+                  left: const BorderSide(color: Colors.transparent),
+                  right: const BorderSide(color: Colors.transparent),
+                  top: const BorderSide(color: Colors.transparent),
+                ),
+              ),
+              lineBarsData: [
+                LineChartBarData(
+                  isCurved: true,
+                  color: Colors.white,
+                  barWidth: 4,
+                  isStrokeCapRound: true,
+                  dotData: const FlDotData(show: false),
+                  belowBarData: BarAreaData(show: false),
+                  spots: List<FlSpot>.generate(weekDays.length, (int index){
+                    return FlSpot(index.toDouble(), ((index+1)%2)/2+0.25);
+                  })
+                )
+              ],
+              minX: 0,
+              maxX: weekDays.length-1,
+              maxY: 1,
+              minY: 0,
+            ))
+          ),
+          Row(
+            spacing: 16,
+            children: [
+              Text("Editar hucha", style: TextStyle(color: theme.getColorFor(ThemeCode.textSecondary), fontSize: 14)),
+              Icon(Icons.edit_outlined, color: theme.getColorFor(ThemeCode.textSecondary), size: 13)
+            ]
+          )
+        ]
+      )
+    );
+  }
+}

modules/profile/lib/src/presentation/profile_screen.dart

@@ -1,6 +1,7 @@
 import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:notifications/notifications.dart';
+import 'package:profile/src/core/kid_line_chart.dart';
 import 'package:profile/src/settings_screen.dart';
 import 'package:sf_shared/sf_shared.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
@@ -19,9 +20,16 @@ class ProfileScreen extends ConsumerWidget {
       {"type": "lock"},
     ];
 
+    final kids = [
+      Kid(name: "Ana", balance: 15, savings: 5),
+      Kid(name: "Carlos", balance: 15, savings: 5)
+    ];
+
     final name = "Juan";
     final total = 95.03;
     final available = 44.09;
+    final savings = 4.16;
+    final savingsPlan = 30.0;
 
     final content = [
       Row(
@@ -49,53 +57,45 @@ class ProfileScreen extends ConsumerWidget {
           ),
         ],
       ),
+      WalletBalanceBlock(max: total, value: available, savings: savings, savingsPlan: savingsPlan),
+      LineGraph(),
+      DepositBlock(max: 150 - total),
       Container(
-        padding: EdgeInsets.all(20),
+        padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
         decoration: BoxDecoration(
+          borderRadius: BorderRadius.all(Radius.circular(10)),
           color: theme.getColorFor(ThemeCode.backgroundPrimary),
-          borderRadius: BorderRadius.all(Radius.circular(20)),
         ),
-        child: Column(
+        child: TextButton(
-          spacing: 5,
+          onPressed: ()=>{},
-          children: [
+          child: Row(
-            Row(
+            spacing: 10,
-              children: [
+            children: [
-                Text("Wallet", style: TextStyle(fontWeight: FontWeight.bold)),
+              Icon(Icons.output_outlined,
-                Spacer(),
+                size: 24,
-                Text("$total€"),
+                color: theme.getColorFor(ThemeCode.textPrimary)
-              ],
+              ),
-            ),
+              Text(
-            Stack(
+                "Retirar dinero del wallet",
-              children: [
+                style: TextStyle(
-                LinearProgressIndicator(
+                  fontSize: 20,
-                  value: available / total,
+                  fontWeight: FontWeight.w500,
-                  minHeight: 70,
+                  color: theme.getColorFor(ThemeCode.textPrimary)
-                  borderRadius: BorderRadius.all(Radius.circular(16)),
+                )
-                ),
+              )
-                FractionallySizedBox(
+            ],
-                  widthFactor: available / total,
+          )
-                  child: Container(
+        )
-                    padding: EdgeInsets.symmetric(vertical: 20),
+      ),
-                    child: Center(
+      SingleChildScrollView(
-                      child: Text(
+        scrollDirection: Axis.horizontal,
-                        "$available€",
+        child: Row(
-                        style: TextStyle(
+          spacing: 16,
-                          color: theme.getColorFor(ThemeCode.textSecondary),
+          children: List<Widget>.generate(kids.length, (int index){
-                          fontSize: 20,
+            return KidLineChart(kid: kids[index], index: index);
-                        ),
+          })
-                      ),
-                    ),
-                  ),
-                ),
-              ],
-            ),
-            Center(child: Text("Disponible")),
-          ],
         ),
       ),
-      SizedBox(height: 200, child: LineGraph()),
-      DepositBlock(max: 150 - total),
-      Row(),
       ActivityList(activity: activity, edit: false),
     ];
 
@@ -105,7 +105,7 @@ class ProfileScreen extends ConsumerWidget {
         children: [
           DecoratedBox(
             decoration: BoxDecoration(
-              borderRadius: const BorderRadius.all(Radius.circular(30)),
+              borderRadius: const BorderRadius.only(bottomRight: Radius.circular(24), bottomLeft: Radius.circular(24)),
               color: Color(0xFF4B4B4B),
             ),
             child: SizedBox(width: double.infinity, height: 200),

modules/profile/lib/src/settings_screen.dart

@@ -41,7 +41,7 @@ class SettingsScreen extends ConsumerWidget {
         ),
       ),
       Container(
-        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
+        padding: EdgeInsets.all(24),
         decoration: BoxDecoration(
           borderRadius: BorderRadius.all(Radius.circular(20)),
           color: theme.getColorFor(ThemeCode.backgroundPrimary),
@@ -57,15 +57,15 @@ class SettingsScreen extends ConsumerWidget {
                 ),
                 Spacer(),
                 TextButton(onPressed: () => {}, child: Text("Editar wallet")),
-                Icon(Icons.attach_money),
+                Icon(Icons.account_balance, size: 24),
               ],
             ),
-            Text(relation),
+            Align(alignment: Alignment.centerLeft, child: Text(relation)),
           ],
         ),
       ),
       Container(
-        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
+        padding: EdgeInsets.all(24),
         decoration: BoxDecoration(
           borderRadius: BorderRadius.all(Radius.circular(20)),
           color: theme.getColorFor(ThemeCode.backgroundPrimary),
@@ -73,7 +73,6 @@ class SettingsScreen extends ConsumerWidget {
         child: Column(
           children: [
             Row(
-              spacing: 10,
               children: [
                 Text(
                   "Datos personales",
@@ -83,47 +82,56 @@ class SettingsScreen extends ConsumerWidget {
                 TextButton(onPressed: () => {}, child: Text("Editar")),
               ],
             ),
-            Text.rich(
+            Align(
-              TextSpan(
+              alignment: Alignment.centerLeft,
-                text: "Nombre: ",
+              child: Text.rich(
-                style: TextStyle(fontWeight: FontWeight.bold),
+                TextSpan(
-                children: [
+                  text: "Nombre: ",
-                  TextSpan(
+                  style: TextStyle(fontWeight: FontWeight.bold),
-                    text: fullName,
+                  children: [
-                    style: TextStyle(fontWeight: FontWeight.normal),
+                    TextSpan(
-                  ),
+                      text: fullName,
-                ],
+                      style: TextStyle(fontWeight: FontWeight.normal),
-              ),
+                    ),
+                  ],
+                ),
+              )
             ),
-            Text.rich(
+            Align(
-              TextSpan(
+              alignment: Alignment.centerLeft,
-                text: "Fecha de nacimiento: ",
+              child: Text.rich(
-                style: TextStyle(fontWeight: FontWeight.bold),
+                TextSpan(
-                children: [
+                  text: "Fecha de nacimiento: ",
-                  TextSpan(
+                  style: TextStyle(fontWeight: FontWeight.bold),
-                    text: birthDate,
+                  children: [
-                    style: TextStyle(fontWeight: FontWeight.normal),
+                    TextSpan(
-                  ),
+                      text: birthDate,
-                ],
+                      style: TextStyle(fontWeight: FontWeight.normal),
-              ),
+                    ),
+                  ],
+                ),
+              )
             ),
-            Text.rich(
+            Align(
-              TextSpan(
+              alignment: Alignment.centerLeft,
-                text: "Familiar: ",
+              child: Text.rich(
-                style: TextStyle(fontWeight: FontWeight.bold),
+                TextSpan(
-                children: [
+                  text: "Familiar: ",
-                  TextSpan(
+                  style: TextStyle(fontWeight: FontWeight.bold),
-                    text: relation,
+                  children: [
-                    style: TextStyle(fontWeight: FontWeight.normal),
+                    TextSpan(
-                  ),
+                      text: relation,
-                ],
+                      style: TextStyle(fontWeight: FontWeight.normal),
-              ),
+                    ),
+                  ],
+                ),
+              )
             ),
           ],
         ),
       ),
       Container(
-        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
+        padding: EdgeInsets.all(24),
         decoration: BoxDecoration(
           borderRadius: BorderRadius.all(Radius.circular(20)),
           color: theme.getColorFor(ThemeCode.backgroundPrimary),
@@ -131,7 +139,6 @@ class SettingsScreen extends ConsumerWidget {
         child: Column(
           children: [
             Row(
-              spacing: 10,
               children: [
                 Text(
                   "Dirección",
@@ -141,47 +148,56 @@ class SettingsScreen extends ConsumerWidget {
                 TextButton(onPressed: () => {}, child: Text("Editar")),
               ],
             ),
-            Text.rich(
+            Align(
-              TextSpan(
+              alignment: Alignment.centerLeft,
-                text: "Dirección: ",
+              child: Text.rich(
-                style: TextStyle(fontWeight: FontWeight.bold),
+                TextSpan(
-                children: [
+                  text: "Dirección: ",
-                  TextSpan(
+                  style: TextStyle(fontWeight: FontWeight.bold),
-                    text: address,
+                  children: [
-                    style: TextStyle(fontWeight: FontWeight.normal),
+                    TextSpan(
-                  ),
+                      text: address,
-                ],
+                      style: TextStyle(fontWeight: FontWeight.normal),
+                    ),
+                  ],
+                ),
               ),
             ),
-            Text.rich(
+            Align(
-              TextSpan(
+              alignment: Alignment.centerLeft,
-                text: "País: ",
+              child: Text.rich(
-                style: TextStyle(fontWeight: FontWeight.bold),
+                TextSpan(
-                children: [
+                  text: "País: ",
-                  TextSpan(
+                  style: TextStyle(fontWeight: FontWeight.bold),
-                    text: country,
+                  children: [
-                    style: TextStyle(fontWeight: FontWeight.normal),
+                    TextSpan(
-                  ),
+                      text: country,
-                ],
+                      style: TextStyle(fontWeight: FontWeight.normal),
+                    ),
+                  ],
+                ),
               ),
             ),
-            Text.rich(
+            Align(
-              TextSpan(
+              alignment: Alignment.centerLeft,
-                text: "Nacionalidad: ",
+              child: Text.rich(
-                style: TextStyle(fontWeight: FontWeight.bold),
+                TextSpan(
-                children: [
+                  text: "Nacionalidad: ",
-                  TextSpan(
+                  style: TextStyle(fontWeight: FontWeight.bold),
-                    text: nationality,
+                  children: [
-                    style: TextStyle(fontWeight: FontWeight.normal),
+                    TextSpan(
-                  ),
+                      text: nationality,
-                ],
+                      style: TextStyle(fontWeight: FontWeight.normal),
+                    ),
+                  ],
+                ),
               ),
-            ),
+            )
           ],
         ),
       ),
       Container(
-        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
+        padding: EdgeInsets.all(24),
         decoration: BoxDecoration(
           borderRadius: BorderRadius.all(Radius.circular(20)),
           color: theme.getColorFor(ThemeCode.backgroundPrimary),
@@ -189,7 +205,6 @@ class SettingsScreen extends ConsumerWidget {
         child: Column(
           children: [
             Row(
-              spacing: 10,
               children: [
                 Text(
                   "Usuario",
@@ -199,42 +214,46 @@ class SettingsScreen extends ConsumerWidget {
                 TextButton(onPressed: () => {}, child: Text("Editar")),
               ],
             ),
-            Text.rich(
+            Align(
-              TextSpan(
+              alignment: Alignment.centerLeft,
-                text: "Correo: ",
+              child: Text.rich(
-                style: TextStyle(fontWeight: FontWeight.bold),
+                TextSpan(
-                children: [
+                  text: "Correo: ",
-                  TextSpan(
+                  style: TextStyle(fontWeight: FontWeight.bold),
-                    text: email,
+                  children: [
-                    style: TextStyle(fontWeight: FontWeight.normal),
+                    TextSpan(
-                  ),
+                      text: email,
-                ],
+                      style: TextStyle(fontWeight: FontWeight.normal),
+                    ),
+                  ],
+                ),
               ),
             ),
-            Text.rich(
+            Align(
-              TextSpan(
+              alignment: Alignment.centerLeft,
-                text: "Teléfono: ",
+              child: Text.rich(
-                style: TextStyle(fontWeight: FontWeight.bold),
+                TextSpan(
-                children: [
+                  text: "Teléfono: ",
-                  TextSpan(
+                  style: TextStyle(fontWeight: FontWeight.bold),
-                    text: phone,
+                  children: [
-                    style: TextStyle(fontWeight: FontWeight.normal),
+                    TextSpan(
-                  ),
+                      text: phone,
-                ],
+                      style: TextStyle(fontWeight: FontWeight.normal),
+                    ),
+                  ],
+                ),
               ),
-            ),
+            )
           ],
         ),
       ),
-
       Container(
-        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
+        padding: EdgeInsets.all(24),
         decoration: BoxDecoration(
           borderRadius: BorderRadius.all(Radius.circular(20)),
           color: theme.getColorFor(ThemeCode.backgroundPrimary),
         ),
         child: Row(
-          spacing: 10,
           children: [
             Text(
               "Cambio de contraseña",
@@ -246,7 +265,7 @@ class SettingsScreen extends ConsumerWidget {
         ),
       ),
       Container(
-        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
+        padding: EdgeInsets.all(24),
         decoration: BoxDecoration(
           borderRadius: BorderRadius.all(Radius.circular(20)),
           color: theme.getColorFor(ThemeCode.backgroundPrimary),
@@ -254,7 +273,6 @@ class SettingsScreen extends ConsumerWidget {
         child: Column(
           children: [
             Row(
-              spacing: 10,
               children: [
                 Text(
                   "Método de pago",
@@ -269,7 +287,26 @@ class SettingsScreen extends ConsumerWidget {
         ),
       ),
       Container(
-        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
+        padding: EdgeInsets.all(24),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.all(Radius.circular(20)),
+          color: theme.getColorFor(ThemeCode.backgroundPrimary),
+        ),
+        child: Column(
+          spacing: 24,
+          children: [
+            Text(
+              "Retirar y reembolsar dinero del wallet",
+              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
+            ),
+            Text("Para transferirte el saldo a tu cuenta necesitamos tu IBAN y algunos datos básics. Así nos aseguramos de que la transferencia sea segura y rápida."),
+            CustomTextField(label: "Nombre y Apellidos", hint: "******"),
+            CustomTextField(label: "IBAN con número español", hint: "******")
+          ],
+        ),
+      ),
+      Container(
+        padding: EdgeInsets.all(24),
         decoration: BoxDecoration(
           borderRadius: BorderRadius.all(Radius.circular(20)),
           color: theme.getColorFor(ThemeCode.backgroundTertiary),
@@ -277,7 +314,6 @@ class SettingsScreen extends ConsumerWidget {
         child: Column(
           children: [
             Row(
-              spacing: 10,
               children: [
                 Text(
                   "Plan anual",
@@ -287,15 +323,81 @@ class SettingsScreen extends ConsumerWidget {
                 TextButton(onPressed: () => {}, child: Text("Cambiar Plan")),
               ],
             ),
-            Text("Sin permanencia"),
+            Align(
-            Text("Llamadas y datos ilimitados"),
+              alignment: Alignment.centerLeft,
-            Text("2 meses gratis"),
+              child: Row(
+                spacing: 8,
+                children: [
+                  Icon(Icons.check, size: 24),
+                  Text(
+                    "Sin permanencia",
+                    style: TextStyle(fontSize: 16, letterSpacing: 0),
+                  ),
+                ],
+              )
+            ),
+            Align(
+              alignment: Alignment.centerLeft,
+              child: Row(
+                spacing: 8,
+                children: [
+                  Icon(Icons.check, size: 24),
+                  Text(
+                    "Llamadas y datos ilimitados",
+                    style: TextStyle(fontSize: 16, letterSpacing: 0),
+                  ),
+                ],
+              )
+            ),
+            Align(
+              alignment: Alignment.centerLeft,
+              child: Row(
+                spacing: 8,
+                children: [
+                  Icon(Icons.check, size: 24),
+                  Text(
+                    "2 meses gratis",
+                    style: TextStyle(fontSize: 16, letterSpacing: 0),
+                  ),
+                ],
+              )
+            ),
           ],
         ),
       ),
-
+      Column(
-      TextButton(onPressed: () => {}, child: Text("Contáctanos")),
+        spacing: 16,
-      TextButton(onPressed: () => {}, child: Text("Preguntas frecuentes")),
+        children: [
+          Align(
+            alignment: Alignment.topLeft,
+            child: TextButton(
+              style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
+              onPressed: () => {},
+              child: Row(
+                spacing: 4,
+                children: [
+                  Icon(Icons.contact_support_outlined, size: 24),
+                  Text("Contáctanos")
+                ],
+              )
+            )
+          ),
+          Align(
+            alignment: Alignment.topLeft,
+            child: TextButton(
+              style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
+              onPressed: () => {},
+              child: Row(
+                spacing: 4,
+                children: [
+                  Icon(Icons.contact_support_outlined, size: 24),
+                  Text("Preguntas frecuentes")
+                ],
+              )
+            )
+          ),
+        ],
+      )
     ];
 
     return Scaffold(
@@ -304,7 +406,7 @@ class SettingsScreen extends ConsumerWidget {
         children: [
           DecoratedBox(
             decoration: BoxDecoration(
-              borderRadius: const BorderRadius.all(Radius.circular(30)),
+              borderRadius: const BorderRadius.only(bottomLeft: Radius.circular(24), bottomRight: Radius.circular(24)),
               color: Color(0xFF4B4B4B),
             ),
             child: SizedBox(width: double.infinity, height: 200),
@@ -336,13 +438,10 @@ class SettingsScreen extends ConsumerWidget {
                 ),
                 child: Column(
                   children: [
-                    FilledButton(
+                    PrimaryButton(
                       onPressed: () => {},
-                      child: Container(
+                      text: "Guardar cambios",
-                        width: double.infinity,
+                      color: theme.getColorFor(ThemeCode.buttonPrimary)
-                        padding: EdgeInsets.all(20),
-                        child: Center(child: Text("Guardar cambios")),
-                      ),
                     ),
                     TextButton(
                       onPressed: () => Navigator.pop(context),

modules/profile/pubspec.yaml

@@ -25,6 +25,8 @@ dependencies:
   flutter_riverpod: ^3.0.3
   get_it: ^9.0.5
   go_router: ^17.0.0
+  flutter_svg: ^2.2.2
+  fl_chart: ^1.1.1
   
 dev_dependencies:
   flutter_test:

packages/design_system/lib/design_system.dart

@@ -1,3 +1,12 @@
 export 'src/theme/theme_port.dart';
 export 'src/theme/theme_sf_adapter.dart';
 export 'src/icons/sf_icons.dart';
+export 'src/steps/step_indicator.dart';
+export 'src/texts/money_text.dart';
+export 'src/progress_bars/progress_bar.dart';
+export 'src/inputs/textfields.dart';
+export 'src/snackbars/snackbar.dart';
+export 'src/buttons/primary_button.dart';
+export 'src/buttons/secondary_button.dart';
+export 'src/buttons/custom_text_button.dart';
+export 'src/dropdowns/dropdown.dart';

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

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+
+class CustomTextButton extends StatelessWidget {
+  final VoidCallback onPressed;
+  final String text;
+  final double size;
+  final FontWeight weight;
+  final Color? color;
+
+  const CustomTextButton({
+    super.key,
+    required this.onPressed,
+    required this.text,
+    this.size = 14,
+    this.weight = FontWeight.normal,
+    this.color,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return TextButton(
+      style: const ButtonStyle(
+        padding: WidgetStatePropertyAll<EdgeInsetsGeometry>(EdgeInsets.zero),
+      ),
+      onPressed: onPressed,
+      child: Text(
+        text,
+        style: TextStyle(
+          fontSize: size,
+          fontWeight: weight,
+          letterSpacing: 0,
+          color: color ?? const Color(0xFF4B4B4B),
+          decoration: TextDecoration.underline,
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+
+class PrimaryButton extends StatelessWidget {
+  final VoidCallback onPressed;
+  final String text;
+  final Color color;
+  final double height;
+  final double? width;
+  final double size;
+  final double radius;
+  final double padding;
+
+  const PrimaryButton({
+    super.key,
+    required this.onPressed,
+    required this.text,
+    required this.color,
+    this.height = 60,
+    this.width,
+    this.size = 18,
+    this.radius = 18,
+    this.padding = 0,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return FilledButton(
+      style: ButtonStyle(
+        backgroundColor: WidgetStatePropertyAll<Color>(color),
+        padding: WidgetStatePropertyAll<EdgeInsetsGeometry>(
+          EdgeInsets.symmetric(horizontal: padding),
+        ),
+        shape: WidgetStatePropertyAll<OutlinedBorder>(
+          RoundedRectangleBorder(
+            borderRadius: BorderRadius.all(Radius.circular(radius)),
+          ),
+        ),
+      ),
+      onPressed: onPressed,
+      child: SizedBox(
+        width: width,
+        height: height,
+        child: Center(
+          child: Text(
+            text,
+            textAlign: TextAlign.center,
+            style: TextStyle(
+              fontSize: size,
+              fontWeight: FontWeight.w500,
+              letterSpacing: 0,
+              color: Colors.white, // theme.getColorFor(ThemeCode.textSecondary)
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,70 @@
+import 'package:flutter/material.dart';
+
+class SecondaryButton extends StatelessWidget {
+  final VoidCallback onPressed;
+  final String? text;
+  final IconData? icon;
+  final String? label;
+  final Color? color;
+  final double radius;
+  final double padding;
+  final double height;
+  final double? width;
+  final double? size;
+
+  const SecondaryButton({
+    super.key,
+    required this.onPressed,
+    this.text,
+    this.icon,
+    this.label,
+    this.color,
+    this.radius = 18,
+    this.padding = 0,
+    this.height = 60,
+    this.width,
+    this.size,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return OutlinedButton(
+      style: ButtonStyle(
+        padding: WidgetStatePropertyAll(
+          EdgeInsets.symmetric(horizontal: padding),
+        ),
+        shape: WidgetStatePropertyAll(
+          RoundedRectangleBorder(
+            borderRadius: BorderRadius.all(Radius.circular(radius)),
+            side: BorderSide(color: Color(0xFF4B4B4B)),
+          ),
+        ),
+      ),
+      onPressed: onPressed,
+      child: SizedBox(
+        width: width,
+        height: height,
+        child: Center(
+          child: text != null
+              ? Text(
+                  text!,
+                  textAlign: TextAlign.center,
+                  semanticsLabel: label,
+                  style: TextStyle(
+                    fontSize: size ?? 18,
+                    fontWeight: FontWeight.w500,
+                    letterSpacing: 0,
+                    color: Color(0xFF4B4B4B),
+                  ),
+                )
+              : Icon(
+                  icon,
+                  semanticLabel: label,
+                  size: size ?? 24,
+                  color: color ?? Color(0xFF4B4B4B),
+                ),
+        ),
+      ),
+    );
+  }
+}

packages/design_system/lib/src/dropdowns/dropdown.dart

@@ -0,0 +1,76 @@
+import 'package:flutter/material.dart';
+
+class CustomDropdown extends StatelessWidget {
+  final List<Widget> items;
+  final List<dynamic>? values;
+  final ValueChanged<dynamic> onChanged;
+  final dynamic value;
+  final String? hint;
+  final String? label;
+  final double radius;
+  final double height;
+  final double width;
+  final Color? color;
+
+  const CustomDropdown({
+    super.key,
+    required this.items,
+    this.values,
+    required this.onChanged,
+    this.value,
+    this.hint,
+    this.label,
+    this.radius = 12,
+    this.width = double.infinity,
+    this.height = 70,
+    this.color,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      spacing: 8,
+      children: [
+        if (label != null)
+          Align(
+            alignment: Alignment.bottomLeft,
+            child: Text(
+              label!,
+              style: const TextStyle(fontSize: 14, letterSpacing: 0),
+            ),
+          ),
+        SizedBox(
+          width: width,
+          height: height,
+          child: Center(
+            child: DropdownButtonFormField<dynamic>(
+              dropdownColor: Colors.white,
+              decoration: InputDecoration(
+                enabledBorder: OutlineInputBorder(
+                  borderRadius: BorderRadius.all(Radius.circular(radius)),
+                  borderSide: BorderSide(
+                    color: color ?? const Color(0xFF4B4B4B),
+                  ),
+                ),
+              ),
+              initialValue: value,
+              onChanged: onChanged,
+              hint: hint != null ? Text(hint!) : null,
+              items: List<DropdownMenuItem<dynamic>>.generate(items.length, (
+                int index,
+              ) {
+                final dynamic itemValue = values != null
+                    ? values![index]
+                    : index;
+                return DropdownMenuItem<dynamic>(
+                  value: itemValue,
+                  child: items[index],
+                );
+              }),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

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

@@ -0,0 +1,89 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+class CustomTextField extends StatefulWidget {
+  final bool? showPassword;
+  final bool numeric;
+  final String hint;
+  final String label;
+  final int? lines;
+  final ValueChanged<String>? onChanged;
+  final int? length;
+
+  const CustomTextField({
+    super.key,
+    this.showPassword,
+    this.numeric = false,
+    this.hint = '',
+    this.label = '',
+    this.lines,
+    this.length,
+    this.onChanged,
+  });
+
+  @override
+  State<CustomTextField> createState() => CustomTextFieldState();
+}
+
+class CustomTextFieldState extends State<CustomTextField> {
+  late bool _showPassword;
+  @override
+  void initState() {
+    super.initState();
+    _showPassword = widget.showPassword ?? true;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      spacing: 8,
+      children: [
+        if (widget.label.isNotEmpty)
+          Align(
+            alignment: Alignment.bottomLeft,
+            child: Text(
+              widget.label,
+              style: const TextStyle(fontSize: 14, letterSpacing: 0),
+            ),
+          ),
+        TextFormField(
+          keyboardType: widget.numeric
+              ? TextInputType.number
+              : TextInputType.text,
+          obscureText: !_showPassword,
+          enableSuggestions: _showPassword,
+          autocorrect: !_showPassword,
+          style: const TextStyle(color: Color(0xFF4B4B4B)),
+          inputFormatters: widget.numeric
+              ? <TextInputFormatter>[FilteringTextInputFormatter.digitsOnly]
+              : const <TextInputFormatter>[],
+          decoration: InputDecoration(
+            counterText: "",
+            hintText: widget.hint,
+            border: const OutlineInputBorder(
+              borderRadius: BorderRadius.all(Radius.circular(12)),
+              borderSide: BorderSide(color: Color(0xFF4B4B4B)),
+              gapPadding: 16,
+            ),
+            suffixIcon: widget.showPassword != null
+                ? IconButton(
+                    icon: Icon(
+                      _showPassword ? Icons.visibility_off : Icons.visibility,
+                    ),
+                    onPressed: () {
+                      setState(() {
+                        _showPassword = !_showPassword;
+                      });
+                    },
+                  )
+                : null,
+          ),
+          minLines: widget.lines ?? 1,
+          maxLines: widget.lines ?? 1,
+          maxLength: widget.length,
+          onChanged: widget.onChanged,
+        ),
+      ],
+    );
+  }
+}

packages/design_system/lib/src/progress_bars/progress_bar.dart

@@ -0,0 +1,54 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+
+class ProgressBar extends StatelessWidget {
+  final double max;
+  final double value;
+  final double height;
+  final double textSize;
+  final double textSecondarySize;
+  final Color backgroundColor;
+  final Color foregroundColor;
+  final Color textColor;
+
+  const ProgressBar({
+    super.key,
+    required this.max,
+    required this.value,
+    required this.height,
+    required this.textSize,
+    required this.textSecondarySize,
+    required this.backgroundColor,
+    required this.foregroundColor,
+    required this.textColor,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: [
+        LinearProgressIndicator(
+          value: value / max,
+          minHeight: height,
+          borderRadius: BorderRadius.all(Radius.circular(24)),
+          color: foregroundColor,
+          backgroundColor: backgroundColor,
+        ),
+        FractionallySizedBox(
+          widthFactor: value / max,
+          child: SizedBox(
+            height: height,
+            child: Center(
+              child: MoneyText(
+                text: "$value€",
+                size: textSize,
+                secondarySize: textSecondarySize,
+                color: textColor,
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

packages/design_system/lib/src/snackbars/snackbar.dart

@@ -0,0 +1,57 @@
+import 'package:flutter/material.dart';
+
+enum MessageType { info, error, warning, success }
+
+class CustomSnackBar extends StatelessWidget {
+  final MessageType? type;
+  final String message;
+
+  const CustomSnackBar({super.key, this.type, required this.message});
+
+  @override
+  SnackBar build(BuildContext context) {
+    late final Color foregroundColor;
+    late final Color backgroundColor;
+    late final IconData icon;
+
+    switch (type ?? MessageType.info) {
+      case MessageType.info:
+        backgroundColor = Color(0xFFE3EFFD);
+        foregroundColor = Color(0xFF1F4ECF);
+        icon = Icons.info;
+      case MessageType.error:
+        backgroundColor = Color(0xFFFBEDE9);
+        foregroundColor = Color(0xFFD12D00);
+        icon = Icons.cancel;
+      case MessageType.warning:
+        backgroundColor = Color(0xFFFBF3E2);
+        foregroundColor = Color(0xFFE34B04);
+        icon = Icons.warning_outlined;
+      case MessageType.success:
+        backgroundColor = Color(0xFFE2F4E8);
+        foregroundColor = Color(0xFF00713D);
+        icon = Icons.check_circle;
+    }
+
+    return SnackBar(
+      behavior: SnackBarBehavior.floating,
+      backgroundColor: backgroundColor,
+      shape: RoundedRectangleBorder(
+        side: BorderSide(color: foregroundColor, width: 1),
+        borderRadius: BorderRadius.all(Radius.circular(10)),
+      ),
+      content: Row(
+        spacing: 8,
+        children: [
+          Icon(icon, color: foregroundColor),
+          Expanded(
+            child: Text(
+              message,
+              style: TextStyle(color: Color(0xFF4B4B4B), fontSize: 14),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

packages/design_system/lib/src/steps/step_indicator.dart

@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+
+class StepIndicator extends StatelessWidget{
+  final int total;
+  final int current;
+  final Color color;
+
+  const StepIndicator({super.key, required this.total, required this.current, required this.color});
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        ...List<Widget>.generate(total, (index){
+          final bool isActive = index < current;
+
+          return AnimatedContainer(
+            duration: const Duration(milliseconds: 200),
+            curve: Curves.easeOut,
+            margin: const EdgeInsets.symmetric(horizontal: 6),
+            width: 16.0,
+            height: 16.0,
+            decoration: BoxDecoration(
+              shape: BoxShape.circle,
+              color: isActive ? color : Colors.white,
+              border: Border.all(color: color, width: 2),
+            ),
+          );
+        }),
+      ]
+    );
+  }
+}

packages/design_system/lib/src/texts/money_text.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+
+class MoneyText extends StatelessWidget {
+  final String text;
+  final double size;
+  final double? secondarySize;
+  final Color color;
+  final double height;
+
+  const MoneyText({
+    super.key,
+    required this.text,
+    required this.size,
+    this.secondarySize,
+    required this.color,
+    this.height = 1,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final split = text.contains(".") ? text.split(".") : text.split("€");
+    final mainText = split[0];
+    var secondaryText = text.contains(".") ? ",${split[1]}" : "€${split[1]}";
+
+    return Text.rich(TextSpan(
+      text: mainText,
+      style: TextStyle(
+        fontWeight: FontWeight.bold,
+        fontSize: size,
+        color: color,
+        height: height
+      ),
+      children: [
+        TextSpan(
+          text: secondaryText,
+          style: TextStyle(
+            fontWeight: FontWeight.normal,
+            fontSize: secondarySize ?? size,
+          )
+        )
+      ]
+    ));
+  }
+}

packages/design_system/lib/src/theme/theme_port.dart

@@ -25,6 +25,7 @@ enum ThemeCode {
 abstract class ThemePort {
   late Map<ThemeCode, Color> theme;
   late List<List<Color>> cardColors;
+  late List<Color> disabledCardColors;
 
   Color getColorFor(ThemeCode code) {
     Color? c = theme[code];
@@ -37,4 +38,8 @@ abstract class ThemePort {
   List<Color> getCardColorFor(int index) {
     return cardColors[index % cardColors.length];
   }
+
+  List<Color> getDisabledCardColors() {
+    return disabledCardColors;
+  }
 }

packages/design_system/lib/src/theme/theme_sf_adapter.dart

@@ -25,4 +25,11 @@ class ThemeSfAdapter extends ThemePort {
 
   @override
   List<List<Color>> get cardColors => _cardColors;
+
+  final List<Color> _disabledCardColors = [
+    Color(0xFF989797), Color(0xFF797676), Color(0xFF5F5A5A)
+  ];
+
+  @override
+  List<Color> get disabledCardColors => _disabledCardColors;
 }

packages/design_system/pubspec.yaml

@@ -16,17 +16,21 @@ dependencies:
     path: ../utils
   flutter_riverpod: ^3.0.3
   get_it: ^9.0.5
+  fonts:
+    path: ../../packages/fonts
 
 dev_dependencies:
   flutter_test:
     sdk: flutter
   flutter_lints: ^5.0.0
+  golden_toolkit: ^0.15.0
 
 # For information on the generic Dart part of this file, see the
 # following page: https://dart.dev/tools/pub/pubspec
 
 # The following section is specific to Flutter packages.
 flutter:
+  uses-material-design: true
 
   # To add assets to your package, add an assets section, like this:
   # assets:

packages/design_system/test/widget_test.dart

@@ -0,0 +1,461 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:golden_toolkit/golden_toolkit.dart';
+import 'package:design_system/design_system.dart';
+
+void main() {
+  themePackages();
+
+  testGoldens('Step Indicator', (tester) async {
+    StepIndicator stepIndicator(int step) =>
+        StepIndicator(total: 3, current: step, color: Colors.blueAccent);
+
+    final builder = GoldenBuilder.column()
+      ..addScenario('step -1', stepIndicator(-1))
+      ..addScenario('step 0', stepIndicator(0))
+      ..addScenario('step 1', stepIndicator(1))
+      ..addScenario('step 2', stepIndicator(2))
+      ..addScenario('step 3', stepIndicator(3))
+      ..addScenario('step 4', stepIndicator(4));
+
+    await tester.pumpWidgetBuilder(builder.build());
+    await screenMatchesGolden(tester, 'step_indicator');
+  });
+
+  testGoldens('Progress Bar - Small', (tester) async {
+    ProgressBar progressBar(double value, double max) => ProgressBar(
+      max: max,
+      value: value,
+      height: 24,
+      textSize: 16,
+      textSecondarySize: 12,
+      backgroundColor: Colors.blueGrey,
+      foregroundColor: Colors.blueAccent,
+      textColor: Colors.black87,
+    );
+
+    final builder = GoldenBuilder.column()
+      ..addScenario('full', progressBar(100, 100))
+      ..addScenario('empty', progressBar(0, 100))
+      ..addScenario('half', progressBar(75, 150))
+      ..addScenario('overflowing', progressBar(200, 150))
+      // ..addScenario('negative', progressBar(-20, 83))
+      ..addScenario('tiny value', progressBar(2.15, 150));
+
+    await tester.pumpWidgetBuilder(builder.build());
+    await screenMatchesGolden(tester, 'progress_bar_small');
+  });
+
+  testGoldens('Progress Bar - Large', (tester) async {
+    ProgressBar progressBar(double value, double max) => ProgressBar(
+      max: max,
+      value: value,
+      height: 83,
+      textSize: 40,
+      textSecondarySize: 24,
+      backgroundColor: Colors.blueGrey,
+      foregroundColor: Colors.blueAccent,
+      textColor: Colors.black87,
+    );
+
+    final builder = GoldenBuilder.grid(columns: 3, widthToHeightRatio: 1)
+      ..addScenario('full', progressBar(100, 100))
+      ..addScenario('empty', progressBar(0, 100))
+      ..addScenario('half', progressBar(75, 150))
+      ..addScenario('overflowing', progressBar(200, 150))
+      ..addScenario('tiny value', progressBar(2.15, 150));
+
+    await tester.pumpWidgetBuilder(builder.build());
+    await screenMatchesGolden(tester, 'progress_bar_large');
+  });
+
+  testGoldens('Text Field', (tester) async {
+    final builder = GoldenBuilder.grid(columns: 3, widthToHeightRatio: 1)
+      ..addScenario(
+        'basic',
+        SizedBox(height: 70, width: 250, child: CustomTextField()),
+      )
+      ..addScenario(
+        'hint',
+        SizedBox(
+          height: 70,
+          width: 250,
+          child: CustomTextField(hint: "type something"),
+        ),
+      )
+      ..addScenario(
+        'label',
+        SizedBox(
+          height: 100,
+          width: 250,
+          child: CustomTextField(hint: "type something", label: "text input"),
+        ),
+      )
+      ..addScenario(
+        'numeric',
+        SizedBox(height: 70, width: 250, child: CustomTextField(numeric: true)),
+      )
+      ..addScenario(
+        'password',
+        SizedBox(
+          height: 70,
+          width: 250,
+          child: CustomTextField(showPassword: false),
+        ),
+      )
+      ..addScenario(
+        'multiline',
+        SizedBox(height: 200, width: 250, child: CustomTextField(lines: 4)),
+      );
+
+    await tester.pumpWidgetBuilder(builder.build());
+    await screenMatchesGolden(tester, 'textfield');
+  });
+
+  testGoldens('Primary Button', (tester) async {
+    const double buttonHeight = 70;
+    const double buttonWidth = 250;
+
+    final builder = GoldenBuilder.grid(columns: 2, widthToHeightRatio: 1)
+      ..addScenario(
+        'empty',
+        SizedBox(
+          height: buttonHeight,
+          width: buttonWidth,
+          child: PrimaryButton(
+            onPressed: () {},
+            text: "",
+            color: Colors.blueAccent,
+          ),
+        ),
+      )
+      ..addScenario(
+        'basic',
+        SizedBox(
+          height: buttonHeight,
+          width: buttonWidth,
+          child: PrimaryButton(
+            onPressed: () {},
+            text: "press me",
+            color: Colors.blueAccent,
+          ),
+        ),
+      )
+      ..addScenario(
+        'round',
+        SizedBox(
+          height: buttonHeight,
+          width: buttonWidth,
+          child: PrimaryButton(
+            onPressed: () {},
+            radius: 100,
+            text: "press me",
+            color: Colors.blueAccent,
+          ),
+        ),
+      )
+      ..addScenario(
+        'small',
+        SizedBox(
+          height: buttonHeight,
+          width: buttonWidth,
+          child: PrimaryButton(
+            onPressed: () {},
+            width: 100,
+            text: "press me",
+            color: Colors.blueAccent,
+          ),
+        ),
+      );
+
+    await tester.pumpWidgetBuilder(builder.build());
+    await screenMatchesGolden(tester, 'primary_button');
+  });
+
+  testGoldens('Text Button', (tester) async {
+    const tapTarget = Key("tap-target");
+
+    final builder = GoldenBuilder.column()
+      ..addScenario('empty', CustomTextButton(onPressed: () {}, text: ""))
+      ..addScenario(
+        'basic',
+        CustomTextButton(onPressed: () {}, text: "press me"),
+      )
+      ..addScenario(
+        'tapped',
+        CustomTextButton(onPressed: () {}, text: "press me", key: tapTarget),
+      )
+      ..addScenario(
+        'large text',
+        CustomTextButton(
+          onPressed: () {},
+          text: "press me",
+          size: 40,
+          weight: FontWeight.w500,
+        ),
+      )
+      ..addScenario(
+        'small text',
+        CustomTextButton(onPressed: () {}, text: "press me", size: 10),
+      )
+      ..addScenario(
+        'colored',
+        CustomTextButton(
+          onPressed: () {},
+          text: "press me",
+          color: Colors.blueAccent,
+        ),
+      );
+
+    await tester.pumpWidgetBuilder(builder.build());
+    await tester.tap(find.byKey(tapTarget));
+    await tester.pumpAndSettle();
+    await screenMatchesGolden(tester, 'text_button');
+  });
+
+  testGoldens('Money Text', (tester) async {
+    final builder = GoldenBuilder.column()
+      ..addScenario(
+        'basic',
+        MoneyText(text: "29.13€", size: 20, color: Colors.blueAccent),
+      )
+      ..addScenario(
+        'without cents',
+        MoneyText(text: "50€", size: 20, color: Colors.blueAccent),
+      )
+      ..addScenario(
+        'different sizes',
+        MoneyText(
+          text: "29.13€",
+          size: 30,
+          secondarySize: 15,
+          color: Colors.blueAccent,
+        ),
+      )
+      ..addScenario(
+        'different sizes without cents',
+        MoneyText(
+          text: "50€",
+          size: 30,
+          secondarySize: 15,
+          color: Colors.blueAccent,
+        ),
+      );
+
+    await tester.pumpWidgetBuilder(builder.build());
+    await screenMatchesGolden(tester, 'money_text');
+  });
+
+  testGoldens('Secondary Button', (tester) async {
+    const double buttonHeight = 70;
+    const double buttonWidth = 250;
+
+    final builder = GoldenBuilder.grid(columns: 3, widthToHeightRatio: 1)
+      ..addScenario(
+        'empty',
+        SizedBox(
+          height: buttonHeight,
+          width: buttonWidth,
+          child: SecondaryButton(onPressed: () {}, text: ""),
+        ),
+      )
+      ..addScenario(
+        'text',
+        SizedBox(
+          height: buttonHeight,
+          width: buttonWidth,
+          child: SecondaryButton(onPressed: () {}, text: "press me"),
+        ),
+      )
+      ..addScenario(
+        'icon',
+        SizedBox(
+          height: buttonHeight,
+          width: buttonWidth,
+          child: SecondaryButton(
+            onPressed: () {},
+            icon: Icons.account_circle_outlined,
+          ),
+        ),
+      )
+      ..addScenario(
+        'colored',
+        SizedBox(
+          height: buttonHeight,
+          width: buttonWidth,
+          child: SecondaryButton(
+            onPressed: () {},
+            text: "press me",
+            color: Colors.blueAccent,
+          ),
+        ),
+      )
+      ..addScenario(
+        'small',
+        SizedBox(
+          height: buttonHeight,
+          width: buttonWidth,
+          child: SecondaryButton(
+            onPressed: () {},
+            width: 100,
+            text: "press me",
+          ),
+        ),
+      )
+      ..addScenario(
+        'round',
+        SizedBox(
+          height: buttonHeight,
+          width: buttonWidth,
+          child: SecondaryButton(
+            onPressed: () {},
+            radius: 100,
+            text: "press me",
+            color: Colors.blueAccent,
+          ),
+        ),
+      );
+
+    await tester.pumpWidgetBuilder(builder.build());
+    await screenMatchesGolden(tester, 'secondary_button');
+  });
+
+  void snackbarTest({
+    required String message,
+    required MessageType? type,
+    required String testName,
+  }) {
+    testGoldens('Snackbar $testName', (tester) async {
+      const Key tapTarget = Key('tap-target');
+
+      SizedBox buildScaffold() => SizedBox(
+        width: 800,
+        height: 600,
+        child: MaterialApp(
+          home: Scaffold(
+            body: Builder(
+              builder: (BuildContext context) {
+                return GestureDetector(
+                  onTap: () {
+                    ScaffoldMessenger.of(context).showSnackBar(
+                      CustomSnackBar(
+                        message: message,
+                        type: type,
+                      ).build(context),
+                    );
+                  },
+                  behavior: HitTestBehavior.opaque,
+                  key: tapTarget,
+                );
+              },
+            ),
+          ),
+        ),
+      );
+
+      final builder = DeviceBuilder()
+        ..overrideDevicesForAllScenarios(
+          devices: const [Device(size: Size(750, 550), name: 'base')],
+        )
+        ..addScenario(name: testName, widget: buildScaffold());
+
+      await tester.pumpWidgetBuilder(builder.build());
+      await tester.tap(find.byKey(tapTarget));
+      await tester.pumpAndSettle();
+
+      await screenMatchesGolden(tester, 'snackbar/$testName');
+    });
+  }
+
+  const shortText = "Mensaje de prueba";
+  const longText =
+      "Mensaje de prueba largo para comprobar los casos en los que el texto ocupa varias líneas";
+
+  snackbarTest(message: "", type: null, testName: "default_empty");
+  snackbarTest(message: shortText, type: null, testName: "default");
+  snackbarTest(message: longText, type: null, testName: "default_long_text");
+  snackbarTest(message: "", type: MessageType.info, testName: "info_empty");
+  snackbarTest(message: shortText, type: MessageType.info, testName: "info");
+  snackbarTest(
+    message: longText,
+    type: MessageType.info,
+    testName: "info_long_text",
+  );
+  snackbarTest(
+    message: "",
+    type: MessageType.success,
+    testName: "success_empty",
+  );
+  snackbarTest(
+    message: shortText,
+    type: MessageType.success,
+    testName: "success",
+  );
+  snackbarTest(
+    message: longText,
+    type: MessageType.success,
+    testName: "success_long_text",
+  );
+  snackbarTest(
+    message: "",
+    type: MessageType.warning,
+    testName: "warning_empty",
+  );
+  snackbarTest(
+    message: shortText,
+    type: MessageType.warning,
+    testName: "warning",
+  );
+  snackbarTest(
+    message: longText,
+    type: MessageType.warning,
+    testName: "warning_long_text",
+  );
+  snackbarTest(message: "", type: MessageType.error, testName: "error_empty");
+  snackbarTest(message: shortText, type: MessageType.error, testName: "error");
+  snackbarTest(
+    message: longText,
+    type: MessageType.error,
+    testName: "error_long_text",
+  );
+
+  testGoldens('Dropdown', (tester) async {
+    const List<Widget> emptyList = [];
+    const List<Widget> shortList = [Text("A"), Text("B"), Text("C")];
+
+    final builder = GoldenBuilder.column()
+      ..addScenario(
+        'empty',
+        CustomDropdown(items: emptyList, onChanged: (_) {}, width: 200),
+      )
+      ..addScenario(
+        'initial value',
+        CustomDropdown(
+          items: shortList,
+          value: 1,
+          onChanged: (_) {},
+          width: 300,
+        ),
+      )
+      ..addScenario(
+        'hint',
+        CustomDropdown(
+          items: shortList,
+          hint: "choose an option",
+          onChanged: (_) {},
+        ),
+      )
+      ..addScenario(
+        'label',
+        CustomDropdown(
+          items: shortList,
+          label: "select",
+          onChanged: (_) {},
+          width: 200,
+        ),
+      );
+
+    await tester.pumpWidgetBuilder(builder.build());
+    await screenMatchesGolden(tester, 'dropdown');
+  });
+}

packages/fonts/pubspec.yaml

@@ -0,0 +1,20 @@
+name: fonts
+# resolution: workspace
+description: "A new Flutter package project."
+version: 0.0.1
+
+environment:
+  sdk: ^3.9.2
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true
+  fonts:
+    - family: Stolzl
+      fonts:
+        - asset: lib/fonts/stolzl_regular.otf
+        - asset: lib/fonts/stolzl_bold.otf
+          weight: 500

packages/navigation/lib/app_routes.dart

@@ -1,8 +1,10 @@
 class AppRoutes {
   static const login = '/login';
+  static const signup = '/signup';
   static const onboarding = '/onboarding';
   static const linkPhone = '/link_phone';
   static const phoneCode = '/phone_code';
+  static const deviceSignup = '/device_signup';
   static const recoverPassword = '/recover_password';
 
   static const dashboard = '/dashboard';

packages/sf_localizations/assets/l10n/de.json

@@ -1,3 +1,12 @@
 {
-  "example": "Beispiel"
+  "example": "Beispiel",
+  "start": "Starten",
+  "next": "Weiter",
+  "skip": "Überspringen",
+  "onboardingTitle1": "Lerne, ihr Geld zu verwalten",
+  "onboardingSubtitle1": "Dein Kind entwickelt Gewohnheiten und hat Spaß dabei",
+  "onboardingTitle2": "Gelassenheit bei jeder Zahlung",
+  "onboardingSubtitle2": "Überwache ihre Ausgaben, setze Limits und begleite sie bei jedem Schritt",
+  "onboardingTitle3": "Einfache und sichere Zahlungen in ihren Händen",
+  "onboardingSubtitle3": "Sie können mit ihrer Uhr bezahlen.\nGanz ohne Handy und Bargeld"
 }

packages/sf_localizations/assets/l10n/en.json

@@ -1,3 +1,12 @@
 {
-  "example": "example"
+  "example": "example",
+  "onboardingTitle1": "Learn to manage their money",
+  "onboardingSubtitle1": "Your kid builds habits and has fun while doing it",
+  "onboardingTitle2": "Peace of mind in every payment",
+  "onboardingSubtitle2": "Monitor their spending, set limits and guide them step by step",
+  "onboardingTitle3": "Easy and secure payments in their hands",
+  "onboardingSubtitle3": "They can pay from their watch.\nNo phone or cash needed",
+  "start": "Start",
+  "next": "Next",
+  "skip": "Skip"
 }

packages/sf_localizations/assets/l10n/es.json

@@ -1,3 +1,12 @@
 {
-  "example": "ejemplo"
+  "example": "ejemplo",
+  "onboardingTitle1": "Aprende a gestionar su dinero",
+  "onboardingSubtitle1": "Tu peque crea hábitos y se divierte mientras lo hace",
+  "onboardingTitle2": "Tranquilidad en cada pago que hacen",
+  "onboardingSubtitle2": "Supervisa sus gastos, fija límites y acompáñalos en cada paso",
+  "onboardingTitle3": "Pagos fáciles y seguros en sus manos",
+  "onboardingSubtitle3": "Podrá pagar desde su reloj.\nSin móvil ni efectivo",
+  "start": "Comenzar",
+  "next": "Siguiente",
+  "skip": "Omitir"
 }

packages/sf_localizations/assets/l10n/fr.json

@@ -1,3 +1,12 @@
 {
-  "example": "exemple"
+  "example": "exemple",
+  "start": "Commencer",
+  "next": "Suivant",
+  "skip": "Passer",
+  "onboardingTitle1": "Apprenez à gérer leur argent",
+  "onboardingSubtitle1": "Votre enfant développe de bonnes habitudes et s'amuse en le faisant",
+  "onboardingTitle2": "La tranquillité à chaque paiement",
+  "onboardingSubtitle2": "Surveillez leurs dépenses, fixez des limites et accompagnez-les à chaque étape",
+  "onboardingTitle3": "Des paiements faciles et sécurisés entre leurs mains",
+  "onboardingSubtitle3": "Ils peuvent payer avec leur montre.\nSans téléphone ni espèces"
 }

packages/sf_localizations/assets/l10n/it.json

@@ -1,3 +1,12 @@
 {
-  "example": "esempio"
+  "example": "esempio",
+  "start": "Inizia",
+  "next": "Avanti",
+  "skip": "Salta",
+  "onboardingTitle1": "Impara a gestire il loro denaro",
+  "onboardingSubtitle1": "Tuo figlio crea abitudini e si diverte mentre lo fa",
+  "onboardingTitle2": "Tranquillità in ogni pagamento",
+  "onboardingSubtitle2": "Monitora le sue spese, imposta limiti e accompagnalo in ogni passo",
+  "onboardingTitle3": "Pagamenti facili e sicuri nelle sue mani",
+  "onboardingSubtitle3": "Potrà pagare dal suo orologio.\nSenza telefono né contanti"
 }