Frontend: Implement vendors screen (UI)

shubhamsinghshubham777 · Sep 22, 2024 · cf0e0da · cf0e0da
1 parent 5cbcc77
commit cf0e0da
Show file tree

Hide file tree

Showing 19 changed files with 778 additions and 27 deletions.
diff --git a/frontend/assets/icons/arrow_down.svg b/frontend/assets/icons/arrow_down.svg
diff --git a/frontend/assets/icons/star.svg b/frontend/assets/icons/star.svg
diff --git a/frontend/assets/images/location_agra.svg b/frontend/assets/images/location_agra.svg
diff --git a/frontend/lib/common/view/app_colors.dart b/frontend/lib/common/view/app_colors.dart
@@ -11,6 +11,7 @@ class AppColors {
     required this.secondaryMedium,
     required this.secondaryDark,
     required this.backgroundPink,
+    required this.yellow,
   });
 
   final Color accent;
@@ -22,6 +23,7 @@ class AppColors {
   final Color secondaryMedium;
   final Color secondaryDark;
   final Color backgroundPink;
+  final Color yellow;
 }
 
 const appColors = AppColors._(
@@ -34,4 +36,5 @@ const appColors = AppColors._(
   secondaryMedium: Color(0xFF9EA1AB),
   secondaryDark: Color(0xFF1E2742),
   backgroundPink: Color(0xFFFDAD9B),
+  yellow: Color(0xFFF9C83C),
 );
diff --git a/frontend/lib/common/view/custom_package_advertisement.dart b/frontend/lib/common/view/custom_package_advertisement.dart
@@ -12,6 +12,7 @@ class CustomPackageAdvertisement extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
+      constraints: const BoxConstraints(maxWidth: 500),
       width: double.infinity,
       height: 280,
       margin: const EdgeInsets.only(left: 20, top: 40, right: 20),
@@ -35,6 +36,7 @@ class CustomPackageAdvertisement extends StatelessWidget {
                       'Are you tired?',
                       style: context.titleLarge?.copyWith(
                         fontFamily: Constants.fontDMSerifDisplay,
+                        fontSize: 24,
                       ),
                     ),
                     Padding(
@@ -43,16 +45,17 @@ class CustomPackageAdvertisement extends StatelessWidget {
                         '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(
                           fontFamily: Constants.fontKantumruy,
+                          fontSize: 12,
                           height: 1.5,
                         ),
                       ),
                     ),
                     DTAButton.filled(
                       text: 'Custom Package',
                       padding: const EdgeInsets.only(
-                        left: 23,
+                        left: 32,
                         top: 9,
-                        right: 25,
+                        right: 32,
                         bottom: 9,
                       ),
                       onTap: () {},

diff --git a/frontend/lib/common/view/dta_app_bar.dart b/frontend/lib/common/view/dta_app_bar.dart
@@ -27,7 +27,6 @@ class DTAAppBar extends StatelessWidget {
       left: 20,
       top: 24 + context.mqViewPadding.top,
       right: 20,
-      bottom: 24,
     );
   }
 
