Frontend: Implement Dashboard screen UI

shubhamsinghshubham777 · Sep 21, 2024 · 5cbcc77 · 5cbcc77
1 parent 6baf29a
commit 5cbcc77
Show file tree

Hide file tree

Showing 35 changed files with 1,154 additions and 75 deletions.
diff --git a/frontend/assets/fonts/ElMessiri-Bold.ttf b/frontend/assets/fonts/ElMessiri-Bold.ttf
diff --git a/frontend/assets/fonts/ElMessiri-Medium.ttf b/frontend/assets/fonts/ElMessiri-Medium.ttf
diff --git a/frontend/assets/fonts/ElMessiri-Regular.ttf b/frontend/assets/fonts/ElMessiri-Regular.ttf
diff --git a/frontend/assets/fonts/ElMessiri-SemiBold.ttf b/frontend/assets/fonts/ElMessiri-SemiBold.ttf
diff --git a/frontend/assets/icons/arrow_forward.svg b/frontend/assets/icons/arrow_forward.svg
diff --git a/frontend/lib/common/view/custom_package_advertisement.dart b/frontend/lib/common/view/custom_package_advertisement.dart
@@ -34,7 +34,6 @@ class CustomPackageAdvertisement extends StatelessWidget {
                     Text(
                       'Are you tired?',
                       style: context.titleLarge?.copyWith(
-                        color: appColors.secondaryDark,
                         fontFamily: Constants.fontDMSerifDisplay,
                       ),
                     ),
@@ -43,7 +42,6 @@ class CustomPackageAdvertisement extends StatelessWidget {
                       child: Text(
                         'Tired of looking through every single vendor of each service type? We will select a tailored package that best fits your interests.',
                         style: context.labelSmall?.copyWith(
-                          color: appColors.secondaryDark.withOpacity(0.8),
                           fontFamily: Constants.fontKantumruy,
                           height: 1.5,
                         ),

diff --git a/frontend/lib/common/view/dta_app_bar.dart b/frontend/lib/common/view/dta_app_bar.dart
@@ -7,8 +7,13 @@ import 'package:frontend/constants/assets.dart';
 import 'package:frontend/utils/constants.dart';
 
 class DTAAppBar extends StatelessWidget {
-  const DTAAppBar({super.key, this.onDrawerOpen});
+  const DTAAppBar({
+    required this.title,
+    super.key,
+    this.onDrawerOpen,
+  });
 
+  final String title;
   final VoidCallback? onDrawerOpen;
 
   static Size appBarSize(BuildContext context) => Size(
@@ -36,15 +41,15 @@ class DTAAppBar extends StatelessWidget {
           children: [
             Align(
               child: Text(
-                'Welcome',
+                title,
                 style: context.bodyLarge?.copyWith(
                   fontFamily: Constants.fontDMSerifDisplay,
                 ),
               ),
             ),
             Align(
               alignment: Alignment.centerLeft,
-              child: ZoomTapAnimation(
+              child: ZoomTapDetector(
                 onTap: onDrawerOpen,
                 child: Container(
                   decoration: BoxDecoration(
@@ -75,12 +80,12 @@ class DTAAppBar extends StatelessWidget {
               child: Row(
                 mainAxisSize: MainAxisSize.min,
                 children: [
-                  ZoomTapAnimation(
+                  ZoomTapDetector(
                     onTap: () {},
                     child: SvgPicture.asset(Assets.iconsBiBell),
                   ),
                   const SizedBox(width: 20),
-                  ZoomTapAnimation(
+                  ZoomTapDetector(
                     onTap: () {},
                     child: SvgPicture.asset(Assets.iconsOcticonPerson),
                   ),

diff --git a/frontend/lib/common/view/dta_button.dart b/frontend/lib/common/view/dta_button.dart
@@ -40,7 +40,7 @@ class DTAButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ZoomTapAnimation(
+    return ZoomTapDetector(
       onTap: enabled ? onTap : null,
       child: AnimatedOpacity(
         duration: Durations.short4,

diff --git a/frontend/lib/common/view/dta_horizontal_list.dart b/frontend/lib/common/view/dta_horizontal_list.dart
@@ -3,6 +3,8 @@ import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:frontend/common/view/app_colors.dart';
 import 'package:frontend/common/view/dta_icon.dart';
+import 'package:frontend/common/view/section_header.dart';
+import 'package:frontend/common/view/underlined_text.dart';
 import 'package:frontend/common/view/zoom_tap_animation.dart';
 import 'package:frontend/constants/assets.dart';
 import 'package:frontend/features/home/model/dta_horizontal_list_data.dart';
@@ -31,13 +33,7 @@ class DTAHorizontalList extends StatelessWidget {
         if (title != null)
           Padding(
             padding: const EdgeInsets.only(left: 20, top: 24),
-            child: Text(
-              title!,
-              style: context.titleLarge?.copyWith(
-                color: appColors.secondaryDark,
-                fontFamily: Constants.fontDMSerifDisplay,
-              ),
-            ),
+            child: SectionHeader(title: title!),
           ),
         if (tags.isNotEmpty)
           Padding(
@@ -51,17 +47,9 @@ class DTAHorizontalList extends StatelessWidget {
                 itemBuilder: (listContext, index) {
                   return Padding(
                     padding: const EdgeInsets.only(right: 8),
-                    child: ZoomTapAnimation(
+                    child: ZoomTapDetector(
                       onTap: () {},
-                      child: Text(
-                        tags[index],
-                        style: context.bodySmall?.copyWith(
-                          color: appColors.accent,
-                          fontFamily: Constants.fontKantumruy,
-                          decoration: TextDecoration.underline,
-                          decorationColor: appColors.accent,
-                        ),
-                      ),
+                      child: UnderlinedText(tags[index]),
                     ),
                   );
                 },
@@ -81,7 +69,7 @@ class DTAHorizontalList extends StatelessWidget {
             scrollDirection: Axis.horizontal,
             itemBuilder: (listContext, index) {
               final itemData = items[index];
-              return ZoomTapAnimation(
+              return ZoomTapDetector(
                 onTap: itemData.onTap,
                 child: Padding(
                   padding: const EdgeInsets.only(right: 16),
@@ -123,7 +111,6 @@ class DTAHorizontalList extends StatelessWidget {
                           child: Text(
                             itemData.itemTitle!,
                             style: listContext.titleSmall?.copyWith(
-                              color: appColors.secondaryDark,
                               fontFamily: Constants.fontKantumruy,
                               fontWeight:
                                   itemSize == DTAHorizontalListItemSize.medium

diff --git a/frontend/lib/common/view/dta_icon.dart b/frontend/lib/common/view/dta_icon.dart
@@ -21,7 +21,7 @@ class DtaIcon extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ZoomTapAnimation(
+    return ZoomTapDetector(
       onTap: onTap,
       child: SvgPicture.asset(
         asset,

diff --git a/frontend/lib/common/view/indicator_legend.dart b/frontend/lib/common/view/indicator_legend.dart
@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:frontend/utils/constants.dart';
+
+class IndicatorLegend extends StatelessWidget {
+  const IndicatorLegend({required this.text, required this.color, super.key});
+
+  final String text;
+  final Color color;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Container(
+          decoration: BoxDecoration(
+            color: color,
+            shape: BoxShape.circle,
+          ),
+          width: 16,
+          height: 16,
+        ),
+        const SizedBox(width: 16),
+        Flexible(
+          child: Opacity(
+            opacity: 0.8,
+            child: Text(
+              text,
+              style: const TextStyle(
+                fontFamily: Constants.fontKantumruy,
+                fontSize: 12,
+              ),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
diff --git a/frontend/lib/common/view/section_header.dart b/frontend/lib/common/view/section_header.dart
@@ -0,0 +1,57 @@
+import 'package:flutter/material.dart';
+import 'package:frontend/common/view/app_colors.dart';
+import 'package:frontend/common/view/dta_icon.dart';
+import 'package:frontend/common/view/underlined_text.dart';
+import 'package:frontend/common/view/zoom_tap_animation.dart';
+import 'package:frontend/constants/assets.dart';
+import 'package:frontend/utils/constants.dart';
+
+class SectionHeader extends StatelessWidget {
+  const SectionHeader({
+    required this.title,
+    super.key,
+    this.actionText = 'View All',
+    this.onActionTap,
+    this.dense = false,
+  });
+
+  final String title;
+  final String actionText;
+  final VoidCallback? onActionTap;
+  final bool dense;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        Expanded(
+          child: Text(
+            title,
+            style: TextStyle(
+              fontFamily: Constants.fontDMSerifDisplay,
+              fontSize: dense ? 16 : 24,
+            ),
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+          ),
+        ),
+        if (onActionTap != null)
+          Row(
+            children: [
+              ZoomTapDetector(
+                onTap: onActionTap,
+                child: UnderlinedText(actionText),
+              ),
+              const SizedBox(width: 8),
+              DtaIcon(
+                Assets.iconsArrowForward,
+                color: appColors.accent,
+                width: 8,
+              )
+            ],
+          ),
+      ],
+    );
+  }
+}
diff --git a/frontend/lib/common/view/underlined_text.dart b/frontend/lib/common/view/underlined_text.dart
@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+import 'package:frontend/common/view/app_colors.dart';
+import 'package:frontend/utils/constants.dart';
+
+class UnderlinedText extends StatelessWidget {
+  const UnderlinedText(this.text, {super.key});
+
+  final String text;
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      text,
+      style: TextStyle(
+        color: appColors.accent,
+        fontFamily: Constants.fontKantumruy,
+        fontSize: 12,
+        decoration: TextDecoration.underline,
+        decorationColor: appColors.accent,
+      ),
+    );
+  }
+}
diff --git a/frontend/lib/common/view/zoom_tap_animation.dart b/frontend/lib/common/view/zoom_tap_animation.dart
@@ -1,8 +1,8 @@
 import 'dart:async';
 import 'package:flutter/widgets.dart';
 
-class ZoomTapAnimation extends StatefulWidget {
-  const ZoomTapAnimation({
+class ZoomTapDetector extends StatefulWidget {
+  const ZoomTapDetector({
     required this.child,
     super.key,
     this.onTap,
@@ -50,11 +50,11 @@ class ZoomTapAnimation extends StatefulWidget {
   // behavior: the hit test behavior of the GestureDetector.
   final HitTestBehavior behavior;
   @override
-  State<StatefulWidget> createState() => _ZoomTapAnimationState();
+  State<StatefulWidget> createState() => _ZoomTapDetectorState();
 }
 
-class _ZoomTapAnimationState extends State<ZoomTapAnimation>
-    with SingleTickerProviderStateMixin<ZoomTapAnimation> {
+class _ZoomTapDetectorState extends State<ZoomTapDetector>
+    with SingleTickerProviderStateMixin<ZoomTapDetector> {
   // make AnimationController nullable to make sure to not use it if it's null
   AnimationController? _controller;
   late Animation<double> _animation;

diff --git a/frontend/lib/constants/assets.dart b/frontend/lib/constants/assets.dart
@@ -2,6 +2,8 @@
 class Assets {
   Assets._();
 
+  static const String iconsArrowForward = "assets/icons/arrow_forward.svg";
+
   static const String iconsBiBell = "assets/icons/bi_bell.svg";
 
   static const String iconsBottomNavCollab = "assets/icons/bottom_nav_collab.svg";

diff --git a/frontend/lib/features/auth/view/sign_up_dialog.dart b/frontend/lib/features/auth/view/sign_up_dialog.dart
@@ -63,7 +63,7 @@ class _SignUpDialogState extends ConsumerState<SignUpDialog> {
                 child: Row(
                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                   children: Gender.values.map((g) {
-                    return ZoomTapAnimation(
+                    return ZoomTapDetector(
                       onTap: () => setState(() => gender = g),
                       child: AnimatedContainer(
                         duration: Durations.short4,