fix(app): use box on main page instead bar bottom for explanations

hpi-dhc · Dec 29, 2023 · fb9001e · fb9001e
1 parent dead5b5
commit fb9001e
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 79 deletions.
diff --git a/app/lib/common/theme.dart b/app/lib/common/theme.dart
@@ -84,6 +84,7 @@ class PharMeTheme {
   static final iconColor = darkenColor(PharMeTheme.onSurfaceText, -0.1);
 
   static const smallSpace = 8.0;
+  static const defaultPagePadding = smallSpace;
   static const smallToMediumSpace = 12.0;
   static const mediumSpace = 16.0;
   static const mediumToLargeSpace = 24.0;

diff --git a/app/lib/common/widgets/module.dart b/app/lib/common/widgets/module.dart
@@ -13,6 +13,7 @@ export 'headings.dart';
 export 'indicators.dart';
 export 'lifecycle_observer.dart';
 export 'link_text_span.dart';
+export 'page_description.dart';
 export 'page_indicator_explanation.dart';
 export 'page_scaffold.dart';
 export 'pharme_logo_page.dart';

diff --git a/app/lib/common/widgets/page_description.dart b/app/lib/common/widgets/page_description.dart
@@ -0,0 +1,18 @@
+import '../module.dart';
+
+class PageDescription extends StatelessWidget {
+  const PageDescription(this.text);
+
+  final String text;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.only(
+        left: PharMeTheme.smallSpace,
+        right: PharMeTheme.smallSpace,
+        bottom: PharMeTheme.smallSpace),
+      child: Text(text, style: PharMeTheme.textTheme.bodyMedium),
+    );
+  }
+}
diff --git a/app/lib/common/widgets/page_scaffold.dart b/app/lib/common/widgets/page_scaffold.dart
@@ -1,5 +1,10 @@
 import '../module.dart';
 
