Merge pull request #576 from hpi-dhc/adapt-onboarding

Adapt onboarding

app/ios/Podfile.lock

@@ -60,7 +60,7 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   device_info_plus: e5c5da33f982a436e103237c0c85f9031142abed
-  Flutter: f04841e97a9d0b0a8025694d0796dd46242b2854
+  Flutter: 50d75fe2f02b26cc09d224853bb45737f8b3214a
   flutter_secure_storage: 7953c38a04c3fdbb00571bcd87d8e3b5ceb9daec
   flutter_share: 4be0208963c60b537e6255ed2ce1faae61cd9ac2
   flutter_web_auth: 09a0abd245f1a07a3ff4dcf1247a048d89ee12a9
@@ -73,4 +73,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: ef19549a9bc3046e7bb7d2fab4d021637c0c58a3
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.10.0

app/lib/common/theme.dart

@@ -70,6 +70,8 @@ class PharMeTheme {
   static const backgroundColor = Colors.white;
   static const errorColor = Color(0xccf52a2a);
   static final borderColor = Colors.black.withOpacity(.2);
+
+  static const mediumSpace = 16.0;
 }
 
 extension WarningLevelColor on WarningLevel {

app/lib/l10n/app_en.arb

@@ -2,7 +2,7 @@
   "action_cancel": "Cancel",
   "action_continue": "Continue",
 
-  "auth_choose_lab": "Please select your lab",
+  "auth_choose_lab": "Please select your data provider",
   "auth_sign_in": "Sign in",
   "auth_success": "Successfully imported data",
 
@@ -104,6 +104,7 @@
 
   "onboarding_get_started": "Get started",
   "onboarding_next": "Next",
+  "onboarding_prev": "Back",
   "onboarding_1_header": "Welcome to PharMe",
   "onboarding_1_text": "Your genome has more influence on your life than you might think!\nMore than 90% of people are vulnerable to unintended drug reactions.\n\nUse PharMe to find out about yours.",
   "onboarding_2_header": "One size does not fit all",

app/lib/login/models/lab.dart

@@ -16,13 +16,7 @@ class Lab {
 
 final labs = [
   Lab(
-    name: 'Illumina Solutions Center Berlin',
-    authUrl: keycloakUrl('/realms/pharme/protocol/openid-connect/auth'),
-    tokenUrl: keycloakUrl('/realms/pharme/protocol/openid-connect/token'),
-    starAllelesUrl: labServerUrl('/star-alleles'),
-  ),
-  Lab(
-    name: 'Mount Sinai Hospital (NYC)',
+    name: 'Mount Sinai Health System',
     authUrl: keycloakUrl('/realms/pharme/protocol/openid-connect/auth'),
     tokenUrl: keycloakUrl('/realms/pharme/protocol/openid-connect/token'),
     starAllelesUrl: labServerUrl('/star-alleles'),

app/lib/login/pages/login.dart

@@ -74,6 +74,11 @@ class LoginPage extends HookWidget {
       action: action,
       actionText: context.l10n.auth_sign_in,
       children: [
+        Text(
+          context.l10n.auth_choose_lab,
+          style: PharMeTheme.textTheme.titleLarge,
+        ),
+        SizedBox(height: PharMeTheme.mediumSpace),
         DropdownButtonHideUnderline(
           child: DropdownButton2(
             isExpanded: true,
@@ -113,7 +118,7 @@ class LoginPage extends HookWidget {
           color: PharMeTheme.primaryColor,
           size: 96,
         ),
-        SizedBox(height: 16),
+        SizedBox(height: PharMeTheme.mediumSpace),
         Text(
           context.l10n.auth_success,
           style: context.textTheme.headline6,
@@ -133,7 +138,7 @@ class LoginPage extends HookWidget {
           color: PharMeTheme.errorColor,
           size: 96,
         ),
-        SizedBox(height: 16),
+        SizedBox(height: PharMeTheme.mediumSpace),
         Text(
           message,
           style: context.textTheme.headline6,
@@ -152,7 +157,7 @@ class LoginPage extends HookWidget {
       mainAxisSize: MainAxisSize.min,
       children: [
         ...children,
-        SizedBox(height: 16),
+        SizedBox(height: PharMeTheme.mediumSpace),
         SizedBox(
           width: double.infinity,
           child: ElevatedButton(

app/lib/onboarding/pages/onboarding.dart

@@ -6,19 +6,19 @@ import '../../../common/module.dart' hide MetaData;
 class OnboardingPage extends HookWidget {
   final _pages = [
     OnboardingSubPage(
-      illustrationPath: 'assets/images/onboarding/1.gif',
+      illustrationPath: 'assets/images/onboarding/1.png',
       getHeader: (context) => context.l10n.onboarding_1_header,
       getText: (context) => context.l10n.onboarding_1_text,
       color: Color(0xFFFF7E41),
     ),
     OnboardingSubPage(
-      illustrationPath: 'assets/images/onboarding/2.gif',
+      illustrationPath: 'assets/images/onboarding/2.png',
       getHeader: (context) => context.l10n.onboarding_2_header,
       getText: (context) => context.l10n.onboarding_2_text,
       color: Color(0xCCCC0700),
     ),
     OnboardingSubPage(
-      illustrationPath: 'assets/images/onboarding/3.gif',
+      illustrationPath: 'assets/images/onboarding/3.png',
       getHeader: (context) => context.l10n.onboarding_3_header,
       getText: (context) => context.l10n.onboarding_3_text,
       color: Color(0xCC359600),
@@ -28,7 +28,7 @@ class OnboardingPage extends HookWidget {
       ),
     ),
     OnboardingSubPage(
-      illustrationPath: 'assets/images/onboarding/4.gif',
+      illustrationPath: 'assets/images/onboarding/4.png',
       getHeader: (context) => context.l10n.onboarding_4_header,
       getText: (context) => context.l10n.onboarding_4_text,
       color: Color(0xFF00B9FA),
@@ -42,7 +42,7 @@ class OnboardingPage extends HookWidget {
       ),
     ),
     OnboardingSubPage(
-      illustrationPath: 'assets/images/onboarding/5.gif',
+      illustrationPath: 'assets/images/onboarding/5.png',
       getHeader: (context) => context.l10n.onboarding_5_header,
       getText: (context) => context.l10n.onboarding_5_text,
       color: Color(0xFF0A64BC),
@@ -113,6 +113,15 @@ class OnboardingPage extends HookWidget {
                 currentPage.value == _pages.length - 1,
               ),
             ),
+            Positioned(
+              bottom: 16,
+              left: 16,
+              child: _buildPrevButton(
+                context,
+                pageController,
+                currentPage.value == 0,
+              ),
+            )
           ],
         ),
       ),
@@ -180,6 +189,43 @@ class OnboardingPage extends HookWidget {
       ),
     );
   }
+
+  Widget _buildPrevButton(
+    BuildContext context,
+    PageController pageController,
+    bool isFirstPage,
+  ) {
+    if (!isFirstPage) {
+      return TextButton(
+        key: Key('prevButton'),
+        onPressed: () {
+          pageController.previousPage(
+              duration: Duration(milliseconds: 500),
+              curve: Curves.ease,
+            );
+        },
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(
+              Icons.arrow_back_rounded,
+              color: Colors.white,
+              size: 32,
+            ),
+            SizedBox(width: 8),
+            Text(
+              context.l10n.onboarding_prev,
+              style: PharMeTheme.textTheme.headlineSmall!
+                  .copyWith(color: Colors.white),
+            ),
+          ],
+        ),
+      );
+    } else {
+      return SizedBox.shrink();
+    }
+  }
 }
 
 class OnboardingSubPage extends StatelessWidget {
@@ -205,9 +251,9 @@ class OnboardingSubPage extends StatelessWidget {
       padding: const EdgeInsets.fromLTRB(32, 16, 32, 0),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        mainAxisAlignment: MainAxisAlignment.center,
         children: [
-          SizedBox(height: 16),
+          SizedBox(height: PharMeTheme.mediumSpace),
           Center(
             child: FractionallySizedBox(
               alignment: Alignment.topCenter,
@@ -218,6 +264,7 @@ class OnboardingSubPage extends StatelessWidget {
               ),
             ),
           ),
+          SizedBox(height: PharMeTheme.mediumSpace),
           Column(children: [
             AutoSizeText(
               getHeader(context),
@@ -226,14 +273,14 @@ class OnboardingSubPage extends StatelessWidget {
               ),
               maxLines: 2,
             ),
-            SizedBox(height: 8),
+            SizedBox(height: PharMeTheme.mediumSpace),
             Text(
               getText(context),
-              style: PharMeTheme.textTheme.bodyMedium!.copyWith(
+              style: PharMeTheme.textTheme.bodyLarge!.copyWith(
                 color: Colors.white,
               ),
             ),
-            if (child != null) ...[SizedBox(height: 8), child!],
+            if (child != null) ...[SizedBox(height: PharMeTheme.mediumSpace), child!],
           ]),
           // Empty widget for spaceBetween in this column to work properly
           Container(),