design changes and active mode

NIAEFEUP · Aug 2, 2024 · d0ea8c4 · d0ea8c4
1 parent 85deca9
commit d0ea8c4
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 22 deletions.
diff --git a/packages/uni_ui/lib/cards/generic_card.dart b/packages/uni_ui/lib/cards/generic_card.dart
@@ -50,7 +50,9 @@ class GenericCard extends StatelessWidget {
               ],
             ),
             child: Padding(
-                padding: padding ?? const EdgeInsets.all(15), child: child),
+                padding: padding ??
+                    const EdgeInsets.symmetric(vertical: 15, horizontal: 25),
+                child: child),
           ),
         ),
       ),

diff --git a/packages/uni_ui/lib/cards/schedule_card.dart b/packages/uni_ui/lib/cards/schedule_card.dart
@@ -10,7 +10,7 @@ class ScheduleCard extends GenericCard {
       required this.acronym,
       required this.room,
       required this.type,
-      required this.badgeColor,
+      // required this.badgeColor,
       this.isActive = false,
       this.teacherName,
       this.teacherPhoto});
@@ -19,7 +19,7 @@ class ScheduleCard extends GenericCard {
   final String acronym;
   final String room;
   final String type;
-  final BadgeColors badgeColor;
+  // final BadgeColors badgeColor;
   final bool isActive;
   final String? teacherName;
   final String? teacherPhoto;
@@ -40,40 +40,77 @@ class ScheduleCard extends GenericCard {
                     Text(
                       acronym,
                       overflow: TextOverflow.ellipsis,
-                      style: Theme.of(context).textTheme.titleMedium,
+                      style: TextStyle(
+                          fontSize: Theme.of(context)
+                              .textTheme
+                              .headlineMedium!
+                              .fontSize,
+                          fontWeight: Theme.of(context)
+                              .textTheme
+                              .headlineMedium!
+                              .fontWeight,
+                          color: isActive
+                              ? Theme.of(context).colorScheme.secondary
+                              : Theme.of(context).colorScheme.primary),
                     ),
                     const SizedBox(width: 8), //TODO: Create a custom Gap()?
                     Badge(
                       label: Text(type),
-                      backgroundColor: badgeColor,
+                      backgroundColor: BadgeColors.tp,
                       textColor: Theme.of(context).colorScheme.surface,
                     ),
                   ],
                 ),
                 Text(
                   name,
                   overflow: TextOverflow.ellipsis,
-                  style: Theme.of(context).textTheme.bodyMedium,
+                  style: TextStyle(
+                      fontSize:
+                          Theme.of(context).textTheme.titleLarge!.fontSize,
+                      fontWeight:
+                          Theme.of(context).textTheme.titleLarge!.fontWeight,
+                      color: isActive
+                          ? Theme.of(context).colorScheme.secondary
+                          : Theme.of(context).colorScheme.primary),
                 ),
+                SizedBox(height: 5),
+                if (isActive)
+                  Row(children: [
+                    CircleAvatar(
+                        radius: 15,
+                        backgroundImage: const AssetImage(
+                          'assets/images/profile_placeholder.png', // to change
+                        )),
+                    const SizedBox(width: 8), //TODO: create gap()?
+                    Text(teacherName!,
+                        style: TextStyle(
+                            color: isActive
+                                ? Theme.of(context).colorScheme.secondary
+                                : Theme.of(context).colorScheme.primary)),
+                  ])
               ],
             ),
           ),
-          const SizedBox(width: 8), //TODO: Create a custom Gap()?
           Column(
             children: [
               PhosphorIcon(
                 PhosphorIcons.mapPin(PhosphorIconsStyle.duotone),
-                color: Theme.of(context).iconTheme.color,
-                size: 30,
-              ),
-              Text(
-                room,
-                overflow: TextOverflow.ellipsis,
+                color: isActive
+                    ? Theme.of(context).colorScheme.secondary
+                    : Theme.of(context).iconTheme.color,
+                size: 35,
               ),
+              Text(room,
+                  overflow: TextOverflow.ellipsis,
+                  style: TextStyle(
+                      color: isActive
+                          ? Theme.of(context).colorScheme.secondary
+                          : Theme.of(context).colorScheme.primary)),
             ],
           )
         ],
       ),
+      color: isActive ? Color.fromARGB(255, 40, 7, 9) : null,
     );
   }
 }
diff --git a/packages/uni_ui/lib/main.dart b/packages/uni_ui/lib/main.dart
@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+import 'package:uni_ui/cards/schedule_card.dart';
+import 'package:uni_ui/theme.dart';
+
+void main() {
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      theme: lightTheme,
+      home: Scaffold(
+          body: Column(
+        children: [
+          Row(
+            children: [
+              SizedBox(
+                width: 70,
+              ),
+              Flexible(
+                child: ScheduleCard(
+                    name: "Computer Laboratory",
+                    acronym: "LCOM",
+                    room: "B315",
+                    type: "TP",
+                    isActive: false,
+                    teacherName: 'Pedro Souto'),
+              )
+            ],
+          )
+        ],
+      )),
+    );
+  }
+}
diff --git a/packages/uni_ui/lib/theme.dart b/packages/uni_ui/lib/theme.dart
@@ -13,17 +13,14 @@ const Color salmon = Color.fromARGB(255, 227, 145, 145);
 const _textTheme = TextTheme(
   displayLarge: TextStyle(fontSize: 40, fontWeight: FontWeight.w400),
   displayMedium: TextStyle(fontSize: 32, fontWeight: FontWeight.w400),
-  displaySmall: TextStyle(fontSize: 28, fontWeight: FontWeight.w400),
-  headlineMedium: TextStyle(fontSize: 24, fontWeight: FontWeight.w300),
+  displaySmall: TextStyle(fontSize: 28, fontWeight: FontWeight.w500),
+  headlineMedium: TextStyle(fontSize: 24, fontWeight: FontWeight.w600),
   headlineSmall: TextStyle(fontSize: 20, fontWeight: FontWeight.w400),
-  titleLarge: TextStyle(fontSize: 18, fontWeight: FontWeight.w300),
-  titleMedium:
-      TextStyle(fontSize: 18, fontWeight: FontWeight.w500, color: darkRed),
+  titleLarge: TextStyle(fontSize: 18, fontWeight: FontWeight.w400),
+  titleMedium: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
   titleSmall: TextStyle(fontSize: 16, fontWeight: FontWeight.w300),
-  bodyLarge:
-      TextStyle(fontSize: 16, fontWeight: FontWeight.w400, color: darkRed),
-  bodyMedium:
-      TextStyle(fontSize: 14, fontWeight: FontWeight.w400, color: darkRed),
+  bodyLarge: TextStyle(fontSize: 16, fontWeight: FontWeight.w400),
+  bodyMedium: TextStyle(fontSize: 14, fontWeight: FontWeight.w400),
   bodySmall: TextStyle(fontSize: 13, fontWeight: FontWeight.w400),
 );