Merge pull request #898 from vector-im/feature/bma/fixOnBoardingScreen

Fix on boarding screen

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/ElementLogoAtom.kt

@@ -53,85 +53,72 @@ import io.element.android.libraries.theme.ElementTheme
 fun ElementLogoAtom(
     size: ElementLogoAtomSize,
     modifier: Modifier = Modifier,
+    darkTheme: Boolean = isSystemInDarkTheme(),
 ) {
-    val outerSize = when (size) {
-        ElementLogoAtomSize.Large -> 158.dp
-        ElementLogoAtomSize.Medium -> 120.dp
-    }
-    val logoSize = when (size) {
-        ElementLogoAtomSize.Large -> 110.dp
-        ElementLogoAtomSize.Medium -> 83.5.dp
-    }
-    val cornerRadius = when (size) {
-        ElementLogoAtomSize.Large -> 44.dp
-        ElementLogoAtomSize.Medium -> 33.dp
-    }
-    val borderWidth = when (size) {
-        ElementLogoAtomSize.Large -> 1.dp
-        ElementLogoAtomSize.Medium -> 0.38.dp
-    }
-    val blur = if (isSystemInDarkTheme()) {
-        160.dp
-    } else {
-        24.dp
-    }
+    val blur = if (darkTheme) 160.dp else 24.dp
     //box-shadow: 0px 6.075949668884277px 24.30379867553711px 0px #1B1D2280;
-    val shadowColor = if (isSystemInDarkTheme()) {
-        Color.Black.copy(alpha = 0.4f)
-    } else {
-        Color(0x401B1D22)
-    }
-    val backgroundColor = if (isSystemInDarkTheme()) Color.White.copy(alpha = 0.2f) else Color.White.copy(alpha = 0.4f)
-    val borderColor = if (isSystemInDarkTheme()) Color.White.copy(alpha = 0.8f) else Color.White.copy(alpha = 0.4f)
+    val shadowColor = if (darkTheme) size.shadowColorDark else size.shadowColorLight
+    val backgroundColor = if (darkTheme) Color.White.copy(alpha = 0.2f) else Color.White.copy(alpha = 0.4f)
+    val borderColor = if (darkTheme) Color.White.copy(alpha = 0.8f) else Color.White.copy(alpha = 0.4f)
     Box(
         modifier = modifier
-            .size(outerSize)
-            .border(borderWidth, borderColor, RoundedCornerShape(cornerRadius)),
+            .size(size.outerSize)
+            .border(size.borderWidth, borderColor, RoundedCornerShape(size.cornerRadius)),
         contentAlignment = Alignment.Center,
     ) {
         Box(
             Modifier
-                .size(outerSize)
+                .size(size.outerSize)
                 .shapeShadow(
                     color = shadowColor,
-                    cornerRadius = cornerRadius,
-                    blurRadius = 32.dp,
+                    cornerRadius = size.cornerRadius,
+                    blurRadius = size.shadowRadius,
                     offsetY = 8.dp,
                 )
         )
         Box(
             Modifier
-                .clip(RoundedCornerShape(cornerRadius))
-                .size(outerSize)
+                .clip(RoundedCornerShape(size.cornerRadius))
+                .size(size.outerSize)
                 .background(backgroundColor)
                 .blur(blur)
         )
         Image(
-            modifier = Modifier.size(logoSize),
+            modifier = Modifier.size(size.logoSize),
             painter = painterResource(id = R.drawable.element_logo),
             contentDescription = null
         )
     }
 }
 
-enum class ElementLogoAtomSize {
-    Medium,
-    Large
-}
+sealed class ElementLogoAtomSize(
+    val outerSize: Dp,
+    val logoSize: Dp,
+    val cornerRadius: Dp,
+    val borderWidth: Dp,
+    val shadowColorDark: Color,
+    val shadowColorLight: Color,
+    val shadowRadius: Dp,
+) {
+    object Medium : ElementLogoAtomSize(
+        outerSize = 120.dp,
+        logoSize = 83.5.dp,
+        cornerRadius = 33.dp,
+        borderWidth = 0.38.dp,
+        shadowColorDark = Color.Black.copy(alpha = 0.4f),
+        shadowColorLight = Color(0x401B1D22),
+        shadowRadius = 32.dp,
+    )
 
-@Composable
-@DayNightPreviews
-internal fun ElementLogoAtomPreview() {
-    ElementPreview {
-        Box(
-            Modifier
-                .size(180.dp)
-                .background(ElementTheme.colors.bgSubtlePrimary),
-            contentAlignment = Alignment.Center
-        ) {
-            ElementLogoAtom(ElementLogoAtomSize.Large)
-        }
-    }
+    object Large : ElementLogoAtomSize(
+        outerSize = 158.dp,
+        logoSize = 110.dp,
+        cornerRadius = 44.dp,
+        borderWidth = 0.5.dp,
+        shadowColorDark = Color.Black,
+        shadowColorLight = Color(0x801B1D22),
+        shadowRadius = 60.dp,
+    )
 }
 
 fun Modifier.shapeShadow(
@@ -171,3 +158,29 @@ fun Modifier.shapeShadow(
         }
     }
 )
+
+@Composable
+@DayNightPreviews
+internal fun ElementLogoAtomMediumPreview() {
+    ContentToPreview(ElementLogoAtomSize.Medium)
+}
+
+@Composable
+@DayNightPreviews
+internal fun ElementLogoAtomLargePreview() {
+    ContentToPreview(ElementLogoAtomSize.Large)
+}
+
+@Composable
+private fun ContentToPreview(elementLogoAtomSize: ElementLogoAtomSize) {
+    ElementPreview {
+        Box(
+            Modifier
+                .size(elementLogoAtomSize.outerSize + elementLogoAtomSize.shadowRadius * 2)
+                .background(ElementTheme.colors.bgSubtlePrimary),
+            contentAlignment = Alignment.Center
+        ) {
+            ElementLogoAtom(elementLogoAtomSize)
+        }
+    }
+}

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

@@ -28,11 +28,10 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.R
-import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.preview.DayNightPreviews
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.theme.ElementTheme
 
@@ -52,10 +51,6 @@ fun OnBoardingPage(
     footer: @Composable () -> Unit = {},
     content: @Composable () -> Unit = {},
 ) {
-    // Note: having a night variant of R.drawable.onboarding_bg in the folder `drawable-night` is working
-    // at runtime, but is not in Android Studio Preview. So I prefer to handle this manually.
-    val isLight = ElementTheme.colors.isLight
-    val bgDrawableRes = if (isLight) R.drawable.onboarding_bg_light else R.drawable.onboarding_bg_dark
     Box(
         modifier = modifier
             .fillMaxSize()
@@ -64,7 +59,7 @@ fun OnBoardingPage(
         Image(
             modifier = Modifier
                 .fillMaxSize(),
-            painter = painterResource(id = bgDrawableRes),
+            painter = painterResource(id = R.drawable.onboarding_bg),
             contentScale = ContentScale.Crop,
             contentDescription = null,
         )
@@ -92,18 +87,9 @@ fun OnBoardingPage(
     }
 }
 
-@Preview
+@DayNightPreviews
 @Composable
-internal fun OnBoardingPageLightPreview() =
-    ElementPreviewLight { ContentToPreview() }
-
-@Preview
-@Composable
-internal fun OnBoardingPageDarkPreview() =
-    ElementPreviewDark { ContentToPreview() }
-
-@Composable
-private fun ContentToPreview() {
+internal fun OnBoardingPagePreview() = ElementPreview {
     OnBoardingPage(
         content = {
             Box(