Update the welcome screen.

The first screen you see is now much closer to the redesigned screen from our UX designer, rather than a dull empty looking page saying you have no documents. Also rounded the buttons more on the Add To Wallet screen and changed the Scan QR Code button's colors to match the other buttons. Tested by: - Manual testing Signed-off-by: Kevin Deus <[email protected]>
openwallet-foundation-labs · Nov 21, 2024 · e575a79 · e575a79
1 parent 8f7cfd2
commit e575a79
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 21 deletions.
diff --git a/...va/com/android/identity_credential/wallet/ui/destination/addtowallet/AddToWalletScreen.kt b/...va/com/android/identity_credential/wallet/ui/destination/addtowallet/AddToWalletScreen.kt
@@ -229,7 +229,7 @@ private fun AddToWalletScreenWithIssuerDisplayDatas(
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(8.dp),
-            shape = RoundedCornerShape(8.dp),
+            shape = RoundedCornerShape(24.dp),
             onClick = {
                 provisioningViewModel.reset()
                 provisioningViewModel.start(
@@ -272,14 +272,7 @@ private fun AddToWalletScreenWithIssuerDisplayDatas(
         modifier = Modifier
             .fillMaxWidth()
             .padding(8.dp),
-
-        colors = ButtonColors(
-            containerColor = MaterialTheme.colorScheme.primaryContainer,
-            contentColor = MaterialTheme.colorScheme.onPrimaryContainer,
-            disabledContainerColor = Color.Green,
-            disabledContentColor = Color.Green
-        ),
-        shape = RoundedCornerShape(8.dp),
+        shape = RoundedCornerShape(24.dp),
         onClick = onShowScanQrDialog
     ) {
         Row {

diff --git a/...et/src/main/java/com/android/identity_credential/wallet/ui/destination/main/MainScreen.kt b/...et/src/main/java/com/android/identity_credential/wallet/ui/destination/main/MainScreen.kt
@@ -9,6 +9,7 @@ import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -23,6 +24,7 @@ import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
 import androidx.compose.material.icons.filled.Fingerprint
@@ -446,31 +448,52 @@ fun MainScreenNoDocumentsAvailable(
         )
     }
 
-    Row(
-        modifier = Modifier.fillMaxWidth(),
-        horizontalArrangement = Arrangement.Center
+    Column(
+        modifier = Modifier.fillMaxWidth().padding(16.dp),
+        horizontalAlignment = Alignment.Start
     ) {
+        Text(
+            modifier = Modifier.padding(8.dp).fillMaxWidth(),
+            text = stringResource(R.string.welcome_to_your_open_wallet_empty),
+            style = MaterialTheme.typography.displayMedium,
+            textAlign = TextAlign.Left
+        )
         Text(
             modifier = Modifier.padding(8.dp),
             text = stringResource(R.string.wallet_screen_empty),
-            style = MaterialTheme.typography.titleLarge,
-            textAlign = TextAlign.Center
+            style = MaterialTheme.typography.bodyLarge,
+            textAlign = TextAlign.Left
         )
     }
+    Image(
+        painter = painterResource(
+            if (isSystemInDarkTheme())
+                R.drawable.welcome_image_dark
+            else
+                R.drawable.welcome_image_light),
+        contentDescription = stringResource(R.string.welcome_to_your_wallet_image),
+        modifier = Modifier.padding(8.dp)
+    )
     Row(
-        modifier = Modifier
-            .fillMaxWidth()
-            .padding(8.dp),
-        horizontalArrangement = Arrangement.Center
+        modifier = Modifier.fillMaxWidth(),
+        horizontalArrangement = Arrangement.End
     ) {
-        Button(onClick = {
+        Button(
+            modifier = Modifier.padding(16.dp),
+            shape = RoundedCornerShape(16.dp),
+            onClick = {
             if (!AndroidKeystoreSecureArea.Capabilities(context).secureLockScreenSetup) {
                 showDeviceLockNotSetupWarning = true
             } else {
                 onNavigate(WalletDestination.AddToWallet.route)
             }
 
         }) {
+            Icon(
+                imageVector = Icons.Filled.Add,
+                contentDescription = "Add icon",
+                modifier = Modifier.padding(end = 8.dp, top = 12.dp, bottom = 12.dp)
+            )
             Text(stringResource(R.string.wallet_screen_add))
         }
     }

diff --git a/wallet/src/main/res/drawable/welcome_image_dark.png b/wallet/src/main/res/drawable/welcome_image_dark.png
diff --git a/wallet/src/main/res/drawable/welcome_image_light.png b/wallet/src/main/res/drawable/welcome_image_light.png
diff --git a/wallet/src/main/res/values/strings.xml b/wallet/src/main/res/values/strings.xml
@@ -71,8 +71,8 @@
     <string name="wallet_screen_nfc_presentation_instructions">Tap to share or use code</string>
     <string name="wallet_screen_qr_icon_content_description">QR Icon</string>
     <string name="wallet_screen_show_qr">Show code</string>
-    <string name="wallet_screen_empty">No documents in wallet, start by adding one</string>
-    <string name="wallet_screen_add">Add to Wallet</string>
+    <string name="wallet_screen_empty">Add documents and manage your documents in one place.</string>
+    <string name="wallet_screen_add">Add a document</string>
     <string name="wallet_screen_permissions">Need permissions</string>
     <string name="wallet_screen_permissions_dismiss">Dismiss</string>
     <string name="qr_lskf_warning_dismiss_btn">Ok</string>
@@ -566,6 +566,8 @@
     <string name="qr_alert_dialog_bt_disabled_text">Bluetooth must be enabled to share a QR connection code</string>
     <string name="qr_alert_dialog_bt_enable_button">Enable</string>
     <string name="presentation_result_no_matching_document_message">No available documents can fulfill the request.</string>
+    <string name="welcome_to_your_wallet_image">Welcome to your wallet image</string>
+    <string name="welcome_to_your_open_wallet_empty">Welcome to your Open Wallet</string>
     <string name="settings_screen_debug_actions_section">Debug actions</string>
     <string name="settings_screen_trigger_periodic_sync_button">Trigger Periodic Sync</string>
 </resources>