diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/bottomsheets/modal/TangemModalBottomSheet.kt b/core/ui/src/main/java/com/tangem/core/ui/components/bottomsheets/modal/TangemModalBottomSheet.kt index ff085bffb5..dc68d70134 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/bottomsheets/modal/TangemModalBottomSheet.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/bottomsheets/modal/TangemModalBottomSheet.kt @@ -179,6 +179,7 @@ inline fun BasicModalBottomSheet( onBack = onBack, dragHandle = null, content = bsContent, + scrimColor = TangemTheme.colors.overlay.secondary, ) } else { ModalBottomSheet( @@ -190,6 +191,7 @@ inline fun BasicModalBottomSheet( contentWindowInsets = { WindowInsetsZero }, dragHandle = null, content = bsContent, + scrimColor = TangemTheme.colors.overlay.secondary, ) } } @@ -200,58 +202,62 @@ inline fun BasicModalBottomSheet( @Composable private fun TangemModalBottomSheet_Preview() { TangemThemePreview { - TangemModalBottomSheet( - config = TangemBottomSheetConfig( - isShown = true, - onDismissRequest = {}, - content = TangemBottomSheetConfigContentPreviewConfig(), - ), - title = { - TangemModalBottomSheetTitle( - endIconRes = R.drawable.ic_close_24, - onEndClick = {}, - ) - }, - content = { - Column( - modifier = Modifier.padding(start = 16.dp, end = 16.dp, bottom = 16.dp), - horizontalAlignment = Alignment.CenterHorizontally, - ) { - Icon( - modifier = Modifier - .size(56.dp) - .clip(RoundedCornerShape(100)) - .background(TangemTheme.colors.icon.informative.copy(alpha = 0.1f)) - .padding(12.dp), - painter = rememberVectorPainter( - ImageVector.vectorResource(R.drawable.ic_alert_24), - ), - tint = TangemTheme.colors.icon.informative, - contentDescription = null, + Box( + Modifier.background(TangemTheme.colors.background.tertiary), + ) { + TangemModalBottomSheet( + config = TangemBottomSheetConfig( + isShown = true, + onDismissRequest = {}, + content = TangemBottomSheetConfigContentPreviewConfig(), + ), + title = { + TangemModalBottomSheetTitle( + endIconRes = R.drawable.ic_close_24, + onEndClick = {}, ) - SpacerH24() - Text( - text = "Unsuported networks", - style = TangemTheme.typography.h3, - color = TangemTheme.colors.text.primary1, - textAlign = TextAlign.Center, - ) - SpacerH8() - Text( - text = "Tangem does not currently support a required network by React App.", - style = TangemTheme.typography.body2, - color = TangemTheme.colors.text.secondary, - textAlign = TextAlign.Center, - ) - SpacerH(48.dp) - PrimaryButton( - modifier = Modifier.fillMaxWidth(), - text = "Go it", - onClick = {}, - ) - } - }, - ) + }, + content = { + Column( + modifier = Modifier.padding(start = 16.dp, end = 16.dp, bottom = 16.dp), + horizontalAlignment = Alignment.CenterHorizontally, + ) { + Icon( + modifier = Modifier + .size(56.dp) + .clip(RoundedCornerShape(100)) + .background(TangemTheme.colors.icon.informative.copy(alpha = 0.1f)) + .padding(12.dp), + painter = rememberVectorPainter( + ImageVector.vectorResource(R.drawable.ic_alert_24), + ), + tint = TangemTheme.colors.icon.informative, + contentDescription = null, + ) + SpacerH24() + Text( + text = "Unsuported networks", + style = TangemTheme.typography.h3, + color = TangemTheme.colors.text.primary1, + textAlign = TextAlign.Center, + ) + SpacerH8() + Text( + text = "Tangem does not currently support a required network by React App.", + style = TangemTheme.typography.body2, + color = TangemTheme.colors.text.secondary, + textAlign = TextAlign.Center, + ) + SpacerH(48.dp) + PrimaryButton( + modifier = Modifier.fillMaxWidth(), + text = "Go it", + onClick = {}, + ) + } + }, + ) + } } } diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/bottomsheets/modal/TangemModalBottomSheetWithFooter.kt b/core/ui/src/main/java/com/tangem/core/ui/components/bottomsheets/modal/TangemModalBottomSheetWithFooter.kt index 643453a4bc..9964ac424d 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/bottomsheets/modal/TangemModalBottomSheetWithFooter.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/bottomsheets/modal/TangemModalBottomSheetWithFooter.kt @@ -235,6 +235,7 @@ inline fun BasicModalBottomSheetWit onBack = onBack, dragHandle = null, content = bsContent, + scrimColor = TangemTheme.colors.overlay.secondary, ) } else { ModalBottomSheet( @@ -246,6 +247,7 @@ inline fun BasicModalBottomSheetWit contentWindowInsets = { WindowInsetsZero }, dragHandle = null, content = bsContent, + scrimColor = TangemTheme.colors.overlay.secondary, ) } } diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/bottomsheets/sheet/TangemBottomSheet.kt b/core/ui/src/main/java/com/tangem/core/ui/components/bottomsheets/sheet/TangemBottomSheet.kt index 177cd551ad..1ecce16ab7 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/bottomsheets/sheet/TangemBottomSheet.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/bottomsheets/sheet/TangemBottomSheet.kt @@ -192,6 +192,7 @@ inline fun BasicBottomSheet( dragHandle = { TangemBottomSheetDraggableHeader(color = containerColor) }, onBack = onBack, content = bsContent, + scrimColor = TangemTheme.colors.overlay.secondary, ) } else { ModalBottomSheet( @@ -203,6 +204,7 @@ inline fun BasicBottomSheet( contentWindowInsets = { WindowInsetsZero }, dragHandle = { TangemBottomSheetDraggableHeader(color = containerColor) }, content = bsContent, + scrimColor = TangemTheme.colors.overlay.secondary, ) } } \ No newline at end of file diff --git a/core/ui/src/main/java/com/tangem/core/ui/res/TangemColors.kt b/core/ui/src/main/java/com/tangem/core/ui/res/TangemColors.kt index 2a78787608..12f15c13b5 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/res/TangemColors.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/res/TangemColors.kt @@ -16,6 +16,7 @@ class TangemColors internal constructor( control: Control, stroke: Stroke, field: Field, + overlay: Overlay, ) { var text by mutableStateOf(text) private set @@ -31,6 +32,7 @@ class TangemColors internal constructor( private set var field by mutableStateOf(field) private set + var overlay by mutableStateOf(overlay) @Stable class Text internal constructor( @@ -220,6 +222,22 @@ class TangemColors internal constructor( } } + @Stable + class Overlay internal constructor( + primary: Color, + secondary: Color, + ) { + var primary by mutableStateOf(primary) + private set + var secondary by mutableStateOf(secondary) + private set + + fun update(other: Overlay) { + primary = other.primary + secondary = other.secondary + } + } + fun update(other: TangemColors) { text.update(other.text) icon.update(other.icon) @@ -228,5 +246,6 @@ class TangemColors internal constructor( control.update(other.control) stroke.update(other.stroke) field.update(other.field) + overlay.update(other.overlay) } } \ No newline at end of file diff --git a/core/ui/src/main/java/com/tangem/core/ui/res/TangemTheme.kt b/core/ui/src/main/java/com/tangem/core/ui/res/TangemTheme.kt index bc5f89a78c..696d1619ee 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/res/TangemTheme.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/res/TangemTheme.kt @@ -238,6 +238,10 @@ private fun lightThemeColors(): TangemColors { primary = TangemColorPalette.Light1, focused = TangemColorPalette.Light2, ), + overlay = TangemColors.Overlay( + primary = TangemColorPalette.Black.copy(alpha = 0.4f), + secondary = TangemColorPalette.Black.copy(alpha = 0.7f), + ), ) } @@ -288,6 +292,10 @@ private fun darkThemeColors(): TangemColors { primary = TangemColorPalette.Dark5, focused = TangemColorPalette.Dark4, ), + overlay = TangemColors.Overlay( + primary = TangemColorPalette.Black.copy(alpha = 0.4f), + secondary = TangemColorPalette.Black.copy(alpha = 0.7f), + ), ) }