android, desktop: small layout changes (#4643)

* android, desktop: small layout changes

* padding

* blue theme handling

* themedBackground on onboarding

* status bar in call

* disabled elevation on attachments sheet to prevent seeing shadow from the bottom

---------

Co-authored-by: Evgeny Poberezkin <evgeny@poberezkin.com>

apps/multiplatform/android/src/main/java/chat/simplex/app/SimplexApp.kt

@@ -26,6 +26,7 @@ import chat.simplex.common.model.ChatModel.withChats
 import chat.simplex.common.platform.*
 import chat.simplex.common.ui.theme.*
 import chat.simplex.common.views.call.*
+import chat.simplex.common.views.chatlist.statusBarColorAfterCall
 import chat.simplex.common.views.helpers.*
 import chat.simplex.common.views.onboarding.OnboardingStage
 import com.jakewharton.processphoenix.ProcessPhoenix
@@ -276,11 +277,21 @@ class SimplexApp: Application(), LifecycleEventObserver {
         @Suppress("DEPRECATION")
         val windowInsetController = ViewCompat.getWindowInsetsController(window.decorView)
 
-        val statusBar = (if (hasTop && appPrefs.onboardingStage.get() == OnboardingStage.OnboardingComplete) {
+        var statusBar = (if (hasTop && appPrefs.onboardingStage.get() == OnboardingStage.OnboardingComplete) {
           backgroundColor.mixWith(CurrentColors.value.colors.onBackground, 0.97f)
         } else {
-          backgroundColor
+          if (CurrentColors.value.base == DefaultTheme.SIMPLEX) {
+            backgroundColor.lighter(0.4f)
+          } else {
+            backgroundColor
+          }
         }).toArgb()
+
+        // SimplexGreen while in call
+        if (window.statusBarColor == SimplexGreen.toArgb()) {
+          statusBarColorAfterCall.intValue = statusBar
+          statusBar = SimplexGreen.toArgb()
+        }
         val navBar = (if (hasBottom && appPrefs.onboardingStage.get() == OnboardingStage.OnboardingComplete) {
           backgroundColor.mixWith(CurrentColors.value.colors.onBackground, 0.97f)
         } else {

apps/multiplatform/common/src/androidMain/kotlin/chat/simplex/common/views/chatlist/ChatListView.android.kt

@@ -64,6 +64,9 @@ actual fun ActiveCallInteractiveArea(call: Call) {
   }
 }
 
+// Temporary solution for storing a color that needs to be applied after call ends
+var statusBarColorAfterCall = mutableIntStateOf(CurrentColors.value.colors.background.toArgb())
+
 @Composable
 private fun GreenLine(call: Call) {
   Row(
@@ -81,9 +84,10 @@ private fun GreenLine(call: Call) {
   }
   val window = (LocalContext.current as Activity).window
   DisposableEffect(Unit) {
+    statusBarColorAfterCall.intValue = window.statusBarColor
     window.statusBarColor = SimplexGreen.toArgb()
     onDispose {
-      window.statusBarColor = Color.Black.toArgb()
+      window.statusBarColor = statusBarColorAfterCall.intValue
     }
   }
 }

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/WelcomeView.kt

@@ -115,7 +115,8 @@ fun CreateFirstProfile(chatModel: ChatModel, close: () -> Unit) {
   ProvideWindowInsets(windowInsetsAnimationsEnabled = true) {
     Column(
       modifier = Modifier
-        .fillMaxSize(),
+        .fillMaxSize()
+        .themedBackground(),
       horizontalAlignment = Alignment.CenterHorizontally
     ) {
       CloseSheetBar(close = {

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/chat/ChatView.kt

@@ -623,11 +623,10 @@ fun ChatLayout(
       )
   ) {
     ProvideWindowInsets(windowInsetsAnimationsEnabled = true) {
-      val elevation = remember { derivedStateOf { if (attachmentBottomSheetState.currentValue == ModalBottomSheetValue.Hidden) 0.dp else ModalBottomSheetDefaults.Elevation } }
       ModalBottomSheetLayout(
         scrimColor = Color.Black.copy(alpha = 0.12F),
         modifier = Modifier.navigationBarsWithImePadding(),
-        sheetElevation = elevation.value,
+        sheetElevation = 0.dp,
         sheetContent = {
           ChooseAttachmentView(
             attachmentOption,

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/onboarding/CreateSimpleXAddress.kt

@@ -78,7 +78,8 @@ private fun CreateSimpleXAddressLayout(
 ) {
   ColumnWithScrollBar(
     Modifier
-      .fillMaxSize(),
+      .fillMaxSize()
+      .themedBackground(),
     horizontalAlignment = Alignment.CenterHorizontally,
   ) {
     CloseSheetBar(showClose = false, close = {})

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/onboarding/LinkAMobileView.kt

@@ -15,6 +15,7 @@ import chat.simplex.common.model.ChatModel
 import chat.simplex.common.platform.BackHandler
 import chat.simplex.common.platform.chatModel
 import chat.simplex.common.ui.theme.DEFAULT_PADDING
+import chat.simplex.common.ui.theme.themedBackground
 import chat.simplex.common.views.helpers.*
 import chat.simplex.common.views.remote.AddingMobileDevice
 import chat.simplex.common.views.remote.DeviceNameField
@@ -58,7 +59,7 @@ private fun LinkAMobileLayout(
   staleQrCode: MutableState<Boolean>,
   updateDeviceName: (String) -> Unit,
 ) {
-  Column {
+  Column(Modifier.themedBackground()) {
     CloseSheetBar(close = {
       appPrefs.onboardingStage.set(OnboardingStage.Step1_SimpleXInfo)
     })

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/onboarding/SetNotificationsMode.kt

@@ -28,6 +28,7 @@ fun SetNotificationsMode(m: ChatModel) {
   ColumnWithScrollBar(
     modifier = Modifier
       .fillMaxSize()
+      .themedBackground()
   ) {
     CloseSheetBar(showClose = false, close = {})
     AppBarTitle(stringResource(MR.strings.onboarding_notifications_mode_title))

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/onboarding/SetupDatabasePassphrase.kt

@@ -105,7 +105,7 @@ private fun SetupDatabasePassphraseLayout(
   nextStep: () -> Unit,
 ) {
   ColumnWithScrollBar(
-    Modifier.fillMaxSize().padding(bottom = DEFAULT_PADDING * 2),
+    Modifier.fillMaxSize().themedBackground().padding(bottom = DEFAULT_PADDING * 2),
     horizontalAlignment = Alignment.CenterHorizontally,
   ) {
     CloseSheetBar(showClose = false, close = {})

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/onboarding/SimpleXInfo.kt

@@ -57,7 +57,7 @@ fun SimpleXInfoLayout(
   ColumnWithScrollBar(
     Modifier
       .fillMaxSize()
-      .padding(horizontal = 16.dp),
+      .padding(horizontal = DEFAULT_PADDING),
     horizontalAlignment = Alignment.CenterHorizontally
   ) {
     Box(Modifier.widthIn(max = if (appPlatform.isAndroid) 250.dp else 500.dp).padding(top = DEFAULT_PADDING + 8.dp), contentAlignment = Alignment.Center) {
@@ -75,7 +75,7 @@ fun SimpleXInfoLayout(
 
     Spacer(Modifier.weight(1f))
 
-    Column(Modifier.fillMaxWidth()) {
+    Column {
       InfoRow(painterResource(MR.images.privacy), MR.strings.privacy_redefined, MR.strings.first_platform_without_user_ids, width = 60.dp)
       InfoRow(painterResource(MR.images.shield), MR.strings.immune_to_spam_and_abuse, MR.strings.people_can_connect_only_via_links_you_share, width = 46.dp)
       InfoRow(painterResource(if (isInDarkTheme()) MR.images.decentralized_light else MR.images.decentralized), MR.strings.decentralized, MR.strings.opensource_protocol_and_code_anybody_can_run_servers)
@@ -115,10 +115,10 @@ fun SimpleXLogo() {
 @Composable
 private fun InfoRow(icon: Painter, titleId: StringResource, textId: StringResource, width: Dp = 58.dp) {
   Row(Modifier.padding(bottom = 27.dp), verticalAlignment = Alignment.Top) {
-    Spacer(Modifier.width((18.dp + 58.dp - width) / 2))
+    Spacer(Modifier.width((4.dp + 58.dp - width) / 2))
     Image(icon, contentDescription = null, modifier = Modifier
       .width(width))
-    Spacer(Modifier.width((18.dp + 58.dp - width) / 2 + DEFAULT_PADDING_HALF))
+    Spacer(Modifier.width((4.dp + 58.dp - width) / 2 + DEFAULT_PADDING_HALF + 7.dp))
     Column(Modifier.padding(top = 4.dp), verticalArrangement = Arrangement.spacedBy(DEFAULT_PADDING_HALF)) {
       Text(stringResource(titleId), fontWeight = FontWeight.Bold, style = MaterialTheme.typography.h3, lineHeight = 24.sp)
       Text(stringResource(textId), lineHeight = 24.sp, style = MaterialTheme.typography.body1, color = MaterialTheme.colors.secondary)

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/usersettings/SettingsView.kt

@@ -180,11 +180,10 @@ fun SettingsLayout(
         .height(AppBarHeight * fontSizeSqrtMultiplier)
         .background(MaterialTheme.colors.background)
         .background(if (isInDarkTheme()) ToolbarDark else ToolbarLight)
-        .padding(start = 4.dp, top = 8.dp),
+        .padding(start = 4.dp),
         contentAlignment = Alignment.CenterStart
       ) {
-        val sp24 = with(LocalDensity.current) { 24.sp.toDp() }
-        NavigationButtonBack(closeSettings, height = sp24)
+        NavigationButtonBack(closeSettings, height = 24.sp.toDp())
       }
     }
   }