- created custom text block, dropdown,

- created extract, goals and block card screen.
- generated tests for design system components.
- updated restore password and home screens to 17/11 design.

packages/sf_shared/lib/sf_shared.dart

@@ -1,7 +1,9 @@
 export 'src/models/kid.dart';
+export 'src/models/task.dart';
+export 'src/models/savings_goal.dart';
 export 'src/widgets/line_graph.dart';
 export 'src/widgets/deposit_block.dart';
 export 'src/screens/connection_error_screen.dart';
 export 'src/screens/server_error_screen.dart';
 export 'src/screens/no_plan_error_screen.dart';
-export 'src/widgets/wallet_balance_block.dart';
+export 'src/widgets/wallet_balance_block.dart';

packages/sf_shared/lib/src/models/savings_goal.dart

@@ -0,0 +1,12 @@
+class SavingsGoal{
+
+  final String name;
+  final double goal;
+  final double saved;
+
+  const SavingsGoal({
+    required this.name,
+    required this.goal,
+    required this.saved
+  });
+}

packages/sf_shared/lib/src/models/task.dart

@@ -0,0 +1,21 @@
+class Task{
+
+  final double rewardAmount;
+  final List<Subtask> subtasks;
+
+  const Task({
+    required this.rewardAmount,
+    this.subtasks = const []
+  });
+}
+
+class Subtask{
+
+  final String name;
+  final bool completed;
+
+  const Subtask({
+    required this.name,
+    required this.completed
+  });
+}

packages/sf_shared/lib/src/widgets/deposit_block.dart

@@ -32,7 +32,7 @@ class DepositBlock extends ConsumerWidget {
             spacing: 16,
             children: [
               Row(
-                spacing: 10,
+                spacing: 16,
                 children: [
                   Expanded(
                     child: CustomTextField(
@@ -41,20 +41,15 @@ class DepositBlock extends ConsumerWidget {
                       numeric: true,
                     ),
                   ),
-                  FilledButton(
-                    onPressed: () => {},
-                    style: ButtonStyle(
-                      backgroundColor: WidgetStatePropertyAll<Color>(
-                        theme.getColorFor(ThemeCode.buttonPrimary),
-                      ),
-                      shape: WidgetStatePropertyAll(RoundedRectangleBorder(
-                        borderRadius: BorderRadius.all(Radius.circular(18))
-                      ))
+                  Align(
+                    alignment: Alignment.bottomRight,
+                    child: PrimaryButton(
+                      onPressed: () => {},
+                      text: "Ingresar",
+                      color: theme.getColorFor(ThemeCode.buttonPrimary),
+                      padding: 24,
                     ),
-                    child: SizedBox(
-                      height: 60,
-                      child: Center(child: Text("Ingresar", style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500)))),
-                  ),
+                  )
                 ],
               ),
               Align(

packages/sf_shared/lib/src/widgets/line_graph.dart

@@ -1,10 +1,13 @@
+import 'dart:math';
+
 import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 class LineGraph extends ConsumerStatefulWidget {
-  final lines = [[0,1,0,1,0,1,0],[1,0,1,0,1,0,1]];
+  final lines = [[0,1,0,3,0,1,0],[1,0,1,0,4,0,1]];
+  late final maxValue = lines.map((x)=>x.reduce(max)).reduce(max);
 
   LineGraph({super.key});
 
@@ -42,25 +45,22 @@ class LineGraphState extends ConsumerState<LineGraph> {
             Text("Gastos", style: TextStyle(fontWeight: FontWeight.w500, fontSize: 18)),
             Spacer(),
             Container(
-              padding: EdgeInsets.symmetric(horizontal: 16, vertical: 0),
               decoration: BoxDecoration(
                 borderRadius: BorderRadius.all(Radius.circular(8)),
                 color: theme.getColorFor(ThemeCode.backgroundSecondary),
               ),
-              child: DropdownButton(
-                underline: Container(),
+              child:
+              CustomDropdown(
                 value: timeSpan,
-                onChanged: (String? value) {
-                  setState(() {
-                    timeSpan = value;
-                  });
-                },
-                dropdownColor: theme.getColorFor(ThemeCode.backgroundPrimary),
                 items: [
-                  DropdownMenuItem(value: "day", child: Text("Hoy", style: TextStyle(fontSize: 14, letterSpacing: 0))),
-                  DropdownMenuItem(value: "week", child: Text("Esta semana", style: TextStyle(fontSize: 14, letterSpacing: 0))),
-                  DropdownMenuItem(value: "month", child: Text("Este mes", style: TextStyle(fontSize: 14, letterSpacing: 0))),
-                ]
+                  Text("Hoy", style: TextStyle(fontSize: 14, letterSpacing: 0)),
+                  Text("Esta semana", style: TextStyle(fontSize: 14, letterSpacing: 0)),
+                  Text("Este mes", style: TextStyle(fontSize: 14, letterSpacing: 0))
+                ],
+                values: ["day", "week", "month"],
+                onChanged: (value)=>{},
+                color: Colors.transparent,
+                width: 151,
               ),
             )
           ]),
@@ -136,33 +136,26 @@ class LineGraphState extends ConsumerState<LineGraph> {
                 top: const BorderSide(color: Colors.transparent),
               ),
             ),
-            lineBarsData: [
+            lineBarsData: List<LineChartBarData>.generate(widget.lines.length, (int i)=>
               LineChartBarData(
-                  isCurved: true,
-                  color: Colors.pink,
-                  barWidth: 5,
-                  isStrokeCapRound: true,
-                  dotData: const FlDotData(show: false),
-                  belowBarData: BarAreaData(show: false),
-                  spots: List<FlSpot>.generate(days.length, (int index){
-                    return FlSpot(index.toDouble(), (index+1)%2);
-                  })
+                isCurved: true,
+                gradient: LinearGradient(
+                  begin: Alignment.bottomCenter,
+                  end: Alignment.topCenter,
+                  colors: theme.getCardColorFor(i)
+                ),
+                barWidth: 5,
+                isStrokeCapRound: true,
+                dotData: const FlDotData(show: false),
+                belowBarData: BarAreaData(show: false),
+                spots: List<FlSpot>.generate(widget.lines[i].length, (int j){
+                  return FlSpot(j.toDouble(), widget.lines[i][j].toDouble());
+                })
               ),
-              LineChartBarData(
-                  isCurved: true,
-                  color: Colors.cyan,
-                  barWidth: 5,
-                  isStrokeCapRound: true,
-                  dotData: const FlDotData(show: false),
-                  belowBarData: BarAreaData(show: false),
-                  spots: List<FlSpot>.generate(days.length, (int index){
-                    return FlSpot(index.toDouble(), index%2);
-                  })
-              ),
-            ],
+            ),
             minX: 0,
             maxX: days.length-1,
-            maxY: 1,
+            maxY: widget.maxValue.toDouble(),
             minY: 0,
           ))
           )

