Updated on 2026-08-14

app/src/main/java/com/tangem/tap/features/details/ui/common/DetailsComposeElements.kt

@@ -20,6 +20,7 @@ import androidx.compose.material.Text
 import androidx.compose.material.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -32,42 +33,61 @@ fun SettingsScreensScaffold(
     content: @Composable () -> Unit,
     background: @Composable (() -> Unit)? = null,
     fab: @Composable (() -> Unit)? = null,
-    titleRes: Int,
+    backgroundColor: Color = colorResource(id = R.color.background_primary),
+    titleRes: Int? = null,
     onBackClick: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
     BackHandler(true, onBackClick)
 
     Scaffold(
-        topBar = { EmptyTopBarWithNavigation(onBackClick = onBackClick) },
+        topBar = {
+            EmptyTopBarWithNavigation(
+                onBackClick = onBackClick,
+                backgroundColor = backgroundColor,
+            )
+        },
         modifier = modifier.systemBarsPadding(),
-        backgroundColor = colorResource(id = R.color.background_primary),
+        backgroundColor = backgroundColor,
         floatingActionButton = { fab?.invoke() },
     ) {
+        if (titleRes != null) {
+            Box(modifier = modifier.fillMaxSize()) {
+                background?.invoke()
 
-        Box(modifier = modifier.fillMaxSize()) {
-
-            background?.invoke()
-
-            Column(
-                modifier = modifier.fillMaxWidth(),
-            ) {
-                Text(
-                    text = stringResource(id = titleRes),
-                    modifier = modifier.padding(start = 20.dp, end = 20.dp, bottom = 52.dp),
-                    style = TangemTypography.headline1,
-                    color = colorResource(id = R.color.text_primary_1),
-                )
-                content()
+                Column(modifier = modifier.fillMaxWidth()) {
+                    Text(
+                        text = stringResource(id = titleRes),
+                        modifier = modifier.padding(start = 20.dp, end = 20.dp, bottom = 52.dp),
+                        style = TangemTypography.headline1,
+                        color = colorResource(id = R.color.text_primary_1),
+                    )
+                    content()
+                }
             }
+        } else {
+            content()
         }
-
     }
 }
 
+@Composable
+fun ScreenTitle(
+    titleRes: Int,
+    modifier: Modifier = Modifier,
+) {
+    Text(
+        text = stringResource(id = titleRes),
+        modifier = modifier.padding(start = 20.dp, end = 20.dp),
+        style = TangemTypography.headline1,
+        color = colorResource(id = R.color.text_primary_1),
+    )
+}
+
 @Composable
 fun EmptyTopBarWithNavigation(
     onBackClick: () -> Unit,
+    backgroundColor: Color = colorResource(id = R.color.background_primary),
     modifier: Modifier = Modifier,
 ) {
     TopAppBar(
@@ -81,7 +101,7 @@ fun EmptyTopBarWithNavigation(
                 )
             }
         },
-        backgroundColor = colorResource(id = R.color.background_primary),
+        backgroundColor = backgroundColor,
         elevation = 0.dp,
     )
 }

app/src/main/java/com/tangem/tap/features/details/ui/details/DetailsScreen.kt

@@ -10,9 +10,10 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.Icon
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
@@ -24,6 +25,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.tangem.tap.common.compose.TangemTypography
+import com.tangem.tap.features.details.ui.common.ScreenTitle
 import com.tangem.tap.features.details.ui.common.SettingsScreensScaffold
 import com.tangem.wallet.R
 
@@ -34,10 +36,7 @@ fun DetailsScreen(
     modifier: Modifier = Modifier,
 ) {
     SettingsScreensScaffold(
-        content = {
-            Content(state = state, modifier = modifier)
-        },
-        titleRes = R.string.details_title,
+        content = { Content(state = state, modifier = modifier) },
         onBackClick = onBackPressed,
     )
 }
