Use ElementLogoAtom instead of png. Fixes #894

features/onboarding/impl/src/main/kotlin/io/element/android/features/onboarding/impl/OnBoardingView.kt

@@ -16,7 +16,6 @@
 
 package io.element.android.features.onboarding.impl
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
@@ -24,7 +23,6 @@ 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.width
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.QrCode
@@ -33,12 +31,13 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment.Companion.CenterHorizontally
 import androidx.compose.ui.BiasAlignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import io.element.android.libraries.designsystem.atomic.atoms.ElementLogoAtom
+import io.element.android.libraries.designsystem.atomic.atoms.ElementLogoAtomSize
 import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMolecule
 import io.element.android.libraries.designsystem.atomic.pages.OnBoardingPage
 import io.element.android.libraries.designsystem.preview.DayNightPreviews
@@ -84,10 +83,6 @@ fun OnBoardingView(
 
 @Composable
 private fun OnBoardingContent(modifier: Modifier = Modifier) {
-    // Note: having a night variant of R.drawable.onboarding_icon 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 iconDrawableRes = if (isLight) R.drawable.onboarding_icon_light else R.drawable.onboarding_icon_dark
     Box(
         modifier = modifier.fillMaxSize(),
     ) {
@@ -98,14 +93,9 @@ private fun OnBoardingContent(modifier: Modifier = Modifier) {
                 verticalBias = -0.4f
             )
         ) {
-            // Dark and light icon does not have the same size, add padding to the smaller one
+            ElementLogoAtom(
-            val imagePadding = if (isLight) 28.dp else 0.dp
+                size = ElementLogoAtomSize.Huge,
-            Image(
+                modifier = Modifier.padding(top = ElementLogoAtomSize.Huge.shadowRadius / 2)
-                modifier = Modifier
-                    .size(278.dp)
-                    .padding(imagePadding),
-                painter = painterResource(id = iconDrawableRes),
-                contentDescription = null,
             )
         }
         Box(