Improve UI for notification permission screen in onboarding (#2660)

* Improve UI for notification permission screen in onboarding

* Update screenshots

---------

Co-authored-by: ElementBot <benoitm+elementbot@element.io>

app/src/main/kotlin/io/element/android/x/MainActivity.kt

@@ -19,6 +19,7 @@ package io.element.android.x
 import android.content.Intent
 import android.os.Bundle
 import androidx.activity.compose.setContent
+import androidx.activity.enableEdgeToEdge
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
@@ -31,7 +32,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen
-import androidx.core.view.WindowCompat
 import com.bumble.appyx.core.integration.NodeHost
 import com.bumble.appyx.core.integrationpoint.NodeActivity
 import com.bumble.appyx.core.plugin.NodeReadyObserver
@@ -60,7 +60,7 @@ class MainActivity : NodeActivity() {
         super.onCreate(savedInstanceState)
         appBindings = bindings()
         appBindings.lockScreenService().handleSecureFlag(this)
-        WindowCompat.setDecorFitsSystemWindows(window, false)
+        enableEdgeToEdge()
         setContent {
             MainContent(appBindings)
         }

changelog.d/2581.misc

@@ -0,0 +1 @@
+Improve UI for notification permission screen in onboarding.

features/ftue/impl/src/main/kotlin/io/element/android/features/ftue/impl/notifications/NotificationsOptInView.kt

@@ -26,7 +26,7 @@ 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.systemBarsPadding
+import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
@@ -40,8 +40,10 @@ import io.element.android.compound.theme.ElementTheme
 import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.features.ftue.impl.R
 import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMolecule
-import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
 import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
+import io.element.android.libraries.designsystem.components.BigIcon
+import io.element.android.libraries.designsystem.components.OnboardingBackground
+import io.element.android.libraries.designsystem.components.PageTitle
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
@@ -62,8 +64,9 @@ fun NotificationsOptInView(
 
     HeaderFooterPage(
         modifier = modifier
-            .systemBarsPadding()
+            .statusBarsPadding()
             .fillMaxSize(),
+        background = { OnboardingBackground() },
         header = { NotificationsOptInHeader(modifier = Modifier.padding(top = 60.dp, bottom = 12.dp)) },
         footer = { NotificationsOptInFooter(state) },
     ) {
@@ -75,11 +78,11 @@ fun NotificationsOptInView(
 private fun NotificationsOptInHeader(
     modifier: Modifier = Modifier,
 ) {
-    IconTitleSubtitleMolecule(
+    PageTitle(
         modifier = modifier,
         title = stringResource(R.string.screen_notification_optin_title),
-        subTitle = stringResource(R.string.screen_notification_optin_subtitle),
-        iconImageVector = CompoundIcons.NotificationsSolid(),
+        subtitle = stringResource(R.string.screen_notification_optin_subtitle),
+        iconStyle = BigIcon.Style.Default(CompoundIcons.NotificationsSolid()),
     )
 }
 

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/pages/HeaderFooterPage.kt

@@ -34,6 +34,7 @@ import io.element.android.libraries.designsystem.theme.components.Text
 
 /**
  * @param modifier Classical modifier.
+ * @param background optional background component.
  * @param topBar optional topBar.
  * @param header optional header.
  * @param footer optional footer.
@@ -42,6 +43,7 @@ import io.element.android.libraries.designsystem.theme.components.Text
 @Composable
 fun HeaderFooterPage(
     modifier: Modifier = Modifier,
+    background: @Composable () -> Unit = {},
     topBar: @Composable () -> Unit = {},
     header: @Composable () -> Unit = {},
     footer: @Composable () -> Unit = {},
@@ -51,25 +53,28 @@ fun HeaderFooterPage(
         modifier = modifier,
         topBar = topBar,
     ) { padding ->
-        Column(
-            modifier = Modifier
-                .padding(padding)
-                .consumeWindowInsets(padding)
-                .padding(all = 20.dp),
-        ) {
-            // Header
-            header()
-            // Content
+        Box {
+            background()
             Column(
                 modifier = Modifier
-                    .weight(1f)
-                    .fillMaxWidth(),
+                    .padding(all = 20.dp)
+                    .padding(padding)
+                    .consumeWindowInsets(padding)
             ) {
-                content()
-            }
-            // Footer
-            Box(modifier = Modifier.padding(horizontal = 16.dp)) {
-                footer()
+                // Header
+                header()
+                // Content
+                Column(
+                    modifier = Modifier
+                        .weight(1f)
+                        .fillMaxWidth(),
+                ) {
+                    content()
+                }
+                // Footer
+                Box(modifier = Modifier.padding(horizontal = 16.dp)) {
+                    footer()
+                }
             }
         }
     }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/OnboardingBackground.kt

@@ -0,0 +1,86 @@
+/*
+ * Copyright (c) 2024 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.designsystem.components
+
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.BlendMode
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.LinearGradientShader
+import androidx.compose.ui.graphics.ShaderBrush
+import androidx.compose.ui.unit.dp
+import io.element.android.compound.theme.ElementTheme
+import io.element.android.libraries.designsystem.preview.ElementPreview
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+
+/**
+ * Gradient background for FTUE (onboarding) screens.
+ */
+@Suppress("ModifierMissing")
+@Composable
+fun OnboardingBackground() {
+    Box(modifier = Modifier.fillMaxSize()) {
+        val isLightTheme = ElementTheme.isLightTheme
+        Canvas(
+            modifier = Modifier
+            .fillMaxWidth()
+            .height(220.dp)
+            .align(Alignment.BottomCenter)
+        ) {
+            val gradientBrush = ShaderBrush(
+                LinearGradientShader(
+                    from = Offset(0f, size.height / 2f),
+                    to = Offset(size.width, size.height / 2f),
+                    colors = listOf(
+                        Color(0xFF0DBDA8),
+                        if (isLightTheme) Color(0xC90D5CBD) else Color(0xFF0D5CBD),
+                    )
+                )
+            )
+            val eraseBrush = ShaderBrush(
+                LinearGradientShader(
+                    from = Offset(size.width / 2f, 0f),
+                    to = Offset(size.width / 2f, size.height * 2f),
+                    colors = listOf(
+                        Color(0xFF000000),
+                        Color(0x00000000),
+                    )
+                )
+            )
+            drawWithLayer {
+                drawRect(brush = gradientBrush, size = size)
+                drawRect(brush = gradientBrush, size = size, blendMode = BlendMode.Overlay)
+                drawRect(brush = eraseBrush, size = size, blendMode = BlendMode.DstOut)
+            }
+        }
+    }
+}
+
+@PreviewsDayNight
+@Composable
+internal fun OnboardingBackgroundPreview() {
+    ElementPreview {
+        OnboardingBackground()
+    }
+}