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()
-                .clip(RoundedCornerShape(14.dp))
-                .background(
-                        color = ElementTheme.colors.bgSubtleSecondary,
-                        shape = RoundedCornerShape(14.dp)
-                )
-                .clickableIfNotNull(onClick)
-                .padding(horizontal = 16.dp, vertical = 16.dp),
-        horizontalArrangement = Arrangement.spacedBy(8.dp)
+            .fillMaxWidth()
+            .clip(RoundedCornerShape(10.dp))
+            .background(
+                color = ElementTheme.colors.bgSubtleSecondary,
+            )
+            .clickableIfNotNull(onClick)
+            .padding(horizontal = 16.dp, vertical = 11.dp),
+        contentAlignment = Alignment.Center,
     ) {
         if (state.formattedRecoveryKey != null) {
-            Text(
-                text = state.formattedRecoveryKey,
-                modifier = Modifier.weight(1f),
-            )
-            Icon(
-                imageVector = CompoundIcons.Copy(),
-                contentDescription = stringResource(id = CommonStrings.action_copy),
-                tint = ElementTheme.colors.iconSecondary,
+            RecoveryKeyWithCopy(
+                recoveryKey = state.formattedRecoveryKey,
+                alpha = 1f,
             )
         } 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()
-                                .padding(end = 8.dp)
-                                .size(16.dp),
+                            .progressSemantics()
+                            .padding(end = 8.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()
-                .testTag(TestTags.recoveryKey)
-                .autofill(
-                        autofillTypes = listOf(AutofillType.Password),
-                        onFill = { onChange(it) },
-                ),
+            .fillMaxWidth()
+            .testTag(TestTags.recoveryKey)
+            .autofill(
+                autofillTypes = listOf(AutofillType.Password),
+                onFill = { onChange(it) },
+            ),
         minLines = 2,
         value = state.formattedRecoveryKey.orEmpty(),
         onValueChange = onChange,