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

Iterate on onboarding and welcome screens.
2023-09-18 20:58:38 +02:00 · 2023-09-18 20:58:38 +02:00 · 9134b26e9b
commit 9134b26e9b
parent 50fbc5e869 21ecc0be6d
29 changed files with 69 additions and 72 deletions
--- a/changelog.d/1363.misc
+++ b/changelog.d/1363.misc
@ -0,0 +1 @@
+New app icon, with monochrome support.
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/ElementLogoAtom.kt
+++ b/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,
--- a/libraries/designsystem/src/main/res/drawable-night-xxhdpi/element_logo.png
+++ b/libraries/designsystem/src/main/res/drawable-night-xxhdpi/element_logo.png
--- a/libraries/designsystem/src/main/res/drawable-night/onboarding_bg.png
+++ b/libraries/designsystem/src/main/res/drawable-night/onboarding_bg.png
--- a/libraries/designsystem/src/main/res/drawable-xxhdpi/element_logo.png
+++ b/libraries/designsystem/src/main/res/drawable-xxhdpi/element_logo.png
--- a/libraries/designsystem/src/main/res/drawable/element_logo.xml
+++ b/libraries/designsystem/src/main/res/drawable/element_logo.xml
@ -1,26 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="110dp"
-    android:height="110dp"
-    android:viewportWidth="110"
-    android:viewportHeight="110">
-  <path
-      android:pathData="M55,110C85.38,110 110,85.38 110,55C110,24.62 85.38,0 55,0C24.62,0 0,24.62 0,55C0,85.38 24.62,110 55,110Z"
-      android:fillColor="#0DBD8B"
-      android:fillType="evenOdd"/>
-  <path
-      android:pathData="M44.94,25.63C44.94,23.41 46.75,21.61 48.97,21.61C64.05,21.61 76.27,33.81 76.27,48.85C76.27,51.07 74.47,52.87 72.25,52.87C70.02,52.87 68.22,51.07 68.22,48.85C68.22,38.25 59.6,29.65 48.97,29.65C46.75,29.65 44.94,27.85 44.94,25.63Z"
-      android:fillColor="#ffffff"
-      android:fillType="evenOdd"/>
-  <path
-      android:pathData="M84.36,44.83C86.59,44.83 88.39,46.63 88.39,48.85C88.39,63.9 76.17,76.1 61.09,76.1C58.87,76.1 57.06,74.3 57.06,72.08C57.06,69.86 58.87,68.06 61.09,68.06C71.72,68.06 80.34,59.46 80.34,48.85C80.34,46.63 82.14,44.83 84.36,44.83Z"
-      android:fillColor="#ffffff"
-      android:fillType="evenOdd"/>
-  <path
-      android:pathData="M65.12,84.37C65.12,86.59 63.32,88.39 61.09,88.39C46.01,88.39 33.79,76.19 33.79,61.15C33.79,58.93 35.59,57.13 37.82,57.13C40.04,57.13 41.85,58.93 41.85,61.15C41.85,71.75 50.46,80.35 61.09,80.35C63.32,80.35 65.12,82.15 65.12,84.37Z"
-      android:fillColor="#ffffff"
-      android:fillType="evenOdd"/>
-  <path
-      android:pathData="M25.63,65.17C23.41,65.17 21.61,63.37 21.61,61.15C21.61,46.1 33.83,33.9 48.91,33.9C51.13,33.9 52.94,35.7 52.94,37.92C52.94,40.14 51.13,41.94 48.91,41.94C38.28,41.94 29.66,50.54 29.66,61.15C29.66,63.37 27.86,65.17 25.63,65.17Z"
-      android:fillColor="#ffffff"
-      android:fillType="evenOdd"/>
-</vector>
--- a/libraries/designsystem/src/main/res/drawable/onboarding_bg.png
+++ b/libraries/designsystem/src/main/res/drawable/onboarding_bg.png
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.ftue.impl.welcome_null_WelcomeView-D-2_3_null,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.ftue.impl.welcome_null_WelcomeView-D-2_3_null,NEXUS_5,1.0,en].png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:952ca010843fa009fcda895e3d87090cb2a7d3e88dd2ec26fc9201b0dc4258be
-size 299947
+oid sha256:3fbfe34e19969a3e3117094ab85428b0a2192a87050d82ddb4e5e321a1fabc45
+size 294795
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.ftue.impl.welcome_null_WelcomeView-N-2_4_null,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.ftue.impl.welcome_null_WelcomeView-N-2_4_null,NEXUS_5,1.0,en].png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:03e6e298352831b7bf304d31f5b700350650bb657a417ee891eb47e96ba9e175
-size 400625
+oid sha256:b3a419038efa947fb7d168c2cfbdbf47f247b07405a451c0c0e560c182a9bedd
+size 400195
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.onboarding.impl_null_OnBoardingScreen-D-0_0_null_0,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.onboarding.impl_null_OnBoardingScreen-D-0_0_null_0,NEXUS_5,1.0,en].png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3ae0b33006d6c7ab2e0473874d7481a2931cad8021bbb968b2d32e69c9466fc6
-size 326500
+oid sha256:067d37cbe20e27b8e852f3eedaa3bcc64d94d062cb825df5b826a1b584e2aa1b
+size 316186
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.onboarding.impl_null_OnBoardingScreen-D-0_0_null_1,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.onboarding.impl_null_OnBoardingScreen-D-0_0_null_1,NEXUS_5,1.0,en].png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6e902df5e96079c03fbbd36b79791c90f637ab29f4b2a2aa6df7981e09d93ee0
-size 316906
+oid sha256:08aedb3ff38729714de367a1b51b92f14907d1cd6f71a02a3b73ada46c2b86a6
+size 311794
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.onboarding.impl_null_OnBoardingScreen-D-0_0_null_2,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.onboarding.impl_null_OnBoardingScreen-D-0_0_null_2,NEXUS_5,1.0,en].png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7d28de7915da88dbaf80148276448a258ea093c2e57498709227f5a428b08969
-size 327494
+oid sha256:94383700dd12a703f9e3773d231a18520b74037d7823d307c15c2c44ef9c4fd3
+size 315047
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.onboarding.impl_null_OnBoardingScreen-D-0_0_null_3,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.onboarding.impl_null_OnBoardingScreen-D-0_0_null_3,NEXUS_5,1.0,en].png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4de11f9a3d8a0165607960b926a2c1b14b6d0561ae52cbf504543bf0692fae09
-size 310356
+oid sha256:672c71bf95e048043af54904e3e14909a7af37efc8dbfa0c29ba3b027db2b70a
+size 305960
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.onboarding.impl_null_OnBoardingScreen-D-0_0_null_4,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.onboarding.impl_null_OnBoardingScreen-D-0_0_null_4,NEXUS_5,1.0,en].png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c2c67243e8def6f8d188eb918b0dbd57dec3aae03fe8fca90ef5529658de537b
-size 327304
+oid sha256:caff66495d4532e31adc6a1fe8c1da8f540d6509172c02b5c915f92b93101df1
+size 316886
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.onboarding.impl_null_OnBoardingScreen-N-0_1_null_0,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.onboarding.impl_null_OnBoardingScreen-N-0_1_null_0,NEXUS_5,1.0,en].png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8c34494dbaa396e7f8c24deb8d4d71c62f6e7e8df2cb0a940b23ad9b0537b485
-size 420474
+oid sha256:6334be27e7a3c3fd2b000ffb8d912b84fdf3867211c261fcd6451f8321d91f9e
+size 412644
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.onboarding.impl_null_OnBoardingScreen-N-0_1_null_1,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.onboarding.impl_null_OnBoardingScreen-N-0_1_null_1,NEXUS_5,1.0,en].png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0630d924f2bd374f8bd53ad41344b8d66ead984ce4bc0b55d455752d8d5409d9
-size 405238
+oid sha256:8d84c6f511b9533118bf603d37e99f9a8670f8dc120c0b6ef85f0e488ffea43a
+size 401150
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.onboarding.impl_null_OnBoardingScreen-N-0_1_null_2,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.onboarding.impl_null_OnBoardingScreen-N-0_1_null_2,NEXUS_5,1.0,en].png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:673c2698f268ac171cff3980598056e11f4c5491ecfb45b07fb1d3d7a7786b1d
-size 419084
+oid sha256:162389f0543bec631064fa9da20bf4e76150cedacc594a3299b4da231fe62502
+size 404119
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.onboarding.impl_null_OnBoardingScreen-N-0_1_null_3,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.onboarding.impl_null_OnBoardingScreen-N-0_1_null_3,NEXUS_5,1.0,en].png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:77f91c56ce019ea31d618e63a5cba1c09d43140fd8b92458de2477e95a70ea7f
-size 392950
+oid sha256:0f980d1c2a27b18237e04679bc8a507854ebb518eab7506d1210e34bd38087a4
+size 383009
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.onboarding.impl_null_OnBoardingScreen-N-0_1_null_4,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.onboarding.impl_null_OnBoardingScreen-N-0_1_null_4,NEXUS_5,1.0,en].png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:84e5641cce0113690d0d626bd3b17e8945728b3835a06b06a645418d12a05022
-size 421112
+oid sha256:46d4c3980adb36d04e4efcbf5eae1d615d22c6cb956af49c510cb564d5d671a1
+size 413267
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.atoms_null_ElementLogoAtomLarge-D_0_null,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.atoms_null_ElementLogoAtomLarge-D_0_null,NEXUS_5,1.0,en].png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c834401ae22ca7ceecd0d92cd0aadaed9e3375b384b295c1e0c4f59d3184a642
-size 51603
+oid sha256:4c5b1ae094999d2bacd7c19b7b870f46a5e099e26946756aba5a74c239d2a6d5
+size 87177
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.atoms_null_ElementLogoAtomLarge-N_1_null,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.atoms_null_ElementLogoAtomLarge-N_1_null,NEXUS_5,1.0,en].png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ad7fd75f0b2bf8bb9c3c3b38e6a30822cb8732a80228040d3e5046851662ac9a
-size 44271
+oid sha256:ada58084acf1a9bb4424364496d279218478e7e1dbdc2f3f305f9a1459a2fe61
+size 70717
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.atoms_null_ElementLogoAtomLargeNoBlurShadow-D_0_null,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.atoms_null_ElementLogoAtomLargeNoBlurShadow-D_0_null,NEXUS_5,1.0,en].png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3f76220968b3e28b2c1ddd91b4036bf037a98e97c859e8616314ed953862cc64
-size 42525
+oid sha256:01404e25f56b60dcc84b0bbdd6711f0e7ed6b58078743bf7e919d6766842c92f
+size 81164
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.atoms_null_ElementLogoAtomLargeNoBlurShadow-N_1_null,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.atoms_null_ElementLogoAtomLargeNoBlurShadow-N_1_null,NEXUS_5,1.0,en].png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3321dd27c1fbe47df862dad9b591faf9279da1ea4eb66b7b900d8c962280a74e
-size 31811
+oid sha256:ffe1e3c75d6c707207cb64f533aeea0e0c77c5b16f6b69f522480cd343806a57
+size 58453
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.atoms_null_ElementLogoAtomMedium-D_0_null,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.atoms_null_ElementLogoAtomMedium-D_0_null,NEXUS_5,1.0,en].png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cc17f444d7141faa35cab1446cd02978916e80e6a82405cd96ddbd9f91ed24f8
-size 25327
+oid sha256:060edcdd2d529df12e8053481b1eedf2f4c959ba42eabfbfd05638a319625af7
+size 51491
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.atoms_null_ElementLogoAtomMedium-N_1_null,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.atoms_null_ElementLogoAtomMedium-N_1_null,NEXUS_5,1.0,en].png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d21f91a5f4ea3f441a9f26da601f65da8054f2b7a330b983b784e811d13ae589
-size 21692
+oid sha256:ce01efab086d80094363c5eec74b7b2bc78c7a759e43721f6a497bc5da81b5e8
+size 39004
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.atoms_null_ElementLogoAtomMediumNoBlurShadow-D_0_null,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.atoms_null_ElementLogoAtomMediumNoBlurShadow-D_0_null,NEXUS_5,1.0,en].png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ca4e1e3cd5d7cb9fd8416bc7074272b759bbc501993829b6edef6809cf519aee
-size 27532
+oid sha256:698d84a98ba72bc7c1f0d4c2faf21fe4898aa2ebf5d12232454579aaf66ed642
+size 56974
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.atoms_null_ElementLogoAtomMediumNoBlurShadow-N_1_null,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.atoms_null_ElementLogoAtomMediumNoBlurShadow-N_1_null,NEXUS_5,1.0,en].png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8615ceb43c29becd4cfe6062d8fc844b15b717e8f2e5d7b151bdc4478de59381
-size 20607
+oid sha256:9b963a678aeed383208cf1856a9fec60a4734a6af1263079504eafdc634a09b1
+size 38390
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.pages_null_OnBoardingPage-D_0_null,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.pages_null_OnBoardingPage-D_0_null,NEXUS_5,1.0,en].png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2a623e239f3e3b31378b2f527e740b48c1dfafdf42246f4b03c040e7ffbc9178
-size 295552
+oid sha256:579b575f467e2d4b7adaab0c5ca7f3cc62e7a5ae18d8f67406b26df48ac0887e
+size 233216
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.pages_null_OnBoardingPage-N_1_null,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.pages_null_OnBoardingPage-N_1_null,NEXUS_5,1.0,en].png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e4b7c489bf8093dd16ed74240638af151f893bc22ec8ab54417557a69831e825
-size 430086
+oid sha256:9771fe25cb79b032ce28bee8edf5bafe0decb3effcaa153eb7f5c7d83df01d23
+size 369766