Fix missing background issue.

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

@@ -16,15 +16,15 @@
 
 package io.element.android.features.joinroom.impl
 
-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.PaddingValues
+import androidx.compose.foundation.layout.fillMaxSize
 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
@@ -64,9 +64,11 @@ fun JoinRoomView(
     onKnockSuccess: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    val gradientBackground = remember { LightGradientBackground() }
+    Box(
+        modifier = modifier.fillMaxSize(),
+    ) {
+        LightGradientBackground()
         HeaderFooterPage(
-        modifier = modifier.background(gradientBackground),
             containerColor = Color.Transparent,
             paddingValues = PaddingValues(16.dp),
             topBar = {
@@ -96,6 +98,7 @@ fun JoinRoomView(
                 )
             }
         )
+    }
 
     AsyncActionView(
         async = state.knockAction,

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

@@ -16,17 +16,17 @@
 
 package io.element.android.features.roomaliasresolver.impl
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
 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.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
@@ -65,9 +65,11 @@ fun RoomAliasResolverView(
             latestOnAliasResolved(state.resolveState.data)
         }
     }
-    val gradientBackground = remember { LightGradientBackground() }
+    Box(
+        modifier = modifier.fillMaxSize(),
+    ) {
+        LightGradientBackground()
         HeaderFooterPage(
-        modifier = modifier.background(gradientBackground),
             containerColor = Color.Transparent,
             paddingValues = PaddingValues(16.dp),
             topBar = {
@@ -82,6 +84,7 @@ fun RoomAliasResolverView(
                 )
             }
         )
+    }
 }
 
 @Composable

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/background/LightGradientBackground.kt

@@ -16,46 +16,48 @@
 
 package io.element.android.libraries.designsystem.background
 
-import androidx.compose.foundation.background
+import androidx.compose.foundation.Canvas
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.geometry.center
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.RadialGradientShader
-import androidx.compose.ui.graphics.Shader
 import androidx.compose.ui.graphics.ShaderBrush
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 
-class LightGradientBackground(
+/**
-    private val firstColor: Color = Color(0x1E0DBD8B),
+ * Light gradient background for Join room screens.
-    private val secondColor: Color = Color(0x001273EB),
+ */
-    private val ratio: Float = 642 / 775f,
+@Composable
-) : ShaderBrush() {
+fun LightGradientBackground(
-    override fun createShader(size: Size): Shader {
+    modifier: Modifier = Modifier,
+    backgroundColor: Color = MaterialTheme.colorScheme.background,
+    firstColor: Color = Color(0x1E0DBD8B),
+    secondColor: Color = Color(0x001273EB),
+    ratio: Float = 642 / 775f,
+) {
+    Canvas(
+        modifier = modifier.fillMaxSize()
+    ) {
         val biggerDimension = size.width * 1.98f
-        return RadialGradientShader(
+        val gradientShaderBrush = ShaderBrush(
+            RadialGradientShader(
                 colors = listOf(firstColor, secondColor),
                 center = size.center.copy(x = size.width * ratio, y = size.height * ratio),
                 radius = biggerDimension / 2f,
                 colorStops = listOf(0f, 0.95f)
             )
+        )
+        drawRect(backgroundColor, size = size)
+        drawRect(brush = gradientShaderBrush, size = size)
     }
 }
 
 @PreviewsDayNight
 @Composable
 internal fun LightGradientBackgroundPreview() = ElementPreview {
-    val gradientBackground = remember {
     LightGradientBackground()
-    }
-    Box(
-        modifier = Modifier
-            .fillMaxSize()
-            .background(gradientBackground)
-    )
 }