feat(#705): add onboarding disclaimer

app/lib/drug/widgets/annotation_cards/disclaimer.dart

@@ -31,7 +31,12 @@ class Disclaimer extends StatelessWidget {
             text: description ?? context.l10n.drugs_page_disclaimer_description,
             style: TextStyle(fontWeight: FontWeight.bold),
           ),
-          TextSpan(text: text ?? context.l10n.drugs_page_disclaimer_text),
+          if (text != null) TextSpan(text: text),
+          if (text == null) TextSpan(children: [
+            TextSpan(text: context.l10n.drugs_page_disclaimer_text_part_1),
+            TextSpan(text: ' '),
+            TextSpan(text: context.l10n.drugs_page_disclaimer_text_part_2),
+          ])
         ]),
         style: PharMeTheme.textTheme.labelMedium!.copyWith(
           fontWeight: FontWeight.w300,

app/lib/l10n/app_en.arb

@@ -87,7 +87,8 @@
     }
   },
   "drugs_page_disclaimer_description": "Please note: ",
-  "drugs_page_disclaimer_text": "The information shown on this page is ONLY based on your DNA and certain medications you are currently taking. Other important factors like weight, age, pre-existing conditions, and further medication interactions are not considered.",
+  "drugs_page_disclaimer_text_part_1": "The information shown on this page is ONLY based on your DNA and certain medications you are currently taking.",
+  "drugs_page_disclaimer_text_part_2": "Other important factors like weight, age, pre-existing conditions, and further medication interactions are not considered.",
   "drugs_page_is_inhibitor": "Taking {drugName} can influence your results for the following gene(s): {genes}",
   "@drugs_page_is_inhibitor": {
     "placeholders": {
@@ -367,6 +368,7 @@
   "onboarding_1_header": "Welcome to PharMe",
   "onboarding_1_text": "Your genome influences your health more than you might think, including how you react to medications.\n\nMore than 90 percent of people are vulnerable to unintended medication reactions.\n\nUse PharMe to find out about yours.",
   "onboarding_2_header": "One size does not fit all",
+  "onboarding_1_disclaimer_part_1": "The information information provided in PharMe is ONLY based on your DNA and and certain medications that may interact with your genetic result.",
   "onboarding_2_text": "Each person’s body reacts to medications differently.\n\nMedications that are effective for a majority of people can have adverse side effects for you.",
   "onboarding_3_header": "Genome power unlocked to improve human health",
   "onboarding_3_text": "PharMe informs you if your genome makes you more likely to experience an unintended medication response.\n\nThis enables you to avoid medications that are ineffective or have side effects.",

app/lib/onboarding/pages/onboarding.dart

@@ -13,6 +13,11 @@ class OnboardingPage extends HookWidget {
       getHeader: (context) => context.l10n.onboarding_1_header,
       getText: (context) => context.l10n.onboarding_1_text,
       color: PharMeTheme.sinaiCyan,
+      child: disclaimerCard(
+        getText: (context) => context.l10n.onboarding_1_disclaimer_part_1,
+        getSecondLineText: (context) =>
+          context.l10n.drugs_page_disclaimer_text_part_2,
+      ),
     ),
     OnboardingSubPage(
       illustrationPath: 'assets/images/onboarding/DrugReaction.png',
@@ -25,8 +30,7 @@ class OnboardingPage extends HookWidget {
       getHeader: (context) => context.l10n.onboarding_3_header,
       getText: (context) => context.l10n.onboarding_3_text,
       color: PharMeTheme.sinaiPurple,
-      child: BottomCard(
-        icon: Icon(Icons.warning_rounded, size: 32),
+      child: disclaimerCard(
         getText: (context) => context.l10n.onboarding_3_disclaimer,
       ),
     ),
@@ -274,36 +278,68 @@ class OnboardingSubPage extends StatelessWidget {
   }
 }
 
+BottomCard disclaimerCard({
+  required String Function(BuildContext) getText,
+  String Function(BuildContext)? getSecondLineText,
+}) => BottomCard(
+  getText: getText,
+  icon: Icon(Icons.warning_rounded, size: 32),
+  getSecondLineText: getSecondLineText,
+);
+
 class BottomCard extends StatelessWidget {
-  const BottomCard({this.icon, required this.getText, this.onClick});
+  const BottomCard({
+    this.icon,
+    required this.getText,
+    this.getSecondLineText,
+    this.onClick,
+  });
 
   final Icon? icon;
   final String Function(BuildContext) getText;
+  final String Function(BuildContext)? getSecondLineText;
   final GestureTapCallback? onClick;
 
   @override
   Widget build(BuildContext context) {
     final widget = Card(
+      color: PharMeTheme.surfaceColor,
       shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(12),
       ),
       child: Padding(
-        padding: EdgeInsets.symmetric(horizontal: 4, vertical: 8),
-        child: Row(children: [
-          if (icon != null) ...[icon!, SizedBox(width: 4)],
-          Expanded(
-            child: Text(
-              getText(context),
-              style: PharMeTheme.textTheme.bodyMedium,
-              textAlign: (icon != null) ? TextAlign.start : TextAlign.center,
+        padding: EdgeInsets.all(PharMeTheme.smallSpace),
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            if (icon != null) ...[
+              icon!,
+              SizedBox(width: PharMeTheme.smallSpace),
+            ],
+            Expanded(
+              child: Column(
+                children: [
+                  getTextWidget(getText(context)),
+                  if (getSecondLineText != null) ...[
+                    SizedBox(height: PharMeTheme.smallSpace),
+                    getTextWidget(getSecondLineText!(context)),
+                  ]
+                ],
+              ),
             ),
-          ),
-        ]),
+          ],
+        ),
       ),
     );
 
     if (onClick != null) return InkWell(onTap: onClick, child: widget);
 
     return widget;
   }
+
+  Widget getTextWidget(String text) => Text(
+    text,
+    style: PharMeTheme.textTheme.bodyMedium,
+    textAlign: (icon != null) ? TextAlign.start : TextAlign.center,
+  );
 }