feat: adjust new login skeleton to edge-to-edge [WPB-14337] (#3812)

app/build.gradle.kts

@@ -205,7 +205,6 @@ dependencies {
     ksp(libs.compose.destinations.ksp)
 
     // Accompanist
-    implementation(libs.accompanist.systemUI)
     implementation(libs.accompanist.placeholder)
 
     implementation(libs.androidx.paging3)

app/src/main/kotlin/com/wire/android/ui/WireActivity.kt

@@ -39,6 +39,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberUpdatedState
@@ -55,6 +56,7 @@ import androidx.lifecycle.flowWithLifecycle
 import androidx.lifecycle.lifecycleScope
 import androidx.lifecycle.repeatOnLifecycle
 import androidx.navigation.NavController
+import androidx.navigation.compose.currentBackStackEntryAsState
 import com.ramcosta.composedestinations.spec.Route
 import com.wire.android.BuildConfig
 import com.wire.android.R
@@ -69,7 +71,10 @@ import com.wire.android.navigation.MainNavHost
 import com.wire.android.navigation.NavigationCommand
 import com.wire.android.navigation.Navigator
 import com.wire.android.navigation.rememberNavigator
+import com.wire.android.navigation.style.BackgroundStyle
+import com.wire.android.navigation.style.BackgroundType
 import com.wire.android.ui.authentication.login.LoginNavArgs
+import com.wire.android.ui.authentication.login.WireAuthBackgroundLayout
 import com.wire.android.ui.calling.getIncomingCallIntent
 import com.wire.android.ui.calling.getOutgoingCallIntent
 import com.wire.android.ui.calling.ongoing.getOngoingCallIntent
@@ -233,13 +238,25 @@ class WireActivity : AppCompatActivity() {
                 LocalActivity provides this
             ) {
                 WireTheme {
+                    val navigator = rememberNavigator(this@WireActivity::finish)
+                    val currentBackStackEntryState = navigator.navController.currentBackStackEntryAsState()
+                    val backgroundType by remember {
+                        derivedStateOf {
+                            currentBackStackEntryState.value?.appDestination()?.style.let {
+                                (it as? BackgroundStyle)?.backgroundType() ?: BackgroundType.Default
+                            }
+                        }
+                    }
+                    if (backgroundType == BackgroundType.Auth) {
+                        WireAuthBackgroundLayout()
+                    }
                     Column(
                         modifier = Modifier
                             .semantics { testTagsAsResourceId = true }
                     ) {
-                        val navigator = rememberNavigator(this@WireActivity::finish)
                         WireTopAppBar(
                             commonTopAppBarState = commonTopAppBarViewModel.state,
+                            backgroundType = backgroundType,
                         )
                         CompositionLocalProvider(LocalNavigator provides navigator) {
                             MainNavHost(
@@ -263,11 +280,13 @@ class WireActivity : AppCompatActivity() {
     @Composable
     private fun WireTopAppBar(
         commonTopAppBarState: CommonTopAppBarState,
+        backgroundType: BackgroundType,
         modifier: Modifier = Modifier,
     ) {
         CommonTopAppBar(
             modifier = modifier,
             commonTopAppBarState = commonTopAppBarState,
+            backgroundType = backgroundType,
             onReturnToCallClick = { establishedCall ->
                 getOngoingCallIntent(
                     this@WireActivity,

app/src/main/kotlin/com/wire/android/ui/authentication/login/LoginScreen.kt

@@ -22,8 +22,8 @@ import androidx.annotation.StringRes
 import androidx.compose.animation.AnimatedContent
 import androidx.compose.animation.togetherWith
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -38,6 +38,7 @@ import com.wire.android.navigation.BackStackMode
 import com.wire.android.navigation.NavigationCommand
 import com.wire.android.navigation.Navigator
 import com.wire.android.navigation.WireDestination
+import com.wire.android.navigation.style.AuthSlideNavigationAnimation
 import com.wire.android.navigation.style.TransitionAnimationType
 import com.wire.android.ui.authentication.ServerTitle
 import com.wire.android.ui.authentication.login.email.LoginEmailScreen
@@ -62,7 +63,8 @@ import com.wire.android.util.ui.PreviewMultipleThemes
 
 @RootNavGraph
 @WireDestination(
-    navArgsDelegate = LoginNavArgs::class
+    navArgsDelegate = LoginNavArgs::class,
+    style = AuthSlideNavigationAnimation::class,
 )
 @Composable
 fun LoginScreen(
@@ -76,7 +78,6 @@ fun LoginScreen(
         onNavigateBack = navigator::navigateBack
     ) {
         LoginContent(
-            onBackPressed = navigator::navigateBack,
             onSuccess = { initialSyncCompleted, isE2EIRequired ->
                 val destination = if (isE2EIRequired) E2EIEnrollmentScreenDestination
                 else if (initialSyncCompleted) HomeScreenDestination
@@ -88,22 +89,19 @@ fun LoginScreen(
                 navigator.navigate(NavigationCommand(RemoveDeviceScreenDestination, BackStackMode.CLEAR_WHOLE))
             },
             loginEmailViewModel = loginEmailViewModel,
-            ssoLoginResult = loginNavArgs.ssoLoginResult
         )
     }
 }
 
 @Composable
 private fun LoginContent(
-    onBackPressed: () -> Unit,
     onSuccess: (initialSyncCompleted: Boolean, isE2EIRequired: Boolean) -> Unit,
     onRemoveDeviceNeeded: () -> Unit,
     loginEmailViewModel: LoginEmailViewModel,
-    ssoLoginResult: DeepLinkResult.SSOLogin?
 ) {
     Column(
         modifier = Modifier
-            .fillMaxHeight(0.6f)
+            .wrapContentHeight()
             .fillMaxWidth()
     ) {
         /*
@@ -118,7 +116,7 @@ private fun LoginContent(
             if (isCodeInputNecessary) {
                 LoginEmailVerificationCodeScreen(loginEmailViewModel)
             } else {
-                MainLoginContent(onBackPressed, onSuccess, onRemoveDeviceNeeded, loginEmailViewModel, ssoLoginResult)
+                MainLoginContent(onSuccess, onRemoveDeviceNeeded, loginEmailViewModel)
             }
         }
     }
@@ -127,13 +125,10 @@ private fun LoginContent(
 @Suppress("UnusedParameter")
 @Composable
 private fun MainLoginContent(
-    onBackPressed: () -> Unit,
     onSuccess: (initialSyncCompleted: Boolean, isE2EIRequired: Boolean) -> Unit,
     onRemoveDeviceNeeded: () -> Unit,
     loginEmailViewModel: LoginEmailViewModel,
-    ssoLoginResult: DeepLinkResult.SSOLogin?
 ) {
-
     val ssoDisabledWithProxyDialogState = rememberVisibilityState<FeatureDisabledWithProxyDialogState>()
     FeatureDisabledWithProxyDialogContent(dialogState = ssoDisabledWithProxyDialogState)
 
@@ -144,7 +139,12 @@ private fun MainLoginContent(
         )
         VerticalSpace.x8()
     }
-    LoginEmailScreen(onSuccess, onRemoveDeviceNeeded, loginEmailViewModel)
+    LoginEmailScreen(
+        onSuccess = onSuccess,
+        onRemoveDeviceNeeded = onRemoveDeviceNeeded,
+        loginEmailViewModel = loginEmailViewModel,
+        fillMaxHeight = false,
+    )
 }
 
 @Composable
@@ -270,14 +270,12 @@ data class LoginDialogErrorData(
 
 @PreviewMultipleThemes
 @Composable
-private fun PreviewLoginScreen() = WireTheme {
+private fun PreviewNewLoginEmailScreen() = WireTheme {
     WireTheme {
         MainLoginContent(
-            onBackPressed = {},
             onSuccess = { _, _ -> },
             onRemoveDeviceNeeded = {},
             loginEmailViewModel = hiltViewModel(),
-            ssoLoginResult = null
         )
     }
 }

app/src/main/kotlin/com/wire/android/ui/authentication/login/NewLoginContainer.kt

@@ -19,25 +19,31 @@ package com.wire.android.ui.authentication.login
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import com.wire.android.ui.authentication.login.WireAuthBackgroundLayout
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.style.TextAlign
+import com.wire.android.ui.common.bottomsheet.WireBottomSheetDefaults
 import com.wire.android.ui.common.colorsScheme
 import com.wire.android.ui.common.dimensions
+import com.wire.android.ui.common.preview.EdgeToEdgePreview
 import com.wire.android.ui.common.scaffold.WireScaffold
 import com.wire.android.ui.common.spacers.VerticalSpace
 import com.wire.android.ui.theme.WireTheme
@@ -61,22 +67,24 @@ private fun NewLoginContent(
     onNavigateBack: () -> Unit,
     content: @Composable () -> Unit = { }
 ) {
+    NavigationBarBackground()
     WireScaffold(
+        containerColor = Color.Transparent,
         bottomBar = {
             Column(
                 modifier = Modifier
-                    .fillMaxWidth()
-                    .clip(RoundedCornerShape(topEnd = dimensions().spacing8x, topStart = dimensions().spacing8x))
-                    .background(colorsScheme().surface)
-                    .padding(dimensions().spacing16x)
+                    .clip(WireBottomSheetDefaults.WireBottomSheetShape)
+                    .background(WireBottomSheetDefaults.WireSheetContainerColor)
             ) {
                 Row(
-                    modifier = Modifier.fillMaxWidth(),
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(dimensions().spacing16x),
                     verticalAlignment = Alignment.CenterVertically,
                 ) {
                     if (canNavigateBack) {
                         Icon(
-                            imageVector = Icons.Filled.ArrowBack,
+                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                             contentDescription = "Back",
                             modifier = Modifier.clickable(onClick = onNavigateBack)
                         )
@@ -96,16 +104,33 @@ private fun NewLoginContent(
                     content()
                 }
             }
-        }
-    ) { _ ->
-        Column {
-            WireAuthBackgroundComponent()
-        }
-    }
+        }) { _ -> }
+}
+
+@Composable
+private fun NavigationBarBackground() = Box(
+    contentAlignment = Alignment.BottomCenter,
+    modifier = Modifier.fillMaxSize()
+) {
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(colorsScheme().background)
+            .navigationBarsPadding()
+    )
 }
 
 @PreviewMultipleThemes
 @Composable
 private fun PreviewNewLoginContent() = WireTheme {
-    NewLoginContent("Enter your password to log in", true, {}) { Text(text = "EMPTY") }
+    EdgeToEdgePreview(useDarkIcons = false) {
+        WireAuthBackgroundLayout {
+            NewLoginContent("Enter your password to log in", true, {}) {
+                Text(
+                    text = "EMPTY",
+                    modifier = Modifier.padding(dimensions().spacing24x)
+                )
+            }
+        }
+    }
 }

app/src/main/kotlin/com/wire/android/ui/authentication/login/WireAuthBackgroundComponent.kt

@@ -20,44 +20,48 @@ package com.wire.android.ui.authentication.login
 import android.annotation.SuppressLint
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.tooling.preview.Preview
 import com.wire.android.R
-import com.wire.android.ui.theme.WireColorPalette
 import com.wire.android.ui.theme.WireTheme
+import com.wire.android.ui.theme.wireDarkColorScheme
 import com.wire.android.util.ui.PreviewMultipleThemes
 
 @Composable
-fun WireAuthBackgroundComponent() {
-    MainBackgroundContent()
-}
-
-@SuppressLint("PackagePrivateId")
-@Composable
-private fun MainBackgroundContent() {
-    Column(modifier = Modifier.fillMaxSize()) {
+fun  WireAuthBackgroundLayout(
+    modifier: Modifier = Modifier,
+    content: @Composable BoxScope.() -> Unit = {},
+) {
+    Box(
+        modifier = modifier
+            .fillMaxSize()
+            .background(color = MaterialTheme.wireDarkColorScheme.background), // splash is always dark
+    ) {
         val image: Painter = painterResource(id = R.drawable.bg_waves)
         Image(
             painter = image,
             contentDescription = null,
-            contentScale = ContentScale.Crop,
+            contentScale = ContentScale.FillWidth,
+            alignment = Alignment.BottomCenter,
             modifier = Modifier
                 .fillMaxWidth()
-                .background(color = WireColorPalette.Gray100)
+                .align(Alignment.BottomCenter)
         )
+        content()
     }
 }
 
 @PreviewMultipleThemes
-@Preview(showSystemUi = true)
 @Composable
-private fun PreviewWireAuthBackgroundComponent() = WireTheme {
-    MainBackgroundContent()
+private fun PreviewWireAuthBackgroundLayout() = WireTheme {
+    WireAuthBackgroundLayout {}
 }