Move migration screen to within the room list (#2361)

* Rename migration bg drawable and add night variant
* Move `migration` package from `ftue` to `messages:impl` module
* Update `SunsetPage` with light and dark modes
* Fix bloom colors when nested theme is used
* Integrate the migration screen in the room list
* Fix `WaitListView` cancel button color
* Clear migration store when removing the app's cache

---------

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

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

@@ -37,8 +37,10 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
+import io.element.android.compound.annotations.CoreColorToken
 import io.element.android.compound.theme.ElementTheme
-import io.element.android.compound.theme.ForcedDarkElementTheme
+import io.element.android.compound.tokens.generated.internal.DarkColorTokens
+import io.element.android.compound.tokens.generated.internal.LightColorTokens
 import io.element.android.libraries.designsystem.R
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@@ -54,7 +56,11 @@ fun SunsetPage(
     modifier: Modifier = Modifier,
     overallContent: @Composable () -> Unit,
 ) {
-    ForcedDarkElementTheme(lightStatusBar = true) {
+    ElementTheme(
+        // Always use the opposite value of the current theme
+        darkTheme = ElementTheme.isLightTheme,
+        applySystemBarsUpdate = false,
+    ) {
         Box(
             modifier = modifier.fillMaxSize()
         ) {
@@ -107,21 +113,34 @@ fun SunsetPage(
     }
 }
 
+@OptIn(CoreColorToken::class)
 @Composable
 private fun SunsetBackground(
     modifier: Modifier = Modifier,
 ) {
     Column(modifier = modifier.fillMaxSize()) {
+        // The top background colors are the opposite of the current theme ones
+        val topBackgroundColor = if (ElementTheme.isLightTheme) {
+            DarkColorTokens.colorThemeBg
+        } else {
+            LightColorTokens.colorThemeBg
+        }
+        // The bottom background colors follow the current theme
+        val bottomBackgroundColor = if (ElementTheme.isLightTheme) {
+            LightColorTokens.colorThemeBg
+        } else {
+            // The dark background color doesn't 100% match the image, so we use a custom color
+            Color(0xFF121418)
+        }
         Box(
             modifier = Modifier
                 .fillMaxWidth()
                 .weight(0.3f)
-                .background(Color.White)
+                .background(topBackgroundColor)
         )
         Image(
-            modifier = Modifier
-                .fillMaxWidth(),
-            painter = painterResource(id = R.drawable.light_dark),
+            modifier = Modifier.fillMaxWidth(),
+            painter = painterResource(id = R.drawable.bg_migration),
             contentScale = ContentScale.Crop,
             contentDescription = null,
         )
@@ -129,7 +148,7 @@ private fun SunsetBackground(
             modifier = Modifier
                 .fillMaxWidth()
                 .weight(0.7f)
-                .background(Color(0xFF121418))
+                .background(bottomBackgroundColor)
         )
     }
 }

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

@@ -23,7 +23,6 @@ import android.os.Build
 import android.text.TextPaint
 import androidx.annotation.FloatRange
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.consumeWindowInsets
@@ -136,13 +135,13 @@ object BloomDefaults {
     @Composable
     fun defaultLayers() = persistentListOf(
         // Bottom layer
-        if (isSystemInDarkTheme()) {
-            BloomLayer(0.5f, BlendMode.Exclusion)
-        } else {
+        if (ElementTheme.isLightTheme) {
             BloomLayer(0.2f, BlendMode.Hardlight)
+        } else {
+            BloomLayer(0.5f, BlendMode.Exclusion)
         },
         // Top layer
-        BloomLayer(if (isSystemInDarkTheme()) 0.2f else 0.8f, BlendMode.Color),
+        BloomLayer(if (ElementTheme.isLightTheme) 0.8f else 0.2f, BlendMode.Color),
     )
 }