Merge pull request #1367 from vector-im/feature/bma/onboarding

Iterate on onboarding and welcome screens.

Author: bmarty

changelog.d/1363.misc

@@ -0,0 +1 @@
+New app icon, with monochrome support.

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

@@ -22,6 +22,7 @@ import androidx.compose.foundation.border
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -50,8 +51,9 @@ fun ElementLogoAtom(
     val blur = if (darkTheme) 160.dp else 24.dp
     //box-shadow: 0px 6.075949668884277px 24.30379867553711px 0px #1B1D2280;
     val shadowColor = if (darkTheme) size.shadowColorDark else size.shadowColorLight
+    val logoShadowColor = if (darkTheme) size.logoShadowColorDark else size.logoShadowColorLight
     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)
+    val borderColor = if (darkTheme) Color.White.copy(alpha = 0.89f) else Color.White
     Box(
         modifier = modifier
             .size(size.outerSize)
@@ -89,7 +91,21 @@ fun ElementLogoAtom(
                 .blurCompat(blur)
         )
         Image(
-            modifier = Modifier.size(size.logoSize),
+            modifier = Modifier
+                .size(size.logoSize)
+                // Do the same double shadow than on Figma...
+                .shadow(
+                    elevation = 25.dp,
+                    clip = false,
+                    shape = CircleShape,
+                    ambientColor = logoShadowColor,
+                )
+                .shadow(
+                    elevation = 25.dp,
+                    clip = false,
+                    shape = CircleShape,
+                    ambientColor = Color(0x80000000),
+                ),
             painter = painterResource(id = R.drawable.element_logo),
             contentDescription = null
         )
@@ -101,6 +117,8 @@ sealed class ElementLogoAtomSize(
     val logoSize: Dp,
     val cornerRadius: Dp,
     val borderWidth: Dp,
+    val logoShadowColorDark: Color,
+    val logoShadowColorLight: Color,
     val shadowColorDark: Color,
     val shadowColorLight: Color,
     val shadowRadius: Dp,
@@ -110,6 +128,8 @@ sealed class ElementLogoAtomSize(
         logoSize = 83.5.dp,
         cornerRadius = 33.dp,
         borderWidth = 0.38.dp,
+        logoShadowColorDark = Color(0x4D000000),
+        logoShadowColorLight = Color(0x66000000),
         shadowColorDark = Color.Black.copy(alpha = 0.4f),
         shadowColorLight = Color(0x401B1D22),
         shadowRadius = 32.dp,
@@ -120,6 +140,8 @@ sealed class ElementLogoAtomSize(
         logoSize = 110.dp,
         cornerRadius = 44.dp,
         borderWidth = 0.5.dp,
+        logoShadowColorDark = Color(0x4D000000),
+        logoShadowColorLight = Color(0x66000000),
         shadowColorDark = Color.Black,
         shadowColorLight = Color(0x801B1D22),
         shadowRadius = 60.dp,