feat(app): make filter button more obvious

hpi-dhc · Nov 28, 2024 · 702207c · 702207c
1 parent aadcc58
commit 702207c
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 28 deletions.
diff --git a/app/lib/common/widgets/drug_list/builder.dart b/app/lib/common/widgets/drug_list/builder.dart
@@ -85,14 +85,13 @@ class DrugList extends StatelessWidget {
           ),
           trailing: drugActivityChangeable
             ? null
-            : IconButton(
+            : ResizedIconButton(
+                size: PharMeTheme.mediumToLargeSpace,
+                iconWidgetBuilder:
+                  (size) => defaultIconBuilder(Icons.edit, size),
                 onPressed: () => context.router.push(
                   DrugSelectionRoute(concludesOnboarding: false)
                 ),
-                icon: Icon(Icons.edit),
-                color: PharMeTheme.iconColor,
-                iconSize: 20,
-                visualDensity: VisualDensity.compact,
               ),
           visualDensity: VisualDensity.compact,
           contentPadding: EdgeInsets.zero,

diff --git a/app/lib/common/widgets/drug_search/builder.dart b/app/lib/common/widgets/drug_search/builder.dart
@@ -85,12 +85,15 @@ class DrugSearch extends HookWidget {
         ? context.l10n.search_page_tooltip_search
         : context.l10n.search_page_tooltip_search_no_class
       ),
-      if (showFilter) DrugFilters(
-        cubit: cubit,
-        state: state,
-        activeDrugs: activeDrugs,
-        searchForDrugClass: searchForDrugClass,
-      ),
+      if (showFilter) ...[
+        SizedBox(width: PharMeTheme.smallToMediumSpace),
+        DrugFilters(
+          cubit: cubit,
+          state: state,
+          activeDrugs: activeDrugs,
+          searchForDrugClass: searchForDrugClass,
+        ),
+      ],
     ];
   }
 

diff --git a/app/lib/common/widgets/drug_search/drug_filters.dart b/app/lib/common/widgets/drug_search/drug_filters.dart
@@ -170,7 +170,7 @@ class DrugFilters extends StatelessWidget {
       child: Container(
         decoration: BoxDecoration(
           shape: BoxShape.circle,
-          color: PharMeTheme.sinaiMagenta,
+          color: PharMeTheme.sinaiCyan,
         ),
         width: indicatorSize,
         height: indicatorSize,
@@ -205,28 +205,33 @@ class DrugFilters extends StatelessWidget {
     ];
   }
 
-  IconButton _buildButton({
+  Widget _buildButton({
     required void Function()? onPressed,
     required bool enableIndicator,
   }) {
-    return IconButton(
+    return ResizedIconButton(
       onPressed: onPressed,
-      icon: Stack(
+      size: PharMeTheme.largeSpace,
+      backgroundColor: PharMeTheme.iconColor,
+      iconWidgetBuilder: (size) => Stack(
         children: [
-          Icon(Icons.filter_list),
+          Icon(
+            Icons.filter_list,
+            size: size,
+            color: PharMeTheme.surfaceColor,
+          ),
           if (enableIndicator && _showActiveIndicator())
             _buildActiveIndicator(),
         ],
       ),
-      color: PharMeTheme.iconColor,
     );
   }
 
-  IconButton _buildDisabledButton() {
+  Widget _buildDisabledButton() {
     return _buildButton(onPressed: null, enableIndicator: false);
   }
 
-  IconButton _buildEnabledButton(
+  Widget _buildEnabledButton(
     BuildContext context,
     List<Drug> allDrugs,
     FilterState filter,

diff --git a/app/lib/common/widgets/module.dart b/app/lib/common/widgets/module.dart
@@ -24,6 +24,7 @@ export 'page_scaffold.dart';
 export 'pharme_logo_page.dart';
 export 'pretty_expansion_tile.dart';
 export 'radiant_gradient_mask.dart';
+export 'resized_icon_button.dart';
 export 'rounded_card.dart';
 export 'scroll_list.dart';
 export 'subheader_divider.dart';

diff --git a/app/lib/common/widgets/resized_icon_button.dart b/app/lib/common/widgets/resized_icon_button.dart
@@ -0,0 +1,37 @@
+import '../module.dart';
+
+Widget defaultIconBuilder(IconData icon, double? size) => Icon(
+  icon,
+  size: size,
+  color: PharMeTheme.iconColor,
+);
+
+class ResizedIconButton extends StatelessWidget {
+  const ResizedIconButton({
+    super.key,
+    required this.iconWidgetBuilder,
+    required this.size,
+    this.onPressed,
+    this.backgroundColor,
+  });
+
+  final Widget Function(double? size) iconWidgetBuilder;
+  final double size;
+  final void Function()? onPressed;
+  final Color? backgroundColor;
+
+  @override
+  Widget build(BuildContext context) {
+    final padding = size * 0.2;
+    return SizedBox(
+        width: size,
+        height: size,
+        child: IconButton(
+          padding: EdgeInsets.all(padding),
+          onPressed: onPressed,
+          icon: iconWidgetBuilder(size - 2 * padding),
+          style: IconButton.styleFrom(backgroundColor: backgroundColor),
+        ),
+    );
+  }
+}
diff --git a/app/lib/l10n/app_en.arb b/app/lib/l10n/app_en.arb
@@ -97,6 +97,8 @@
   "warning_level_red": "Consider alternatives",
   "@warning_level_red": {},
 
+  "search_content_explanation": "Below, medications that are known to have meaningful interactions with genes are listed.",
+  "@search_content_explanation": {},
   "search_page_tooltip_search": "Search for medications by their name, brand name or class.",
   "@search_page_tooltip_search": {},
   "search_page_tooltip_search_no_class": "Search for medications by their name or brand name.",

diff --git a/app/lib/search/pages/search.dart b/app/lib/search/pages/search.dart
@@ -25,15 +25,24 @@ class SearchPage extends HookWidget {
           title: context.l10n.tab_drugs,
           canNavigateBack: false,
           contextToDismissFocusOnTap: context,
-          body: DrugSearch(
-            key: Key('drug-search'),
-            showFilter: true,
-            buildDrugItems: buildDrugCards,
-            cubit: cubit,
-            state: state,
-            activeDrugs: activeDrugs,
-            searchForDrugClass: searchForDrugClass,
-            showDrugInteractionIndicator: false,
+          body: Column(
+            children: [
+              PageDescription.fromText(
+                context.l10n.search_content_explanation,
+              ),
+              Expanded(
+                child: DrugSearch(
+                  key: Key('drug-search'),
+                  showFilter: true,
+                  buildDrugItems: buildDrugCards,
+                  cubit: cubit,
+                  state: state,
+                  activeDrugs: activeDrugs,
+                  searchForDrugClass: searchForDrugClass,
+                  showDrugInteractionIndicator: false,
+                ),
+              ),
+            ],
           ),
         ),
       ),