@@ -42,8 +41,9 @@ class DTAAppBar extends StatelessWidget {
             Align(
               child: Text(
                 title,
-                style: context.bodyLarge?.copyWith(
+                style: const TextStyle(
                   fontFamily: Constants.fontDMSerifDisplay,
+                  fontSize: 18,
                 ),
               ),
             ),
@@ -82,12 +82,18 @@ class DTAAppBar extends StatelessWidget {
                 children: [
                   ZoomTapDetector(
                     onTap: () {},
-                    child: SvgPicture.asset(Assets.iconsBiBell),
+                    child: SvgPicture.asset(
+                      Assets.iconsBiBell,
+                      width: 24,
+                    ),
                   ),
                   const SizedBox(width: 20),
                   ZoomTapDetector(
                     onTap: () {},
-                    child: SvgPicture.asset(Assets.iconsOcticonPerson),
+                    child: SvgPicture.asset(
+                      Assets.iconsOcticonPerson,
+                      width: 24,
+                    ),
                   ),
                 ],
               ),

diff --git a/frontend/lib/common/view/heart_painter.dart b/frontend/lib/common/view/heart_painter.dart
@@ -0,0 +1,196 @@
+import 'package:flutter/material.dart';
+import 'package:frontend/common/view/app_colors.dart';
+
+class HeartPainter extends CustomPainter {
+  const HeartPainter({this.fill = false});
+
+  final bool fill;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final path = Path()
+      ..moveTo(size.width * 0.9302833, size.height * 0.2044393)
+      ..cubicTo(
+        size.width * 0.9159167,
+        size.height * 0.1645060,
+        size.width * 0.8951889,
+        size.height * 0.1283193,
+        size.width * 0.8692778,
+        size.height * 0.09790400,
+      )
+      ..cubicTo(
+        size.width * 0.8433444,
+        size.height * 0.06739800,
+        size.width * 0.8127667,
+        size.height * 0.04315547,
+        size.width * 0.7792111,
+        size.height * 0.02649447,
+      )
+      ..cubicTo(
+        size.width * 0.7444167,
+        size.height * 0.009149400,
+        size.width * 0.7070944,
+        size.height * 0.0002711867,
+        size.width * 0.6694167,
+        size.height * 0.0003752533,
+      )
+      ..cubicTo(
+        size.width * 0.6165556,
+        size.height * 0.0003752533,
+        size.width * 0.5649833,
+        size.height * 0.01774513,
+        size.width * 0.5201633,
+        size.height * 0.05055500,
+      )
+      ..cubicTo(
+        size.width * 0.5094411,
+        size.height * 0.05840360,
+        size.width * 0.4992550,
+        size.height * 0.06702400,
+        size.width * 0.4896050,
+        size.height * 0.07641667,
+      )
+      ..cubicTo(
+        size.width * 0.4799556,
+        size.height * 0.06702400,
+        size.width * 0.4697694,
+        size.height * 0.05840360,
+        size.width * 0.4590472,
+        size.height * 0.05055500,
+      )
+      ..cubicTo(
+        size.width * 0.4142283,
+        size.height * 0.01774513,
+        size.width * 0.3626550,
+        size.height * 0.0003752533,
+        size.width * 0.3097944,
+        size.height * 0.0003752533,
+      )
+      ..cubicTo(
+        size.width * 0.2717311,
+        size.height * 0.0003752533,
+        size.width * 0.2348467,
+        size.height * 0.009124533,
+        size.width * 0.1999994,
+        size.height * 0.02649447,
+      )
+      ..cubicTo(
+        size.width * 0.1663322,
+        size.height * 0.04322100,
+        size.width * 0.1359883,
+        size.height * 0.06728133,
+        size.width * 0.1099333,
+        size.height * 0.09790400,
+      )
+      ..cubicTo(
+        size.width * 0.08398556,
+        size.height * 0.1282847,
+        size.width * 0.06325778,
+        size.height * 0.1644807,
+        size.width * 0.04892439,
+        size.height * 0.2044393,
+      )
+      ..cubicTo(
+        size.width * 0.03402061,
+        size.height * 0.2459987,
+        size.width * 0.02640789,
+        size.height * 0.2901307,
+        size.width * 0.02640789,
+        size.height * 0.3355500,
+      )
+      ..cubicTo(
+        size.width * 0.02640789,
+        size.height * 0.3783960,
+        size.width * 0.03369894,
+        size.height * 0.4230427,
+        size.width * 0.04817389,
+        size.height * 0.4684620,
+      )
+      ..cubicTo(
+        size.width * 0.06029000,
+        size.height * 0.5064187,
+        size.width * 0.07766000,
+        size.height * 0.5457900,
+        size.width * 0.09985444,
+        size.height * 0.5855480,
+      )
+      ..cubicTo(
+        size.width * 0.1350233,
+        size.height * 0.6484653,
+        size.width * 0.1833806,
+        size.height * 0.7140867,
+        size.width * 0.2434244,
+        size.height * 0.7806067,
+      )
+      ..cubicTo(
+        size.width * 0.3429261,
+        size.height * 0.8908733,
+        size.width * 0.4414628,
+        size.height * 0.9670400,
+        size.width * 0.4456444,
+        size.height * 0.9701333,
+      )
+      ..lineTo(size.width * 0.4710561, size.height * 0.9896867)
+      ..cubicTo(
+        size.width * 0.4823144,
+        size.height * 0.9983067,
+        size.width * 0.4967889,
+        size.height * 0.9983067,
+        size.width * 0.5080472,
+        size.height * 0.9896867,
+      )
+      ..lineTo(size.width * 0.5334589, size.height * 0.9701333)
+      ..cubicTo(
+        size.width * 0.5376406,
+        size.height * 0.9669133,
+        size.width * 0.6360722,
+        size.height * 0.8908733,
+        size.width * 0.7356778,
+        size.height * 0.7806067,
+      )
+      ..cubicTo(
+        size.width * 0.7957222,
+        size.height * 0.7140867,
+        size.width * 0.8440778,
+        size.height * 0.6484653,
+        size.width * 0.8792500,
+        size.height * 0.5855480,
+      )
+      ..cubicTo(
+        size.width * 0.9014444,
+        size.height * 0.5457900,
+        size.width * 0.9189222,
+        size.height * 0.5064187,
+        size.width * 0.9309278,
+        size.height * 0.4684620,
+      )
+      ..cubicTo(
+        size.width * 0.9454056,
+        size.height * 0.4230427,
+        size.width * 0.9526944,
+        size.height * 0.3783960,
+        size.width * 0.9526944,
+        size.height * 0.3355500,
+      )
+      ..cubicTo(
+        size.width * 0.9528000,
+        size.height * 0.2901307,
+        size.width * 0.9451889,
+        size.height * 0.2459987,
+        size.width * 0.9302833,
+        size.height * 0.2044393,
+      )
+      ..close();
+
+    final paintFill = Paint()
+      ..style = fill ? PaintingStyle.fill : PaintingStyle.stroke
+      ..color =
+          fill ? appColors.accent : appColors.secondaryDark.withOpacity(0.6)
+      ..strokeWidth = 1.75;
+
+    canvas.drawPath(path, paintFill);
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
+}
diff --git a/frontend/lib/common/view/section_header.dart b/frontend/lib/common/view/section_header.dart
@@ -13,12 +13,16 @@ class SectionHeader extends StatelessWidget {
     this.actionText = 'View All',
     this.onActionTap,
     this.dense = false,
+    this.actionAsset = Assets.iconsArrowForward,
+    this.titleAlternateFont = false,
   });
 
   final String title;
   final String actionText;
   final VoidCallback? onActionTap;
   final bool dense;
+  final String? actionAsset;
+  final bool titleAlternateFont;
 
   @override
   Widget build(BuildContext context) {
@@ -29,8 +33,15 @@ class SectionHeader extends StatelessWidget {
           child: Text(
             title,
             style: TextStyle(
-              fontFamily: Constants.fontDMSerifDisplay,
-              fontSize: dense ? 16 : 24,
+              fontFamily: titleAlternateFont
+                  ? Constants.fontKantumruy
+                  : Constants.fontDMSerifDisplay,
+              fontSize: dense
+                  ? titleAlternateFont
+                      ? 14
+                      : 16
+                  : 24,
+              fontWeight: titleAlternateFont ? FontWeight.bold : null,
             ),
             maxLines: 1,
             overflow: TextOverflow.ellipsis,
@@ -43,12 +54,13 @@ class SectionHeader extends StatelessWidget {
                 onTap: onActionTap,
                 child: UnderlinedText(actionText),
               ),
-              const SizedBox(width: 8),
-              DtaIcon(
-                Assets.iconsArrowForward,
-                color: appColors.accent,
-                width: 8,
-              )
+              if (actionAsset != null) const SizedBox(width: 8),
+              if (actionAsset != null)
+                DtaIcon(
+                  actionAsset!,
+                  color: appColors.accent,
+                  width: 8,
+                ),
             ],
           ),
       ],

diff --git a/frontend/lib/common/view/underlined_text.dart b/frontend/lib/common/view/underlined_text.dart
@@ -14,7 +14,7 @@ class UnderlinedText extends StatelessWidget {
       style: TextStyle(
         color: appColors.accent,
         fontFamily: Constants.fontKantumruy,
-        fontSize: 12,
+        fontSize: 13,
         decoration: TextDecoration.underline,
         decorationColor: appColors.accent,
       ),

diff --git a/frontend/lib/constants/assets.dart b/frontend/lib/constants/assets.dart
@@ -2,6 +2,8 @@
 class Assets {
   Assets._();
 
+  static const String iconsArrowDown = "assets/icons/arrow_down.svg";
+
   static const String iconsArrowForward = "assets/icons/arrow_forward.svg";
 
   static const String iconsBiBell = "assets/icons/bi_bell.svg";
@@ -30,6 +32,8 @@ class Assets {
 
   static const String iconsOcticonPerson = "assets/icons/octicon_person.svg";
 
+  static const String iconsStar = "assets/icons/star.svg";
+
   static const String iconsWarning = "assets/icons/warning.svg";
 
   static const String imagesAuthBg = "assets/images/auth_bg.webp";
@@ -41,5 +45,7 @@ class Assets {
   static const String imagesFloralBg = "assets/images/floral_bg.png";
 
   static const String imagesFlowers = "assets/images/flowers.webp";
+
+  static const String imagesLocationAgra = "assets/images/location_agra.svg";
 }