UI/add global font style (#50)

* 💄🚧♻️: global refactor with custom_theme * ♻️: global refactor with custom_theme 🐛 : fixed datetimepicker bug & fixed overflow in card
B3-3iL-DLW · Mar 17, 2024 · c38fa97 · c38fa97
1 parent 1b4e479
commit c38fa97
Show file tree

Hide file tree

Showing 17 changed files with 109 additions and 92 deletions.
diff --git a/frontend/app_student/lib/login/views/widgets/form/button_submit.dart b/frontend/app_student/lib/login/views/widgets/form/button_submit.dart
@@ -1,9 +1,9 @@
+import 'package:app_student/login/cubit/login_cubit.dart';
+import 'package:app_student/utils/custom_theme.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 
-import '../../../cubit/login_cubit.dart';
-
 class SubmitButton extends StatelessWidget {
   final TextEditingController ineController;
   final TextEditingController nameController;
@@ -30,13 +30,10 @@ class SubmitButton extends StatelessWidget {
             child: ElevatedButton(
               style: ButtonStyle(
                 textStyle: MaterialStateProperty.all<TextStyle>(
-                  const TextStyle(
-                    fontSize: 16.0,
-                    fontWeight: FontWeight.bold,
-                  ),
+                  CustomTheme.text.toBold,
                 ),
                 backgroundColor: MaterialStateProperty.all<Color>(
-                    Theme.of(context).focusColor),
+                    CustomTheme.secondaryColor),
                 foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
                 shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                   RoundedRectangleBorder(

diff --git a/frontend/app_student/lib/login/views/widgets/form/inputs/input_birthdate.dart b/frontend/app_student/lib/login/views/widgets/form/inputs/input_birthdate.dart
@@ -1,3 +1,4 @@
+import 'package:app_student/utils/custom_theme.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 
@@ -44,10 +45,7 @@ class BirthDateFieldState extends State<BirthDateField> {
         children: [
           Text(
             AppLocalizations.of(context)!.loginBirthDateLabel,
-            style: TextStyle(
-              fontSize: 12.0,
-              color: Colors.grey[600],
-            ),
+            style: CustomTheme.textSmall,
           ),
           const SizedBox(height: 10.0),
           TextFormField(
@@ -58,11 +56,11 @@ class BirthDateFieldState extends State<BirthDateField> {
               contentPadding:
                   const EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),
               border: OutlineInputBorder(
-                borderSide: const BorderSide(color: Colors.grey),
+                borderSide: const BorderSide(color: CustomTheme.primaryColor),
                 borderRadius: BorderRadius.circular(3.0),
               ),
               focusedBorder: OutlineInputBorder(
-                borderSide: BorderSide(color: Theme.of(context).focusColor),
+                borderSide: const BorderSide(color: CustomTheme.secondaryColor),
                 borderRadius: BorderRadius.circular(3.0),
               ),
             ),

diff --git a/frontend/app_student/lib/login/views/widgets/form/inputs/input_ine.dart b/frontend/app_student/lib/login/views/widgets/form/inputs/input_ine.dart
@@ -1,3 +1,4 @@
+import 'package:app_student/utils/custom_theme.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 
@@ -9,19 +10,13 @@ class INETextField extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Padding(
-      padding: const EdgeInsets.only(
-          left: 25.0,
-          top: 10.0,
-          right: 25.0), // Ajout d'un padding à gauche, en haut et à droite
+      padding: const EdgeInsets.only(left: 25.0, top: 10.0, right: 25.0),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Text(
             AppLocalizations.of(context)!.loginIneLabel,
-            style: TextStyle(
-              fontSize: 12.0,
-              color: Colors.grey[600],
-            ),
+            style: CustomTheme.textSmall,
           ),
           const SizedBox(height: 10.0),
           TextFormField(
@@ -31,11 +26,11 @@ class INETextField extends StatelessWidget {
               contentPadding:
                   const EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),
               border: OutlineInputBorder(
-                borderSide: const BorderSide(color: Colors.grey),
+                borderSide: const BorderSide(color: CustomTheme.primaryColor),
                 borderRadius: BorderRadius.circular(3.0),
               ),
               focusedBorder: OutlineInputBorder(
-                borderSide: BorderSide(color: Theme.of(context).focusColor),
+                borderSide: const BorderSide(color: CustomTheme.secondaryColor),
                 borderRadius: BorderRadius.circular(3.0),
               ),
             ),

diff --git a/frontend/app_student/lib/login/views/widgets/form/inputs/input_prenom.dart b/frontend/app_student/lib/login/views/widgets/form/inputs/input_prenom.dart
@@ -1,3 +1,4 @@
+import 'package:app_student/utils/custom_theme.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 
@@ -15,27 +16,22 @@ class FirstnameTextField extends StatelessWidget {
         children: [
           Text(
             AppLocalizations.of(context)!.loginFirstNameLabel,
-            style: TextStyle(
-              fontSize: 12.0,
-              color: Colors.grey[600],
-            ),
+            style: CustomTheme.textSmall,
           ),
           const SizedBox(height: 10.0),
           TextFormField(
             controller: controller,
-            style: TextStyle(
-              color: Colors.grey[600],
-            ),
+            style: CustomTheme.text,
             decoration: InputDecoration(
               hintText: AppLocalizations.of(context)!.loginFirstNameHint,
               contentPadding:
                   const EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),
               border: OutlineInputBorder(
-                borderSide: const BorderSide(color: Colors.grey),
+                borderSide: const BorderSide(color: CustomTheme.primaryColor),
                 borderRadius: BorderRadius.circular(3.0),
               ),
               focusedBorder: OutlineInputBorder(
-                borderSide: BorderSide(color: Theme.of(context).focusColor),
+                borderSide: const BorderSide(color: CustomTheme.secondaryColor),
                 borderRadius: BorderRadius.circular(3.0),
               ),
             ),

diff --git a/frontend/app_student/lib/profils/views/widgets/class_group_button.dart b/frontend/app_student/lib/profils/views/widgets/class_group_button.dart
@@ -1,4 +1,5 @@
 import 'package:app_student/routes.dart';
+import 'package:app_student/utils/custom_theme.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
@@ -19,13 +20,10 @@ class ClassGroupButton extends StatelessWidget {
             child: ElevatedButton(
               style: ButtonStyle(
                 textStyle: MaterialStateProperty.all<TextStyle>(
-                  const TextStyle(
-                    fontSize: 16.0,
-                    fontWeight: FontWeight.bold,
-                  ),
+                  CustomTheme.text.toBold,
                 ),
                 backgroundColor: MaterialStateProperty.all<Color>(
-                    Theme.of(context).focusColor),
+                    CustomTheme.secondaryColor),
                 foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
                 shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                   RoundedRectangleBorder(
@@ -36,8 +34,8 @@ class ClassGroupButton extends StatelessWidget {
               onPressed: () {
                 GoRouter.of(context).go(AppRoutes.classListPage);
               },
-              child:
-                  Text(AppLocalizations.of(context)!.profilChangeClassButton),
+              child: Text(AppLocalizations.of(context)!.profilChangeClassButton,
+                  style: CustomTheme.textSmall.toColorWhite),
             ),
           ),
         ],

diff --git a/frontend/app_student/lib/profils/views/widgets/user_class_card.dart b/frontend/app_student/lib/profils/views/widgets/user_class_card.dart
@@ -1,3 +1,4 @@
+import 'package:app_student/utils/custom_theme.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
 
@@ -17,17 +18,17 @@ class UserClassCard extends StatelessWidget {
           leading: SizedBox(
             width: 50,
             child: ColorFiltered(
-              colorFilter:
-                  const ColorFilter.mode(Color(0xFF005067), BlendMode.srcIn),
+              colorFilter: const ColorFilter.mode(
+                  CustomTheme.primaryColor, BlendMode.srcIn),
               child: SvgPicture.asset(
                 'assets/images/user.svg',
                 width: 30,
                 height: 30,
               ),
             ),
           ),
-          title: Text(className),
-          subtitle: Text(firstName),
+          title: Text(className, style: CustomTheme.textXl),
+          subtitle: Text(firstName, style: CustomTheme.text),
         ),
       ),
     );

diff --git a/frontend/app_student/lib/profils/views/widgets/user_info_card.dart b/frontend/app_student/lib/profils/views/widgets/user_info_card.dart
@@ -1,3 +1,4 @@
+import 'package:app_student/utils/custom_theme.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
 
@@ -25,8 +26,8 @@ class UserInfoCard extends StatelessWidget {
               ),
             ),
           ),
-          title: Text(ine),
-          subtitle: Text(birthDate),
+          title: Text(ine, style: CustomTheme.textXl),
+          subtitle: Text(birthDate, style: CustomTheme.text),
         ),
       ),
     );

diff --git a/frontend/app_student/lib/shared_components/app_bar.dart b/frontend/app_student/lib/shared_components/app_bar.dart
@@ -1,3 +1,4 @@
+import 'package:app_student/utils/custom_theme.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
@@ -17,8 +18,10 @@ class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
       className = userState.user.className ?? '';
     }
     return AppBar(
-      backgroundColor: Theme.of(context).secondaryHeaderColor,
-      title: title != null ? Text(title!) : const SizedBox.shrink(),
+      backgroundColor: CustomTheme.primaryColor,
+      title: title != null
+          ? Text(title!, style: CustomTheme.text.toColorWhite)
+          : const SizedBox.shrink(),
       flexibleSpace: Stack(
         children: [
           ClipRect(
@@ -42,11 +45,7 @@ class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
                 Center(
                   child: Text(
                     className,
-                    style: const TextStyle(
-                      color: Colors.white,
-                      fontSize: 25.0,
-                      fontWeight: FontWeight.bold,
-                    ),
+                    style: CustomTheme.subtitle.toBold.toColorWhite,
                   ),
                 ),
                 if (widget != null)

diff --git a/frontend/app_student/lib/shared_components/header_logo.dart b/frontend/app_student/lib/shared_components/header_logo.dart
@@ -1,3 +1,4 @@
+import 'package:app_student/utils/custom_theme.dart';
 import 'package:flutter/cupertino.dart';
 
 class HeaderLogo extends StatelessWidget {
@@ -6,8 +7,8 @@ class HeaderLogo extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      height: 300.0, // Hauteur du Container
-      color: const Color(0xFF005067),
+      height: 300.0,
+      color: CustomTheme.primaryColor,
       child: Center(
         child: Padding(
           padding: const EdgeInsets.only(top: 50.0),

diff --git a/frontend/app_student/lib/shared_components/header_subtitle.dart b/frontend/app_student/lib/shared_components/header_subtitle.dart
@@ -1,3 +1,4 @@
+import 'package:app_student/utils/custom_theme.dart';
 import 'package:flutter/cupertino.dart';
 
 class HeaderSubtitle extends StatelessWidget {
@@ -13,11 +14,7 @@ class HeaderSubtitle extends StatelessWidget {
         alignment: Alignment.centerLeft,
         child: Text(
           content,
-          style: const TextStyle(
-            fontSize: 18.0,
-            fontFamily: 'Arial',
-            fontWeight: FontWeight.bold,
-          ),
+          style: CustomTheme.subtitle.toBold,
         ),
       ),
     );

diff --git a/frontend/app_student/lib/shared_components/header_title.dart b/frontend/app_student/lib/shared_components/header_title.dart
@@ -1,3 +1,4 @@
+import 'package:app_student/utils/custom_theme.dart';
 import 'package:flutter/cupertino.dart';
 
 class HeaderTitle extends StatelessWidget {
@@ -13,11 +14,7 @@ class HeaderTitle extends StatelessWidget {
         alignment: Alignment.centerLeft,
         child: Text(
           content,
-          style: const TextStyle(
-            fontSize: 34.0,
-            fontFamily: 'Arial',
-            fontWeight: FontWeight.bold,
-          ),
+          style: CustomTheme.title.toBold,
         ),
       ),
     );

diff --git a/frontend/app_student/lib/utils/custom_theme.dart b/frontend/app_student/lib/utils/custom_theme.dart
@@ -3,4 +3,27 @@ import 'package:flutter/material.dart';
 class CustomTheme {
   static const Color primaryColor = Color(0xFF005067);
   static const Color secondaryColor = Color(0xffE84E0F);
+
+  static const TextStyle title = TextStyle(fontSize: 32);
+  static const TextStyle subtitle = TextStyle(fontSize: 22);
+
+  static const TextStyle textXl = TextStyle(fontSize: 18);
+  static const TextStyle text = TextStyle(fontSize: 16);
+  static const TextStyle textSmall = TextStyle(fontSize: 14);
+}
+
+extension TextStyleHelpers on TextStyle {
+  TextStyle get toBold => copyWith(fontWeight: FontWeight.bold);
+
+  TextStyle get toItalic => copyWith(fontStyle: FontStyle.italic);
+
+  TextStyle get toUnderline => copyWith(decoration: TextDecoration.underline);
+
+  TextStyle get toColorPrimary => copyWith(color: CustomTheme.primaryColor);
+
+  TextStyle get toColorSecondary => copyWith(color: CustomTheme.secondaryColor);
+
+  TextStyle get toColorWhite => copyWith(color: Colors.white);
+
+  TextStyle get toColorBlack => copyWith(color: Colors.black);
 }
diff --git a/frontend/app_student/lib/week_schedule/cubit/week_schedule_cubit.dart b/frontend/app_student/lib/week_schedule/cubit/week_schedule_cubit.dart
@@ -33,12 +33,10 @@ class WeekScheduleCubit extends Cubit<WeekScheduleState> {
       final allEvents =
           weekSchedule.expand((week) => week.daySchedules).toList();
 
-      initialDate ??= DateTime.now();
+      // Only find the closest date if initialDate has not been set
+      initialDate ??= findClosestDate(allEvents);
 
-      final todayIndex = allEvents.indexWhere((daySchedule) =>
-          daySchedule.date.day == initialDate!.day &&
-          daySchedule.date.month == initialDate!.month &&
-          daySchedule.date.year == initialDate!.year);
+      final todayIndex = findTodayIndex(allEvents);
 
       if (isClosed) {
         return;
@@ -52,6 +50,28 @@ class WeekScheduleCubit extends Cubit<WeekScheduleState> {
     }
   }
 
+  DateTime findClosestDate(List<DayScheduleModel> allEvents) {
+    // Sort the schedules by date
+    allEvents.sort((a, b) => a.date.compareTo(b.date));
+
+    // Find the schedule with the date closest to today
+    for (var schedule in allEvents) {
+      if (schedule.date.isAfter(DateTime.now()) ||
+          schedule.date.isAtSameMomentAs(DateTime.now())) {
+        return schedule.date;
+      }
+    }
+
+    return DateTime.now();
+  }
+
+  int findTodayIndex(List<DayScheduleModel> allEvents) {
+    return allEvents.indexWhere((daySchedule) =>
+        daySchedule.date.day == initialDate!.day &&
+        daySchedule.date.month == initialDate!.month &&
+        daySchedule.date.year == initialDate!.year);
+  }
+
   void fetchUserAndSchedule() async {
     fetchWeekSchedule();
   }

diff --git a/frontend/app_student/lib/week_schedule/views/widgets/components/datepicker_button.dart b/frontend/app_student/lib/week_schedule/views/widgets/components/datepicker_button.dart
@@ -20,14 +20,10 @@ class DatePickerButton extends StatelessWidget {
   }
 
   Future<DateTime?> selectDate(
-      BuildContext context, WeekScheduleCubit cubit, DateTime today) async {
+      BuildContext context, WeekScheduleCubit cubit) async {
     return await showDatePicker(
       context: context,
-      initialDate: cubit.state is WeekScheduleLoaded
-          ? (cubit.state as WeekScheduleLoaded)
-              .allDaySchedules[(cubit.state as WeekScheduleLoaded).todayIndex]
-              .date
-          : today,
+      initialDate: cubit.initialDate ?? DateTime.now(),
       firstDate: DateTime(2000),
       lastDate: DateTime(2100),
       selectableDayPredicate: (date) {
@@ -49,8 +45,7 @@ class DatePickerButton extends StatelessWidget {
         size: 30,
       ),
       onPressed: () async {
-        final today = DateTime.now();
-        final date = await selectDate(context, cubit, today);
+        final date = await selectDate(context, cubit);
         if (date != null) {
           if (context.mounted) {
             await navigateToDate(context, cubit, date); // Await the navigation