Updated on 2026-08-14

common/ui/src/main/java/com/tangem/common/ui/bottomsheet/permission/GiveTxPermisssionBottomSheet.kt

@@ -27,8 +27,7 @@ import androidx.compose.ui.window.PopupProperties
 import com.tangem.common.ui.R
 import com.tangem.common.ui.bottomsheet.permission.state.*
 import com.tangem.core.ui.components.*
-import com.tangem.core.ui.components.appbar.AppBarWithAdditionalButtons
-import com.tangem.core.ui.components.appbar.models.AdditionalButton
+import com.tangem.core.ui.components.appbar.models.TopAppBarButtonUM
 import com.tangem.core.ui.components.atoms.text.EllipsisText
 import com.tangem.core.ui.components.bottomsheets.TangemBottomSheet
 import com.tangem.core.ui.components.bottomsheets.TangemBottomSheetConfig
@@ -42,17 +41,33 @@ import kotlinx.collections.immutable.ImmutableList
 
 @Composable
 fun GiveTxPermissionBottomSheet(config: TangemBottomSheetConfig) {
+    var isPermissionAlertShow by remember { mutableStateOf(false) }
+
     TangemBottomSheet(
         config = config,
         containerColor = TangemTheme.colors.background.secondary,
-    ) { content: GiveTxPermissionBottomSheetConfig ->
-        GiveTxPermissionBottomSheetContent(content = content)
-    }
+        titleText = resourceReference(R.string.give_permission_title),
+        titleAction = TopAppBarButtonUM(
+            iconRes = R.drawable.ic_information_24,
+            onIconClicked = { isPermissionAlertShow = true },
+        ),
+        content = { content: GiveTxPermissionBottomSheetConfig ->
+            GiveTxPermissionBottomSheetContent(content = content)
+
+            if (isPermissionAlertShow) {
+                BasicDialog(
+                    message = content.data.dialogText.resolveReference(),
+                    title = stringResource(id = R.string.common_approve),
+                    confirmButton = DialogButton { isPermissionAlertShow = false },
+                    onDismissDialog = {},
+                )
+            }
+        },
+    )
 }
 
 @Composable
 private fun GiveTxPermissionBottomSheetContent(content: GiveTxPermissionBottomSheetConfig) {
-    var isPermissionAlertShow by remember { mutableStateOf(false) }
     val data = content.data
     Column(
         modifier = Modifier
@@ -60,14 +75,6 @@ private fun GiveTxPermissionBottomSheetContent(content: GiveTxPermissionBottomSh
             .fillMaxWidth(),
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
-        AppBarWithAdditionalButtons(
-            text = resourceReference(id = R.string.give_permission_title),
-            iconColor = TangemTheme.colors.text.tertiary,
-            endButton = AdditionalButton(
-                iconRes = R.drawable.ic_information_24,
-                onIconClicked = { isPermissionAlertShow = true },
-            ),
-        )
         Text(
             text = content.data.subtitle.resolveReference(),
             color = TangemTheme.colors.text.secondary,
@@ -102,16 +109,6 @@ private fun GiveTxPermissionBottomSheetContent(content: GiveTxPermissionBottomSh
         )
 
         SpacerH16()
-
-        // region dialog
-        if (isPermissionAlertShow) {
-            BasicDialog(
-                message = content.data.dialogText.resolveReference(),
-                title = stringResource(id = R.string.common_approve),
-                confirmButton = DialogButton { isPermissionAlertShow = false },
-                onDismissDialog = {},
-            )
-        }
     }
 }
 
@@ -303,12 +300,18 @@ private fun DropdownSelector(
 }
 
 // region preview
-@Preview(showBackground = true, widthDp = 360)
-@Preview(showBackground = true, widthDp = 360, uiMode = Configuration.UI_MODE_NIGHT_YES)
 @Composable
-private fun Preview_AgreementBottomSheet() {
+@Preview(showBackground = true)
+@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
+private fun Preview_GiveTxPermissionBottomSheet() {
     TangemThemePreview {
-        GiveTxPermissionBottomSheetContent(content = previewData)
+        GiveTxPermissionBottomSheet(
+            config = TangemBottomSheetConfig(
+                isShow = true,
+                onDismissRequest = {},
+                content = previewData,
+            ),
+        )
     }
 }
 

features/qr-scanning/impl/src/main/java/com/tangem/feature/qrscanning/presentation/QrScanningCameraDeniedBottomSheet.kt

@@ -1,25 +1,35 @@
 package com.tangem.feature.qrscanning.presentation
 
 import android.content.Intent
+import android.content.res.Configuration
 import android.net.Uri
 import android.provider.Settings
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.core.content.ContextCompat
 import com.tangem.core.ui.components.SimpleSettingsRow
 import com.tangem.core.ui.components.bottomsheets.TangemBottomSheet
 import com.tangem.core.ui.components.bottomsheets.TangemBottomSheetConfig
 import com.tangem.core.ui.res.TangemTheme
+import com.tangem.core.ui.res.TangemThemePreview
 import com.tangem.feature.qrscanning.impl.R
 
 @Composable
 fun CameraDeniedBottomSheet(config: TangemBottomSheetConfig) {
-    TangemBottomSheet(config) { content: CameraDeniedBottomSheetConfig ->
+    TangemBottomSheet(
+        config = config,
+        title = {
+            CameraDeniedBottomSheetHeader()
+        },
+    ) { content: CameraDeniedBottomSheetConfig ->
         CameraDeniedBottomSheet(content = content)
     }
 }
@@ -28,7 +38,6 @@ fun CameraDeniedBottomSheet(config: TangemBottomSheetConfig) {
 private fun CameraDeniedBottomSheet(content: CameraDeniedBottomSheetConfig) {
     val context = LocalContext.current
     Column {
-        CameraDeniedBottomSheetHeader()
         SimpleSettingsRow(
             title = stringResource(id = R.string.qr_scanner_camera_denied_settings_button),
             icon = R.drawable.ic_settings_24,
@@ -55,28 +64,45 @@ private fun CameraDeniedBottomSheet(content: CameraDeniedBottomSheetConfig) {
 }
 
 @Composable
-private fun CameraDeniedBottomSheetHeader() {
-    Text(
-        text = stringResource(id = R.string.qr_scanner_camera_denied_title),
-        style = TangemTheme.typography.subtitle1,
-        color = TangemTheme.colors.text.primary1,
-        modifier = Modifier
+private fun CameraDeniedBottomSheetHeader(modifier: Modifier = Modifier) {
+    Column(
+        modifier = modifier
             .padding(
-                start = TangemTheme.dimens.spacing20,
-                end = TangemTheme.dimens.spacing20,
-                top = TangemTheme.dimens.spacing16,
+                vertical = TangemTheme.dimens.spacing16,
+                horizontal = TangemTheme.dimens.spacing20,
             ),
-    )
-    Text(
-        text = stringResource(id = R.string.qr_scanner_camera_denied_text),
-        style = TangemTheme.typography.body2,
-        color = TangemTheme.colors.text.secondary,
-        modifier = Modifier
-            .padding(
-                start = TangemTheme.dimens.spacing20,
-                end = TangemTheme.dimens.spacing20,
-                top = TangemTheme.dimens.spacing3,
-                bottom = TangemTheme.dimens.spacing16,
+        horizontalAlignment = Alignment.Start,
+        verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing4),
+    ) {
+        Text(
+            text = stringResource(id = R.string.qr_scanner_camera_denied_title),
+            style = TangemTheme.typography.subtitle1,
+            color = TangemTheme.colors.text.primary1,
+        )
+        Text(
+            text = stringResource(id = R.string.qr_scanner_camera_denied_text),
+            style = TangemTheme.typography.body2,
+            color = TangemTheme.colors.text.secondary,
+        )
+    }
+}
+
+// region Preview
+@Composable
+@Preview(showBackground = true)
+@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
+private fun Preview_CameraDeniedBottomSheet() {
+    TangemThemePreview {
+        CameraDeniedBottomSheet(
+            config = TangemBottomSheetConfig(
+                isShow = true,
+                onDismissRequest = {},
+                content = CameraDeniedBottomSheetConfig(
+                    onCancelClick = {},
+                    onGalleryClick = {},
+                ),
             ),
-    )
-}
+        )
+    }
+}
+// endregion Preview

features/referral/presentation/src/main/java/com/tangem/feature/referral/ui/AgreementBottomSheetContent.kt

@@ -13,7 +13,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import com.google.accompanist.web.WebView
 import com.google.accompanist.web.rememberWebViewState
-import com.tangem.core.ui.components.appbar.AppBarWithAdditionalButtons
+import com.tangem.core.ui.components.appbar.TangemTopAppBar
 import com.tangem.core.ui.res.TangemTheme
 import com.tangem.core.ui.res.TangemThemePreview
 import com.tangem.feature.referral.presentation.R
@@ -32,7 +32,7 @@ internal fun AgreementBottomSheetContent(url: String) {
             .fillMaxSize()
             .verticalScroll(rememberScrollState()),
     ) {
-        AppBarWithAdditionalButtons(text = stringResource(id = R.string.details_referral_title))
+        TangemTopAppBar(title = stringResource(id = R.string.details_referral_title))
         AgreementHtmlView(url = url)
         Spacer(modifier = Modifier.height(bottomBarHeight))
     }

features/staking/impl/src/main/java/com/tangem/features/staking/impl/presentation/ui/bottomsheet/StakingInfoBottomSheet.kt

@@ -1,5 +1,6 @@
 package com.tangem.features.staking.impl.presentation.ui.bottomsheet
 
+import android.content.res.Configuration
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
@@ -7,23 +8,29 @@ import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import com.tangem.core.ui.components.appbar.AppBar
+import androidx.compose.ui.tooling.preview.Preview
 import com.tangem.core.ui.components.bottomsheets.TangemBottomSheet
 import com.tangem.core.ui.components.bottomsheets.TangemBottomSheetConfig
+import com.tangem.core.ui.components.bottomsheets.TangemBottomSheetTitle
 import com.tangem.core.ui.extensions.resolveReference
+import com.tangem.core.ui.extensions.stringReference
 import com.tangem.core.ui.res.TangemTheme
+import com.tangem.core.ui.res.TangemThemePreview
 import com.tangem.features.staking.impl.presentation.state.bottomsheet.StakingInfoBottomSheetConfig
 
 @Composable
 fun StakingInfoBottomSheet(config: TangemBottomSheetConfig) {
     val scrollState = rememberScrollState()
-    TangemBottomSheet(
+
+    TangemBottomSheet<StakingInfoBottomSheetConfig>(
         config = config,
-    ) { content: StakingInfoBottomSheetConfig ->
+        title = { content ->
+            TangemBottomSheetTitle(title = content.title)
+        },
+    ) { content ->
         Column(
             modifier = Modifier.verticalScroll(scrollState),
         ) {
-            AppBar(text = content.title)
             Text(
                 text = content.text.resolveReference(),
                 color = TangemTheme.colors.text.secondary,
@@ -35,4 +42,33 @@ fun StakingInfoBottomSheet(config: TangemBottomSheetConfig) {
             )
         }
     }
-}
+}
+
+// region Preview
+@Composable
+@Preview(showBackground = true)
+@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
+private fun Preview_StakingInfoBottomSheet() {
+    TangemThemePreview {
+        StakingInfoBottomSheet(
+            config = TangemBottomSheetConfig(
+                isShow = true,
+                onDismissRequest = {},
+                content = StakingInfoBottomSheetConfig(
+                    title = stringReference("Title"),
+                    text = stringReference(
+                        """
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius neque vel ligula 
+                            tincidunt, nec faucibus nulla ultricies. Maecenas euismod arcu in nunc volutpat, 
+                            at bibendum eros lacinia. Proin hendrerit massa non velit congue, 
+                            in volutpat nisi consequat. Sed vitae justo nec orci tincidunt malesuada. 
+                            Nullam feugiat purus vel lectus efficitur, vel fringilla urna volutpat. 
+                            Donec sagittis enim in metus lacinia, vel tempor nunc bibendum. 
+                        """.trimIndent(),
+                    ),
+                ),
+            ),
+        )
+    }
+}
+// endregion Preview

features/swap/presentation/src/main/java/com/tangem/feature/swap/ui/ChooseFeeBottomSheet.kt

@@ -1,12 +1,11 @@
 package com.tangem.feature.swap.ui
 
+import android.content.res.Configuration
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.text.ClickableText
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.res.stringResource
@@ -15,12 +14,12 @@ import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.tooling.preview.Preview
-import com.tangem.core.ui.components.SpacerH24
 import com.tangem.core.ui.components.bottomsheets.TangemBottomSheet
 import com.tangem.core.ui.components.bottomsheets.TangemBottomSheetConfig
 import com.tangem.core.ui.components.rows.SelectorRowItem
 import com.tangem.core.ui.extensions.TextReference
 import com.tangem.core.ui.extensions.resolveReference
+import com.tangem.core.ui.extensions.resourceReference
 import com.tangem.core.ui.extensions.stringReference
 import com.tangem.core.ui.res.TangemTheme
 import com.tangem.core.ui.res.TangemThemePreview
@@ -35,6 +34,7 @@ fun ChooseFeeBottomSheet(config: TangemBottomSheetConfig) {
     TangemBottomSheet(
         config = config,
         containerColor = TangemTheme.colors.background.tertiary,
+        titleText = resourceReference(R.string.common_fee_selector_title),
     ) { content: ChooseFeeBottomSheetConfig ->
         ChooseFeeBottomSheetContent(content = content)
     }
@@ -47,14 +47,6 @@ private fun ChooseFeeBottomSheetContent(content: ChooseFeeBottomSheetConfig) {
             .background(TangemTheme.colors.background.tertiary)
             .padding(bottom = TangemTheme.dimens.spacing8),
     ) {
-        Text(
-            text = stringResource(R.string.common_fee_selector_title),
-            style = TangemTheme.typography.subtitle1,
-            color = TangemTheme.colors.text.primary1,
-            modifier = Modifier
-                .padding(top = TangemTheme.dimens.spacing10)
-                .align(Alignment.CenterHorizontally),
-        )
         Column(
             modifier = Modifier
                 .padding(TangemTheme.dimens.spacing16)
@@ -145,9 +137,11 @@ private fun FeeItemsBlock(content: ChooseFeeBottomSheetConfig) {
     }
 }
 
-@Preview
+// region Preview
 @Composable
-private fun ChooseFeeBottomSheetContent_Preview() {
+@Preview(showBackground = true)
+@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
+private fun Preview_ChooseFeeBottomSheet() {
     val feeItems = listOf(
         FeeItemState.Content(
             feeType = FeeType.NORMAL,
@@ -168,33 +162,23 @@ private fun ChooseFeeBottomSheetContent_Preview() {
             onClick = {},
         ),
     ).toImmutableList()
-    Column {
-        TangemThemePreview(isDark = true) {
-            ChooseFeeBottomSheetContent(
-                ChooseFeeBottomSheetConfig(
-                    selectedFee = FeeType.NORMAL,
-                    onSelectFeeType = {},
-                    feeItems = feeItems,
-                    readMore = stringReference("Read more"),
-                    readMoreUrl = "",
-                    onReadMoreClick = {},
-                ),
-            )
-        }
+    val content = ChooseFeeBottomSheetConfig(
+        selectedFee = FeeType.NORMAL,
+        onSelectFeeType = {},
+        feeItems = feeItems,
+        readMore = stringReference("Read more"),
+        readMoreUrl = "",
+        onReadMoreClick = {},
+    )
 
-        SpacerH24()
-
-        TangemThemePreview(isDark = false) {
-            ChooseFeeBottomSheetContent(
-                ChooseFeeBottomSheetConfig(
-                    selectedFee = FeeType.NORMAL,
-                    onSelectFeeType = {},
-                    feeItems = feeItems,
-                    readMore = stringReference("Read more"),
-                    readMoreUrl = "",
-                    onReadMoreClick = {},
-                ),
-            )
-        }
+    TangemThemePreview {
+        ChooseFeeBottomSheet(
+            config = TangemBottomSheetConfig(
+                isShow = true,
+                onDismissRequest = {},
+                content = content,
+            ),
+        )
     }
-}
+}
+// endregion Preview

features/swap/presentation/src/main/java/com/tangem/feature/swap/ui/ChooseProviderBottomSheet.kt

@@ -1,5 +1,6 @@
 package com.tangem.feature.swap.ui
 
+import android.content.res.Configuration
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
@@ -16,6 +17,7 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import com.tangem.core.ui.components.bottomsheets.TangemBottomSheet
 import com.tangem.core.ui.components.bottomsheets.TangemBottomSheetConfig
+import com.tangem.core.ui.extensions.resourceReference
 import com.tangem.core.ui.extensions.stringReference
 import com.tangem.core.ui.res.TangemTheme
 import com.tangem.core.ui.res.TangemThemePreview
@@ -23,13 +25,14 @@ import com.tangem.feature.swap.models.states.ChooseProviderBottomSheetConfig
 import com.tangem.feature.swap.models.states.PercentDifference
 import com.tangem.feature.swap.models.states.ProviderState
 import com.tangem.feature.swap.presentation.R
-import kotlinx.collections.immutable.toImmutableList
+import kotlinx.collections.immutable.persistentListOf
 
 @Composable
 fun ChooseProviderBottomSheet(config: TangemBottomSheetConfig) {
     TangemBottomSheet(
         config = config,
         containerColor = TangemTheme.colors.background.tertiary,
+        titleText = resourceReference(R.string.express_choose_providers_title),
     ) { content: ChooseProviderBottomSheetConfig ->
         ChooseProviderBottomSheetContent(content = content)
     }
@@ -39,13 +42,6 @@ fun ChooseProviderBottomSheet(config: TangemBottomSheetConfig) {
 @Composable
 private fun ChooseProviderBottomSheetContent(content: ChooseProviderBottomSheetConfig) {
     Column(horizontalAlignment = Alignment.CenterHorizontally) {
-        Text(
-            text = stringResource(R.string.express_choose_providers_title),
-            style = TangemTheme.typography.subtitle1,
-            color = TangemTheme.colors.text.primary1,
-            modifier = Modifier
-                .padding(top = TangemTheme.dimens.spacing10),
-        )
         Text(
             text = stringResource(R.string.express_choose_providers_subtitle),
             style = TangemTheme.typography.caption2,
@@ -104,10 +100,12 @@ private fun ChooseProviderBottomSheetContent(content: ChooseProviderBottomSheetC
     }
 }
 
-@Preview
+// region Preview
 @Composable
-private fun ChooseProviderBottomSheet_Preview() {
-    val providers = listOf(
+@Preview(showBackground = true)
+@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
+private fun Preview_ChooseProviderBottomSheet() {
+    val providers = persistentListOf(
         ProviderState.Content(
             id = "1",
             name = "1inch",
@@ -129,12 +127,18 @@ private fun ChooseProviderBottomSheet_Preview() {
             alertText = stringReference("Unavailable"),
         ),
     )
-    TangemThemePreview(isDark = false) {
-        ChooseProviderBottomSheetContent(
-            ChooseProviderBottomSheetConfig(
-                selectedProviderId = "1",
-                providers = providers.toImmutableList(),
+    val content = ChooseProviderBottomSheetConfig(
+        selectedProviderId = "1",
+        providers = providers,
+    )
+    TangemThemePreview {
+        ChooseProviderBottomSheet(
+            TangemBottomSheetConfig(
+                isShow = true,
+                onDismissRequest = {},
+                content = content,
             ),
         )
     }
-}
+}
+// endregion Preview