Card-less screens: paint background with Material surface

Form-only and link/QR screens have no card sections — the off-white canvas under them just adds an extra visual layer with nothing to lift. Switch their background to MaterialTheme.colors.surface (white on LIGHT, palette surface on DARK/BLACK/SIMPLEX) so the screen reads as a single sheet. Two patterns by container: - 11 ModalView callsites get background = MaterialTheme.colors.surface. - 4 screens rendered inside someone else's ModalView (GroupLinkView, HiddenProfileView, TagListView, UserProfilesView) wrap their root ColumnWithScrollBar in Box(Modifier.fillMaxSize().background(...)) so they own their background regardless of caller. - 1 BottomSheet root (CreateProfile in WelcomeView) gets background on the fillMaxSize Box. Touched screens: Create profile, Create first profile (mobile/desktop), Create group, Create channel (3 wizard steps), Edit group profile, Group link, Add welcome message / Welcome message, Edit own profile, Hide profile, Tag list editor, Your chat profiles, Add server, Add chat relay (new variant only — Edit relay stays settings-style).
2026-07-02 13:31:51 +00:00 · 2026-05-18 09:29:20 -07:00
parent 0bccc32728
commit ba2a2a2ebd
12 changed files with 23 additions and 8 deletions
@@ -86,7 +86,7 @@ fun CreateProfile(chatModel: ChatModel, close: () -> Unit) {
    sheetShape = RoundedCornerShape(topStart = 18.dp, topEnd = 18.dp)
  ) {
    Box(
-      modifier = Modifier.fillMaxSize()
+      modifier = Modifier.fillMaxSize().background(MaterialTheme.colors.surface)
    ) {
      ColumnWithScrollBar {
        AppBarTitle(stringResource(MR.strings.create_profile), bottomPadding = DEFAULT_PADDING_HALF)
@@ -243,6 +243,7 @@ private fun CreateFirstProfileMobile(chatModel: ChatModel, close: () -> Unit) {
    val refocusTrigger = remember { mutableStateOf(0) }
    ModalView(
      close = { onboardingBackAction(chatModel, close) },
+      background = MaterialTheme.colors.surface,
      endButtons = { MigrateButton(refocusTrigger) }
    ) {
      val displayName = rememberSaveable { mutableStateOf("") }
@@ -321,6 +322,7 @@ private fun CreateFirstProfileDesktop(chatModel: ChatModel, close: () -> Unit) {
  CompositionLocalProvider(LocalAppBarHandler provides rememberAppBarHandler()) {
    ModalView(
      close = { onboardingBackAction(chatModel, close) },
+      background = MaterialTheme.colors.surface,
      endButtons = { MigrateButton(refocusTrigger) }
    ) {
      ColumnWithScrollBar(horizontalAlignment = Alignment.CenterHorizontally) {
@@ -5,6 +5,7 @@ import SectionDividerSpaced
 import SectionItemView
 import SectionView
 import SectionViewWithButton
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.*
 import androidx.compose.runtime.*
@@ -192,6 +193,7 @@ fun GroupLinkLayout(
    )
  }

+  Box(Modifier.fillMaxSize().background(MaterialTheme.colors.surface)) {
  ColumnWithScrollBar {
    AppBarTitle(stringResource(if (isChannel) MR.strings.channel_link else MR.strings.group_link))
    Text(
@@ -298,6 +300,7 @@ fun GroupLinkLayout(
    }
    SectionBottomSpacer()
  }
+  }
 }

@Composable
@@ -100,7 +100,7 @@ fun GroupProfileLayout(
      sheetState = bottomSheetModalState,
      sheetShape = RoundedCornerShape(topStart = 18.dp, topEnd = 18.dp)
    ) {
-      ModalView(close = closeWithAlert) {
+      ModalView(close = closeWithAlert, background = MaterialTheme.colors.surface) {
        ColumnWithScrollBar {
          Column(
            Modifier.fillMaxWidth()
@@ -66,6 +66,7 @@ fun GroupWelcomeView(m: ChatModel, rhId: Long?, groupInfo: GroupInfo, close: ()
        else -> showUnsavedChangesAlert({ save(close) }, close)
      }
    },
+    background = MaterialTheme.colors.surface,
  ) {
    GroupWelcomeLayout(
      welcomeText,
@@ -73,6 +73,7 @@ fun TagListView(rhId: Long?, chat: Chat? = null, close: () -> Unit, reorderMode:
    }
  val topPaddingToContent = topPaddingToContent(false)

+  Box(Modifier.fillMaxSize().background(MaterialTheme.colors.surface)) {
  LazyColumnWithScrollBar(
    modifier = if (reorderMode) Modifier.dragContainer(dragDropState) else Modifier,
    state = listState,
@@ -169,6 +170,7 @@ fun TagListView(rhId: Long?, chat: Chat? = null, close: () -> Unit, reorderMode:
      }
    }
  }
+  }
 }

@Composable
@@ -257,7 +257,7 @@ private fun ProfileStepView(
    sheetState = bottomSheetModalState,
    sheetShape = RoundedCornerShape(topStart = 18.dp, topEnd = 18.dp)
  ) {
-    ModalView(close = close) {
+    ModalView(close = close, background = MaterialTheme.colors.surface) {
      ColumnWithScrollBar {
        AppBarTitle(generalGetString(MR.strings.create_channel_title), bottomPadding = DEFAULT_PADDING_HALF)
        Row(
@@ -405,6 +405,7 @@ private fun ProgressStepView(

  ModalView(
    close = { showCancelAlert() },
+    background = MaterialTheme.colors.surface,
    showClose = false,
  ) {
    ColumnWithScrollBar {
@@ -569,7 +570,7 @@ private fun LinkStepView(
      }
    }
  }
-  ModalView(close = close, showClose = false) {
+  ModalView(close = close, background = MaterialTheme.colors.surface, showClose = false) {
    GroupLinkView(
      chatModel = chatModel,
      rhId = null,
@@ -100,7 +100,7 @@ fun AddGroupLayout(
      sheetState = bottomSheetModalState,
      sheetShape = RoundedCornerShape(topStart = 18.dp, topEnd = 18.dp)
    ) {
-      ModalView(close = close) {
+      ModalView(close = close, background = MaterialTheme.colors.surface) {
        ColumnWithScrollBar {
          AppBarTitle(stringResource(MR.strings.create_secret_group_title), hostDevice(rhId), bottomPadding = DEFAULT_PADDING_HALF)
          Row(
@@ -6,6 +6,7 @@ import SectionItemViewWithoutMinPadding
 import SectionSpacer
 import SectionTextFooter
 import SectionView
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.*
 import androidx.compose.runtime.*
@@ -56,6 +57,7 @@ private fun HiddenProfileLayout(
  user: User,
  saveProfilePassword: (String) -> Unit
 ) {
+  Box(Modifier.fillMaxSize().background(MaterialTheme.colors.surface)) {
  ColumnWithScrollBar {
    AppBarTitle(stringResource(MR.strings.hide_profile))
    SectionView(contentPadding = PaddingValues(start = 8.dp, end = DEFAULT_PADDING)) {
@@ -82,4 +84,5 @@ private fun HiddenProfileLayout(
    SectionTextFooter(stringResource(MR.strings.to_reveal_profile_enter_password))
    SectionBottomSpacer()
  }
+  }
 }
@@ -98,7 +98,7 @@ fun UserProfileLayout(
          showUnsavedChangesAlert({ saveProfile(displayName.value, fullName.value, shortDescr.value, profileImage.value) }, close)
        }
      }
-      ModalView(close = closeWithAlert) {
+      ModalView(close = closeWithAlert, background = MaterialTheme.colors.surface) {
        ColumnWithScrollBar(
          Modifier
            .padding(horizontal = DEFAULT_PADDING),
@@ -8,6 +8,7 @@ import SectionItemViewWithoutMinPadding
 import SectionSpacer
 import SectionTextFooter
 import SectionView
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.*
 import androidx.compose.runtime.*
@@ -163,6 +164,7 @@ private fun UserProfilesLayout(
  unmuteUser: (User) -> Unit,
  showHiddenProfile: (User) -> Unit,
 ) {
+  Box(Modifier.fillMaxSize().background(MaterialTheme.colors.surface)) {
  ColumnWithScrollBar {
    if (profileHidden.value) {
      SectionView {
@@ -203,6 +205,7 @@ private fun UserProfilesLayout(
    }
    SectionBottomSpacer()
  }
+  }
 }

@Composable
@@ -377,7 +377,7 @@ fun ModalData.NewChatRelayView(

  ModalView(close = {
    addChatRelay(relayToEdit.value, userServers, serverErrors, serverWarnings, rhId, close)
-  }) {
+  }, background = MaterialTheme.colors.surface) {
    NewChatRelayLayout(relayToEdit)
  }
 }
@@ -33,7 +33,7 @@ fun ModalData.NewServerView(
      rhId,
      close = close
    )
-  }) {
+  }, background = MaterialTheme.colors.surface) {
    Box {
      NewServerLayout(
        newServer,