diff --git a/app/src/main/java/com/tangem/tap/features/details/ui/common/DetailsComposeElements.kt b/app/src/main/java/com/tangem/tap/features/details/ui/common/DetailsComposeElements.kt index 4c5cd02e86..d8e6bf1b11 100644 --- a/app/src/main/java/com/tangem/tap/features/details/ui/common/DetailsComposeElements.kt +++ b/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, ) } diff --git a/app/src/main/java/com/tangem/tap/features/details/ui/details/DetailsScreen.kt b/app/src/main/java/com/tangem/tap/features/details/ui/details/DetailsScreen.kt index 8d256d2c8b..24129ec514 100644 --- a/app/src/main/java/com/tangem/tap/features/details/ui/details/DetailsScreen.kt +++ b/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), ) } } diff --git a/app/src/main/java/com/tangem/tap/features/details/ui/resetcard/ResetCardScreen.kt b/app/src/main/java/com/tangem/tap/features/details/ui/resetcard/ResetCardScreen.kt index 1b8fec5cdb..2c07b092ad 100644 --- a/app/src/main/java/com/tangem/tap/features/details/ui/resetcard/ResetCardScreen.kt +++ b/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), diff --git a/app/src/main/java/com/tangem/tap/features/details/ui/securitymode/SecurityModeScreen.kt b/app/src/main/java/com/tangem/tap/features/details/ui/securitymode/SecurityModeScreen.kt index 1f8692b350..e18146767f 100644 --- a/app/src/main/java/com/tangem/tap/features/details/ui/securitymode/SecurityModeScreen.kt +++ b/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 {