Merge pull request #4065 from element-hq/feature/bma/recoveryKeyUi

Update recovery key UI

features/securebackup/impl/src/main/kotlin/io/element/android/features/securebackup/impl/setup/views/RecoveryKeyView.kt

@@ -9,6 +9,7 @@ package io.element.android.features.securebackup.impl.setup.views
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -24,8 +25,10 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.autofill.AutofillType
+import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.input.VisualTransformation
@@ -88,42 +91,38 @@ private fun RecoveryKeyStaticContent(
     state: RecoveryKeyViewState,
     onClick: (() -> Unit)?,
 ) {
-    Row(
+    Box(
         modifier = Modifier
-                .fillMaxWidth()
+            .fillMaxWidth()
-                .clip(RoundedCornerShape(14.dp))
+            .clip(RoundedCornerShape(10.dp))
-                .background(
+            .background(
-                        color = ElementTheme.colors.bgSubtleSecondary,
+                color = ElementTheme.colors.bgSubtleSecondary,
-                        shape = RoundedCornerShape(14.dp)
+            )
-                )
+            .clickableIfNotNull(onClick)
-                .clickableIfNotNull(onClick)
+            .padding(horizontal = 16.dp, vertical = 11.dp),
-                .padding(horizontal = 16.dp, vertical = 16.dp),
+        contentAlignment = Alignment.Center,
-        horizontalArrangement = Arrangement.spacedBy(8.dp)
     ) {
         if (state.formattedRecoveryKey != null) {
-            Text(
+            RecoveryKeyWithCopy(
-                text = state.formattedRecoveryKey,
+                recoveryKey = state.formattedRecoveryKey,
-                modifier = Modifier.weight(1f),
+                alpha = 1f,
-            )
-            Icon(
-                imageVector = CompoundIcons.Copy(),
-                contentDescription = stringResource(id = CommonStrings.action_copy),
-                tint = ElementTheme.colors.iconSecondary,
             )
         } else {
+            // Use an invisible recovery key to ensure that the Box size is correct.
+            val fakeFormattedRecoveryKey = List(12) { "XXXX" }.joinToString(" ")
+            RecoveryKeyWithCopy(
+                recoveryKey = fakeFormattedRecoveryKey,
+                alpha = 0f,
+            )
             Row(
                 verticalAlignment = Alignment.CenterVertically,
-                horizontalArrangement = Arrangement.Center,
-                modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(vertical = 11.dp)
             ) {
                 if (state.inProgress) {
                     CircularProgressIndicator(
                         modifier = Modifier
-                                .progressSemantics()
+                            .progressSemantics()
-                                .padding(end = 8.dp)
+                            .padding(end = 8.dp)
-                                .size(16.dp),
+                            .size(16.dp),
                         color = ElementTheme.colors.textPrimary,
                         strokeWidth = 1.5.dp,
                     )
@@ -144,6 +143,31 @@ private fun RecoveryKeyStaticContent(
     }
 }
 
+@Composable
+private fun RecoveryKeyWithCopy(
+    recoveryKey: String,
+    alpha: Float,
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .alpha(alpha),
+        horizontalArrangement = Arrangement.spacedBy(8.dp),
+    ) {
+        Text(
+            text = recoveryKey,
+            color = ElementTheme.colors.textSecondary,
+            style = ElementTheme.typography.fontBodyLgRegular.copy(fontFamily = FontFamily.Monospace),
+            modifier = Modifier.weight(1f),
+        )
+        Icon(
+            imageVector = CompoundIcons.Copy(),
+            contentDescription = stringResource(id = CommonStrings.action_copy),
+            tint = ElementTheme.colors.iconSecondary,
+        )
+    }
+}
+
 @OptIn(ExperimentalComposeUiApi::class)
 @Composable
 private fun RecoveryKeyFormContent(
@@ -160,12 +184,12 @@ private fun RecoveryKeyFormContent(
     }
     TextField(
         modifier = Modifier
-                .fillMaxWidth()
+            .fillMaxWidth()
-                .testTag(TestTags.recoveryKey)
+            .testTag(TestTags.recoveryKey)
-                .autofill(
+            .autofill(
-                        autofillTypes = listOf(AutofillType.Password),
+                autofillTypes = listOf(AutofillType.Password),
-                        onFill = { onChange(it) },
+                onFill = { onChange(it) },
-                ),
+            ),
         minLines = 2,
         value = state.formattedRecoveryKey.orEmpty(),
         onValueChange = onChange,

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup.views_RecoveryKeyView_Day_0_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0bc6ca9fdca5e61bcbc490eda3faa9931212a1fcf8836b756c629d64f71dfb44
+oid sha256:6ed28ec4c611e0c6b01e4f9742bbd579593103859775d41118bb11fef0586b11
-size 16285
+size 16140

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup.views_RecoveryKeyView_Day_1_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:515442ef3d33d93b172ce0db8b0f2b06be2eee7137933128cf414223d8161b33
+oid sha256:f3e9406dc7e490469cfd6178c66f12af16b89c68241b939db81bb160232a1c61
-size 14044
+size 13938

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup.views_RecoveryKeyView_Day_2_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ea7920d1f69056b78471a4f789a02282d6929c72d542e4863affffa1cd99bbd1
+oid sha256:8bfa6e9b48e6ac6f5079127f6b978a5c144941d79ba347f91251ff0e6f1e3ae1
-size 22611
+size 21680

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup.views_RecoveryKeyView_Day_3_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ea7920d1f69056b78471a4f789a02282d6929c72d542e4863affffa1cd99bbd1
+oid sha256:8bfa6e9b48e6ac6f5079127f6b978a5c144941d79ba347f91251ff0e6f1e3ae1
-size 22611
+size 21680

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup.views_RecoveryKeyView_Day_4_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4d53449b4f515a15207ed194469d56266f77c7208856c8481bba4bc89d681ec3
+oid sha256:6715956a1ffc033a907da275bd69397b423b7819346355933278f5f1187b20fa
-size 16472
+size 16380

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup.views_RecoveryKeyView_Day_5_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:515442ef3d33d93b172ce0db8b0f2b06be2eee7137933128cf414223d8161b33
+oid sha256:f3e9406dc7e490469cfd6178c66f12af16b89c68241b939db81bb160232a1c61
-size 14044
+size 13938

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup.views_RecoveryKeyView_Day_6_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ea7920d1f69056b78471a4f789a02282d6929c72d542e4863affffa1cd99bbd1
+oid sha256:8bfa6e9b48e6ac6f5079127f6b978a5c144941d79ba347f91251ff0e6f1e3ae1
-size 22611
+size 21680

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup.views_RecoveryKeyView_Day_7_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ea7920d1f69056b78471a4f789a02282d6929c72d542e4863affffa1cd99bbd1
+oid sha256:8bfa6e9b48e6ac6f5079127f6b978a5c144941d79ba347f91251ff0e6f1e3ae1
-size 22611
+size 21680

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup.views_RecoveryKeyView_Night_0_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:484f2b3e592efbc3913cac20ce6cc7df3fe9424f0b40a16faaa870858756d847
+oid sha256:97a889bc71a579978cf4656a296221c4a929914f32dc0d74cd4faa07379ae519
-size 15750
+size 15487

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup.views_RecoveryKeyView_Night_1_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:33d7d1c4a7ff4e1fd82963969721b23326f7a86c4f716b877b5f65455c564902
+oid sha256:9122040db16a68daf4b88e0ef8239fcb28e1a858f6ab1bc0b352926ab7819caf
-size 13572
+size 13427

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup.views_RecoveryKeyView_Night_2_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:92c11a80a52d977e27f560c7d9b80e87328ebf14406647c62c05a4c6c962e2d9
+oid sha256:39769a4a1de0cb8962fc14de88f8d4e8988ef36419fb18ebb5524f08f6eda001
-size 21978
+size 20811

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup.views_RecoveryKeyView_Night_3_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:92c11a80a52d977e27f560c7d9b80e87328ebf14406647c62c05a4c6c962e2d9
+oid sha256:39769a4a1de0cb8962fc14de88f8d4e8988ef36419fb18ebb5524f08f6eda001
-size 21978
+size 20811

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup.views_RecoveryKeyView_Night_4_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:597682e1dc18488401665fe4404fc98f4d76a6587cd142d9e41e826138affc32
+oid sha256:5f7f2901b56ac490efd3c0dc3d59f5fcffdb33f063e82060820bb0b352cba968
-size 15961
+size 15827

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup.views_RecoveryKeyView_Night_5_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:33d7d1c4a7ff4e1fd82963969721b23326f7a86c4f716b877b5f65455c564902
+oid sha256:9122040db16a68daf4b88e0ef8239fcb28e1a858f6ab1bc0b352926ab7819caf
-size 13572
+size 13427

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup.views_RecoveryKeyView_Night_6_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:92c11a80a52d977e27f560c7d9b80e87328ebf14406647c62c05a4c6c962e2d9
+oid sha256:39769a4a1de0cb8962fc14de88f8d4e8988ef36419fb18ebb5524f08f6eda001
-size 21978
+size 20811

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup.views_RecoveryKeyView_Night_7_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:92c11a80a52d977e27f560c7d9b80e87328ebf14406647c62c05a4c6c962e2d9
+oid sha256:39769a4a1de0cb8962fc14de88f8d4e8988ef36419fb18ebb5524f08f6eda001
-size 21978
+size 20811

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup_SecureBackupSetupViewChange_Day_0_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:226b0e80f8b0b39c0413bc72ad145b6edebb71f58bb1ad7d41dda49776b09f4d
+oid sha256:2299427647ef9673a68b5235bc3503007874d0570324a17d3c3ee40a5e581af6
-size 42643
+size 42671

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup_SecureBackupSetupViewChange_Day_1_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4ac77b3456739f0abae3d05b03b35a17ff7b7d7a625f1bebd9b36b6c759e7e7d
+oid sha256:0a011821df73e73ac3ec15caef2c6cff228cf0e5567271164b655aedbd4755bf
-size 40367
+size 40228

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup_SecureBackupSetupViewChange_Day_2_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3a4aefb49b16a1bed3547d1259e3159590ef6428a73687b8b4bfdc9a9eea45e5
+oid sha256:b71e77d68b21262c0dc0731a4bd4a62053ab94f5ae3ef7ac27b29154cfe7556e
-size 57599
+size 56493

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup_SecureBackupSetupViewChange_Day_3_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3a4aefb49b16a1bed3547d1259e3159590ef6428a73687b8b4bfdc9a9eea45e5
+oid sha256:b71e77d68b21262c0dc0731a4bd4a62053ab94f5ae3ef7ac27b29154cfe7556e
-size 57599
+size 56493

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup_SecureBackupSetupViewChange_Day_4_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:db5e61758f4decd9422be2ad11e595510cffb2433d42ec97923e4a7e3dc2610e
+oid sha256:222f29e2c22cc2381a0c533fb237d61cf6a3537ed3f00f29ec7931b9933d841f
-size 51310
+size 49987

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup_SecureBackupSetupViewChange_Night_0_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:459f4185a7c9eaaedd179fdfa117fd730238277995c6520a7e0eba084762a640
+oid sha256:1220f0136cf5dd3558dcd08ff7f820fac4395b4b35fd5b144faa65ecf01ff620
-size 41368
+size 41305

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup_SecureBackupSetupViewChange_Night_1_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:029a76515d629b66668f174ff55d5bc26be19e1a2d708f282b2de6213b1575cf
+oid sha256:b538d064bf3efda30bc981e24390e65918e3ae570f13b1329bcc17e55e4216c7
-size 39090
+size 39020

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup_SecureBackupSetupViewChange_Night_2_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b5b7a4b6d22c15e79ab8e547f10cf5298964d6de4ac5f6b10e0fd12380322350
+oid sha256:52cc26ca7c7db86be00075dcdd39ac364339c0b462edc529c21f17187fb878c2
-size 56012
+size 54642

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup_SecureBackupSetupViewChange_Night_3_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b5b7a4b6d22c15e79ab8e547f10cf5298964d6de4ac5f6b10e0fd12380322350
+oid sha256:52cc26ca7c7db86be00075dcdd39ac364339c0b462edc529c21f17187fb878c2
-size 56012
+size 54642

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup_SecureBackupSetupViewChange_Night_4_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d8a88518bc44f9554dbe9db6c86c51f26f54aff7172dfa1a011e8c10b0f8dac6
+oid sha256:a0cf9ffc7f76bd53c4b94d02f0507994972993ae50ce022db72542a283f780b5
-size 48564
+size 47115

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup_SecureBackupSetupView_Day_0_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:aaf674ca4ba02eaaff9f07fdc6374c5b195e7b9c8eb2e03b875e2690a236a975
+oid sha256:86dcedd7d1fb23ba10eb8b3e1c5d7f71331334cb98fb88bfa2a1fef0fffb3783
-size 44115
+size 44053

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup_SecureBackupSetupView_Day_1_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9a96a86966223eb3ae22be485d8a7faf7607f0f9de8462419ad13772c55a8a76
+oid sha256:bcdb036e2a7581e69d3b658d16bb26e98aa27156fbafd17e9da15fd103158299
-size 41939
+size 41819

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup_SecureBackupSetupView_Day_2_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3a4aefb49b16a1bed3547d1259e3159590ef6428a73687b8b4bfdc9a9eea45e5
+oid sha256:b71e77d68b21262c0dc0731a4bd4a62053ab94f5ae3ef7ac27b29154cfe7556e
-size 57599
+size 56493

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup_SecureBackupSetupView_Day_3_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3a4aefb49b16a1bed3547d1259e3159590ef6428a73687b8b4bfdc9a9eea45e5
+oid sha256:b71e77d68b21262c0dc0731a4bd4a62053ab94f5ae3ef7ac27b29154cfe7556e
-size 57599
+size 56493

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup_SecureBackupSetupView_Day_4_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:db5e61758f4decd9422be2ad11e595510cffb2433d42ec97923e4a7e3dc2610e
+oid sha256:222f29e2c22cc2381a0c533fb237d61cf6a3537ed3f00f29ec7931b9933d841f
-size 51310
+size 49987

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup_SecureBackupSetupView_Night_0_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:19b68c0545f4b087d19f5f54f3bb104077dcde4622cd5a51803c34ff8111db67
+oid sha256:64777bafec80f98b0b1f9b7e05ede31036032b97808d52911ddd9045d83dae58
-size 42837
+size 42794

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup_SecureBackupSetupView_Night_1_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b1fae355b34c7b34026bbf932f3e6ba44483e8c39d2d1d3de45f638fd370024f
+oid sha256:0d98ab21d3ae8099bd4f458c6422cf8d91a7405b45b1a41cc91fef78ccaf9475
-size 40729
+size 40658

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup_SecureBackupSetupView_Night_2_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b5b7a4b6d22c15e79ab8e547f10cf5298964d6de4ac5f6b10e0fd12380322350
+oid sha256:52cc26ca7c7db86be00075dcdd39ac364339c0b462edc529c21f17187fb878c2
-size 56012
+size 54642

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup_SecureBackupSetupView_Night_3_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b5b7a4b6d22c15e79ab8e547f10cf5298964d6de4ac5f6b10e0fd12380322350
+oid sha256:52cc26ca7c7db86be00075dcdd39ac364339c0b462edc529c21f17187fb878c2
-size 56012
+size 54642

tests/uitests/src/test/snapshots/images/features.securebackup.impl.setup_SecureBackupSetupView_Night_4_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d8a88518bc44f9554dbe9db6c86c51f26f54aff7172dfa1a011e8c10b0f8dac6
+oid sha256:a0cf9ffc7f76bd53c4b94d02f0507994972993ae50ce022db72542a283f780b5
-size 48564
+size 47115