android, desktop: better message info screen (#5227)

- changed tabBar style to leading icon
- made tabBar the same size as AppBars
- made background color as theme background

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

@@ -23,6 +23,7 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import chat.simplex.common.model.*
+import chat.simplex.common.model.ChatController.appPrefs
 import chat.simplex.common.platform.*
 import chat.simplex.common.views.helpers.*
 import chat.simplex.common.ui.theme.*
@@ -477,28 +478,33 @@ fun ChatItemInfoView(chatRh: Long?, ci: ChatItem, ciInfo: ChatItemInfo, devTools
             selection.value = CIInfoTab.Delivery(ciInfo.memberDeliveryStatuses)
           }
         }
-        TabRow(
-          selectedTabIndex = availableTabs.indexOfFirst { it::class == selection.value::class },
-          backgroundColor = Color.Transparent,
-          contentColor = MaterialTheme.colors.primary,
-        ) {
-          availableTabs.forEach { ciInfoTab ->
-            Tab(
-              selected = selection.value::class == ciInfoTab::class,
-              onClick = {
-                selection.value = ciInfoTab
-              },
-              text = { Text(tabTitle(ciInfoTab), fontSize = 13.sp) },
-              icon = {
-                Icon(
-                  painterResource(tabIcon(ciInfoTab)),
-                  tabTitle(ciInfoTab)
-                )
-              },
-              selectedContentColor = MaterialTheme.colors.primary,
-              unselectedContentColor = MaterialTheme.colors.secondary,
-            )
+        val oneHandUI = remember { appPrefs.oneHandUI.state }
+        Box(Modifier.offset(x = 0.dp, y = if (oneHandUI.value) -AppBarHeight * fontSizeSqrtMultiplier else 0.dp)) {
+          TabRow(
+            selectedTabIndex = availableTabs.indexOfFirst { it::class == selection.value::class },
+            Modifier.height(AppBarHeight * fontSizeSqrtMultiplier),
+            backgroundColor = MaterialTheme.colors.background,
+            contentColor = MaterialTheme.colors.primary,
+          ) {
+            availableTabs.forEach { ciInfoTab ->
+              LeadingIconTab(
+                selected = selection.value::class == ciInfoTab::class,
+                onClick = {
+                  selection.value = ciInfoTab
+                },
+                text = { Text(tabTitle(ciInfoTab), fontSize = 13.sp) },
+                icon = {
+                  Icon(
+                    painterResource(tabIcon(ciInfoTab)),
+                    tabTitle(ciInfoTab)
+                  )
+                },
+                selectedContentColor = MaterialTheme.colors.primary,
+                unselectedContentColor = MaterialTheme.colors.secondary,
+              )
+            }
           }
+          Divider()
         }
       }
     } else {