Merge pull request #340 from hypha-dao/chore/update-filter-screen-ui

refactor: Update filter screen ui
hypha-dao · Oct 3, 2024 · a6c036f · a6c036f
2 parents 3689955 + 09dbfaa
commit a6c036f
Showing 1 changed file with 17 additions and 11 deletions.
diff --git a/lib/ui/proposals/filter/components/hypha_filter_card.dart b/lib/ui/proposals/filter/components/hypha_filter_card.dart
@@ -12,22 +12,22 @@ class HyphaFilterCard extends StatelessWidget {
   final dynamic valueNotifier;
   final int index;
 
-  const HyphaFilterCard(this.valueNotifier, this.index, {this.dao, this.title, this.subTitle, super.key});
+  const HyphaFilterCard(this.valueNotifier, this.index,
+      {this.dao, this.title, this.subTitle, super.key});
 
   @override
   Widget build(BuildContext context) {
-    // TODO(Saif): fix the card height (filter by status)
     return GestureDetector(
       onTap: () {
         valueNotifier.value = valueNotifier.value == index ? null : index;
       },
       child: HyphaCard(
-          child: Padding(
+          child: Container(
+        height: dao != null ? null : 54,
         padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 20),
         child: Row(
           children: [
-            if (dao != null)
-              DaoImage(dao),
+            if (dao != null) DaoImage(dao),
             const SizedBox(
               width: 10,
             ),
@@ -41,19 +41,25 @@ class HyphaFilterCard extends StatelessWidget {
                 if (subTitle != null)
                   Text(
                     subTitle!,
-                    style: context.hyphaTextTheme.ralMediumBody.copyWith(color: HyphaColors.midGrey),
+                    style: context.hyphaTextTheme.ralMediumBody
+                        .copyWith(color: HyphaColors.midGrey),
                   ),
               ],
             ),
             const Spacer(),
             ValueListenableBuilder<dynamic>(
               valueListenable: valueNotifier,
               builder: (context, selectedIndex, child) {
-                return Visibility(
-                  visible: selectedIndex == index,
-                  child: const CircleAvatar(
-                    radius: 12,
-                    backgroundColor: HyphaColors.primaryBlu,
+                return CircleAvatar(
+                  radius: 12,
+                  backgroundColor: selectedIndex == index
+                      ? HyphaColors.primaryBlu
+                      : HyphaColors.midGrey.withOpacity(.3),
+                  child: CircleAvatar(
+                    radius: selectedIndex == index ? 4 : 10.5,
+                    backgroundColor: selectedIndex == index
+                        ? HyphaColors.white
+                        : HyphaColors.lightBlack,
                   ),
                 );
               },