Extract Composable to new SunsetPage.

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

@@ -0,0 +1,134 @@
+/*
+ * Copyright (c) 2023 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.atomic.pages
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+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.size
+import androidx.compose.foundation.layout.systemBarsPadding
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.BiasAbsoluteAlignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+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.libraries.designsystem.R
+import io.element.android.libraries.designsystem.text.withColoredPeriod
+import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
+import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.theme.ElementTheme
+
+@Composable
+fun SunsetPage(
+    isLoading: Boolean,
+    title: String,
+    subtitle: String,
+    modifier: Modifier = Modifier,
+    overallContent: @Composable () -> Unit,
+) {
+    ElementTheme(
+        darkTheme = true
+    ) {
+        Box(
+            modifier = modifier.fillMaxSize()
+        ) {
+            SunsetBackground()
+            Box(
+                modifier = modifier
+                    .fillMaxSize()
+                    .systemBarsPadding()
+                    .padding(horizontal = 16.dp, vertical = 16.dp)
+            ) {
+                Box(
+                    modifier = Modifier.fillMaxSize(),
+                    contentAlignment = BiasAbsoluteAlignment(
+                        horizontalBias = 0f,
+                        verticalBias = -0.05f
+                    )
+                ) {
+                    Column(
+                        horizontalAlignment = Alignment.CenterHorizontally
+                    ) {
+                        if (isLoading) {
+                            CircularProgressIndicator(
+                                modifier = Modifier.size(24.dp),
+                                strokeWidth = 2.dp,
+                                color = ElementTheme.colors.iconPrimary
+                            )
+                        } else {
+                            Spacer(modifier = Modifier.height(24.dp))
+                        }
+                        Spacer(modifier = Modifier.height(18.dp))
+                        Text(
+                            text = withColoredPeriod(title),
+                            style = ElementTheme.typography.fontHeadingXlBold,
+                            textAlign = TextAlign.Center,
+                            color = ElementTheme.colors.textPrimary,
+                        )
+                        Spacer(modifier = Modifier.height(8.dp))
+                        Text(
+                            modifier = Modifier.widthIn(max = 360.dp),
+                            text = subtitle,
+                            style = ElementTheme.typography.fontBodyLgRegular,
+                            textAlign = TextAlign.Center,
+                            color = ElementTheme.colors.textPrimary,
+                        )
+                    }
+                }
+                overallContent()
+            }
+        }
+    }
+}
+
+@Composable
+private fun SunsetBackground(
+    modifier: Modifier = Modifier,
+) {
+    Column(modifier = modifier.fillMaxSize()) {
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .weight(0.3f)
+                .background(Color.White)
+        )
+        Image(
+            modifier = Modifier
+                .fillMaxWidth(),
+            painter = painterResource(id = R.drawable.light_dark),
+            contentScale = ContentScale.Crop,
+            contentDescription = null,
+        )
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .weight(0.7f)
+                .background(Color(0xFF121418))
+        )
+    }
+}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/text/AnnotatedStrings.kt

@@ -82,3 +82,22 @@ fun buildAnnotatedStringWithStyledPart(
         end = startIndex + coloredPart.length,
     )
 }
+
+/**
+ * Convert a string to an [AnnotatedString] with colored end period if present.
+ */
+fun withColoredPeriod(
+    text: String,
+) = buildAnnotatedString {
+    append(text)
+    if (text.endsWith(".")) {
+        addStyle(
+            style = SpanStyle(
+                // Light.colorGreen700
+                color = Color(0xff0bc491),
+            ),
+            start = text.length - 1,
+            end = text.length,
+        )
+    }
+}