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,38 +64,41 @@ fun JoinRoomView(
     onKnockSuccess: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    val gradientBackground = remember { LightGradientBackground() }
-    HeaderFooterPage(
-        modifier = modifier.background(gradientBackground),
-        containerColor = Color.Transparent,
-        paddingValues = PaddingValues(16.dp),
-        topBar = {
-            JoinRoomTopBar(onBackClicked = onBackPressed)
-        },
-        content = {
-            JoinRoomContent(contentState = state.contentState)
-        },
-        footer = {
-            JoinRoomFooter(
-                state = state,
-                onAcceptInvite = {
-                    state.eventSink(JoinRoomEvents.AcceptInvite)
-                },
-                onDeclineInvite = {
-                    state.eventSink(JoinRoomEvents.DeclineInvite)
-                },
-                onJoinRoom = {
-                    state.eventSink(JoinRoomEvents.JoinRoom)
-                },
-                onKnockRoom = {
-                    state.eventSink(JoinRoomEvents.KnockRoom)
-                },
-                onRetry = {
-                    state.eventSink(JoinRoomEvents.RetryFetchingContent)
-                }
-            )
-        }
-    )
+    Box(
+        modifier = modifier.fillMaxSize(),
+    ) {
+        LightGradientBackground()
+        HeaderFooterPage(
+            containerColor = Color.Transparent,
+            paddingValues = PaddingValues(16.dp),
+            topBar = {
+                JoinRoomTopBar(onBackClicked = onBackPressed)
+            },
+            content = {
+                JoinRoomContent(contentState = state.contentState)
+            },
+            footer = {
+                JoinRoomFooter(
+                    state = state,
+                    onAcceptInvite = {
+                        state.eventSink(JoinRoomEvents.AcceptInvite)
+                    },
+                    onDeclineInvite = {
+                        state.eventSink(JoinRoomEvents.DeclineInvite)
+                    },
+                    onJoinRoom = {
+                        state.eventSink(JoinRoomEvents.JoinRoom)
+                    },
+                    onKnockRoom = {
+                        state.eventSink(JoinRoomEvents.KnockRoom)
+                    },
+                    onRetry = {
+                        state.eventSink(JoinRoomEvents.RetryFetchingContent)
+                    }
+                )
+            }
+        )
+    }
 
     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,23 +65,26 @@ fun RoomAliasResolverView(
             latestOnAliasResolved(state.resolveState.data)
         }
     }
-    val gradientBackground = remember { LightGradientBackground() }
-    HeaderFooterPage(
-        modifier = modifier.background(gradientBackground),
-        containerColor = Color.Transparent,
-        paddingValues = PaddingValues(16.dp),
-        topBar = {
-            RoomAliasResolverTopBar(onBackClicked = onBackPressed)
-        },
-        content = {
-            RoomAliasResolverContent(state = state)
-        },
-        footer = {
-            RoomAliasResolverFooter(
-                state = state,
-            )
-        }
-    )
+    Box(
+        modifier = modifier.fillMaxSize(),
+    ) {
+        LightGradientBackground()
+        HeaderFooterPage(
+            containerColor = Color.Transparent,
+            paddingValues = PaddingValues(16.dp),
+            topBar = {
+                RoomAliasResolverTopBar(onBackClicked = onBackPressed)
+            },
+            content = {
+                RoomAliasResolverContent(state = state)
+            },
+            footer = {
+                RoomAliasResolverFooter(
+                    state = state,
+                )
+            }
+        )
+    }
 }
 
 @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.layout.Box
+import androidx.compose.foundation.Canvas
 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),
-    private val secondColor: Color = Color(0x001273EB),
-    private val ratio: Float = 642 / 775f,
-) : ShaderBrush() {
-    override fun createShader(size: Size): Shader {
+/**
+ * Light gradient background for Join room screens.
+ */
+@Composable
+fun LightGradientBackground(
+    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(
-            colors = listOf(firstColor, secondColor),
-            center = size.center.copy(x = size.width * ratio, y = size.height * ratio),
-            radius = biggerDimension / 2f,
-            colorStops = listOf(0f, 0.95f)
+        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)
-    )
+    LightGradientBackground()
 }