android, desktop: exact alignment and spacing (#7946)

* android, desktop: exact alignment and spacing * android, desktop: previews of the views changed for alignment and spacing * ci: desktop references of exact alignment and spacing * android, desktop: preview of chat rows with unread messages, mentions and muted chats * android, desktop: deleted text, What's new and app version keep master's layout; link strip follows iOS * ci: desktop references of the review round and of chat rows with unread messages * android, desktop: previews of the private routing and downgrade pickers and of the migration network step * ci: desktop references of the private routing and downgrade pickers and the migration network step * android, desktop: channel text aligned; master row date, strips, icons * ci: desktop references of reverted views and the aligned channel icon * android, desktop: the pull request holds only the agreed changes; new chat sheet and previews of reverted changes as on master
2026-11-04 19:27:55 +00:00 · 2026-11-01 07:47:07 +00:00
1 parent 56b4ca73cc
commit cd0d46c5e3
@@ -1,5 +1,6 @@
 package chat.simplex.common.views.badges

+import androidx.compose.desktop.ui.tooling.preview.Preview
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
@@ -153,12 +154,12 @@ private fun PeriodCard(level: BadgeLevel, period: BadgePeriod, selectedPeriod: B
  // Light: transparent so card matches page background. Dark: subtle gray tint for visible contrast.
  val cardBackground = if (isInDarkTheme()) MaterialTheme.colors.background.mixWith(MaterialTheme.colors.onBackground, 0.97f)
                       else MaterialTheme.colors.background
-  val shape = RoundedCornerShape(16.dp)
+  val shape = RoundedCornerShape(18.dp)
  Column(
    modifier
      .clip(shape)
      .background(cardBackground, shape)
-      .border(2.dp, borderColor, shape)
+      .border(1.dp, borderColor, shape)
      .clickable(enabled = forSale) { onSelect(period) }
      .padding(vertical = 20.dp, horizontal = 12.dp),
    horizontalAlignment = Alignment.CenterHorizontally,
@@ -212,3 +213,18 @@ private fun billingDate(period: BadgePeriod): String {
  val formatter = java.time.format.DateTimeFormatter.ofLocalizedDate(java.time.format.FormatStyle.LONG)
  return date.format(formatter)
 }
+
+@Preview
+@Composable
+fun PreviewPeriodCards() {
+  SimpleXTheme {
+    Row(
+      Modifier.fillMaxWidth().height(IntrinsicSize.Max).padding(25.dp),
+      horizontalArrangement = Arrangement.spacedBy(12.dp)
+    ) {
+      BadgePeriod.entries.forEach { period ->
+        PeriodCard(BadgeLevel.Supporter, period, BadgePeriod.Monthly, Modifier.weight(1f).fillMaxHeight()) {}
+      }
+    }
+  }
+}
@@ -169,13 +169,18 @@ fun ComposeLinkView(linkPreview: LinkPreview?, cancelPreview: () -> Unit, cancel
      Image(
        imageBitmap,
        stringResource(MR.strings.image_descr_link_preview),
-        modifier = Modifier.width(80.dp).height(60.dp).padding(end = 8.dp)
+        modifier = Modifier.padding(start = 12.dp).width(80.dp).height(60.dp)
      )
-      Column(Modifier.fillMaxWidth().weight(1F)) {
+      Column(
+        Modifier.fillMaxWidth().weight(1F).padding(start = 8.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(4.dp)
+      ) {
        Text(linkPreview.title, maxLines = 1, overflow = TextOverflow.Ellipsis)
        Text(
          linkPreview.uri, maxLines = 1, overflow = TextOverflow.Ellipsis,
-          style = MaterialTheme.typography.body2
+          color = MaterialTheme.colors.secondary,
+          fontSize = 12.sp
        )
      }
    }
@@ -1,5 +1,6 @@
 package chat.simplex.common.views.onboarding

+import androidx.compose.desktop.ui.tooling.preview.Preview
 import androidx.compose.foundation.*
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -75,7 +76,7 @@ fun <T> SelectableCard(currentValue: State<T>, newValue: T, title: String, descr
  TextButton(
    onClick = { onSelected(newValue) },
    border = BorderStroke(1.dp, color = if (currentValue.value == newValue) MaterialTheme.colors.primary else MaterialTheme.colors.secondary.copy(alpha = 0.5f)),
-    shape = RoundedCornerShape(35.dp),
+    shape = RoundedCornerShape(18.dp),
  ) {
    Column(Modifier.padding(horizontal = 10.dp).padding(top = 4.dp, bottom = 8.dp).fillMaxWidth()) {
      Row(verticalAlignment = Alignment.CenterVertically, modifier = Modifier.padding(bottom = 8.dp).align(Alignment.CenterHorizontally)) {
@@ -127,3 +128,11 @@ fun prepareChatBeforeFinishingOnboarding() {
    chatModel.controller.startChat(user)
  }
 }
+
+@Preview
+@Composable
+fun PreviewSetNotificationsMode() {
+  SimpleXTheme {
+    SetNotificationsMode(remember { mutableStateOf(NotificationsMode.SERVICE) }) {}
+  }
+}
@@ -261,7 +261,7 @@ fun ModalData.NetworkAndServersView(closeNetworkAndServers: () -> Unit) {

      if (currentRemoteHost == null) {
        UseSocksProxySwitch(networkUseSocksProxy, toggleSocksProxy)
-        SettingsActionItem(painterResource(MR.images.ic_settings_ethernet), stringResource(MR.strings.network_socks_proxy_settings), { showCustomModal { SocksProxySettings(networkUseSocksProxy.value, appPrefs.networkProxy, onionHosts, sessionMode = appPrefs.networkSessionMode.get(), false, it) } })
+        SettingsActionItem(painterResource(MR.images.ic_settings), stringResource(MR.strings.network_socks_proxy_settings), { showCustomModal { SocksProxySettings(networkUseSocksProxy.value, appPrefs.networkProxy, onionHosts, sessionMode = appPrefs.networkSessionMode.get(), false, it) } })
        SettingsActionItem(painterResource(MR.images.ic_cable), stringResource(MR.strings.network_settings), { ModalManager.start.showCustomModal { AdvancedNetworkSettingsView(showModal, it) } })
      }
    }
@@ -328,7 +328,7 @@ fun ModalData.NetworkAndServersView(closeNetworkAndServers: () -> Unit) {
  val showModal = { it: @Composable ModalData.() -> Unit ->  ModalManager.fullscreen.showModal(content = it) }
  val showCustomModal = { it: @Composable (close: () -> Unit) -> Unit -> ModalManager.fullscreen.showCustomModal { close -> it(close) }}
  UseSocksProxySwitch(networkUseSocksProxy, toggleSocksProxy)
-  SettingsActionItem(painterResource(MR.images.ic_settings_ethernet), stringResource(MR.strings.network_socks_proxy_settings), { showCustomModal { SocksProxySettings(networkUseSocksProxy.value, networkProxy, onionHosts, sessionMode.value, true, it) } })
+  SettingsActionItem(painterResource(MR.images.ic_settings), stringResource(MR.strings.network_socks_proxy_settings), { showCustomModal { SocksProxySettings(networkUseSocksProxy.value, networkProxy, onionHosts, sessionMode.value, true, it) } })
  SessionModePicker(sessionMode, showModal, updateSessionMode)
 }

@@ -18,6 +18,7 @@ import chat.simplex.common.model.ChatModel
 import chat.simplex.common.simplexWindowState
 import chat.simplex.common.ui.theme.*
 import chat.simplex.common.views.PreviewTerminalLayout
+import chat.simplex.common.views.badges.PreviewPeriodCards
 import chat.simplex.common.views.call.PreviewIncomingCallAlertLayout
 import chat.simplex.common.views.chat.*
 import chat.simplex.common.views.chat.group.*
@@ -107,6 +108,8 @@ private val previewScenes = listOf(
  SnapshotScene("HowItWorks.PreviewHowItWorks") { PreviewHowItWorks() },
  SnapshotScene("SimpleXInfo.PreviewSimpleXInfo") { PreviewSimpleXInfo() },
  SnapshotScene("WhatsNewView.PreviewWhatsNewView") { PreviewWhatsNewView() },
+  SnapshotScene("SetNotificationsMode.PreviewSetNotificationsMode") { PreviewSetNotificationsMode() },
+  SnapshotScene("BadgesHowLongView.PreviewPeriodCards") { PreviewPeriodCards() },
  SnapshotScene("HelpView.PreviewHelpView") { PreviewHelpView() },
  SnapshotScene("MarkdownHelpView.PreviewMarkdownHelpView") { PreviewMarkdownHelpView() },
  SnapshotScene("SettingsView.PreviewSettingsLayout") { PreviewSettingsLayout() },