+EdgeInsets pagePadding() => EdgeInsets.only(
+  left: PharMeTheme.defaultPagePadding,
+  right: PharMeTheme.defaultPagePadding,
+);
+
 Widget buildTitle(String text) {
   return FittedBox(
     fit: BoxFit.fitWidth,
@@ -52,14 +57,16 @@ Scaffold pageScaffold({
         actions: actions,
         bottom: buildBarBottom(barBottom),
       ),
-      SliverList(delegate: SliverChildListDelegate(body))
+      SliverPadding(
+        padding: pagePadding(),
+        sliver: SliverList(delegate: SliverChildListDelegate(body)),  
+      ),
     ]),
   );
 }
 
 Scaffold unscrollablePageScaffold({
   required Widget body,
-  double? padding,
   String? title,
   String? barBottom,
   List<Widget>? actions,
@@ -83,11 +90,7 @@ Scaffold unscrollablePageScaffold({
     appBar: appBar,
     body: SafeArea(
       child: Padding(
-        padding: EdgeInsets.only(
-          left: padding ?? PharMeTheme.smallSpace,
-          top: padding ?? PharMeTheme.smallSpace,
-          right: padding ?? PharMeTheme.smallSpace,
-        ),
+        padding: pagePadding(),
         child: body,
       ),
     ),

diff --git a/app/lib/common/widgets/pharme_logo_page.dart b/app/lib/common/widgets/pharme_logo_page.dart
@@ -13,34 +13,36 @@ class PharMeLogoPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return unscrollablePageScaffold(
-      padding: PharMeTheme.largeSpace,
-      body: Column(
-        children: [
-          Expanded(
-            child: Container(
-              alignment: Alignment.center,
-              child: greyscale
-                ? ColorFiltered(
-                    colorFilter: ColorFilter.mode(
-                      PharMeTheme.backgroundColor,
-                      BlendMode.softLight,
-                    ),
-                    child: ColorFiltered(
+      body: Padding(
+        padding: EdgeInsets.all(PharMeTheme.mediumSpace),
+        child: Column(
+          children: [
+            Expanded(
+              child: Container(
+                alignment: Alignment.center,
+                child: greyscale
+                  ? ColorFiltered(
                       colorFilter: ColorFilter.mode(
                         PharMeTheme.backgroundColor,
-                        BlendMode.saturation,
+                        BlendMode.softLight,
+                      ),
+                      child: ColorFiltered(
+                        colorFilter: ColorFilter.mode(
+                          PharMeTheme.backgroundColor,
+                          BlendMode.saturation,
+                        ),
+                        child: _buildLogo(context),
                       ),
-                      child: _buildLogo(context),
-                    ),
-                  )
-                : _buildLogo(context),
+                    )
+                  : _buildLogo(context),
+                ),
               ),
+            Container(
+              alignment: Alignment.center,
+              child: child ?? SizedBox.shrink(),
             ),
-          Container(
-            alignment: Alignment.center,
-            child: child ?? SizedBox.shrink(),
-          ),
-        ],
+          ],
+        ),
       ),
     );
   }

diff --git a/app/lib/drug_selection/pages/drug_selection.dart b/app/lib/drug_selection/pages/drug_selection.dart
@@ -26,12 +26,11 @@ class DrugSelectionPage extends HookWidget {
           builder: (context, state) {
             return unscrollablePageScaffold(
               title: context.l10n.drug_selection_header,
-              barBottom: concludesOnboarding
-                ? context.l10n.drug_selection_onboarding_description
-                : null,
-              padding: PharMeTheme.mediumSpace,
               body: Column(
                 children: [
+                  if (concludesOnboarding) PageDescription(
+                    context.l10n.drug_selection_onboarding_description,
+                  ),
                   Expanded(child: _buildDrugList(context, state)),
                   if (concludesOnboarding) _buildButton(context, state),
                 ],

diff --git a/app/lib/more/pages/more.dart b/app/lib/more/pages/more.dart
@@ -9,52 +9,55 @@ class MorePage extends StatelessWidget {
   Widget build(BuildContext context) {
     return PopScope(
       canPop: false,
-      child: pageScaffold(title: context.l10n.tab_more, body: [
-        SubheaderDivider(
-          text: context.l10n.settings_page_account_settings,
-          useLine: false,
-        ),
-        _buildSettingsItem(
-          title: context.l10n.drug_selection_header,
-          onTap: () => context.router.push(
-            DrugSelectionRoute(concludesOnboarding: false)
+      child: pageScaffold(
+        title: context.l10n.tab_more,
+        body: [
+          SubheaderDivider(
+            text: context.l10n.settings_page_account_settings,
+            useLine: false,
           ),
-        ),
-        _buildSettingsItem(
-          title: context.l10n.settings_page_delete_data,
-          onTap: () => showDialog(
-            context: context,
-            builder: (_) => DeleteDataDialog(),
+          _buildSettingsItem(
+            title: context.l10n.drug_selection_header,
+            onTap: () => context.router.push(
+              DrugSelectionRoute(concludesOnboarding: false)
+            ),
           ),
-        ),
-        SubheaderDivider(
-          text: context.l10n.settings_page_more,
-          useLine: false,
-        ),
-        _buildSettingsItem(
-          title: context.l10n.settings_page_onboarding,
-          onTap: () => context.router.push(OnboardingRoute(isRevisiting: true)),
-        ),
-        _buildSettingsItem(
-          title: context.l10n.settings_page_about_us,
-          onTap: () => context.router.push(AboutRoute()),
-        ),
-        _buildSettingsItem(
-          title: context.l10n.settings_page_privacy_policy,
-          onTap: () => context.router.push(PrivacyRoute()),
-        ),
-        _buildSettingsItem(
-          title: context.l10n.settings_page_terms_and_conditions,
-          onTap: () => context.router.push(TermsRoute()),
-        ),
-        SubheaderDivider(
-          text: context.l10n.settings_page_help_and_feedback,
-          useLine: false,
-        ),
-        _buildSettingsItem(
-            title: context.l10n.settings_page_contact_us,
-            onTap: sendEmail)
-      ]),
+          _buildSettingsItem(
+            title: context.l10n.settings_page_delete_data,
+            onTap: () => showDialog(
+              context: context,
+              builder: (_) => DeleteDataDialog(),
+            ),
+          ),
+          SubheaderDivider(
+            text: context.l10n.settings_page_more,
+            useLine: false,
+          ),
+          _buildSettingsItem(
+            title: context.l10n.settings_page_onboarding,
+            onTap: () => context.router.push(OnboardingRoute(isRevisiting: true)),
+          ),
+          _buildSettingsItem(
+            title: context.l10n.settings_page_about_us,
+            onTap: () => context.router.push(AboutRoute()),
+          ),
+          _buildSettingsItem(
+            title: context.l10n.settings_page_privacy_policy,
+            onTap: () => context.router.push(PrivacyRoute()),
+          ),
+          _buildSettingsItem(
+            title: context.l10n.settings_page_terms_and_conditions,
+            onTap: () => context.router.push(TermsRoute()),
+          ),
+          SubheaderDivider(
+            text: context.l10n.settings_page_help_and_feedback,
+            useLine: false,
+          ),
+          _buildSettingsItem(
+              title: context.l10n.settings_page_contact_us,
+              onTap: sendEmail)
+        ]
+      ),
     );
   }
 

diff --git a/app/lib/report/pages/report.dart b/app/lib/report/pages/report.dart
@@ -32,9 +32,9 @@ class ReportPage extends StatelessWidget {
       canPop: false,
       child: unscrollablePageScaffold(
         title: context.l10n.tab_report,
-        barBottom: context.l10n.report_content_explanation,
         body: Column(
           children: [
+            PageDescription(context.l10n.report_content_explanation),
             scrollList(
               userPhenotypes.map((phenotype) => GeneCard(
                 phenotype,