Make verification screens scrollable and emoji labels multiline (#4449)

* Make self verification screens scrollable * Remove unused fields from `VerificationEmoji` * Make only the header and content scroll in `HeaderFooterPage`. * Use the right 'emoji' icon in both flows (`ReactionSolid`) --------- Co-authored-by: ElementBot <android@element.io>
2025-03-21 12:18:38 +01:00 · 2025-03-21 12:18:38 +01:00 · a06619780c
commit a06619780c
parent dd3a6af3cf
47 changed files with 213 additions and 144 deletions
--- a/features/joinroom/impl/src/main/kotlin/io/element/android/features/joinroom/impl/JoinRoomView.kt
+++ b/features/joinroom/impl/src/main/kotlin/io/element/android/features/joinroom/impl/JoinRoomView.kt
@ -85,7 +85,7 @@ fun JoinRoomView(
    ) {
        HeaderFooterPage(
            containerColor = Color.Transparent,
-            paddingValues = PaddingValues(
+            contentPadding = PaddingValues(
                horizontal = 16.dp,
                vertical = 32.dp
            ),
--- a/features/roomaliasresolver/impl/src/main/kotlin/io/element/android/features/roomaliasresolver/impl/RoomAliasResolverView.kt
+++ b/features/roomaliasresolver/impl/src/main/kotlin/io/element/android/features/roomaliasresolver/impl/RoomAliasResolverView.kt
@ -51,7 +51,7 @@ fun RoomAliasResolverView(
    ) {
        HeaderFooterPage(
            containerColor = Color.Transparent,
-            paddingValues = PaddingValues(
+            contentPadding = PaddingValues(
                horizontal = 16.dp,
                vertical = 32.dp
            ),
--- a/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/incoming/IncomingVerificationView.kt
+++ b/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/incoming/IncomingVerificationView.kt
@ -13,9 +13,11 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.TopAppBarDefaults.topAppBarColors
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.PreviewParameter
@ -35,6 +37,7 @@ import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Button
+import io.element.android.libraries.designsystem.theme.components.InvisibleButton
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.theme.components.TextButton
 import io.element.android.libraries.designsystem.theme.components.TopAppBar
@ -67,7 +70,8 @@ fun IncomingVerificationView(
                        step is Step.Completed -> Unit
                        else -> BackButton(onClick = { state.eventSink(IncomingVerificationViewEvents.GoBack) })
                    }
-                }
+                },
+                colors = topAppBarColors(containerColor = Color.Transparent),
            )
        },
        header = {
@ -77,7 +81,8 @@ fun IncomingVerificationView(
            IncomingVerificationBottomMenu(
                state = state,
            )
-        }
+        },
+        isScrollable = true,
    ) {
        IncomingVerificationContent(
            step = step,
@ -222,7 +227,11 @@ private fun IncomingVerificationBottomMenu(
        }
        is Step.Verifying -> {
            if (step.isWaiting) {
-                // Show nothing
+                // Add invisible buttons to keep the same screen layout
+                VerificationBottomMenu {
+                    InvisibleButton()
+                    InvisibleButton()
+                }
            } else {
                VerificationBottomMenu {
                    Button(
--- a/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/outgoing/VerifySelfSessionView.kt
+++ b/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/outgoing/VerifySelfSessionView.kt
@ -16,9 +16,11 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.TopAppBarDefaults.topAppBarColors
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
@ -91,7 +93,8 @@ fun VerifySelfSessionView(
                        { BackButton(onClick = ::cancelOrResetFlow) }
                    } else {
                        {}
-                    }
+                    },
+                    colors = topAppBarColors(containerColor = Color.Transparent)
                )
            },
            header = {
@ -103,7 +106,8 @@ fun VerifySelfSessionView(
                    onCancelClick = ::cancelOrResetFlow,
                    onContinueClick = onFinish,
                )
-            }
+            },
+            isScrollable = true,
        ) {
            VerifySelfSessionContent(
                flowState = step,
@ -124,13 +128,13 @@ private fun VerifySelfSessionHeader(step: Step, request: VerificationRequest.Out
        }
        Step.AwaitingOtherDeviceResponse -> BigIcon.Style.Loading
        Step.Canceled -> BigIcon.Style.AlertSolid
-        Step.Ready -> BigIcon.Style.Default(CompoundIcons.Reaction())
+        Step.Ready -> BigIcon.Style.Default(CompoundIcons.ReactionSolid())
        Step.Completed -> BigIcon.Style.SuccessSolid
        is Step.Verifying -> {
            if (step.state is AsyncData.Loading<Unit>) {
                BigIcon.Style.Loading
            } else {
-                BigIcon.Style.Default(CompoundIcons.Reaction())
+                BigIcon.Style.Default(CompoundIcons.ReactionSolid())
            }
        }
        is Step.Exit -> return
@ -272,7 +276,11 @@ private fun VerifySelfSessionBottomMenu(
        is Step.AwaitingOtherDeviceResponse -> Unit
        is Step.Verifying -> {
            if (isVerifying) {
-                // Show nothing
+                // Add invisible buttons to keep the same screen layout
+                VerificationBottomMenu {
+                    InvisibleButton()
+                    InvisibleButton()
+                }
            } else {
                VerificationBottomMenu {
                    Button(
--- a/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/ui/Common.kt
+++ b/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/ui/Common.kt
@ -23,11 +23,11 @@ internal fun aDecimalsSessionVerificationData(
 }

 private fun aVerificationEmojiList() = listOf(
-    VerificationEmoji(number = 27, emoji = "🍕", description = "Pizza"),
-    VerificationEmoji(number = 54, emoji = "🚀", description = "Rocket"),
-    VerificationEmoji(number = 54, emoji = "🚀", description = "Rocket"),
-    VerificationEmoji(number = 42, emoji = "📕", description = "Book"),
-    VerificationEmoji(number = 48, emoji = "🔨", description = "Hammer"),
-    VerificationEmoji(number = 48, emoji = "🔨", description = "Hammer"),
-    VerificationEmoji(number = 63, emoji = "📌", description = "Pin"),
+    VerificationEmoji(number = 27),
+    VerificationEmoji(number = 54),
+    VerificationEmoji(number = 54),
+    VerificationEmoji(number = 42),
+    VerificationEmoji(number = 48),
+    VerificationEmoji(number = 48),
+    VerificationEmoji(number = 63),
 )
--- a/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/ui/VerificationContentVerifying.kt
+++ b/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/ui/VerificationContentVerifying.kt
@ -16,6 +16,7 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.runtime.Composable
@ -38,7 +39,7 @@ internal fun VerificationContentVerifying(
    modifier: Modifier = Modifier,
 ) {
    Box(
-        modifier = modifier.fillMaxSize(),
+        modifier = modifier.fillMaxSize().padding(bottom = 20.dp),
        contentAlignment = Alignment.Center
    ) {
        when (data) {
@ -86,8 +87,8 @@ private fun EmojiItemView(emoji: VerificationEmoji, modifier: Modifier = Modifie
            text = stringResource(id = emojiResource.nameRes),
            style = ElementTheme.typography.fontBodyMdRegular,
            color = ElementTheme.colors.textSecondary,
-            maxLines = 1,
-            overflow = TextOverflow.Ellipsis,
+            overflow = TextOverflow.Visible,
+            textAlign = TextAlign.Center,
        )
    }
 }
--- a/features/verifysession/impl/src/test/kotlin/io/element/android/features/verifysession/impl/outgoing/VerifySelfSessionPresenterTest.kt
+++ b/features/verifysession/impl/src/test/kotlin/io/element/android/features/verifysession/impl/outgoing/VerifySelfSessionPresenterTest.kt
@ -185,7 +185,7 @@ class VerifySelfSessionPresenterTest {
    @Test
    fun `present - When verification is approved, the flow completes if there is no error`() = runTest {
        val emojis = listOf(
-            VerificationEmoji(number = 30, emoji = "😀", description = "Smiley")
+            VerificationEmoji(number = 30)
        )
        val service = unverifiedSessionService(
            requestSessionVerificationLambda = { },
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/pages/HeaderFooterPage.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/pages/HeaderFooterPage.kt
@ -10,18 +10,21 @@ package io.element.android.libraries.designsystem.atomic.pages
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.calculateEndPadding
+import androidx.compose.foundation.layout.calculateStartPadding
 import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.movableContentOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.libraries.designsystem.preview.ElementPreview
@ -31,7 +34,7 @@ import io.element.android.libraries.designsystem.theme.components.Text

 /**
 * @param modifier Classical modifier.
- * @param paddingValues padding values to apply to the content.
+ * @param contentPadding padding values to apply to the content.
 * @param containerColor color of the container. Set to [Color.Transparent] if you provide a background in the [modifier].
 * @param isScrollable if the whole content should be scrollable.
 * @param background optional background component.
@ -44,7 +47,7 @@ import io.element.android.libraries.designsystem.theme.components.Text
@Composable
 fun HeaderFooterPage(
    modifier: Modifier = Modifier,
-    paddingValues: PaddingValues = PaddingValues(20.dp),
+    contentPadding: PaddingValues = PaddingValues(20.dp),
    containerColor: Color = ElementTheme.colors.bgCanvasDefault,
    isScrollable: Boolean = false,
    background: @Composable () -> Unit = {},
@ -53,64 +56,67 @@ fun HeaderFooterPage(
    footer: @Composable () -> Unit = {},
    content: @Composable () -> Unit = {},
 ) {
-    val topBar = remember { movableContentOf(topBar) }
-    val header = remember { movableContentOf(header) }
-    val footer = remember { movableContentOf(footer) }
-    val content = remember { movableContentOf(content) }
    Scaffold(
        modifier = modifier,
        topBar = topBar,
        containerColor = containerColor,
-    ) { padding ->
+    ) { insetsPadding ->
+        val layoutDirection = LocalLayoutDirection.current
+        val contentInsetsPadding = remember(insetsPadding, layoutDirection) {
+            PaddingValues(
+                start = insetsPadding.calculateStartPadding(layoutDirection),
+                top = insetsPadding.calculateTopPadding(),
+                end = insetsPadding.calculateEndPadding(layoutDirection),
+            )
+        }
+        val footerInsetsPadding = remember(insetsPadding, layoutDirection) {
+            PaddingValues(
+                start = insetsPadding.calculateStartPadding(layoutDirection),
+                end = insetsPadding.calculateEndPadding(layoutDirection),
+                bottom = insetsPadding.calculateBottomPadding(),
+            )
+        }
        Box {
            background()
-            if (isScrollable) {
-                // Render in a LazyColumn
-                LazyColumn(
-                    modifier = Modifier
-                        .padding(paddingValues = paddingValues)
-                        .padding(padding)
-                        .consumeWindowInsets(padding)
-                        .imePadding()
-                ) {
-                    // Header
-                    item {
-                        header()
-                    }
-                    // Content
-                    item {
-                        content()
-                    }
-                    // Footer
-                    item {
-                        Box(modifier = Modifier.padding(horizontal = 16.dp)) {
-                            footer()
-                        }
-                    }
-                }
-            } else {
-                // Render in a Column
+
+            // Render in a Column
+            Column(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(paddingValues = contentPadding)
+                    .consumeWindowInsets(insetsPadding)
+                    .imePadding(),
+            ) {
+                // Content
                Column(
                    modifier = Modifier
-                        .padding(paddingValues = paddingValues)
-                        .padding(padding)
-                        .consumeWindowInsets(padding)
-                        .imePadding()
+                        .fillMaxWidth()
+                        .run {
+                            if (isScrollable) {
+                                verticalScroll(rememberScrollState())
+                            } else {
+                                Modifier
+                            }
+                        }
+                        // Apply insets here so if the content is scrollable it can get below the top app bar if needed
+                        .padding(contentInsetsPadding)
+                        .weight(1f),
                ) {
                    // Header
                    header()
-                    // Content
-                    Column(
-                        modifier = Modifier
-                            .weight(1f)
-                            .fillMaxWidth(),
-                    ) {
+                    Box(modifier = Modifier.weight(1f)) {
                        content()
                    }
-                    // Footer
-                    Box(modifier = Modifier.padding(horizontal = 16.dp)) {
-                        footer()
-                    }
+                }
+
+                // Footer
+                Box(
+                    modifier = Modifier
+                        .padding(horizontal = 16.dp)
+                        .fillMaxWidth()
+                        .padding(footerInsetsPadding)
+                ) {
+                    footer()
                }
            }
        }
@ -123,8 +129,7 @@ internal fun HeaderFooterPagePreview() = ElementPreview {
    HeaderFooterPage(
        content = {
            Box(
-                Modifier
-                    .fillMaxSize(),
+                modifier = Modifier.fillMaxWidth(),
                contentAlignment = Alignment.Center
            ) {
                Text(
@ -159,3 +164,46 @@ internal fun HeaderFooterPagePreview() = ElementPreview {
        }
    )
 }
+
+@PreviewsDayNight
+@Composable
+internal fun HeaderFooterPageScrollablePreview() = ElementPreview {
+    HeaderFooterPage(
+        content = {
+            Box(
+                modifier = Modifier.fillMaxWidth(),
+                contentAlignment = Alignment.Center
+            ) {
+                Text(
+                    text = "Content",
+                    style = ElementTheme.typography.fontHeadingXlBold
+                )
+            }
+        },
+        header = {
+            Box(
+                Modifier
+                    .fillMaxWidth(),
+                contentAlignment = Alignment.Center
+            ) {
+                Text(
+                    text = "Header",
+                    style = ElementTheme.typography.fontHeadingXlBold
+                )
+            }
+        },
+        footer = {
+            Box(
+                Modifier
+                    .fillMaxWidth(),
+                contentAlignment = Alignment.Center
+            ) {
+                Text(
+                    text = "Footer",
+                    style = ElementTheme.typography.fontHeadingXlBold
+                )
+            }
+        },
+        isScrollable = true,
+    )
+}
--- a/libraries/matrix/api/src/main/kotlin/io/element/android/libraries/matrix/api/verification/SessionVerificationData.kt
+++ b/libraries/matrix/api/src/main/kotlin/io/element/android/libraries/matrix/api/verification/SessionVerificationData.kt
@ -25,6 +25,4 @@ sealed interface SessionVerificationData {
 // https://spec.matrix.org/unstable/client-server-api/#sas-method-emoji
 data class VerificationEmoji(
    val number: Int,
-    val emoji: String,
-    val description: String,
 )
--- a/libraries/matrix/impl/src/main/kotlin/io/element/android/libraries/matrix/impl/verification/RustSessionVerificationService.kt
+++ b/libraries/matrix/impl/src/main/kotlin/io/element/android/libraries/matrix/impl/verification/RustSessionVerificationService.kt
@ -274,8 +274,6 @@ private fun RustSessionVerificationData.map(): SessionVerificationData {
                        emoji.use { sessionVerificationEmoji ->
                            VerificationEmoji(
                                number = sessionVerificationData.indices[index].toInt(),
-                                emoji = sessionVerificationEmoji.symbol(),
-                                description = sessionVerificationEmoji.description(),
                            )
                        }
                    },
--- a/tests/konsist/src/test/kotlin/io/element/android/tests/konsist/KonsistPreviewTest.kt
+++ b/tests/konsist/src/test/kotlin/io/element/android/tests/konsist/KonsistPreviewTest.kt
@ -68,6 +68,7 @@ class KonsistPreviewTest {
                "DefaultRoomListTopBarWithIndicatorPreview",
                "FocusedEventPreview",
                "GradientFloatingActionButtonCircleShapePreview",
+                "HeaderFooterPageScrollablePreview",
                "IconsCompoundPreview",
                "IconsOtherPreview",
                "MarkdownTextComposerEditPreview",
--- a/tests/uitests/src/test/snapshots/images/features.securebackup.impl.enter_SecureBackupEnterRecoveryKeyView_Day_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.securebackup.impl.enter_SecureBackupEnterRecoveryKeyView_Day_0_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a59b21a075f8fe8c3752c92c91741c19024555c5a691b4449e82113f43abb33a
-size 31009
+oid sha256:c951ff5fbba4f82d02e3b5c34771d188777d1db316756e7bac96b2dbf028ee52
+size 30931
--- a/tests/uitests/src/test/snapshots/images/features.securebackup.impl.enter_SecureBackupEnterRecoveryKeyView_Day_1_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.securebackup.impl.enter_SecureBackupEnterRecoveryKeyView_Day_1_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cdbbc2b01bd3101a37d9a03d3004c5da061302bffb6daf9d8163440ad039f64f
-size 41817
+oid sha256:94a8c329900ba25352404abfa6e485c876f229a33abb4771c0632ef2dc18637b
+size 41786
--- a/tests/uitests/src/test/snapshots/images/features.securebackup.impl.enter_SecureBackupEnterRecoveryKeyView_Day_2_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.securebackup.impl.enter_SecureBackupEnterRecoveryKeyView_Day_2_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:aa9fb2c97f38fc051ffdfe16d1a396a1ed124505718eea4129c37287146ab764
-size 41994
+oid sha256:a4730e96fc6edc15712a254bd9fec7d3a0b7f1da0e16304a951a8d62cea96398
+size 41962
--- a/tests/uitests/src/test/snapshots/images/features.securebackup.impl.enter_SecureBackupEnterRecoveryKeyView_Day_3_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.securebackup.impl.enter_SecureBackupEnterRecoveryKeyView_Day_3_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9519aa6a3f40251e0731fd493f5b5da576d6f5c728df1e9467810ecc252b8af8
-size 34941
+oid sha256:6f4eacfb8d56d34ae0d85734c6596e86d3ed3b9a664104ac82808c721af9e666
+size 34869
--- a/tests/uitests/src/test/snapshots/images/features.securebackup.impl.enter_SecureBackupEnterRecoveryKeyView_Night_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.securebackup.impl.enter_SecureBackupEnterRecoveryKeyView_Night_0_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:00c8ff5a2adebc3c09c675eb1d98844a4f6f6825c2a4b8b7dda44349d531d063
-size 30171
+oid sha256:03f17ed51483a5033320e4e4855a3161c208b4a85effce4fd5ad4facaf99089c
+size 30099
--- a/tests/uitests/src/test/snapshots/images/features.securebackup.impl.enter_SecureBackupEnterRecoveryKeyView_Night_1_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.securebackup.impl.enter_SecureBackupEnterRecoveryKeyView_Night_1_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1dd9e4cff5ac7956d5d252f05c7705192ebb2c5b7a3a51b8f6f7e93cf3b2b6ea
-size 40678
+oid sha256:2e4d51d755743a55f653ba7534f1794b13752f391bb47866106ec0b48e13f060
+size 40611
--- a/tests/uitests/src/test/snapshots/images/features.securebackup.impl.enter_SecureBackupEnterRecoveryKeyView_Night_2_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.securebackup.impl.enter_SecureBackupEnterRecoveryKeyView_Night_2_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9df69deb26c63a8adb3f974c09694c2211558e504801b7a1050ba06a37a56758
-size 40552
+oid sha256:4899bbf943966cacb39756ec7036579286dff12bcb9aa5b573e09a0929f5294d
+size 40517
--- a/tests/uitests/src/test/snapshots/images/features.securebackup.impl.enter_SecureBackupEnterRecoveryKeyView_Night_3_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.securebackup.impl.enter_SecureBackupEnterRecoveryKeyView_Night_3_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:90508bcb26e46c02968956c1e5dd28e9cd36f29c165ba9855df36602482335c9
-size 32544
+oid sha256:c836b91ac01dc49cd0d46137b28183d5bdb8cd3830728bb3e5e0e9af3d6a3420
+size 32473
--- a/tests/uitests/src/test/snapshots/images/features.securebackup.impl.reset.root_ResetIdentityRootView_Day_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.securebackup.impl.reset.root_ResetIdentityRootView_Day_0_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9416ca672e6c8c7717cc7605163ac3770b54341acbe93a8d78b26a6a73d73fef
-size 69049
+oid sha256:d0a50e8f002b7866579ad058d1d71621e85c00282cca4b5ddb1ecd5d3fb0bfcd
+size 57245
--- a/tests/uitests/src/test/snapshots/images/features.securebackup.impl.reset.root_ResetIdentityRootView_Day_1_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.securebackup.impl.reset.root_ResetIdentityRootView_Day_1_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:edec074dae0baeaeaafe0e64a8dcfcca24a1151faa9667dbedba97a022c277ae
-size 58627
+oid sha256:91759024a0698ea4d4fd05fada6125fae5f86978d26e86d3cb088f57424772cc
+size 49470
--- a/tests/uitests/src/test/snapshots/images/features.securebackup.impl.reset.root_ResetIdentityRootView_Night_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.securebackup.impl.reset.root_ResetIdentityRootView_Night_0_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:05d35e9dead958735e5bb8974560bd688258491074eed2262a9aec22669efaed
-size 68014
+oid sha256:db0eb360bed04c1169be840fa15429a180b9812b0f38b903639de70cc0eb6369
+size 56370
--- a/tests/uitests/src/test/snapshots/images/features.securebackup.impl.reset.root_ResetIdentityRootView_Night_1_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.securebackup.impl.reset.root_ResetIdentityRootView_Night_1_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ebe663ca2ead6eb6a196ceeb99eadc9434eef40aeb2718b4ec6e5945c4ea08e5
-size 56768
+oid sha256:11213aea7ceb0eab52a27ecff95075e3b15508bcfeca04bad88326cbb3989f9f
+size 47362
--- a/tests/uitests/src/test/snapshots/images/features.verifysession.impl.incoming_IncomingVerificationView_Day_5_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.verifysession.impl.incoming_IncomingVerificationView_Day_5_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c28294b67c1d8f448300b35a4ec6ebecd105334375af61b61612b82b5509d417
-size 46402
+oid sha256:89bbdbeef7d2d331e95907a4c1b9d34764c3ea39b8bb63a4f42fb210515de75b
+size 46713
--- a/tests/uitests/src/test/snapshots/images/features.verifysession.impl.incoming_IncomingVerificationView_Day_6_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.verifysession.impl.incoming_IncomingVerificationView_Day_6_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:becc11517522d030f4539c67d7b4728661135a43b05e9c902481b79539155912
-size 46738
+oid sha256:a71a88e65140d150cbe50d116e13119dcb9bd96191832ac482f423f284c55246
+size 47048
--- a/tests/uitests/src/test/snapshots/images/features.verifysession.impl.incoming_IncomingVerificationView_Day_7_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.verifysession.impl.incoming_IncomingVerificationView_Day_7_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:baa21d8011741ac2bca82ac26fa289d016a3ddcc16d408f92812adc662e27869
-size 40088
+oid sha256:531de4a36c2fd9b52e7f29fcde221bd8897178bbfb7cbf5b5640acbee4439d1a
+size 40396
--- a/tests/uitests/src/test/snapshots/images/features.verifysession.impl.incoming_IncomingVerificationView_Day_8_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.verifysession.impl.incoming_IncomingVerificationView_Day_8_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c93ea8f1be90fc1bc43bc94c86eb7b7605872fbd96ac142ba1d633e20978d7a1
-size 40427
+oid sha256:74b41a474f1c26e668b05c9b9da5313739fc23e2679d7f58d17326499fd8a8f3
+size 40733
--- a/tests/uitests/src/test/snapshots/images/features.verifysession.impl.incoming_IncomingVerificationView_Day_9_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.verifysession.impl.incoming_IncomingVerificationView_Day_9_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:acd3515c98dc74f265fbd4c8b82c60a65ae7c764994016ab39bf25062d70140f
-size 31496
+oid sha256:9cc1a6ed77d4bdca2154e6a98294a970071f48bbd986bfb175a5ed0f0360d3a2
+size 31534
--- a/tests/uitests/src/test/snapshots/images/features.verifysession.impl.incoming_IncomingVerificationView_Night_5_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.verifysession.impl.incoming_IncomingVerificationView_Night_5_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:aabe3ce5f01f2be5a7a8ae7907a3d7b76b3b11a3012df4e69149084cf0fd0341
-size 45434
+oid sha256:fc7264ee36a36ac79f9c52ab24f2cdccecf149aee3b36f1f03121b5a98ac7aa8
+size 45556
--- a/tests/uitests/src/test/snapshots/images/features.verifysession.impl.incoming_IncomingVerificationView_Night_6_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.verifysession.impl.incoming_IncomingVerificationView_Night_6_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3470688050248c93b696e95561bdf4be61dd57046d66eec297086c7cc449c97d
-size 45801
+oid sha256:adbb4b7a7297bf7e586d663dc665cedc2f7dba0e841a3f93d09d3be27e3527fd
+size 45919
--- a/tests/uitests/src/test/snapshots/images/features.verifysession.impl.incoming_IncomingVerificationView_Night_7_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.verifysession.impl.incoming_IncomingVerificationView_Night_7_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:827bb9533946b491d3cc28d7026866f699aa6287a23daa0aa8869cad91e20a6d
-size 39537
+oid sha256:d1f6072fb62c959e9685f915c3985c58b9bcc2c630d6bc9a4370f4b2d88a374c
+size 39645
--- a/tests/uitests/src/test/snapshots/images/features.verifysession.impl.incoming_IncomingVerificationView_Night_8_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.verifysession.impl.incoming_IncomingVerificationView_Night_8_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f75852d849d47db25fd64cbd71e6fcb98141a52fa35c329fb6a9ba35dd2b5eee
-size 39902
+oid sha256:82460b85ca35f30990ab76a78e635e6783f8ce39524e3f9fd6ffe5b7caab0a14
+size 40012
--- a/tests/uitests/src/test/snapshots/images/features.verifysession.impl.incoming_IncomingVerificationView_Night_9_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.verifysession.impl.incoming_IncomingVerificationView_Night_9_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4d6df8d6e08ff4c4822fb75063dc9c04aa09334050ee3dc0801bcd10b7b95e7b
-size 30690
+oid sha256:f92d9cf0b0ea928325a8e64ffe32bd0484f9cb4130cd9815a2ea6997e2d5852c
+size 30675
--- a/tests/uitests/src/test/snapshots/images/features.verifysession.impl.outgoing_VerifySelfSessionView_Day_4_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.verifysession.impl.outgoing_VerifySelfSessionView_Day_4_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:68bd384868363a724f8ae69ac8fc978677e8391724fdc9b5e2d11cd9b6cb93d1
-size 46825
+oid sha256:89bbdbeef7d2d331e95907a4c1b9d34764c3ea39b8bb63a4f42fb210515de75b
+size 46713
--- a/tests/uitests/src/test/snapshots/images/features.verifysession.impl.outgoing_VerifySelfSessionView_Day_5_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.verifysession.impl.outgoing_VerifySelfSessionView_Day_5_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8e203ae7deccba3ba29f4f659d867f14aad8e515976fe2379dc20972e5f42ae5
-size 47164
+oid sha256:a71a88e65140d150cbe50d116e13119dcb9bd96191832ac482f423f284c55246
+size 47048
--- a/tests/uitests/src/test/snapshots/images/features.verifysession.impl.outgoing_VerifySelfSessionView_Day_6_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.verifysession.impl.outgoing_VerifySelfSessionView_Day_6_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:baa21d8011741ac2bca82ac26fa289d016a3ddcc16d408f92812adc662e27869
-size 40088
+oid sha256:531de4a36c2fd9b52e7f29fcde221bd8897178bbfb7cbf5b5640acbee4439d1a
+size 40396
--- a/tests/uitests/src/test/snapshots/images/features.verifysession.impl.outgoing_VerifySelfSessionView_Day_8_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.verifysession.impl.outgoing_VerifySelfSessionView_Day_8_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ad5caabfdf57933e5d0c0a9071464bb92729b4aaa6150b2117ce46542dea7fc6
-size 19655
+oid sha256:460e39d03c679b6575f37df00a7616ca37f4936c951018fc4bde4a6687175e45
+size 19185
--- a/tests/uitests/src/test/snapshots/images/features.verifysession.impl.outgoing_VerifySelfSessionView_Day_9_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.verifysession.impl.outgoing_VerifySelfSessionView_Day_9_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:37a07b591a038d78626986edfeb142b0581f028ece4742885d4c09a288497b22
-size 31904
+oid sha256:9cc1a6ed77d4bdca2154e6a98294a970071f48bbd986bfb175a5ed0f0360d3a2
+size 31534
--- a/tests/uitests/src/test/snapshots/images/features.verifysession.impl.outgoing_VerifySelfSessionView_Night_4_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.verifysession.impl.outgoing_VerifySelfSessionView_Night_4_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:08c61fe78ffd95d42b9210613814ef5d975c97be277a025a26ddb903b4d10a8d
-size 45829
+oid sha256:fc7264ee36a36ac79f9c52ab24f2cdccecf149aee3b36f1f03121b5a98ac7aa8
+size 45556
--- a/tests/uitests/src/test/snapshots/images/features.verifysession.impl.outgoing_VerifySelfSessionView_Night_5_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.verifysession.impl.outgoing_VerifySelfSessionView_Night_5_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1954fc7c779cf4e7c15238a79a0f937965dfd074394be7642ea469bf5fd9482c
-size 46196
+oid sha256:adbb4b7a7297bf7e586d663dc665cedc2f7dba0e841a3f93d09d3be27e3527fd
+size 45919
--- a/tests/uitests/src/test/snapshots/images/features.verifysession.impl.outgoing_VerifySelfSessionView_Night_6_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.verifysession.impl.outgoing_VerifySelfSessionView_Night_6_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:827bb9533946b491d3cc28d7026866f699aa6287a23daa0aa8869cad91e20a6d
-size 39537
+oid sha256:d1f6072fb62c959e9685f915c3985c58b9bcc2c630d6bc9a4370f4b2d88a374c
+size 39645
--- a/tests/uitests/src/test/snapshots/images/features.verifysession.impl.outgoing_VerifySelfSessionView_Night_8_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.verifysession.impl.outgoing_VerifySelfSessionView_Night_8_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ee7867cdd6be342a0a2e48672c5b4d7d6273bdfe75d92ec5b5d110c31b930113
-size 19010
+oid sha256:de7e6aa8b417026b6a344955b478d823cc0118b450020d1cb81b6f0cbeaa1c4e
+size 18606
--- a/tests/uitests/src/test/snapshots/images/features.verifysession.impl.outgoing_VerifySelfSessionView_Night_9_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.verifysession.impl.outgoing_VerifySelfSessionView_Night_9_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ddc9b2c7654db142caff95bcdfb5b3fa7d0ad16ec7025989711118fc29a25567
-size 31047
+oid sha256:f92d9cf0b0ea928325a8e64ffe32bd0484f9cb4130cd9815a2ea6997e2d5852c
+size 30675
--- a/tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.pages_HeaderFooterPageScrollable_Day_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.pages_HeaderFooterPageScrollable_Day_0_en.png
@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bedf319e44da65199c96bb1a503d3a4c961e91eb5132553b50aa13cacfc5ceaf
+size 12519
--- a/tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.pages_HeaderFooterPageScrollable_Night_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.pages_HeaderFooterPageScrollable_Night_0_en.png
@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e4ca72f4c73d4d9baca7cf8fbf6a7a0984bb9681d5fc252c7797634aeef05998
+size 12308
--- a/tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.pages_HeaderFooterPage_Day_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.pages_HeaderFooterPage_Day_0_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f21517e6cefc67709164b03b6bf64765702532d9de4a4ca837b3b586a4125b10
-size 12458
+oid sha256:bedf319e44da65199c96bb1a503d3a4c961e91eb5132553b50aa13cacfc5ceaf
+size 12519
--- a/tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.pages_HeaderFooterPage_Night_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.pages_HeaderFooterPage_Night_0_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c32ca21a6b99ea3b3aa05713247b2338af98f6830180dfab6d18902baa23d4ea
-size 12274
+oid sha256:e4ca72f4c73d4d9baca7cf8fbf6a7a0984bb9681d5fc252c7797634aeef05998
+size 12308