Apply Gradient Background to JoinRoomView and RoomAliasResolverView.

features/joinroom/impl/src/main/kotlin/io/element/android/features/joinroom/impl/JoinRoomView.kt

@@ -16,6 +16,7 @@
 
 package io.element.android.features.joinroom.impl
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
@@ -23,8 +24,10 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+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.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.PreviewParameter
@@ -37,6 +40,7 @@ import io.element.android.libraries.designsystem.atomic.molecules.ButtonRowMolec
 import io.element.android.libraries.designsystem.atomic.molecules.RoomPreviewMembersCountMolecule
 import io.element.android.libraries.designsystem.atomic.organisms.RoomPreviewOrganism
 import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
+import io.element.android.libraries.designsystem.background.LightGradientBackground
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.components.button.BackButton
@@ -58,8 +62,10 @@ fun JoinRoomView(
     onBackPressed: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
+    val gradientBackground = remember { LightGradientBackground() }
     HeaderFooterPage(
-        modifier = modifier,
+        modifier = modifier.background(gradientBackground),
+        containerColor = Color.Transparent,
         paddingValues = PaddingValues(16.dp),
         topBar = {
             JoinRoomTopBar(onBackClicked = onBackPressed)

features/roomaliasresolver/impl/src/main/kotlin/io/element/android/features/roomaliasresolver/impl/RoomAliasResolverView.kt

@@ -16,6 +16,7 @@
 
 package io.element.android.features.roomaliasresolver.impl
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
@@ -25,8 +26,10 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberUpdatedState
 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
@@ -36,6 +39,7 @@ import io.element.android.libraries.designsystem.atomic.atoms.PlaceholderAtom
 import io.element.android.libraries.designsystem.atomic.atoms.RoomPreviewTitleAtom
 import io.element.android.libraries.designsystem.atomic.organisms.RoomPreviewOrganism
 import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
+import io.element.android.libraries.designsystem.background.LightGradientBackground
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.preview.ElementPreview
@@ -61,9 +65,10 @@ fun RoomAliasResolverView(
             latestOnAliasResolved(state.resolveState.data)
         }
     }
-
+    val gradientBackground = remember { LightGradientBackground() }
     HeaderFooterPage(
-        modifier = modifier,
+        modifier = modifier.background(gradientBackground),
+        containerColor = Color.Transparent,
         paddingValues = PaddingValues(16.dp),
         topBar = {
             RoomAliasResolverTopBar(onBackClicked = onBackPressed)

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

@@ -23,9 +23,11 @@ import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
 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.unit.dp
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.libraries.designsystem.preview.ElementPreview
@@ -46,6 +48,7 @@ import io.element.android.libraries.designsystem.theme.components.Text
 fun HeaderFooterPage(
     modifier: Modifier = Modifier,
     paddingValues: PaddingValues = PaddingValues(20.dp),
+    containerColor: Color = MaterialTheme.colorScheme.background,
     background: @Composable () -> Unit = {},
     topBar: @Composable () -> Unit = {},
     header: @Composable () -> Unit = {},
@@ -55,6 +58,7 @@ fun HeaderFooterPage(
     Scaffold(
         modifier = modifier,
         topBar = topBar,
+        containerColor = containerColor,
     ) { padding ->
         Box {
             background()