Updated on 2026-08-14

features/details/impl/src/main/kotlin/com/tangem/features/details/ui/DetailsScreen.kt

@@ -9,18 +9,21 @@ import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.rememberScrollState
-import androidx.compose.material3.*
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
-import com.tangem.core.ui.components.appbar.models.TopAppBarMedium
+import com.tangem.core.ui.components.appbar.TangemTopAppBar
+import com.tangem.core.ui.components.appbar.models.TopAppBarButtonUM
 import com.tangem.core.ui.components.block.BlockItem
 import com.tangem.core.ui.components.snackbar.TangemSnackbarHost
 import com.tangem.core.ui.decompose.ComposableContentComponent
-import com.tangem.core.ui.extensions.resourceReference
 import com.tangem.core.ui.res.LocalSnackbarHostState
 import com.tangem.core.ui.res.TangemTheme
 import com.tangem.core.ui.res.TangemThemePreview
@@ -30,7 +33,6 @@ import com.tangem.features.details.entity.DetailsItemUM
 import com.tangem.features.details.entity.DetailsUM
 import com.tangem.features.details.impl.R
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 internal fun DetailsScreen(
     state: DetailsUM,
@@ -38,12 +40,11 @@ internal fun DetailsScreen(
     modifier: Modifier = Modifier,
 ) {
     val backgroundColor = TangemTheme.colors.background.secondary
-    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
 
     BackHandler(onBack = state.popBack)
 
     Scaffold(
-        modifier = modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
+        modifier = modifier,
         containerColor = backgroundColor,
         snackbarHost = {
             TangemSnackbarHost(
@@ -52,10 +53,9 @@ internal fun DetailsScreen(
             )
         },
         topBar = {
-            TopAppBarMedium(
-                title = resourceReference(R.string.details_title),
-                scrollBehavior = scrollBehavior,
-                onBackClick = state.popBack,
+            TangemTopAppBar(
+                modifier = Modifier.statusBarsPadding(),
+                startButton = TopAppBarButtonUM.Back(state.popBack),
             )
         },
     ) { paddingValues ->
@@ -77,10 +77,18 @@ private fun Content(
         modifier = modifier,
         verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing16),
         contentPadding = PaddingValues(
-            top = TangemTheme.dimens.spacing16,
+            top = TangemTheme.dimens.spacing12,
             bottom = TangemTheme.dimens.spacing16,
         ),
     ) {
+        item {
+            Text(
+                modifier = Modifier.padding(horizontal = TangemTheme.dimens.spacing16),
+                text = stringResource(R.string.details_title),
+                style = TangemTheme.typography.h1,
+                color = TangemTheme.colors.text.primary1,
+            )
+        }
         items(
             items = state.items,
             key = DetailsItemUM::id,

features/disclaimer/impl/src/main/java/com/tangem/features/disclaimer/impl/ui/DisclaimerScreen.kt

@@ -25,8 +25,8 @@ import com.google.accompanist.permissions.rememberPermissionState
 import com.tangem.core.ui.components.BottomFade
 import com.tangem.core.ui.components.NavigationBar3ButtonsScrim
 import com.tangem.core.ui.components.PrimaryButton
-import com.tangem.core.ui.components.appbar.AppBarWithAdditionalButtons
-import com.tangem.core.ui.components.appbar.models.AdditionalButton
+import com.tangem.core.ui.components.appbar.TangemTopAppBar
+import com.tangem.core.ui.components.appbar.models.TopAppBarButtonUM
 import com.tangem.core.ui.components.buttons.common.TangemButtonColors
 import com.tangem.core.ui.extensions.resourceReference
 import com.tangem.core.ui.res.TangemColorPalette
@@ -57,14 +57,14 @@ internal fun DisclaimerScreen(state: DisclaimerUM) {
             .statusBarsPadding(),
     ) {
         Column(modifier = Modifier.padding(bottom = bottomPadding)) {
-            AppBarWithAdditionalButtons(
-                text = resourceReference(R.string.disclaimer_title),
-                startButton = AdditionalButton(
+            TangemTopAppBar(
+                title = resourceReference(R.string.disclaimer_title),
+                startButton = TopAppBarButtonUM(
                     iconRes = R.drawable.ic_back_24,
                     onIconClicked = state.popBack,
                 ).takeIf { state.isTosAccepted },
                 textColor = textColor,
-                iconColor = iconColor,
+                iconTint = iconColor,
             )
             DisclaimerContent(state.url, state.isTosAccepted)
         }

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

@@ -6,11 +6,9 @@ import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.togetherWith
 import androidx.compose.foundation.Canvas
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.*
-import androidx.compose.material.ripple.rememberRipple
-import androidx.compose.material3.Icon
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Offset
@@ -20,12 +18,13 @@ import androidx.compose.ui.graphics.PathEffect
 import androidx.compose.ui.graphics.StrokeJoin
 import androidx.compose.ui.graphics.drawscope.Stroke
 import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.drawText
 import androidx.compose.ui.text.rememberTextMeasurer
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Constraints
-import com.tangem.core.ui.components.appbar.AppBarWithBackButtonAndIconContent
+import com.tangem.core.ui.components.appbar.TangemTopAppBar
+import com.tangem.core.ui.components.appbar.TopAppBarButton
+import com.tangem.core.ui.components.appbar.models.TopAppBarButtonUM
 import com.tangem.core.ui.extensions.TextReference
 import com.tangem.core.ui.extensions.resolveReference
 import com.tangem.core.ui.res.TangemColorPalette
@@ -59,46 +58,37 @@ internal fun QrScanningContent(
         Overlay(
             message = uiState.message,
         )
-        AppBarWithBackButtonAndIconContent(
-            onBackClick = uiState.onBackClick,
+
+        TangemTopAppBar(
             modifier = Modifier.statusBarsPadding(),
-            backgroundColor = Color.Transparent,
-            backIconTint = TangemColorPalette.White,
-            iconContent = {
-                Row {
-                    AnimatedContent(
-                        targetState = isFlash,
-                        transitionSpec = { fadeIn().togetherWith(fadeOut()) },
-                        label = "Flash Change",
-                    ) {
-                        val flashIconRes = if (it) R.drawable.ic_flash_on_24 else R.drawable.ic_flash_off_24
-                        Icon(
-                            painter = painterResource(flashIconRes),
-                            contentDescription = null,
-                            modifier = Modifier
-                                .padding(end = TangemTheme.dimens.spacing20)
-                                .size(size = TangemTheme.dimens.size24)
-                                .clickable(
-                                    interactionSource = remember { MutableInteractionSource() },
-                                    indication = rememberRipple(bounded = false),
-                                    onClick = { isFlash = !isFlash },
-                                ),
-                            tint = TangemColorPalette.White,
-                        )
-                    }
-                    Icon(
-                        painter = painterResource(R.drawable.ic_gallery_24),
-                        contentDescription = null,
-                        modifier = Modifier
-                            .size(size = TangemTheme.dimens.size24)
-                            .clickable(
-                                interactionSource = remember { MutableInteractionSource() },
-                                indication = rememberRipple(bounded = false),
-                                onClick = uiState.onGalleryClick,
-                            ),
+            title = null,
+            startButton = TopAppBarButtonUM.Back(uiState.onBackClick),
+            iconTint = TangemColorPalette.White,
+            containerColor = Color.Transparent,
+            endContent = {
+                AnimatedContent(
+                    targetState = isFlash,
+                    transitionSpec = { fadeIn().togetherWith(fadeOut()) },
+                    label = "Flash Change",
+                ) {
+                    TopAppBarButton(
+                        button = TopAppBarButtonUM(
+                            iconRes = if (it) R.drawable.ic_flash_on_24 else R.drawable.ic_flash_off_24,
+                            onIconClicked = {
+                                isFlash = !isFlash
+                            },
+                        ),
                         tint = TangemColorPalette.White,
                     )
                 }
+
+                TopAppBarButton(
+                    button = TopAppBarButtonUM(
+                        iconRes = R.drawable.ic_gallery_24,
+                        onIconClicked = uiState.onGalleryClick,
+                    ),
+                    tint = TangemColorPalette.White,
+                )
             },
         )
         if (uiState.bottomSheetConfig != null) {

features/wallet-settings/impl/src/main/kotlin/com/tangem/feature/walletsettings/ui/WalletSettingsScreen.kt

@@ -6,22 +6,20 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
-import com.tangem.core.ui.components.appbar.models.TopAppBarMedium
+import com.tangem.core.ui.components.appbar.TangemTopAppBar
+import com.tangem.core.ui.components.appbar.models.TopAppBarButtonUM
 import com.tangem.core.ui.components.block.BlockCard
 import com.tangem.core.ui.components.block.BlockItem
 import com.tangem.core.ui.components.snackbar.TangemSnackbarHost
 import com.tangem.core.ui.extensions.resolveReference
-import com.tangem.core.ui.extensions.resourceReference
 import com.tangem.core.ui.res.LocalSnackbarHostState
 import com.tangem.core.ui.res.TangemTheme
 import com.tangem.core.ui.res.TangemThemePreview
@@ -30,7 +28,6 @@ import com.tangem.feature.walletsettings.entity.WalletSettingsItemUM
 import com.tangem.feature.walletsettings.entity.WalletSettingsUM
 import com.tangem.feature.walletsettings.impl.R
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 internal fun WalletSettingsScreen(
     state: WalletSettingsUM,
@@ -38,12 +35,11 @@ internal fun WalletSettingsScreen(
     modifier: Modifier = Modifier,
 ) {
     val backgroundColor = TangemTheme.colors.background.secondary
-    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
 
     BackHandler(onBack = state.popBack)
 
     Scaffold(
-        modifier = modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
+        modifier = modifier,
         containerColor = backgroundColor,
         snackbarHost = {
             TangemSnackbarHost(
@@ -52,10 +48,9 @@ internal fun WalletSettingsScreen(
             )
         },
         topBar = {
-            TopAppBarMedium(
-                title = resourceReference(R.string.wallet_settings_title),
-                scrollBehavior = scrollBehavior,
-                onBackClick = state.popBack,
+            TangemTopAppBar(
+                modifier = Modifier.statusBarsPadding(),
+                startButton = TopAppBarButtonUM.Back(state.popBack),
             )
         },
         content = { paddingValues ->
@@ -79,11 +74,21 @@ private fun Content(state: WalletSettingsUM, modifier: Modifier = Modifier) {
             bottom = TangemTheme.dimens.spacing16,
         ),
     ) {
+        item {
+            Text(
+                modifier = Modifier.padding(horizontal = TangemTheme.dimens.spacing16),
+                text = stringResource(id = R.string.wallet_settings_title),
+                style = TangemTheme.typography.h1,
+                color = TangemTheme.colors.text.primary1,
+            )
+        }
         items(
             items = state.items,
             key = WalletSettingsItemUM::id,
         ) { item ->
-            val itemModifier = Modifier.padding(horizontal = TangemTheme.dimens.spacing16)
+            val itemModifier = Modifier
+                .padding(horizontal = TangemTheme.dimens.spacing16)
+                .fillMaxWidth()
 
             when (item) {
                 is WalletSettingsItemUM.WithItems -> ItemsBlock(
@@ -117,7 +122,10 @@ private fun ItemsBlock(model: WalletSettingsItemUM.WithItems, modifier: Modifier
             verticalArrangement = Arrangement.Top,
         ) {
             model.blocks.forEach { block ->
-                BlockItem(model = block)
+                BlockItem(
+                    modifier = Modifier.fillMaxWidth(),
+                    model = block,
+                )
             }
         }