packages/sf_shared/lib/src/widgets/wallet_balance_block.dart

@@ -49,8 +49,26 @@ class WalletBalanceBlock extends ConsumerWidget {
             Spacer(),
             Text("$savingsPlan€")
           ]),
-          ProgressBar(savingsPlan, savings, 24, 16, 12, theme.getColorFor(ThemeCode.backgroundSecondary), theme.getColorFor(ThemeCode.backgroundTertiary), theme.getColorFor(ThemeCode.textPrimary)),
-          ProgressBar(max, value, 83, 40, 24, theme.getColorFor(ThemeCode.backgroundTertiary), theme.getColorFor(ThemeCode.buttonPrimary), theme.getColorFor(ThemeCode.textSecondary)),
+          ProgressBar(
+            max: savingsPlan,
+            value: savings,
+            height: 24,
+            textSize: 16,
+            textSecondarySize: 12,
+            backgroundColor: theme.getColorFor(ThemeCode.backgroundSecondary),
+            foregroundColor: theme.getColorFor(ThemeCode.backgroundTertiary),
+            textColor: theme.getColorFor(ThemeCode.textPrimary)
+          ),
+          ProgressBar(
+            max: max,
+            value: value,
+            height: 83,
+            textSize: 40,
+            textSecondarySize: 24,
+            backgroundColor: theme.getColorFor(ThemeCode.backgroundTertiary),
+            foregroundColor: theme.getColorFor(ThemeCode.buttonPrimary),
+            textColor: theme.getColorFor(ThemeCode.textSecondary)
+          ),
           Center(child: Text("Disponible")),
         ],
       ),