@@ -50,37 +49,32 @@ fun Content(
     Column(
         modifier = modifier
             .fillMaxSize()
-            .padding(bottom = 40.dp),
+            .verticalScroll(rememberScrollState()),
     ) {
-        LazyColumn(
-            modifier = modifier
-                .fillMaxWidth()
-                .padding(bottom = 40.dp)
-                .weight(1f),
-        ) {
-            items(state.elements) {
-                if (it == SettingsElement.WalletConnect) {
-                    WalletConnectDetailsItem(
-                        onItemsClick = state.onItemsClick,
-                        modifier = modifier,
-                    )
-                } else {
-                    DetailsItem(
-                        item = it,
-                        appCurrency = state.appCurrency,
-                        onItemsClick = state.onItemsClick,
-                        modifier = modifier,
-                    )
-                }
+        ScreenTitle(titleRes = R.string.details_title, modifier.padding(bottom = 52.dp))
+        state.elements.map {
+            if (it == SettingsElement.WalletConnect) {
+                WalletConnectDetailsItem(
+                    onItemsClick = state.onItemsClick,
+                    modifier = modifier,
+                )
+            } else {
+                DetailsItem(
+                    item = it,
+                    appCurrency = state.appCurrency,
+                    onItemsClick = state.onItemsClick,
+                    modifier = modifier,
+                )
             }
         }
+        Spacer(modifier = modifier.weight(1f))
         TangemSocialAccounts(state.tangemLinks, state.onSocialNetworkClick)
         Spacer(modifier = Modifier.size(12.dp))
         Text(
             text = "${stringResource(id = state.appNameRes)} ${state.tangemVersion}",
             style = TangemTypography.caption,
             color = colorResource(id = R.color.text_tertiary),
-            modifier = modifier.padding(start = 16.dp, end = 16.dp),
+            modifier = modifier.padding(start = 16.dp, end = 16.dp, bottom = 40.dp),
         )
     }
 }

app/src/main/java/com/tangem/tap/features/details/ui/resetcard/ResetCardScreen.kt

@@ -1,13 +1,16 @@
 package com.tangem.tap.features.details.ui.resetcard
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material.Icon
@@ -15,6 +18,7 @@ import androidx.compose.material.IconToggleButton
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -22,6 +26,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.tangem.tap.common.compose.TangemTypography
 import com.tangem.tap.features.details.ui.common.DetailsMainButton
+import com.tangem.tap.features.details.ui.common.ScreenTitle
 import com.tangem.tap.features.details.ui.common.SettingsScreensScaffold
 import com.tangem.wallet.R
 
@@ -31,14 +36,18 @@ fun ResetCardScreen(
     onBackPressed: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
-
-    SettingsScreensScaffold(
-        content = { ResetCardView(state = state, modifier = modifier) },
-        background =
-        { Image(painter = painterResource(id = R.drawable.ic_reset_background), contentDescription = "") },
-        titleRes = R.string.reset_card_to_factory_navigation_title,
-        onBackClick = onBackPressed,
-    )
+    Box(modifier = modifier.background(colorResource(id = R.color.background_primary))) {
+        Image(
+            painter = painterResource(id = R.drawable.ic_reset_background),
+            contentDescription = "",
+            modifier = modifier.offset(y = (-16).dp),
+        )
+        SettingsScreensScaffold(
+            content = { ResetCardView(state = state, modifier = modifier) },
+            onBackClick = onBackPressed,
+            backgroundColor = Color.Transparent,
+        )
+    }
 }
 
 @Composable
@@ -51,7 +60,16 @@ fun ResetCardView(
             .fillMaxSize(),
         verticalArrangement = Arrangement.Bottom,
     ) {
-
+        Box(
+            modifier = modifier,
+        ) {
+            ScreenTitle(titleRes = R.string.reset_card_to_factory_navigation_title)
+        }
+        Spacer(
+            modifier = modifier
+                .defaultMinSize(20.dp)
+                .weight(1f),
+        )
         Text(
             text = stringResource(id = R.string.common_attention),
             modifier = modifier.padding(start = 20.dp, end = 20.dp),

app/src/main/java/com/tangem/tap/features/details/ui/securitymode/SecurityModeScreen.kt

@@ -6,10 +6,12 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.selection.selectable
 import androidx.compose.material.RadioButton
+import androidx.compose.material.RadioButtonDefaults
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -45,7 +47,8 @@ fun SecurityModeOptions(
     Column(
         modifier = modifier
             .fillMaxSize()
-            .padding(bottom = 28.dp),
+            .padding(bottom = 28.dp)
+            .offset(y = (-16).dp),
         verticalArrangement = Arrangement.SpaceBetween,
     ) {
         state.availableOptions.map {
@@ -85,12 +88,16 @@ fun SecurityOption(
             .selectable(
                 selected = selected, onClick = { state.onNewModeSelected(option) },
             )
-            .padding(start = 20.dp, end = 20.dp, bottom = 32.dp),
+            .padding(start = 20.dp, end = 20.dp, top = 16.dp, bottom = 16.dp),
     ) {
 
         RadioButton(
             selected = selected, onClick = null,
             modifier = modifier.padding(end = 20.dp),
+            colors = RadioButtonDefaults.colors(
+                unselectedColor = colorResource(id = R.color.icon_secondary),
+                selectedColor = colorResource(id = R.color.icon_accent),
+            ),
         )
 
         Column {