From 3669fb50bb9c1e21b988823b473496215b8b157c Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Wed, 26 Jun 2024 13:22:15 +0300 Subject: [PATCH 01/42] Typography --- .../sdk/ui/core/theme/Typography.kt | 101 ++++++++---------- 1 file changed, 42 insertions(+), 59 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt index 7df8e61a5..87863aa99 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt @@ -1,20 +1,12 @@ package com.processout.sdk.ui.core.theme -import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.padding -import androidx.compose.material3.Text -import androidx.compose.runtime.Composable import androidx.compose.runtime.Immutable import androidx.compose.runtime.staticCompositionLocalOf -import androidx.compose.ui.Modifier import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.Font import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.font.FontStyle import androidx.compose.ui.text.font.FontWeight -import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import com.processout.sdk.ui.core.R import com.processout.sdk.ui.core.annotation.ProcessOutInternalApi @@ -30,6 +22,48 @@ private val WorkSans = FontFamily( @ProcessOutInternalApi @Immutable data class POTypography( + val title: TextStyle = TextStyle( + fontFamily = WorkSans, + fontWeight = FontWeight.Medium, + fontSize = 20.sp, + lineHeight = 24.sp + ), + val subheading: TextStyle = TextStyle( + fontFamily = WorkSans, + fontWeight = FontWeight.Medium, + fontSize = 18.sp, + lineHeight = 24.sp + ), + val body1: TextStyle = TextStyle( + fontFamily = WorkSans, + fontWeight = FontWeight.Medium, + fontSize = 16.sp, + lineHeight = 24.sp + ), + val body2: TextStyle = TextStyle( + fontFamily = WorkSans, + fontWeight = FontWeight.Normal, + fontSize = 14.sp, + lineHeight = 18.sp + ), + val button: TextStyle = TextStyle( + fontFamily = WorkSans, + fontWeight = FontWeight.Medium, + fontSize = 14.sp, + lineHeight = 18.sp + ), + val label1: TextStyle = TextStyle( + fontFamily = WorkSans, + fontWeight = FontWeight.Medium, + fontSize = 14.sp, + lineHeight = 18.sp + ), + val label2: TextStyle = TextStyle( + fontFamily = WorkSans, + fontWeight = FontWeight.Normal, + fontSize = 14.sp, + lineHeight = 18.sp + ), val fixed: Fixed = Fixed(), val medium: Medium = Medium() ) { @@ -58,12 +92,6 @@ data class POTypography( fontWeight = FontWeight.Medium, fontSize = 14.sp, lineHeight = 14.sp - ), - val caption: TextStyle = TextStyle( - fontFamily = WorkSans, - fontWeight = FontWeight.Normal, - fontSize = 12.sp, - lineHeight = 16.sp ) ) @@ -75,12 +103,6 @@ data class POTypography( fontSize = 20.sp, lineHeight = 28.sp ), - val subtitle: TextStyle = TextStyle( - fontFamily = WorkSans, - fontWeight = FontWeight.Medium, - fontSize = 18.sp, - lineHeight = 24.sp - ), val body: TextStyle = TextStyle( fontFamily = WorkSans, fontWeight = FontWeight.Medium, @@ -112,42 +134,3 @@ private fun POTextType.Weight.toFontWeight(): FontWeight = EXTRA_BOLD -> FontWeight.ExtraBold BLACK -> FontWeight.Black } - -@Composable -@Preview(showBackground = true) -private fun POTypographyPreview() { - Column( - modifier = Modifier - .fillMaxWidth() - .padding(16.dp) - ) { - Text( - text = "Typography Medium Title", - style = LocalPOTypography.current.medium.title - ) - Text( - text = "Typography Medium Subtitle", - style = LocalPOTypography.current.medium.subtitle - ) - Text( - text = "Typography Fixed Body", - style = LocalPOTypography.current.fixed.body - ) - Text( - text = "Typography Fixed Label", - style = LocalPOTypography.current.fixed.label - ) - Text( - text = "Typography Fixed Label Heading", - style = LocalPOTypography.current.fixed.labelHeading - ) - Text( - text = "Typography Fixed Button", - style = LocalPOTypography.current.fixed.button - ) - Text( - text = "Typography Fixed Caption", - style = LocalPOTypography.current.fixed.caption - ) - } -} From b9b8760b5c1dd5d40b480740680c5082387c5262 Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Wed, 26 Jun 2024 13:26:34 +0300 Subject: [PATCH 02/42] title --- .../kotlin/com/processout/sdk/ui/core/component/POText.kt | 2 +- .../sdk/ui/core/component/field/code/POCodeField.kt | 4 ++-- .../kotlin/com/processout/sdk/ui/core/theme/Typography.kt | 6 ------ 3 files changed, 3 insertions(+), 9 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POText.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POText.kt index 48f8fe4e5..15090b5eb 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POText.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POText.kt @@ -59,7 +59,7 @@ object POText { val title: Style @Composable get() = Style( color = ProcessOutTheme.colors.text.primary, - textStyle = ProcessOutTheme.typography.medium.title + textStyle = ProcessOutTheme.typography.title ) val body: Style diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/code/POCodeField.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/code/POCodeField.kt index baec6b103..725ff2d0d 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/code/POCodeField.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/code/POCodeField.kt @@ -217,12 +217,12 @@ object POCodeField { copy( normal = normal.copy( text = normal.text.copy( - textStyle = ProcessOutTheme.typography.medium.title + textStyle = ProcessOutTheme.typography.title ) ), error = error.copy( text = error.text.copy( - textStyle = ProcessOutTheme.typography.medium.title + textStyle = ProcessOutTheme.typography.title ) ) ) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt index 87863aa99..10b0f6f59 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt @@ -97,12 +97,6 @@ data class POTypography( @Immutable data class Medium( - val title: TextStyle = TextStyle( - fontFamily = WorkSans, - fontWeight = FontWeight.Medium, - fontSize = 20.sp, - lineHeight = 28.sp - ), val body: TextStyle = TextStyle( fontFamily = WorkSans, fontWeight = FontWeight.Medium, From 49e66e1ef6c446425ea72e93c30f33b97fb98684 Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Wed, 26 Jun 2024 13:31:07 +0300 Subject: [PATCH 03/42] body1 --- .../processout/sdk/ui/core/component/POButton.kt | 4 ++-- .../com/processout/sdk/ui/core/theme/Typography.kt | 13 +------------ 2 files changed, 3 insertions(+), 14 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt index 0ba945d98..38f8b69b6 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt @@ -179,7 +179,7 @@ object POButton { normal = StateStyle( text = POText.Style( color = colors.action.primaryDefault, - textStyle = typography.medium.body + textStyle = typography.body1 ), shape = shapes.roundedCornersSmall, border = POBorderStroke(width = 0.dp, color = Color.Transparent), @@ -190,7 +190,7 @@ object POButton { disabled = StateStyle( text = POText.Style( color = colors.text.disabled, - textStyle = typography.medium.body + textStyle = typography.body1 ), shape = shapes.roundedCornersSmall, border = POBorderStroke(width = 0.dp, color = Color.Transparent), diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt index 10b0f6f59..34f0b8017 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt @@ -64,8 +64,7 @@ data class POTypography( fontSize = 14.sp, lineHeight = 18.sp ), - val fixed: Fixed = Fixed(), - val medium: Medium = Medium() + val fixed: Fixed = Fixed() ) { @Immutable data class Fixed( @@ -94,16 +93,6 @@ data class POTypography( lineHeight = 14.sp ) ) - - @Immutable - data class Medium( - val body: TextStyle = TextStyle( - fontFamily = WorkSans, - fontWeight = FontWeight.Medium, - fontSize = 16.sp, - lineHeight = 24.sp - ) - ) } internal val LocalPOTypography = staticCompositionLocalOf { POTypography() } From d48a3b0a2f278da294511b1f38fdbf5461798e4c Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Wed, 26 Jun 2024 13:33:53 +0300 Subject: [PATCH 04/42] button --- .../com/processout/sdk/ui/core/component/POButton.kt | 8 ++++---- .../kotlin/com/processout/sdk/ui/core/theme/Typography.kt | 6 ------ 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt index 38f8b69b6..e4c807de4 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt @@ -115,7 +115,7 @@ object POButton { normal = StateStyle( text = POText.Style( color = colors.text.onColor, - textStyle = typography.fixed.button + textStyle = typography.button ), shape = shapes.roundedCornersSmall, border = POBorderStroke(width = 0.dp, color = Color.Transparent), @@ -125,7 +125,7 @@ object POButton { disabled = StateStyle( text = POText.Style( color = colors.text.disabled, - textStyle = typography.fixed.button + textStyle = typography.button ), shape = shapes.roundedCornersSmall, border = POBorderStroke(width = 0.dp, color = Color.Transparent), @@ -147,7 +147,7 @@ object POButton { normal = StateStyle( text = POText.Style( color = colors.text.secondary, - textStyle = typography.fixed.button + textStyle = typography.button ), shape = shapes.roundedCornersSmall, border = POBorderStroke(width = 1.dp, color = colors.border.default), @@ -157,7 +157,7 @@ object POButton { disabled = StateStyle( text = POText.Style( color = colors.text.disabled, - textStyle = typography.fixed.button + textStyle = typography.button ), shape = shapes.roundedCornersSmall, border = POBorderStroke(width = 1.dp, color = colors.border.disabled), diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt index 34f0b8017..ad3883f34 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt @@ -85,12 +85,6 @@ data class POTypography( fontWeight = FontWeight.Medium, fontSize = 14.sp, lineHeight = 18.sp - ), - val button: TextStyle = TextStyle( - fontFamily = WorkSans, - fontWeight = FontWeight.Medium, - fontSize = 14.sp, - lineHeight = 14.sp ) ) } From a8b30f9c2043cbcbb7c0488f6162873ac3775f4e Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Wed, 26 Jun 2024 13:38:48 +0300 Subject: [PATCH 05/42] label1 --- .../kotlin/com/processout/sdk/ui/core/component/POText.kt | 4 ++-- .../processout/sdk/ui/core/component/field/POFieldLabels.kt | 2 +- .../kotlin/com/processout/sdk/ui/core/theme/Typography.kt | 6 ------ .../sdk/ui/card/tokenization/CardTokenizationScreen.kt | 2 +- .../sdk/ui/napm/NativeAlternativePaymentScreen.kt | 2 +- 5 files changed, 5 insertions(+), 11 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POText.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POText.kt index 15090b5eb..2c3c0ce00 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POText.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POText.kt @@ -68,10 +68,10 @@ object POText { textStyle = ProcessOutTheme.typography.fixed.body ) - val labelHeading: Style + val label1: Style @Composable get() = Style( color = ProcessOutTheme.colors.text.secondary, - textStyle = ProcessOutTheme.typography.fixed.labelHeading + textStyle = ProcessOutTheme.typography.label1 ) val errorLabel: Style diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POFieldLabels.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POFieldLabels.kt index 66d95d2cc..18e4955b3 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POFieldLabels.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POFieldLabels.kt @@ -17,7 +17,7 @@ object POFieldLabels { val default: Style @Composable get() = Style( - title = POText.labelHeading, + title = POText.label1, description = POText.errorLabel ) } diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt index ad3883f34..19d1e8e52 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt @@ -79,12 +79,6 @@ data class POTypography( fontWeight = FontWeight.Normal, fontSize = 14.sp, lineHeight = 18.sp - ), - val labelHeading: TextStyle = TextStyle( - fontFamily = WorkSans, - fontWeight = FontWeight.Medium, - fontSize = 14.sp, - lineHeight = 18.sp ) ) } diff --git a/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt b/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt index bf51d4666..18211b30e 100644 --- a/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt +++ b/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt @@ -304,7 +304,7 @@ internal object CardTokenizationScreen { } ?: POText.title, sectionTitle = custom?.sectionTitle?.let { POText.custom(style = it) - } ?: POText.labelHeading, + } ?: POText.label1, field = custom?.field?.let { POField.custom(style = it) } ?: POField.default, diff --git a/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt b/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt index cc79bb0f4..a27187a3d 100644 --- a/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt +++ b/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt @@ -600,7 +600,7 @@ internal object NativeAlternativePaymentScreen { } ?: POText.title, label = custom?.label?.let { POText.custom(style = it) - } ?: POText.labelHeading, + } ?: POText.label1, field = custom?.field?.let { POField.custom(style = it) } ?: POField.default, From 81b4f56d64095b1f091f847bc28511ede25b9ea0 Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Wed, 26 Jun 2024 13:48:15 +0300 Subject: [PATCH 06/42] label2 --- .../kotlin/com/processout/sdk/ui/core/component/POText.kt | 2 +- .../com/processout/sdk/ui/core/component/field/POField.kt | 4 ++-- .../sdk/ui/core/component/field/dropdown/PODropdownField.kt | 2 +- .../sdk/ui/core/component/field/radio/PORadioGroup.kt | 6 +++--- .../kotlin/com/processout/sdk/ui/core/theme/Typography.kt | 6 ------ 5 files changed, 7 insertions(+), 13 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POText.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POText.kt index 2c3c0ce00..7c9d82a27 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POText.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POText.kt @@ -77,7 +77,7 @@ object POText { val errorLabel: Style @Composable get() = Style( color = ProcessOutTheme.colors.text.error, - textStyle = ProcessOutTheme.typography.fixed.label + textStyle = ProcessOutTheme.typography.label2 ) @Composable diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt index 06ec139f3..1850081d4 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt @@ -62,7 +62,7 @@ object POField { normal = StateStyle( text = POText.Style( color = colors.text.primary, - textStyle = typography.fixed.label + textStyle = typography.label2 ), placeholderTextColor = colors.text.muted, backgroundColor = colors.surface.background, @@ -74,7 +74,7 @@ object POField { error = StateStyle( text = POText.Style( color = colors.text.primary, - textStyle = typography.fixed.label + textStyle = typography.label2 ), placeholderTextColor = colors.text.muted, backgroundColor = colors.surface.background, diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/dropdown/PODropdownField.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/dropdown/PODropdownField.kt index 20c579758..ddcfcd1e3 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/dropdown/PODropdownField.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/dropdown/PODropdownField.kt @@ -160,7 +160,7 @@ object PODropdownField { MenuStyle( text = POText.Style( color = colors.text.primary, - textStyle = typography.fixed.label + textStyle = typography.label2 ), backgroundColor = colors.surface.neutral, rippleColor = colors.text.muted, diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt index 6b86b4196..eba5375b5 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt @@ -103,21 +103,21 @@ object PORadioGroup { buttonColor = colors.border.default, text = POText.Style( color = colors.text.primary, - textStyle = typography.fixed.label + textStyle = typography.label2 ) ), selected = StateStyle( buttonColor = colors.action.primaryDefault, text = POText.Style( color = colors.text.primary, - textStyle = typography.fixed.label + textStyle = typography.label2 ) ), error = StateStyle( buttonColor = colors.text.error, text = POText.Style( color = colors.text.primary, - textStyle = typography.fixed.label + textStyle = typography.label2 ) ) ) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt index 19d1e8e52..020780348 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt @@ -73,12 +73,6 @@ data class POTypography( fontWeight = FontWeight.Normal, fontSize = 16.sp, lineHeight = 24.sp - ), - val label: TextStyle = TextStyle( - fontFamily = WorkSans, - fontWeight = FontWeight.Normal, - fontSize = 14.sp, - lineHeight = 18.sp ) ) } From e772b72707111c13ea1934589636e652ac7103fe Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Wed, 26 Jun 2024 14:00:39 +0300 Subject: [PATCH 07/42] body2 --- .../com/processout/sdk/ui/core/component/POText.kt | 4 ++-- .../processout/sdk/ui/core/theme/ProcessOutTheme.kt | 2 +- .../com/processout/sdk/ui/core/theme/Typography.kt | 13 +------------ .../sdk/ui/napm/NativeAlternativePaymentScreen.kt | 2 +- .../sdk/ui/shared/component/TextAndroidView.kt | 2 +- 5 files changed, 6 insertions(+), 17 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POText.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POText.kt index 7c9d82a27..91d765954 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POText.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POText.kt @@ -24,7 +24,7 @@ fun POText( text: String, modifier: Modifier = Modifier, color: Color = Color.Unspecified, - style: TextStyle = ProcessOutTheme.typography.fixed.body, + style: TextStyle = ProcessOutTheme.typography.body2, fontStyle: FontStyle? = null, textAlign: TextAlign? = null, onTextLayout: (TextLayoutResult) -> Unit = {}, @@ -65,7 +65,7 @@ object POText { val body: Style @Composable get() = Style( color = ProcessOutTheme.colors.text.primary, - textStyle = ProcessOutTheme.typography.fixed.body + textStyle = ProcessOutTheme.typography.body2 ) val label1: Style diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/ProcessOutTheme.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/ProcessOutTheme.kt index 03278c4ac..968abe7e5 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/ProcessOutTheme.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/ProcessOutTheme.kt @@ -23,7 +23,7 @@ fun ProcessOutTheme( LocalPODimensions provides ProcessOutTheme.dimensions ) { ProvideTextStyle( - value = ProcessOutTheme.typography.fixed.body, + value = ProcessOutTheme.typography.body2, content = content ) } diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt index 020780348..3544a153e 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Typography.kt @@ -63,19 +63,8 @@ data class POTypography( fontWeight = FontWeight.Normal, fontSize = 14.sp, lineHeight = 18.sp - ), - val fixed: Fixed = Fixed() -) { - @Immutable - data class Fixed( - val body: TextStyle = TextStyle( - fontFamily = WorkSans, - fontWeight = FontWeight.Normal, - fontSize = 16.sp, - lineHeight = 24.sp - ) ) -} +) internal val LocalPOTypography = staticCompositionLocalOf { POTypography() } diff --git a/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt b/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt index a27187a3d..d69c79888 100644 --- a/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt +++ b/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt @@ -639,7 +639,7 @@ internal object NativeAlternativePaymentScreen { POText.custom(style = it) } ?: POText.Style( color = colors.text.success, - textStyle = typography.fixed.body + textStyle = typography.body2 ), successImageResId = custom?.successImageResId ?: R.drawable.po_success_image, progressIndicatorColor = custom?.progressIndicatorColorResId?.let { diff --git a/ui/src/main/kotlin/com/processout/sdk/ui/shared/component/TextAndroidView.kt b/ui/src/main/kotlin/com/processout/sdk/ui/shared/component/TextAndroidView.kt index 335fb0be6..23a28f77f 100644 --- a/ui/src/main/kotlin/com/processout/sdk/ui/shared/component/TextAndroidView.kt +++ b/ui/src/main/kotlin/com/processout/sdk/ui/shared/component/TextAndroidView.kt @@ -81,7 +81,7 @@ internal object TextAndroidView { val default: Style @Composable get() = with(ProcessOutTheme) { Style( - type = with(typography.fixed.body) { + type = with(typography.body2) { POTextType( textSizeSp = fontSize.value.toInt(), lineHeightSp = lineHeight.value.toInt(), From 9766e017d85bca280b0587daa89303fabd87b47d Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Wed, 26 Jun 2024 14:23:51 +0300 Subject: [PATCH 08/42] roundedCornersSmall = 4.dp --- .../src/main/kotlin/com/processout/sdk/ui/core/theme/Shapes.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Shapes.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Shapes.kt index a96f7091d..26f376f28 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Shapes.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Shapes.kt @@ -11,7 +11,7 @@ import com.processout.sdk.ui.core.annotation.ProcessOutInternalApi @ProcessOutInternalApi @Immutable data class POShapes( - val roundedCornersSmall: CornerBasedShape = RoundedCornerShape(8.dp), + val roundedCornersSmall: CornerBasedShape = RoundedCornerShape(4.dp), val roundedCornersLarge: CornerBasedShape = RoundedCornerShape(16.dp), val topRoundedCornersLarge: CornerBasedShape = RoundedCornerShape( topStart = 16.dp, topEnd = 16.dp From 6bd41e82341ed6d880f874dbd3c97d7086dbc11d Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Wed, 26 Jun 2024 18:36:00 +0300 Subject: [PATCH 09/42] Light/Dark colors palette --- .../processout/sdk/ui/core/theme/Colors.kt | 127 ++++++++++-------- .../processout/sdk/ui/core/theme/Colors2.kt | 64 +++++++++ 2 files changed, 132 insertions(+), 59 deletions(-) create mode 100644 ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors2.kt diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt index 8c9e77000..53a055456 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt @@ -4,6 +4,7 @@ import androidx.compose.runtime.Immutable import androidx.compose.runtime.staticCompositionLocalOf import androidx.compose.ui.graphics.Color import com.processout.sdk.ui.core.annotation.ProcessOutInternalApi +import com.processout.sdk.ui.core.theme.POColors2.* /** @suppress */ @ProcessOutInternalApi @@ -50,81 +51,89 @@ data class POColors( data class Border( val default: Color, val disabled: Color, - val selected: Color, - val subtle: Color, - val divider: Color + val subtle: Color ) } -internal val LightColorPalette = POColors( - text = POColors.Text( - primary = Color(0xFF121212), - secondary = Color(0xFF313135), - tertiary = Color(0xFF4E4E55), - muted = Color(0xFF67676F), - disabled = Color(0xFF8D8D95), - onColor = Color(0xFFFCFCFC), - success = Color(0xFF014B21), - warning = Color(0xFF742702), - error = Color(0xFF7B0F17) +internal val LightColorPalette = POColors2( + text = Text( + primary = Color(0xFF121821), + inverse = Color(0xFFFAFAFA), + muted = Color(0xFF5B6576), + disabled = Color(0xFFADB5BD), + success = Color(0xFF00291D), + error = Color(0xFFD11D2F) ), - action = POColors.Action( - primaryDefault = Color(0xFF2B2A93), - primaryPressed = Color(0xFF1E1E76), - primaryDisabled = Color(0xFFE5E5E7), - secondaryDefault = Color(0xFFFFFFFF), - secondaryPressed = Color(0xFFE5E5E7) + input = Input( + backgroundDefault = Color(0xFFFFFFFF), + backgroundDisabled = Color(0xFFEDEEEF), + borderDefault = Color(0xFF7C8593), + borderDisabled = Color(0xFFADB5BD), + borderFocused = Color(0xFF4791FF), + borderError = Color(0xFFD11D2F) ), - surface = POColors.Surface( - background = Color(0xFFFFFFFF), - level1 = Color(0xFFFCFCFD), - neutral = Color(0xFFF7F7F8), - success = Color(0xFFD8F8E5), - warning = Color(0xFFFDEBE3), - error = Color(0xFFFAD1D4) + button = Button( + primaryBackgroundDefault = Color(0xFF121821), + primaryBackgroundPressed = Color(0xFF242C38), + primaryBackgroundDisabled = Color(0xFFEDEEEF), + secondaryBackgroundDefault = Color(0xFFFFFFFF), + secondaryBackgroundPressed = Color(0xFFCCD1D6), + secondaryBackgroundDisabled = Color(0xFFFFFFFF), + secondaryBorderDefault = Color(0xFF121821), + secondaryBorderPressed = Color(0xFF242C38), + secondaryBorderDisabled = Color(0xFFEDEEEF) ), - border = POColors.Border( + surface = Surface( + default = Color(0xFFFFFFFF), + neutral = Color(0xFFFAFAFA), + success = Color(0xFFBEFAE9), + error = Color(0xFFFFC2C8) + ), + border = Border( default = Color(0xFF8D8D95), disabled = Color(0xFFC4C4C8), - selected = Color(0xFF4E4E55), - subtle = Color(0xFFE5E5E7), - divider = Color(0xFFF2F2F3) + subtle = Color(0xFFDDE0E3) ) ) -internal val DarkColorPalette = POColors( - text = POColors.Text( - primary = Color(0xFFF8F8FB), - secondary = Color(0xFFD4D4DD), - tertiary = Color(0xFFBABAC5), - muted = Color(0xFF747581), - disabled = Color(0xFF4D4F5B), - onColor = Color(0xFFF8F8FB), - success = Color(0xFFD8F8E5), - warning = Color(0xFFFDEBE3), - error = Color(0xFFFBE9EB) +internal val DarkColorPalette = POColors2( + text = Text( + primary = Color(0xFFFAFAFA), + inverse = Color(0xFF121821), + muted = Color(0xFFADB5BD), + disabled = Color(0xFF5B6576), + success = Color(0xFFE5FFF8), + error = Color(0xFFFF5263) + ), + input = Input( + backgroundDefault = Color(0xFF121821), + backgroundDisabled = Color(0xFF242C38), + borderDefault = Color(0xFFCCD1D6), + borderDisabled = Color(0xFF7C8593), + borderFocused = Color(0xFFFFE500), + borderError = Color(0xFFFF5263) ), - action = POColors.Action( - primaryDefault = Color(0xFF6A64D8), - primaryPressed = Color(0xFF4D49C5), - primaryDisabled = Color(0xFF2B2D3A), - secondaryDefault = Color(0xFF121421), - secondaryPressed = Color(0xFF181A2A) + button = Button( + primaryBackgroundDefault = Color(0xFFFFFFFF), + primaryBackgroundPressed = Color(0xFFCCD1D6), + primaryBackgroundDisabled = Color(0xFF242C38), + secondaryBackgroundDefault = Color(0xFF121821), + secondaryBackgroundPressed = Color(0xFF7C8593), + secondaryBackgroundDisabled = Color(0xFF121821), + secondaryBorderDefault = Color(0xFFFFFFFF), + secondaryBorderPressed = Color(0xFFCCD1D6), + secondaryBorderDisabled = Color(0xFF242C38) ), - surface = POColors.Surface( - background = Color(0xFF121421), - level1 = Color(0xFF111322), - neutral = Color(0xFF181A2A), - success = Color(0xFF014B21), - warning = Color(0xFFA23807), - error = Color(0xFFC0212B) + surface = Surface( + default = Color(0xFF121821), + neutral = Color(0xFF242C38), + success = Color(0xFFBEFAE9), + error = Color(0xFFFFC2C8) ), - border = POColors.Border( + border = Border( default = Color(0xFF93949F), disabled = Color(0xFF363945), - selected = Color(0xFFBABAC5), - subtle = Color(0xFF2B2D3A), - divider = Color(0xFF212431) + subtle = Color(0xFF5B6576) ) ) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors2.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors2.kt new file mode 100644 index 000000000..8f19ed3f3 --- /dev/null +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors2.kt @@ -0,0 +1,64 @@ +package com.processout.sdk.ui.core.theme + +import androidx.compose.runtime.Immutable +import androidx.compose.ui.graphics.Color +import com.processout.sdk.ui.core.annotation.ProcessOutInternalApi + +/** @suppress */ +@ProcessOutInternalApi +@Immutable +data class POColors2( + val text: Text, + val input: Input, + val button: Button, + val surface: Surface, + val border: Border +) { + @Immutable + data class Text( + val primary: Color, + val inverse: Color, + val muted: Color, + val disabled: Color, + val success: Color, + val error: Color + ) + + @Immutable + data class Input( + val backgroundDefault: Color, + val backgroundDisabled: Color, + val borderDefault: Color, + val borderDisabled: Color, + val borderFocused: Color, + val borderError: Color + ) + + @Immutable + data class Button( + val primaryBackgroundDefault: Color, + val primaryBackgroundPressed: Color, + val primaryBackgroundDisabled: Color, + val secondaryBackgroundDefault: Color, + val secondaryBackgroundPressed: Color, + val secondaryBackgroundDisabled: Color, + val secondaryBorderDefault: Color, + val secondaryBorderPressed: Color, + val secondaryBorderDisabled: Color + ) + + @Immutable + data class Surface( + val default: Color, + val neutral: Color, + val success: Color, + val error: Color + ) + + @Immutable + data class Border( + val default: Color, + val disabled: Color, + val subtle: Color + ) +} From 217b6b19a899369fa41764e0311b59b89cb90bcd Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Wed, 26 Jun 2024 18:41:35 +0300 Subject: [PATCH 10/42] Remove unused colors --- .../main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt index 53a055456..6f919b598 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt @@ -24,7 +24,6 @@ data class POColors( val disabled: Color, val onColor: Color, val success: Color, - val warning: Color, val error: Color ) @@ -42,9 +41,7 @@ data class POColors( val background: Color, val level1: Color, val neutral: Color, - val success: Color, - val warning: Color, - val error: Color + val success: Color ) @Immutable From f36db737053e4aabcfbbb7ff42d997267c12af4c Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Wed, 26 Jun 2024 18:50:56 +0300 Subject: [PATCH 11/42] Surface --- .../processout/sdk/ui/core/component/POActionsContainer.kt | 2 +- .../kotlin/com/processout/sdk/ui/core/component/PODialog.kt | 2 +- .../com/processout/sdk/ui/core/component/field/POField.kt | 4 ++-- .../main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt | 6 +++--- .../sdk/ui/card/tokenization/CardTokenizationScreen.kt | 2 +- .../com/processout/sdk/ui/card/update/CardUpdateScreen.kt | 2 +- .../com/processout/sdk/ui/checkout/DynamicCheckoutScreen.kt | 2 +- .../sdk/ui/napm/NativeAlternativePaymentScreen.kt | 2 +- 8 files changed, 11 insertions(+), 11 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POActionsContainer.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POActionsContainer.kt index b22cd756f..5f7775451 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POActionsContainer.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POActionsContainer.kt @@ -155,7 +155,7 @@ object POActionsContainer { primary = POButton.primary, secondary = POButton.secondary, dividerColor = colors.border.subtle, - backgroundColor = colors.surface.level1, + backgroundColor = colors.surface.default, axis = POAxis.Vertical ) } diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/PODialog.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/PODialog.kt index 723ff56cc..93125dc98 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/PODialog.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/PODialog.kt @@ -123,7 +123,7 @@ object PODialog { message = POText.body, confirmButton = POButton.tertiary, dismissButton = POButton.tertiary, - backgroundColor = ProcessOutTheme.colors.surface.level1 + backgroundColor = ProcessOutTheme.colors.surface.default ) @Composable diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt index 1850081d4..2a10be43a 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt @@ -65,7 +65,7 @@ object POField { textStyle = typography.label2 ), placeholderTextColor = colors.text.muted, - backgroundColor = colors.surface.background, + backgroundColor = colors.surface.default, controlsTintColor = colors.text.primary, dropdownRippleColor = colors.text.tertiary, shape = shapes.roundedCornersSmall, @@ -77,7 +77,7 @@ object POField { textStyle = typography.label2 ), placeholderTextColor = colors.text.muted, - backgroundColor = colors.surface.background, + backgroundColor = colors.surface.default, controlsTintColor = colors.text.error, dropdownRippleColor = colors.text.tertiary, shape = shapes.roundedCornersSmall, diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt index 6f919b598..9b8910a63 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt @@ -38,10 +38,10 @@ data class POColors( @Immutable data class Surface( - val background: Color, - val level1: Color, + val default: Color, val neutral: Color, - val success: Color + val success: Color, + val error: Color ) @Immutable diff --git a/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt b/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt index 18211b30e..30f335d3e 100644 --- a/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt +++ b/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt @@ -319,7 +319,7 @@ internal object CardTokenizationScreen { } ?: POActionsContainer.default, backgroundColor = custom?.backgroundColorResId?.let { colorResource(id = it) - } ?: ProcessOutTheme.colors.surface.level1, + } ?: ProcessOutTheme.colors.surface.default, dividerColor = custom?.dividerColorResId?.let { colorResource(id = it) } ?: ProcessOutTheme.colors.border.subtle, diff --git a/ui/src/main/kotlin/com/processout/sdk/ui/card/update/CardUpdateScreen.kt b/ui/src/main/kotlin/com/processout/sdk/ui/card/update/CardUpdateScreen.kt index 8a7238346..a3cc98e10 100644 --- a/ui/src/main/kotlin/com/processout/sdk/ui/card/update/CardUpdateScreen.kt +++ b/ui/src/main/kotlin/com/processout/sdk/ui/card/update/CardUpdateScreen.kt @@ -200,7 +200,7 @@ internal object CardUpdateScreen { } ?: POActionsContainer.default, backgroundColor = custom?.backgroundColorResId?.let { colorResource(id = it) - } ?: ProcessOutTheme.colors.surface.level1, + } ?: ProcessOutTheme.colors.surface.default, dividerColor = custom?.dividerColorResId?.let { colorResource(id = it) } ?: ProcessOutTheme.colors.border.subtle, diff --git a/ui/src/main/kotlin/com/processout/sdk/ui/checkout/DynamicCheckoutScreen.kt b/ui/src/main/kotlin/com/processout/sdk/ui/checkout/DynamicCheckoutScreen.kt index 02ae01234..30917c342 100644 --- a/ui/src/main/kotlin/com/processout/sdk/ui/checkout/DynamicCheckoutScreen.kt +++ b/ui/src/main/kotlin/com/processout/sdk/ui/checkout/DynamicCheckoutScreen.kt @@ -18,7 +18,7 @@ internal fun DynamicCheckoutScreen() { Spacer(Modifier.windowInsetsTopHeight(WindowInsets.systemBars)) Scaffold( modifier = Modifier.clip(shape = ProcessOutTheme.shapes.topRoundedCornersLarge), - containerColor = ProcessOutTheme.colors.surface.level1, + containerColor = ProcessOutTheme.colors.surface.default, topBar = { Header() }, bottomBar = { Footer() } ) { scaffoldPadding -> diff --git a/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt b/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt index d69c79888..a9582919a 100644 --- a/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt +++ b/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt @@ -621,7 +621,7 @@ internal object NativeAlternativePaymentScreen { } ?: PODialog.default, normalBackgroundColor = custom?.background?.normalColorResId?.let { colorResource(id = it) - } ?: colors.surface.level1, + } ?: colors.surface.default, successBackgroundColor = custom?.background?.successColorResId?.let { colorResource(id = it) } ?: colors.surface.success, From 3fa8c360bf4743f6b551d21299c9914b139836a9 Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Wed, 26 Jun 2024 18:57:59 +0300 Subject: [PATCH 12/42] Button --- .../sdk/ui/core/component/POButton.kt | 20 +++++++++---------- .../component/field/radio/PORadioGroup.kt | 2 +- .../processout/sdk/ui/core/theme/Colors.kt | 18 ++++++++++------- .../ui/napm/NativeAlternativePaymentScreen.kt | 2 +- 4 files changed, 23 insertions(+), 19 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt index e4c807de4..53ce1eeb4 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt @@ -119,7 +119,7 @@ object POButton { ), shape = shapes.roundedCornersSmall, border = POBorderStroke(width = 0.dp, color = Color.Transparent), - backgroundColor = colors.action.primaryDefault, + backgroundColor = colors.button.primaryBackgroundDefault, elevation = 2.dp ), disabled = StateStyle( @@ -129,13 +129,13 @@ object POButton { ), shape = shapes.roundedCornersSmall, border = POBorderStroke(width = 0.dp, color = Color.Transparent), - backgroundColor = colors.action.primaryDisabled, + backgroundColor = colors.button.primaryBackgroundDisabled, elevation = 0.dp ), highlighted = HighlightedStyle( textColor = colors.text.onColor, borderColor = Color.Transparent, - backgroundColor = colors.action.primaryPressed + backgroundColor = colors.button.primaryBackgroundPressed ), progressIndicatorColor = colors.text.onColor ) @@ -151,7 +151,7 @@ object POButton { ), shape = shapes.roundedCornersSmall, border = POBorderStroke(width = 1.dp, color = colors.border.default), - backgroundColor = colors.action.secondaryDefault, + backgroundColor = colors.button.secondaryBackgroundDefault, elevation = 0.dp ), disabled = StateStyle( @@ -161,13 +161,13 @@ object POButton { ), shape = shapes.roundedCornersSmall, border = POBorderStroke(width = 1.dp, color = colors.border.disabled), - backgroundColor = colors.action.secondaryDefault, + backgroundColor = colors.button.secondaryBackgroundDefault, elevation = 0.dp ), highlighted = HighlightedStyle( textColor = colors.text.secondary, borderColor = colors.border.default, - backgroundColor = colors.action.secondaryPressed + backgroundColor = colors.button.secondaryBackgroundPressed ), progressIndicatorColor = colors.text.secondary ) @@ -178,7 +178,7 @@ object POButton { Style( normal = StateStyle( text = POText.Style( - color = colors.action.primaryDefault, + color = colors.button.primaryBackgroundDefault, textStyle = typography.body1 ), shape = shapes.roundedCornersSmall, @@ -199,11 +199,11 @@ object POButton { paddingHorizontal = spacing.medium ), highlighted = HighlightedStyle( - textColor = colors.action.primaryPressed, + textColor = colors.button.primaryBackgroundPressed, borderColor = Color.Transparent, - backgroundColor = colors.action.secondaryPressed + backgroundColor = colors.button.secondaryBackgroundPressed ), - progressIndicatorColor = colors.action.primaryDefault + progressIndicatorColor = colors.button.primaryBackgroundDefault ) } diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt index eba5375b5..ad47ce343 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt @@ -107,7 +107,7 @@ object PORadioGroup { ) ), selected = StateStyle( - buttonColor = colors.action.primaryDefault, + buttonColor = colors.button.primaryBackgroundDefault, text = POText.Style( color = colors.text.primary, textStyle = typography.label2 diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt index 9b8910a63..a864ad2f5 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt @@ -11,7 +11,7 @@ import com.processout.sdk.ui.core.theme.POColors2.* @Immutable data class POColors( val text: Text, - val action: Action, + val button: Button, val surface: Surface, val border: Border ) { @@ -28,12 +28,16 @@ data class POColors( ) @Immutable - data class Action( - val primaryDefault: Color, - val primaryPressed: Color, - val primaryDisabled: Color, - val secondaryDefault: Color, - val secondaryPressed: Color + data class Button( + val primaryBackgroundDefault: Color, + val primaryBackgroundPressed: Color, + val primaryBackgroundDisabled: Color, + val secondaryBackgroundDefault: Color, + val secondaryBackgroundPressed: Color, + val secondaryBackgroundDisabled: Color, + val secondaryBorderDefault: Color, + val secondaryBorderPressed: Color, + val secondaryBorderDisabled: Color ) @Immutable diff --git a/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt b/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt index a9582919a..965bd5860 100644 --- a/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt +++ b/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt @@ -644,7 +644,7 @@ internal object NativeAlternativePaymentScreen { successImageResId = custom?.successImageResId ?: R.drawable.po_success_image, progressIndicatorColor = custom?.progressIndicatorColorResId?.let { colorResource(id = it) - } ?: colors.action.primaryDefault, + } ?: colors.button.primaryBackgroundDefault, dividerColor = custom?.dividerColorResId?.let { colorResource(id = it) } ?: colors.border.subtle, From 39a42718b6f98b0b37b7f95976c1229452a4ef62 Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Wed, 26 Jun 2024 19:01:17 +0300 Subject: [PATCH 13/42] inverse text color --- .../kotlin/com/processout/sdk/ui/core/component/POButton.kt | 6 +++--- .../main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt index 53ce1eeb4..5db74297c 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt @@ -114,7 +114,7 @@ object POButton { Style( normal = StateStyle( text = POText.Style( - color = colors.text.onColor, + color = colors.text.inverse, textStyle = typography.button ), shape = shapes.roundedCornersSmall, @@ -133,11 +133,11 @@ object POButton { elevation = 0.dp ), highlighted = HighlightedStyle( - textColor = colors.text.onColor, + textColor = colors.text.inverse, borderColor = Color.Transparent, backgroundColor = colors.button.primaryBackgroundPressed ), - progressIndicatorColor = colors.text.onColor + progressIndicatorColor = colors.text.inverse ) } diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt index a864ad2f5..4762dd273 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt @@ -22,7 +22,7 @@ data class POColors( val tertiary: Color, val muted: Color, val disabled: Color, - val onColor: Color, + val inverse: Color, val success: Color, val error: Color ) From a7f0fb777910a3851dc8cc19a00bcbda15ac16c6 Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Wed, 26 Jun 2024 19:10:28 +0300 Subject: [PATCH 14/42] muted --- .../com/processout/sdk/ui/core/component/field/POField.kt | 6 +++--- .../main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt | 1 - 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt index 2a10be43a..0e00216b0 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt @@ -67,7 +67,7 @@ object POField { placeholderTextColor = colors.text.muted, backgroundColor = colors.surface.default, controlsTintColor = colors.text.primary, - dropdownRippleColor = colors.text.tertiary, + dropdownRippleColor = colors.text.muted, shape = shapes.roundedCornersSmall, border = POBorderStroke(width = 1.dp, color = colors.border.default) ), @@ -79,7 +79,7 @@ object POField { placeholderTextColor = colors.text.muted, backgroundColor = colors.surface.default, controlsTintColor = colors.text.error, - dropdownRippleColor = colors.text.tertiary, + dropdownRippleColor = colors.text.muted, shape = shapes.roundedCornersSmall, border = POBorderStroke(width = 1.dp, color = colors.text.error) ) @@ -99,7 +99,7 @@ object POField { backgroundColor = colorResource(id = backgroundColorResId), controlsTintColor = colorResource(id = controlsTintColorResId), dropdownRippleColor = dropdownRippleColorResId?.let { colorResource(id = it) } - ?: ProcessOutTheme.colors.text.tertiary, + ?: ProcessOutTheme.colors.text.muted, shape = RoundedCornerShape(size = border.radiusDp.dp), border = POBorderStroke( width = border.widthDp.dp, diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt index 4762dd273..1c8d6fa4f 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt @@ -19,7 +19,6 @@ data class POColors( data class Text( val primary: Color, val secondary: Color, - val tertiary: Color, val muted: Color, val disabled: Color, val inverse: Color, From 15246ce4bd647efb240b7b91030a53f83a95cb83 Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Wed, 26 Jun 2024 19:14:22 +0300 Subject: [PATCH 15/42] Primary text color --- .../kotlin/com/processout/sdk/ui/core/component/POButton.kt | 6 +++--- .../kotlin/com/processout/sdk/ui/core/component/POText.kt | 2 +- .../main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt | 3 +-- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt index 5db74297c..815749553 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt @@ -146,7 +146,7 @@ object POButton { Style( normal = StateStyle( text = POText.Style( - color = colors.text.secondary, + color = colors.text.primary, textStyle = typography.button ), shape = shapes.roundedCornersSmall, @@ -165,11 +165,11 @@ object POButton { elevation = 0.dp ), highlighted = HighlightedStyle( - textColor = colors.text.secondary, + textColor = colors.text.primary, borderColor = colors.border.default, backgroundColor = colors.button.secondaryBackgroundPressed ), - progressIndicatorColor = colors.text.secondary + progressIndicatorColor = colors.text.primary ) } diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POText.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POText.kt index 91d765954..6e4794c1b 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POText.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POText.kt @@ -70,7 +70,7 @@ object POText { val label1: Style @Composable get() = Style( - color = ProcessOutTheme.colors.text.secondary, + color = ProcessOutTheme.colors.text.primary, textStyle = ProcessOutTheme.typography.label1 ) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt index 1c8d6fa4f..4c0651ffb 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt @@ -18,10 +18,9 @@ data class POColors( @Immutable data class Text( val primary: Color, - val secondary: Color, + val inverse: Color, val muted: Color, val disabled: Color, - val inverse: Color, val success: Color, val error: Color ) From bc095bfbb55ca38f0d0ed3f758e2ba78a6ffb74d Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Wed, 26 Jun 2024 19:30:24 +0300 Subject: [PATCH 16/42] Input colors --- .../processout/sdk/ui/core/theme/Colors.kt | 17 ++++- .../processout/sdk/ui/core/theme/Colors2.kt | 64 ------------------- 2 files changed, 14 insertions(+), 67 deletions(-) delete mode 100644 ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors2.kt diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt index 4c0651ffb..829db53a9 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt @@ -4,13 +4,14 @@ import androidx.compose.runtime.Immutable import androidx.compose.runtime.staticCompositionLocalOf import androidx.compose.ui.graphics.Color import com.processout.sdk.ui.core.annotation.ProcessOutInternalApi -import com.processout.sdk.ui.core.theme.POColors2.* +import com.processout.sdk.ui.core.theme.POColors.* /** @suppress */ @ProcessOutInternalApi @Immutable data class POColors( val text: Text, + val input: Input, val button: Button, val surface: Surface, val border: Border @@ -25,6 +26,16 @@ data class POColors( val error: Color ) + @Immutable + data class Input( + val backgroundDefault: Color, + val backgroundDisabled: Color, + val borderDefault: Color, + val borderDisabled: Color, + val borderFocused: Color, + val borderError: Color + ) + @Immutable data class Button( val primaryBackgroundDefault: Color, @@ -54,7 +65,7 @@ data class POColors( ) } -internal val LightColorPalette = POColors2( +internal val LightColorPalette = POColors( text = Text( primary = Color(0xFF121821), inverse = Color(0xFFFAFAFA), @@ -95,7 +106,7 @@ internal val LightColorPalette = POColors2( ) ) -internal val DarkColorPalette = POColors2( +internal val DarkColorPalette = POColors( text = Text( primary = Color(0xFFFAFAFA), inverse = Color(0xFF121821), diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors2.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors2.kt deleted file mode 100644 index 8f19ed3f3..000000000 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors2.kt +++ /dev/null @@ -1,64 +0,0 @@ -package com.processout.sdk.ui.core.theme - -import androidx.compose.runtime.Immutable -import androidx.compose.ui.graphics.Color -import com.processout.sdk.ui.core.annotation.ProcessOutInternalApi - -/** @suppress */ -@ProcessOutInternalApi -@Immutable -data class POColors2( - val text: Text, - val input: Input, - val button: Button, - val surface: Surface, - val border: Border -) { - @Immutable - data class Text( - val primary: Color, - val inverse: Color, - val muted: Color, - val disabled: Color, - val success: Color, - val error: Color - ) - - @Immutable - data class Input( - val backgroundDefault: Color, - val backgroundDisabled: Color, - val borderDefault: Color, - val borderDisabled: Color, - val borderFocused: Color, - val borderError: Color - ) - - @Immutable - data class Button( - val primaryBackgroundDefault: Color, - val primaryBackgroundPressed: Color, - val primaryBackgroundDisabled: Color, - val secondaryBackgroundDefault: Color, - val secondaryBackgroundPressed: Color, - val secondaryBackgroundDisabled: Color, - val secondaryBorderDefault: Color, - val secondaryBorderPressed: Color, - val secondaryBorderDisabled: Color - ) - - @Immutable - data class Surface( - val default: Color, - val neutral: Color, - val success: Color, - val error: Color - ) - - @Immutable - data class Border( - val default: Color, - val disabled: Color, - val subtle: Color - ) -} From 1e86da4bfac3c53bc4fe0291f2ead683643c8aff Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Thu, 27 Jun 2024 15:13:22 +0300 Subject: [PATCH 17/42] Buttons, spacing, components size --- .../ui/core/component/POActionsContainer.kt | 16 ++------------ .../sdk/ui/core/component/POButton.kt | 21 +++++++++++-------- .../sdk/ui/core/theme/Dimensions.kt | 2 +- .../processout/sdk/ui/core/theme/Spacing.kt | 2 +- 4 files changed, 16 insertions(+), 25 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POActionsContainer.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POActionsContainer.kt index 5f7775451..2cbe65cde 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POActionsContainer.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POActionsContainer.kt @@ -11,7 +11,6 @@ import androidx.compose.runtime.* import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.colorResource -import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import com.processout.sdk.ui.core.annotation.ProcessOutInternalApi import com.processout.sdk.ui.core.state.POActionState @@ -45,10 +44,8 @@ fun POActionsContainer( ) { Column(modifier = modifier) { HorizontalDivider(thickness = 1.dp, color = containerStyle.dividerColor) - - val padding = POActionsContainer.containerPadding - val spacing = POActionsContainer.actionSpacing - + val padding = ProcessOutTheme.spacing.extraLarge + val spacing = ProcessOutTheme.spacing.small when (containerStyle.axis) { POAxis.Vertical -> Column( modifier = Modifier @@ -170,13 +167,4 @@ object POActionsContainer { axis = axis ) } - - internal val containerPadding: PaddingValues - @Composable get() = PaddingValues( - horizontal = ProcessOutTheme.spacing.extraLarge, - vertical = ProcessOutTheme.spacing.large - ) - - internal val actionSpacing: Dp - @Composable get() = ProcessOutTheme.spacing.large } diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt index 815749553..fc6d9cee9 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt @@ -1,3 +1,5 @@ +@file:OptIn(ExperimentalMaterial3Api::class) + package com.processout.sdk.ui.core.component import androidx.compose.foundation.BorderStroke @@ -6,10 +8,7 @@ import androidx.compose.foundation.interaction.collectIsPressedAsState import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.ripple.LocalRippleTheme -import androidx.compose.material3.Button -import androidx.compose.material3.ButtonColors -import androidx.compose.material3.ButtonDefaults -import androidx.compose.material3.ButtonElevation +import androidx.compose.material3.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier @@ -21,6 +20,7 @@ import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import com.processout.sdk.ui.core.annotation.ProcessOutInternalApi +import com.processout.sdk.ui.core.component.POButton.MinHeight import com.processout.sdk.ui.core.component.POButton.border import com.processout.sdk.ui.core.component.POButton.colors import com.processout.sdk.ui.core.component.POButton.contentPadding @@ -44,12 +44,13 @@ fun POButton( interactionSource: MutableInteractionSource = remember { MutableInteractionSource() } ) { val pressed by interactionSource.collectIsPressedAsState() - CompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) { + CompositionLocalProvider( + LocalRippleTheme provides NoRippleTheme, + LocalMinimumInteractiveComponentEnforcement provides false + ) { Button( onClick = onClick, - modifier = modifier.requiredHeightIn( - min = ProcessOutTheme.dimensions.formComponentMinSize - ), + modifier = modifier.requiredHeightIn(min = MinHeight), enabled = enabled && !loading, colors = colors(style = style, enabled = enabled, loading = loading, pressed = pressed), shape = if (enabled) style.normal.shape else style.disabled.shape, @@ -120,7 +121,7 @@ object POButton { shape = shapes.roundedCornersSmall, border = POBorderStroke(width = 0.dp, color = Color.Transparent), backgroundColor = colors.button.primaryBackgroundDefault, - elevation = 2.dp + elevation = 0.dp ), disabled = StateStyle( text = POText.Style( @@ -232,6 +233,8 @@ object POButton { paddingVertical = paddingVerticalDp.dp ) + internal val MinHeight = 44.dp + @Composable internal fun colors( style: Style, diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Dimensions.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Dimensions.kt index 73a45981b..5c1d6b564 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Dimensions.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Dimensions.kt @@ -10,7 +10,7 @@ import com.processout.sdk.ui.core.annotation.ProcessOutInternalApi @ProcessOutInternalApi @Immutable data class PODimensions( - val formComponentMinSize: Dp = 44.dp + val formComponentMinSize: Dp = 48.dp ) internal val LocalPODimensions = staticCompositionLocalOf { PODimensions() } diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Spacing.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Spacing.kt index f86255a70..dfbc48bf0 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Spacing.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Spacing.kt @@ -14,7 +14,7 @@ data class POSpacing( val small: Dp = 8.dp, val medium: Dp = 12.dp, val large: Dp = 16.dp, - val extraLarge: Dp = 24.dp + val extraLarge: Dp = 20.dp ) internal val LocalPOSpacing = staticCompositionLocalOf { POSpacing() } From 606b52ab5e9229efee11daea4d7719d783a9dd30 Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Thu, 27 Jun 2024 15:31:49 +0300 Subject: [PATCH 18/42] Fields spacing --- .../com/processout/sdk/ui/core/component/field/POField.kt | 4 ++-- .../sdk/ui/core/component/field/dropdown/PODropdownField.kt | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt index 0e00216b0..edfa92a2f 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt @@ -109,8 +109,8 @@ object POField { val contentPadding: PaddingValues @Composable get() = PaddingValues( - horizontal = ProcessOutTheme.spacing.medium, - vertical = ProcessOutTheme.spacing.small + horizontal = ProcessOutTheme.spacing.large, + vertical = ProcessOutTheme.spacing.medium ) @Composable diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/dropdown/PODropdownField.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/dropdown/PODropdownField.kt index ddcfcd1e3..eeb2b3f8d 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/dropdown/PODropdownField.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/dropdown/PODropdownField.kt @@ -129,7 +129,7 @@ private fun MenuItem( indication = rememberRipple(color = style.rippleColor) ) .fillMaxWidth() - .padding(horizontal = ProcessOutTheme.spacing.medium), + .padding(horizontal = ProcessOutTheme.spacing.large), contentAlignment = Alignment.CenterStart ) { POText( From 17a24b352f03eef709ba60e0d086f5ef89e0d159 Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Thu, 27 Jun 2024 15:48:22 +0300 Subject: [PATCH 19/42] Screens spacing --- .../sdk/ui/card/tokenization/CardTokenizationScreen.kt | 5 +---- .../com/processout/sdk/ui/card/update/CardUpdateScreen.kt | 5 +---- .../processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt | 2 +- 3 files changed, 3 insertions(+), 9 deletions(-) diff --git a/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt b/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt index 30f335d3e..078704b81 100644 --- a/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt +++ b/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt @@ -68,10 +68,7 @@ internal fun CardTokenizationScreen( .fillMaxSize() .padding(scaffoldPadding) .verticalScroll(rememberScrollState()) - .padding( - horizontal = ProcessOutTheme.spacing.extraLarge, - vertical = ProcessOutTheme.spacing.large - ), + .padding(ProcessOutTheme.spacing.extraLarge), verticalArrangement = Arrangement.spacedBy(ProcessOutTheme.spacing.small) ) { Sections( diff --git a/ui/src/main/kotlin/com/processout/sdk/ui/card/update/CardUpdateScreen.kt b/ui/src/main/kotlin/com/processout/sdk/ui/card/update/CardUpdateScreen.kt index a3cc98e10..b3c8e0a40 100644 --- a/ui/src/main/kotlin/com/processout/sdk/ui/card/update/CardUpdateScreen.kt +++ b/ui/src/main/kotlin/com/processout/sdk/ui/card/update/CardUpdateScreen.kt @@ -65,10 +65,7 @@ internal fun CardUpdateScreen( .fillMaxSize() .padding(scaffoldPadding) .verticalScroll(rememberScrollState()) - .padding( - horizontal = ProcessOutTheme.spacing.extraLarge, - vertical = ProcessOutTheme.spacing.large - ), + .padding(ProcessOutTheme.spacing.extraLarge), verticalArrangement = Arrangement.spacedBy(ProcessOutTheme.spacing.small) ) { Fields( diff --git a/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt b/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt index 965bd5860..cbae4b1be 100644 --- a/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt +++ b/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt @@ -106,7 +106,7 @@ internal fun NativeAlternativePaymentScreen( ) } ) { scaffoldPadding -> - val verticalSpacing = ProcessOutTheme.spacing.large + val verticalSpacing = ProcessOutTheme.spacing.extraLarge val verticalSpacingPx = verticalSpacing.dpToPx() Column( modifier = Modifier From 53fc90ddf07139a11cdc1868896300e929b5d272 Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Thu, 27 Jun 2024 16:09:16 +0300 Subject: [PATCH 20/42] Dialog spacing --- .../com/processout/sdk/ui/core/component/POButton.kt | 4 ++-- .../com/processout/sdk/ui/core/component/PODialog.kt | 7 +------ 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt index fc6d9cee9..d93b9fd1e 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt @@ -186,7 +186,7 @@ object POButton { border = POBorderStroke(width = 0.dp, color = Color.Transparent), backgroundColor = Color.Transparent, elevation = 0.dp, - paddingHorizontal = spacing.medium + paddingHorizontal = spacing.large ), disabled = StateStyle( text = POText.Style( @@ -197,7 +197,7 @@ object POButton { border = POBorderStroke(width = 0.dp, color = Color.Transparent), backgroundColor = Color.Transparent, elevation = 0.dp, - paddingHorizontal = spacing.medium + paddingHorizontal = spacing.large ), highlighted = HighlightedStyle( textColor = colors.button.primaryBackgroundPressed, diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/PODialog.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/PODialog.kt index 93125dc98..c17f5cc7c 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/PODialog.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/PODialog.kt @@ -54,12 +54,7 @@ fun PODialog( Column( modifier = Modifier .fillMaxWidth() - .padding( - start = spacing.extraLarge, - top = spacing.extraLarge, - end = spacing.extraLarge, - bottom = spacing.large - ) + .padding(spacing.extraLarge) ) { POText( text = title, From c80dccb4cbfdaef13fbf674a7495fd401bd10497 Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Thu, 27 Jun 2024 16:34:50 +0300 Subject: [PATCH 21/42] nAPM fields vertical spacing --- .../processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt b/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt index cbae4b1be..dd8017205 100644 --- a/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt +++ b/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt @@ -154,7 +154,7 @@ private fun UserInput( AnimatedVisibility { Column( modifier = modifier, - verticalArrangement = Arrangement.spacedBy(ProcessOutTheme.spacing.small) + verticalArrangement = Arrangement.spacedBy(ProcessOutTheme.spacing.large) ) { val lifecycleEvent = rememberLifecycleEvent() val labelsStyle = remember { From add4273f6b6d4efff6d689d44a9af0cd264d0dfa Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Thu, 27 Jun 2024 16:41:39 +0300 Subject: [PATCH 22/42] Card Tokenization sections spacing --- .../sdk/ui/card/tokenization/CardTokenizationScreen.kt | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt b/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt index 078704b81..eb80cae29 100644 --- a/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt +++ b/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt @@ -114,7 +114,9 @@ private fun Sections( POExpandableText( text = section.errorMessage, style = style.errorMessage, - modifier = Modifier.fillMaxWidth() + modifier = Modifier + .fillMaxWidth() + .padding(bottom = ProcessOutTheme.spacing.small) ) } } From d163e9a4bca768d4f0b7932f5e44a82a95677654 Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Thu, 27 Jun 2024 18:34:22 +0300 Subject: [PATCH 23/42] RadioButtonSize --- .../sdk/ui/core/component/field/radio/PORadioGroup.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt index ad47ce343..b89bb60e0 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt @@ -137,7 +137,7 @@ object PORadioGroup { ) private val MaterialRadioButtonSize = 20.dp - internal val RadioButtonSize = 18.dp + internal val RadioButtonSize = 22.dp internal val RadioButtonScale = RadioButtonSize.value / MaterialRadioButtonSize.value @Composable From 430605d7e386ddcf84fa55af2cb59760e497c517 Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Thu, 27 Jun 2024 18:58:03 +0300 Subject: [PATCH 24/42] interactiveComponentMinSize = 44.dp --- .../com/processout/sdk/ui/core/component/POButton.kt | 7 +++---- .../sdk/ui/core/component/field/code/POCodeField.kt | 2 +- .../ui/core/component/field/dropdown/PODropdownField.kt | 2 +- .../sdk/ui/core/component/field/radio/PORadioGroup.kt | 6 +++--- .../sdk/ui/core/component/field/text/POTextField.kt | 2 +- .../kotlin/com/processout/sdk/ui/core/theme/Dimensions.kt | 3 ++- .../sdk/ui/card/tokenization/CardTokenizationScreen.kt | 2 +- .../com/processout/sdk/ui/card/update/CardUpdateScreen.kt | 2 +- 8 files changed, 13 insertions(+), 13 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt index d93b9fd1e..6f76ff51c 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt @@ -20,7 +20,6 @@ import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import com.processout.sdk.ui.core.annotation.ProcessOutInternalApi -import com.processout.sdk.ui.core.component.POButton.MinHeight import com.processout.sdk.ui.core.component.POButton.border import com.processout.sdk.ui.core.component.POButton.colors import com.processout.sdk.ui.core.component.POButton.contentPadding @@ -50,7 +49,9 @@ fun POButton( ) { Button( onClick = onClick, - modifier = modifier.requiredHeightIn(min = MinHeight), + modifier = modifier.requiredHeightIn( + min = ProcessOutTheme.dimensions.interactiveComponentMinSize + ), enabled = enabled && !loading, colors = colors(style = style, enabled = enabled, loading = loading, pressed = pressed), shape = if (enabled) style.normal.shape else style.disabled.shape, @@ -233,8 +234,6 @@ object POButton { paddingVertical = paddingVerticalDp.dp ) - internal val MinHeight = 44.dp - @Composable internal fun colors( style: Style, diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/code/POCodeField.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/code/POCodeField.kt index 725ff2d0d..4c348e9e2 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/code/POCodeField.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/code/POCodeField.kt @@ -127,7 +127,7 @@ fun POCodeField( } }, modifier = modifier - .requiredWidth(ProcessOutTheme.dimensions.formComponentMinSize) + .requiredWidth(ProcessOutTheme.dimensions.interactiveComponentMinSize) .onPreviewKeyEvent { when { it.key == Key.Backspace && it.type == KeyEventType.KeyDown -> { diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/dropdown/PODropdownField.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/dropdown/PODropdownField.kt index eeb2b3f8d..1ff6c0494 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/dropdown/PODropdownField.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/dropdown/PODropdownField.kt @@ -76,7 +76,7 @@ fun PODropdownField( ) } ) - val menuItemHeight = ProcessOutTheme.dimensions.formComponentMinSize + val menuItemHeight = ProcessOutTheme.dimensions.formComponentMinHeight val menuVerticalPaddings = ProcessOutTheme.spacing.large val maxMenuHeight = remember { menuItemHeight * PODropdownField.MaxVisibleMenuItems + menuVerticalPaddings } DropdownMenu( diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt index b89bb60e0..6b0e63b05 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt @@ -50,7 +50,7 @@ fun PORadioGroup( Row( modifier = Modifier .fillMaxWidth() - .requiredHeightIn(min = ProcessOutTheme.dimensions.formComponentMinSize) + .requiredHeightIn(min = ProcessOutTheme.dimensions.formComponentMinHeight) .clickable( onClick = onClick, interactionSource = interactionSource, @@ -64,7 +64,7 @@ fun PORadioGroup( modifier = Modifier .scale(RadioButtonScale) .requiredWidth(RadioButtonSize) - .requiredHeight(ProcessOutTheme.dimensions.formComponentMinSize), + .requiredHeight(ProcessOutTheme.dimensions.formComponentMinHeight), colors = buttonColors(style = style, isError = isError) ) val textStyle = textStyle(style = style, selected = selected, isError = isError) @@ -176,7 +176,7 @@ object PORadioGroup { textMeasurer.measure(text = String(), style = style.textStyle) } val density = LocalDensity.current - val formComponentHeight = ProcessOutTheme.dimensions.formComponentMinSize + val formComponentHeight = ProcessOutTheme.dimensions.formComponentMinHeight return remember(singleLineTextMeasurement) { with(density) { val formComponentCenter = formComponentHeight / 2 diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/text/POTextField.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/text/POTextField.kt index cac47e46a..9ba040813 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/text/POTextField.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/text/POTextField.kt @@ -60,7 +60,7 @@ fun POTextField( BasicTextField( value = value, onValueChange = onValueChange, - modifier = modifier.requiredHeight(ProcessOutTheme.dimensions.formComponentMinSize), + modifier = modifier.requiredHeight(ProcessOutTheme.dimensions.formComponentMinHeight), enabled = enabled, readOnly = readOnly, textStyle = textStyle( diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Dimensions.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Dimensions.kt index 5c1d6b564..6fbc1089f 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Dimensions.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Dimensions.kt @@ -10,7 +10,8 @@ import com.processout.sdk.ui.core.annotation.ProcessOutInternalApi @ProcessOutInternalApi @Immutable data class PODimensions( - val formComponentMinSize: Dp = 48.dp + val formComponentMinHeight: Dp = 48.dp, + val interactiveComponentMinSize: Dp = 44.dp ) internal val LocalPODimensions = staticCompositionLocalOf { PODimensions() } diff --git a/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt b/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt index eb80cae29..426131c88 100644 --- a/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt +++ b/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt @@ -257,7 +257,7 @@ private fun AnimatedIcon(@DrawableRes id: Int) { POAnimatedImage( id = id, modifier = Modifier - .requiredHeight(ProcessOutTheme.dimensions.formComponentMinSize) + .requiredHeight(ProcessOutTheme.dimensions.formComponentMinHeight) .padding(POField.contentPadding), contentScale = ContentScale.FillHeight ) diff --git a/ui/src/main/kotlin/com/processout/sdk/ui/card/update/CardUpdateScreen.kt b/ui/src/main/kotlin/com/processout/sdk/ui/card/update/CardUpdateScreen.kt index b3c8e0a40..ef98e0b26 100644 --- a/ui/src/main/kotlin/com/processout/sdk/ui/card/update/CardUpdateScreen.kt +++ b/ui/src/main/kotlin/com/processout/sdk/ui/card/update/CardUpdateScreen.kt @@ -144,7 +144,7 @@ private fun AnimatedIcon(@DrawableRes id: Int) { POAnimatedImage( id = id, modifier = Modifier - .requiredHeight(ProcessOutTheme.dimensions.formComponentMinSize) + .requiredHeight(ProcessOutTheme.dimensions.formComponentMinHeight) .padding(POField.contentPadding), contentScale = ContentScale.FillHeight ) From 512a164071609d229e21702fd01c5727b7d1c4f3 Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Thu, 27 Jun 2024 19:02:38 +0300 Subject: [PATCH 25/42] AnimatedFieldIcon --- .../sdk/ui/card/tokenization/CardTokenizationScreen.kt | 4 ++-- .../com/processout/sdk/ui/card/update/CardUpdateScreen.kt | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt b/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt index 426131c88..e5f7bc19f 100644 --- a/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt +++ b/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt @@ -202,7 +202,7 @@ private fun TextField( isError = state.isError, forceTextDirectionLtr = state.forceTextDirectionLtr, placeholderText = state.placeholder, - trailingIcon = { state.iconResId?.let { AnimatedIcon(id = it) } }, + trailingIcon = { state.iconResId?.let { AnimatedFieldIcon(id = it) } }, visualTransformation = state.visualTransformation, keyboardOptions = state.keyboardOptions, keyboardActions = POField.keyboardActions( @@ -253,7 +253,7 @@ private fun DropdownField( } @Composable -private fun AnimatedIcon(@DrawableRes id: Int) { +private fun AnimatedFieldIcon(@DrawableRes id: Int) { POAnimatedImage( id = id, modifier = Modifier diff --git a/ui/src/main/kotlin/com/processout/sdk/ui/card/update/CardUpdateScreen.kt b/ui/src/main/kotlin/com/processout/sdk/ui/card/update/CardUpdateScreen.kt index ef98e0b26..9ca1f239a 100644 --- a/ui/src/main/kotlin/com/processout/sdk/ui/card/update/CardUpdateScreen.kt +++ b/ui/src/main/kotlin/com/processout/sdk/ui/card/update/CardUpdateScreen.kt @@ -124,7 +124,7 @@ private fun Fields( isError = state.isError, forceTextDirectionLtr = state.forceTextDirectionLtr, placeholderText = state.placeholder, - trailingIcon = { state.iconResId?.let { AnimatedIcon(id = it) } }, + trailingIcon = { state.iconResId?.let { AnimatedFieldIcon(id = it) } }, keyboardOptions = state.keyboardOptions, keyboardActions = POField.keyboardActions( imeAction = state.keyboardOptions.imeAction, @@ -140,7 +140,7 @@ private fun Fields( } @Composable -private fun AnimatedIcon(@DrawableRes id: Int) { +private fun AnimatedFieldIcon(@DrawableRes id: Int) { POAnimatedImage( id = id, modifier = Modifier From 0a82e1283a9c14506a3bffc6086089bf5d8b4150 Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Thu, 27 Jun 2024 19:33:04 +0300 Subject: [PATCH 26/42] contentPadding param for POTextField --- .../sdk/ui/core/component/field/code/POCodeField.kt | 7 +++---- .../ui/core/component/field/text/POLabeledTextField.kt | 3 +++ .../sdk/ui/core/component/field/text/POTextField.kt | 8 +++----- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/code/POCodeField.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/code/POCodeField.kt index 4c348e9e2..1a15626cc 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/code/POCodeField.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/code/POCodeField.kt @@ -3,10 +3,7 @@ package com.processout.sdk.ui.core.component.field.code import androidx.compose.foundation.focusGroup -import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.requiredWidth +import androidx.compose.foundation.layout.* import androidx.compose.foundation.text.KeyboardActions import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.runtime.* @@ -22,6 +19,7 @@ import androidx.compose.ui.text.TextRange import androidx.compose.ui.text.input.TextFieldValue import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.LayoutDirection +import androidx.compose.ui.unit.dp import androidx.lifecycle.Lifecycle import com.processout.sdk.ui.core.annotation.ProcessOutInternalApi import com.processout.sdk.ui.core.component.PORequestFocus @@ -158,6 +156,7 @@ fun POCodeField( focusedIndex = textFieldIndex } }, + contentPadding = PaddingValues(0.dp), style = style(style), enabled = enabled, isError = isError, diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/text/POLabeledTextField.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/text/POLabeledTextField.kt index b347a56c7..95cfab7f5 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/text/POLabeledTextField.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/text/POLabeledTextField.kt @@ -2,6 +2,7 @@ package com.processout.sdk.ui.core.component.field.text import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.text.KeyboardActions @@ -27,6 +28,7 @@ fun POLabeledTextField( title: String, description: String?, modifier: Modifier = Modifier, + contentPadding: PaddingValues = POField.contentPadding, fieldStyle: POField.Style = POField.default, labelsStyle: POFieldLabels.Style = POFieldLabels.default, enabled: Boolean = true, @@ -54,6 +56,7 @@ fun POLabeledTextField( value = value, onValueChange = onValueChange, modifier = modifier, + contentPadding = contentPadding, style = fieldStyle, enabled = enabled, readOnly = readOnly, diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/text/POTextField.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/text/POTextField.kt index 9ba040813..64850c475 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/text/POTextField.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/text/POTextField.kt @@ -3,10 +3,7 @@ package com.processout.sdk.ui.core.component.field.text import androidx.compose.foundation.interaction.MutableInteractionSource -import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.requiredHeight +import androidx.compose.foundation.layout.* import androidx.compose.foundation.text.BasicTextField import androidx.compose.foundation.text.KeyboardActions import androidx.compose.foundation.text.KeyboardOptions @@ -37,6 +34,7 @@ fun POTextField( value: TextFieldValue, onValueChange: (TextFieldValue) -> Unit, modifier: Modifier = Modifier, + contentPadding: PaddingValues = POField.contentPadding, style: POField.Style = POField.default, enabled: Boolean = true, readOnly: Boolean = false, @@ -94,7 +92,7 @@ fun POTextField( singleLine = singleLine, visualTransformation = visualTransformation, interactionSource = interactionSource, - contentPadding = POField.contentPadding, + contentPadding = contentPadding, container = { ContainerBox( style = style, From d31b85ff3809594c9941947db3f815d00a34aeaf Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Mon, 1 Jul 2024 17:19:22 +0300 Subject: [PATCH 27/42] Extract PORadioButton from PORadioGroup --- .../component/field/radio/PORadioButton.kt | 84 +++++++++++++++++++ .../component/field/radio/PORadioGroup.kt | 45 ++-------- 2 files changed, 93 insertions(+), 36 deletions(-) create mode 100644 ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioButton.kt diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioButton.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioButton.kt new file mode 100644 index 000000000..fbec9bbc5 --- /dev/null +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioButton.kt @@ -0,0 +1,84 @@ +package com.processout.sdk.ui.core.component.field.radio + +import androidx.compose.foundation.layout.requiredHeight +import androidx.compose.foundation.layout.requiredWidth +import androidx.compose.material3.RadioButton +import androidx.compose.material3.RadioButtonColors +import androidx.compose.material3.RadioButtonDefaults +import androidx.compose.runtime.Composable +import androidx.compose.runtime.Immutable +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.scale +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.dp +import com.processout.sdk.ui.core.annotation.ProcessOutInternalApi +import com.processout.sdk.ui.core.component.field.radio.PORadioButton.RadioButtonScale +import com.processout.sdk.ui.core.component.field.radio.PORadioButton.RadioButtonSize +import com.processout.sdk.ui.core.component.field.radio.PORadioButton.colors +import com.processout.sdk.ui.core.theme.ProcessOutTheme + +/** @suppress */ +@ProcessOutInternalApi +@Composable +fun PORadioButton( + selected: Boolean, + onClick: () -> Unit, + modifier: Modifier = Modifier, + style: PORadioButton.Style = PORadioButton.default, + isError: Boolean = false +) { + RadioButton( + selected = selected, + onClick = onClick, + modifier = modifier + .scale(RadioButtonScale) + .requiredWidth(RadioButtonSize) + .requiredHeight(ProcessOutTheme.dimensions.formComponentMinHeight), + colors = colors(style = style, isError = isError) + ) +} + +/** @suppress */ +@ProcessOutInternalApi +object PORadioButton { + + @Immutable + data class Style( + val normalColor: Color, + val selectedColor: Color, + val errorColor: Color + ) + + val default: Style + @Composable get() = with(ProcessOutTheme) { + Style( + normalColor = colors.border.default, + selectedColor = colors.button.primaryBackgroundDefault, + errorColor = colors.text.error + ) + } + + private val MaterialRadioButtonSize = 20.dp + internal val RadioButtonSize = 22.dp + internal val RadioButtonScale = RadioButtonSize.value / MaterialRadioButtonSize.value + + @Composable + internal fun colors( + style: Style, + isError: Boolean + ): RadioButtonColors { + val selectedColor: Color + val unselectedColor: Color + if (isError) { + selectedColor = style.errorColor + unselectedColor = style.errorColor + } else { + selectedColor = style.selectedColor + unselectedColor = style.normalColor + } + return RadioButtonDefaults.colors( + selectedColor = selectedColor, + unselectedColor = unselectedColor + ) + } +} diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt index 6b0e63b05..a65200057 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt @@ -3,14 +3,10 @@ package com.processout.sdk.ui.core.component.field.radio import androidx.compose.foundation.clickable import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.* -import androidx.compose.material3.RadioButton -import androidx.compose.material3.RadioButtonColors -import androidx.compose.material3.RadioButtonDefaults import androidx.compose.runtime.Composable import androidx.compose.runtime.Immutable import androidx.compose.runtime.remember import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.scale import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.res.colorResource @@ -19,11 +15,9 @@ import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import com.processout.sdk.ui.core.annotation.ProcessOutInternalApi import com.processout.sdk.ui.core.component.POText -import com.processout.sdk.ui.core.component.field.radio.PORadioGroup.RadioButtonScale -import com.processout.sdk.ui.core.component.field.radio.PORadioGroup.RadioButtonSize -import com.processout.sdk.ui.core.component.field.radio.PORadioGroup.buttonColors import com.processout.sdk.ui.core.component.field.radio.PORadioGroup.textPaddingTop import com.processout.sdk.ui.core.component.field.radio.PORadioGroup.textStyle +import com.processout.sdk.ui.core.component.field.radio.PORadioGroup.toRadioButtonStyle import com.processout.sdk.ui.core.state.POAvailableValue import com.processout.sdk.ui.core.state.POImmutableList import com.processout.sdk.ui.core.style.PORadioButtonStateStyle @@ -58,14 +52,11 @@ fun PORadioGroup( ) ) { val selected = it.value == value - RadioButton( + PORadioButton( selected = selected, onClick = onClick, - modifier = Modifier - .scale(RadioButtonScale) - .requiredWidth(RadioButtonSize) - .requiredHeight(ProcessOutTheme.dimensions.formComponentMinHeight), - colors = buttonColors(style = style, isError = isError) + style = style.toRadioButtonStyle(), + isError = isError ) val textStyle = textStyle(style = style, selected = selected, isError = isError) POText( @@ -136,29 +127,11 @@ object PORadioGroup { text = POText.custom(style = text) ) - private val MaterialRadioButtonSize = 20.dp - internal val RadioButtonSize = 22.dp - internal val RadioButtonScale = RadioButtonSize.value / MaterialRadioButtonSize.value - - @Composable - internal fun buttonColors( - style: Style, - isError: Boolean - ): RadioButtonColors { - val selectedColor: Color - val unselectedColor: Color - if (isError) { - selectedColor = style.error.buttonColor - unselectedColor = style.error.buttonColor - } else { - selectedColor = style.selected.buttonColor - unselectedColor = style.normal.buttonColor - } - return RadioButtonDefaults.colors( - selectedColor = selectedColor, - unselectedColor = unselectedColor - ) - } + internal fun Style.toRadioButtonStyle() = PORadioButton.Style( + normalColor = normal.buttonColor, + selectedColor = selected.buttonColor, + errorColor = error.buttonColor + ) internal fun textStyle( style: Style, From 6402dd3830843edbd03419190a2f3a7d97d1a160 Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Mon, 1 Jul 2024 18:44:04 +0300 Subject: [PATCH 28/42] POHeader title padding --- .../com/processout/sdk/ui/core/component/POHeader.kt | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POHeader.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POHeader.kt index f42f76928..88c3a2889 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POHeader.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POHeader.kt @@ -66,9 +66,6 @@ private fun titlePadding( start = spacing.extraLarge, end = spacing.extraLarge, top = 0.dp, - bottom = spacing.large - ) else PaddingValues( - horizontal = spacing.extraLarge, - vertical = spacing.large - ) + bottom = spacing.extraLarge + ) else PaddingValues(spacing.extraLarge) } From 13aeb54f1da7250c496c5d76e823e227105367ee Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Mon, 1 Jul 2024 18:53:00 +0300 Subject: [PATCH 29/42] Dark surface colors --- .../main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt index 829db53a9..f172aed1e 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt @@ -137,8 +137,8 @@ internal val DarkColorPalette = POColors( surface = Surface( default = Color(0xFF121821), neutral = Color(0xFF242C38), - success = Color(0xFFBEFAE9), - error = Color(0xFFFFC2C8) + success = Color(0xFF1DA37D), + error = Color(0xFFD11D2F) ), border = Border( default = Color(0xFF93949F), From 8615184e681c8022ba9ab348b6c66242757d6667 Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Tue, 2 Jul 2024 11:33:54 +0300 Subject: [PATCH 30/42] Field colors --- .../com/processout/sdk/ui/core/component/field/POField.kt | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt index edfa92a2f..4f69212b6 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt @@ -65,11 +65,11 @@ object POField { textStyle = typography.label2 ), placeholderTextColor = colors.text.muted, - backgroundColor = colors.surface.default, + backgroundColor = colors.input.backgroundDefault, controlsTintColor = colors.text.primary, dropdownRippleColor = colors.text.muted, shape = shapes.roundedCornersSmall, - border = POBorderStroke(width = 1.dp, color = colors.border.default) + border = POBorderStroke(width = 1.dp, color = colors.input.borderDefault) ), error = StateStyle( text = POText.Style( @@ -77,11 +77,11 @@ object POField { textStyle = typography.label2 ), placeholderTextColor = colors.text.muted, - backgroundColor = colors.surface.default, + backgroundColor = colors.input.backgroundDefault, controlsTintColor = colors.text.error, dropdownRippleColor = colors.text.muted, shape = shapes.roundedCornersSmall, - border = POBorderStroke(width = 1.dp, color = colors.text.error) + border = POBorderStroke(width = 1.dp, color = colors.input.borderError) ) ) } From 60998cb56f138b1a188c9e473ee5792524c497d0 Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Tue, 2 Jul 2024 12:16:31 +0300 Subject: [PATCH 31/42] po_success_image.xml (light/dark) --- .../ui/napm/NativeAlternativePaymentScreen.kt | 2 +- .../res/drawable-night/po_success_image.xml | 49 +++++++++++++++++++ ui/src/main/res/drawable/po_success_image.xml | 49 +++++++++++++++++++ 3 files changed, 99 insertions(+), 1 deletion(-) create mode 100644 ui/src/main/res/drawable-night/po_success_image.xml create mode 100644 ui/src/main/res/drawable/po_success_image.xml diff --git a/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt b/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt index dd8017205..be12fcdef 100644 --- a/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt +++ b/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt @@ -31,7 +31,7 @@ import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import androidx.lifecycle.Lifecycle import coil.compose.AsyncImage -import com.processout.sdk.R +import com.processout.sdk.ui.R import com.processout.sdk.ui.core.component.* import com.processout.sdk.ui.core.component.field.POField import com.processout.sdk.ui.core.component.field.POFieldLabels diff --git a/ui/src/main/res/drawable-night/po_success_image.xml b/ui/src/main/res/drawable-night/po_success_image.xml new file mode 100644 index 000000000..7e125828c --- /dev/null +++ b/ui/src/main/res/drawable-night/po_success_image.xml @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui/src/main/res/drawable/po_success_image.xml b/ui/src/main/res/drawable/po_success_image.xml new file mode 100644 index 000000000..5ced97078 --- /dev/null +++ b/ui/src/main/res/drawable/po_success_image.xml @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + From 723d3226fd7c0296fc9b036ef997402bee2f78f8 Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Tue, 2 Jul 2024 12:57:04 +0300 Subject: [PATCH 32/42] secondary button colors --- .../sdk/ui/core/component/POButton.kt | 8 +++---- .../processout/sdk/ui/core/theme/Colors.kt | 24 +++++++++---------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt index 6f76ff51c..f55ad4f75 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt @@ -152,7 +152,7 @@ object POButton { textStyle = typography.button ), shape = shapes.roundedCornersSmall, - border = POBorderStroke(width = 1.dp, color = colors.border.default), + border = POBorderStroke(width = 1.dp, color = colors.button.secondaryBorderDefault), backgroundColor = colors.button.secondaryBackgroundDefault, elevation = 0.dp ), @@ -162,13 +162,13 @@ object POButton { textStyle = typography.button ), shape = shapes.roundedCornersSmall, - border = POBorderStroke(width = 1.dp, color = colors.border.disabled), - backgroundColor = colors.button.secondaryBackgroundDefault, + border = POBorderStroke(width = 1.dp, color = colors.button.secondaryBorderDisabled), + backgroundColor = colors.button.secondaryBackgroundDisabled, elevation = 0.dp ), highlighted = HighlightedStyle( textColor = colors.text.primary, - borderColor = colors.border.default, + borderColor = colors.button.secondaryBorderPressed, backgroundColor = colors.button.secondaryBackgroundPressed ), progressIndicatorColor = colors.text.primary diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt index f172aed1e..00ad73fae 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt @@ -39,14 +39,14 @@ data class POColors( @Immutable data class Button( val primaryBackgroundDefault: Color, - val primaryBackgroundPressed: Color, val primaryBackgroundDisabled: Color, + val primaryBackgroundPressed: Color, val secondaryBackgroundDefault: Color, - val secondaryBackgroundPressed: Color, val secondaryBackgroundDisabled: Color, + val secondaryBackgroundPressed: Color, val secondaryBorderDefault: Color, - val secondaryBorderPressed: Color, - val secondaryBorderDisabled: Color + val secondaryBorderDisabled: Color, + val secondaryBorderPressed: Color ) @Immutable @@ -84,14 +84,14 @@ internal val LightColorPalette = POColors( ), button = Button( primaryBackgroundDefault = Color(0xFF121821), - primaryBackgroundPressed = Color(0xFF242C38), primaryBackgroundDisabled = Color(0xFFEDEEEF), + primaryBackgroundPressed = Color(0xFF242C38), secondaryBackgroundDefault = Color(0xFFFFFFFF), - secondaryBackgroundPressed = Color(0xFFCCD1D6), secondaryBackgroundDisabled = Color(0xFFFFFFFF), + secondaryBackgroundPressed = Color(0xFFCCD1D6), secondaryBorderDefault = Color(0xFF121821), - secondaryBorderPressed = Color(0xFF242C38), - secondaryBorderDisabled = Color(0xFFEDEEEF) + secondaryBorderDisabled = Color(0xFFEDEEEF), + secondaryBorderPressed = Color(0xFF242C38) ), surface = Surface( default = Color(0xFFFFFFFF), @@ -125,14 +125,14 @@ internal val DarkColorPalette = POColors( ), button = Button( primaryBackgroundDefault = Color(0xFFFFFFFF), - primaryBackgroundPressed = Color(0xFFCCD1D6), primaryBackgroundDisabled = Color(0xFF242C38), + primaryBackgroundPressed = Color(0xFFCCD1D6), secondaryBackgroundDefault = Color(0xFF121821), - secondaryBackgroundPressed = Color(0xFF7C8593), secondaryBackgroundDisabled = Color(0xFF121821), + secondaryBackgroundPressed = Color(0xFF7C8593), secondaryBorderDefault = Color(0xFFFFFFFF), - secondaryBorderPressed = Color(0xFFCCD1D6), - secondaryBorderDisabled = Color(0xFF242C38) + secondaryBorderDisabled = Color(0xFF242C38), + secondaryBorderPressed = Color(0xFFCCD1D6) ), surface = Surface( default = Color(0xFF121821), From a69a9965f1f247d6830f00b23ee31cfd6c4f61e0 Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Tue, 2 Jul 2024 13:18:42 +0300 Subject: [PATCH 33/42] tertiary button srtyle --- .../com/processout/sdk/ui/core/component/POButton.kt | 8 ++++---- .../kotlin/com/processout/sdk/ui/core/theme/Colors.kt | 9 ++++++--- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt index f55ad4f75..59d512216 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt @@ -180,7 +180,7 @@ object POButton { Style( normal = StateStyle( text = POText.Style( - color = colors.button.primaryBackgroundDefault, + color = colors.text.primary, textStyle = typography.body1 ), shape = shapes.roundedCornersSmall, @@ -201,11 +201,11 @@ object POButton { paddingHorizontal = spacing.large ), highlighted = HighlightedStyle( - textColor = colors.button.primaryBackgroundPressed, + textColor = colors.text.primary, borderColor = Color.Transparent, - backgroundColor = colors.button.secondaryBackgroundPressed + backgroundColor = colors.button.tertiaryBackgroundPressed ), - progressIndicatorColor = colors.button.primaryBackgroundDefault + progressIndicatorColor = colors.text.primary ) } diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt index 00ad73fae..12f5fea5d 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt @@ -46,7 +46,8 @@ data class POColors( val secondaryBackgroundPressed: Color, val secondaryBorderDefault: Color, val secondaryBorderDisabled: Color, - val secondaryBorderPressed: Color + val secondaryBorderPressed: Color, + val tertiaryBackgroundPressed: Color ) @Immutable @@ -91,7 +92,8 @@ internal val LightColorPalette = POColors( secondaryBackgroundPressed = Color(0xFFCCD1D6), secondaryBorderDefault = Color(0xFF121821), secondaryBorderDisabled = Color(0xFFEDEEEF), - secondaryBorderPressed = Color(0xFF242C38) + secondaryBorderPressed = Color(0xFF242C38), + tertiaryBackgroundPressed = Color(0xFFCCD1D6) ), surface = Surface( default = Color(0xFFFFFFFF), @@ -132,7 +134,8 @@ internal val DarkColorPalette = POColors( secondaryBackgroundPressed = Color(0xFF7C8593), secondaryBorderDefault = Color(0xFFFFFFFF), secondaryBorderDisabled = Color(0xFF242C38), - secondaryBorderPressed = Color(0xFFCCD1D6) + secondaryBorderPressed = Color(0xFFCCD1D6), + tertiaryBackgroundPressed = Color(0xFF7C8593) ), surface = Surface( default = Color(0xFF121821), From be089401ca5567333392dd08c8a586fdb0f637ae Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Tue, 2 Jul 2024 13:36:46 +0300 Subject: [PATCH 34/42] Radio buttons color --- .../sdk/ui/core/component/field/radio/PORadioButton.kt | 4 ++-- .../sdk/ui/core/component/field/radio/PORadioGroup.kt | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioButton.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioButton.kt index fbec9bbc5..d249cea9e 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioButton.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioButton.kt @@ -52,9 +52,9 @@ object PORadioButton { val default: Style @Composable get() = with(ProcessOutTheme) { Style( - normalColor = colors.border.default, + normalColor = colors.input.borderDefault, selectedColor = colors.button.primaryBackgroundDefault, - errorColor = colors.text.error + errorColor = colors.input.borderError ) } diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt index a65200057..405bed44a 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt @@ -91,7 +91,7 @@ object PORadioGroup { @Composable get() = with(ProcessOutTheme) { Style( normal = StateStyle( - buttonColor = colors.border.default, + buttonColor = colors.input.borderDefault, text = POText.Style( color = colors.text.primary, textStyle = typography.label2 @@ -105,7 +105,7 @@ object PORadioGroup { ) ), error = StateStyle( - buttonColor = colors.text.error, + buttonColor = colors.input.borderError, text = POText.Style( color = colors.text.primary, textStyle = typography.label2 From 7630939e36d33eb9d35836e5fbd7599919d865f7 Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Tue, 2 Jul 2024 13:38:17 +0300 Subject: [PATCH 35/42] Remove unused Border.default color --- .../src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt | 3 --- 1 file changed, 3 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt index 12f5fea5d..031c3201f 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt @@ -60,7 +60,6 @@ data class POColors( @Immutable data class Border( - val default: Color, val disabled: Color, val subtle: Color ) @@ -102,7 +101,6 @@ internal val LightColorPalette = POColors( error = Color(0xFFFFC2C8) ), border = Border( - default = Color(0xFF8D8D95), disabled = Color(0xFFC4C4C8), subtle = Color(0xFFDDE0E3) ) @@ -144,7 +142,6 @@ internal val DarkColorPalette = POColors( error = Color(0xFFD11D2F) ), border = Border( - default = Color(0xFF93949F), disabled = Color(0xFF363945), subtle = Color(0xFF5B6576) ) From 133e3d0a831d1b64d9bc024593156dff9e37c7f1 Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Tue, 2 Jul 2024 14:38:44 +0300 Subject: [PATCH 36/42] Border & Drag Handle --- .../com/processout/sdk/ui/core/component/PODragHandle.kt | 2 +- .../com/processout/sdk/ui/core/component/POHeader.kt | 2 +- .../main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt | 7 ++----- .../sdk/ui/card/tokenization/CardTokenizationScreen.kt | 2 +- .../com/processout/sdk/ui/card/update/CardUpdateScreen.kt | 2 +- .../sdk/ui/napm/NativeAlternativePaymentScreen.kt | 2 +- 6 files changed, 7 insertions(+), 10 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/PODragHandle.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/PODragHandle.kt index 17be488fa..d30562742 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/PODragHandle.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/PODragHandle.kt @@ -18,7 +18,7 @@ import com.processout.sdk.ui.core.theme.ProcessOutTheme @Composable fun PODragHandle( modifier: Modifier = Modifier, - color: Color = ProcessOutTheme.colors.border.disabled + color: Color = ProcessOutTheme.colors.border.subtle ) = with(ProcessOutTheme) { Box( modifier = modifier diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POHeader.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POHeader.kt index 88c3a2889..0aa857800 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POHeader.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POHeader.kt @@ -25,7 +25,7 @@ fun POHeader( modifier: Modifier = Modifier, style: POText.Style = POText.title, dividerColor: Color = ProcessOutTheme.colors.border.subtle, - dragHandleColor: Color = ProcessOutTheme.colors.border.disabled, + dragHandleColor: Color = ProcessOutTheme.colors.border.subtle, withDragHandle: Boolean = true, animationDurationMillis: Int = 0 ) { diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt index 031c3201f..e5f470ed4 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt @@ -60,7 +60,6 @@ data class POColors( @Immutable data class Border( - val disabled: Color, val subtle: Color ) } @@ -101,8 +100,7 @@ internal val LightColorPalette = POColors( error = Color(0xFFFFC2C8) ), border = Border( - disabled = Color(0xFFC4C4C8), - subtle = Color(0xFFDDE0E3) + subtle = Color(0xFFCCD1D6) ) ) @@ -142,8 +140,7 @@ internal val DarkColorPalette = POColors( error = Color(0xFFD11D2F) ), border = Border( - disabled = Color(0xFF363945), - subtle = Color(0xFF5B6576) + subtle = Color(0xFF7C8593) ) ) diff --git a/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt b/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt index e5f7bc19f..46c010cd1 100644 --- a/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt +++ b/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt @@ -324,6 +324,6 @@ internal object CardTokenizationScreen { } ?: ProcessOutTheme.colors.border.subtle, dragHandleColor = custom?.dragHandleColorResId?.let { colorResource(id = it) - } ?: ProcessOutTheme.colors.border.disabled + } ?: ProcessOutTheme.colors.border.subtle ) } diff --git a/ui/src/main/kotlin/com/processout/sdk/ui/card/update/CardUpdateScreen.kt b/ui/src/main/kotlin/com/processout/sdk/ui/card/update/CardUpdateScreen.kt index 9ca1f239a..4f578caca 100644 --- a/ui/src/main/kotlin/com/processout/sdk/ui/card/update/CardUpdateScreen.kt +++ b/ui/src/main/kotlin/com/processout/sdk/ui/card/update/CardUpdateScreen.kt @@ -203,6 +203,6 @@ internal object CardUpdateScreen { } ?: ProcessOutTheme.colors.border.subtle, dragHandleColor = custom?.dragHandleColorResId?.let { colorResource(id = it) - } ?: ProcessOutTheme.colors.border.disabled + } ?: ProcessOutTheme.colors.border.subtle ) } diff --git a/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt b/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt index be12fcdef..1cfd369c7 100644 --- a/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt +++ b/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentScreen.kt @@ -650,7 +650,7 @@ internal object NativeAlternativePaymentScreen { } ?: colors.border.subtle, dragHandleColor = custom?.dragHandleColorResId?.let { colorResource(id = it) - } ?: colors.border.disabled + } ?: colors.border.subtle ) } From 5ebe64940e833e0ca637ff3bf31e335e088697c9 Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Tue, 2 Jul 2024 17:47:03 +0300 Subject: [PATCH 37/42] Support disabled state and style for radio button --- .../core/component/field/radio/PORadioButton.kt | 12 +++++++++--- .../core/component/field/radio/PORadioGroup.kt | 16 +++++++++++++--- .../sdk/ui/core/style/PORadioButtonStyle.kt | 3 ++- 3 files changed, 24 insertions(+), 7 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioButton.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioButton.kt index d249cea9e..527328ba7 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioButton.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioButton.kt @@ -25,6 +25,7 @@ fun PORadioButton( onClick: () -> Unit, modifier: Modifier = Modifier, style: PORadioButton.Style = PORadioButton.default, + enabled: Boolean = true, isError: Boolean = false ) { RadioButton( @@ -34,6 +35,7 @@ fun PORadioButton( .scale(RadioButtonScale) .requiredWidth(RadioButtonSize) .requiredHeight(ProcessOutTheme.dimensions.formComponentMinHeight), + enabled = enabled, colors = colors(style = style, isError = isError) ) } @@ -46,7 +48,8 @@ object PORadioButton { data class Style( val normalColor: Color, val selectedColor: Color, - val errorColor: Color + val errorColor: Color, + val disabledColor: Color ) val default: Style @@ -54,7 +57,8 @@ object PORadioButton { Style( normalColor = colors.input.borderDefault, selectedColor = colors.button.primaryBackgroundDefault, - errorColor = colors.input.borderError + errorColor = colors.input.borderError, + disabledColor = colors.input.borderDisabled ) } @@ -78,7 +82,9 @@ object PORadioButton { } return RadioButtonDefaults.colors( selectedColor = selectedColor, - unselectedColor = unselectedColor + unselectedColor = unselectedColor, + disabledSelectedColor = style.disabledColor, + disabledUnselectedColor = style.disabledColor ) } } diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt index 405bed44a..22d8c18d2 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt @@ -78,7 +78,8 @@ object PORadioGroup { data class Style( val normal: StateStyle, val selected: StateStyle, - val error: StateStyle + val error: StateStyle, + val disabled: StateStyle ) @Immutable @@ -110,6 +111,13 @@ object PORadioGroup { color = colors.text.primary, textStyle = typography.label2 ) + ), + disabled = StateStyle( + buttonColor = colors.input.borderDisabled, + text = POText.Style( + color = colors.text.primary, + textStyle = typography.label2 + ) ) ) } @@ -118,7 +126,8 @@ object PORadioGroup { fun custom(style: PORadioButtonStyle) = Style( normal = style.normal.toStateStyle(), selected = style.selected.toStateStyle(), - error = style.error.toStateStyle() + error = style.error.toStateStyle(), + disabled = style.disabled?.toStateStyle() ?: style.normal.toStateStyle() ) @Composable @@ -130,7 +139,8 @@ object PORadioGroup { internal fun Style.toRadioButtonStyle() = PORadioButton.Style( normalColor = normal.buttonColor, selectedColor = selected.buttonColor, - errorColor = error.buttonColor + errorColor = error.buttonColor, + disabledColor = disabled.buttonColor ) internal fun textStyle( diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/style/PORadioButtonStyle.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/style/PORadioButtonStyle.kt index 46a1d0304..70583ebbd 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/style/PORadioButtonStyle.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/style/PORadioButtonStyle.kt @@ -8,7 +8,8 @@ import kotlinx.parcelize.Parcelize data class PORadioButtonStyle( val normal: PORadioButtonStateStyle, val selected: PORadioButtonStateStyle, - val error: PORadioButtonStateStyle + val error: PORadioButtonStateStyle, + val disabled: PORadioButtonStateStyle? = null ) : Parcelable @Parcelize From 87da76834d8f5d95a5a73a1b40b99aa1d2a08632 Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Wed, 3 Jul 2024 12:42:51 +0300 Subject: [PATCH 38/42] PORadioGroup style mapping --- .../ui/core/component/field/radio/PORadioGroup.kt | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt index 22d8c18d2..fea41391d 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/radio/PORadioGroup.kt @@ -123,12 +123,15 @@ object PORadioGroup { } @Composable - fun custom(style: PORadioButtonStyle) = Style( - normal = style.normal.toStateStyle(), - selected = style.selected.toStateStyle(), - error = style.error.toStateStyle(), - disabled = style.disabled?.toStateStyle() ?: style.normal.toStateStyle() - ) + fun custom(style: PORadioButtonStyle): Style { + val normal = style.normal.toStateStyle() + return Style( + normal = normal, + selected = style.selected.toStateStyle(), + error = style.error.toStateStyle(), + disabled = style.disabled?.toStateStyle() ?: normal + ) + } @Composable private fun PORadioButtonStateStyle.toStateStyle() = StateStyle( From ee1f7332220772d0dc9b5ab5a9d21d1cd70fa736 Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Wed, 3 Jul 2024 14:53:35 +0300 Subject: [PATCH 39/42] Focused state for POTextField and POCodeField --- .../sdk/ui/core/component/field/POField.kt | 97 +++++++++---------- .../core/component/field/code/POCodeField.kt | 12 +++ .../core/component/field/text/POTextField.kt | 42 ++++---- .../sdk/ui/core/style/POFieldStyle.kt | 3 +- 4 files changed, 85 insertions(+), 69 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt index 4f69212b6..fe30ab0e9 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt @@ -17,7 +17,6 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Shape -import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.platform.LocalLayoutDirection import androidx.compose.ui.res.colorResource import androidx.compose.ui.text.TextStyle @@ -42,7 +41,8 @@ object POField { @Immutable data class Style( val normal: StateStyle, - val error: StateStyle + val error: StateStyle, + val focused: StateStyle ) @Immutable @@ -82,15 +82,31 @@ object POField { dropdownRippleColor = colors.text.muted, shape = shapes.roundedCornersSmall, border = POBorderStroke(width = 1.dp, color = colors.input.borderError) + ), + focused = StateStyle( + text = POText.Style( + color = colors.text.primary, + textStyle = typography.label2 + ), + placeholderTextColor = colors.text.muted, + backgroundColor = colors.input.backgroundDefault, + controlsTintColor = colors.text.primary, + dropdownRippleColor = colors.text.muted, + shape = shapes.roundedCornersSmall, + border = POBorderStroke(width = 1.dp, color = colors.input.borderFocused) ) ) } @Composable - fun custom(style: POFieldStyle) = Style( - normal = style.normal.toStateStyle(), - error = style.error.toStateStyle() - ) + fun custom(style: POFieldStyle): Style { + val normal = style.normal.toStateStyle() + return Style( + normal = normal, + error = style.error.toStateStyle(), + focused = style.focused?.toStateStyle() ?: normal + ) + } @Composable private fun POFieldStateStyle.toStateStyle() = StateStyle( @@ -113,16 +129,24 @@ object POField { vertical = ProcessOutTheme.spacing.medium ) + internal fun Style.stateStyle( + isError: Boolean, + isFocused: Boolean + ): StateStyle = + if (isError) { + error + } else if (isFocused) { + focused + } else { + normal + } + @Composable internal fun textStyle( - style: Style, - isError: Boolean, + style: POText.Style, forceTextDirectionLtr: Boolean ): TextStyle { - val textStyle = when (isError) { - true -> with(style.error.text) { textStyle.copy(color = color) } - false -> with(style.normal.text) { textStyle.copy(color = color) } - } + val textStyle = with(style) { textStyle.copy(color = color) } if (forceTextDirectionLtr && LocalLayoutDirection.current == LayoutDirection.Rtl) { return textStyle.copy( textDirection = TextDirection.Ltr, @@ -132,66 +156,39 @@ object POField { return textStyle } - internal fun textSelectionColors( - style: Style, - isError: Boolean - ): TextSelectionColors { - val color = if (isError) style.error.controlsTintColor else style.normal.controlsTintColor - return TextSelectionColors( + internal fun textSelectionColors(color: Color) = + TextSelectionColors( handleColor = color, backgroundColor = color.copy(alpha = 0.4f) ) - } - - internal fun cursorBrush( - style: Style, - isError: Boolean - ) = SolidColor(value = if (isError) style.error.controlsTintColor else style.normal.controlsTintColor) @Composable internal fun ContainerBox( - style: Style, - isDropdown: Boolean, - isError: Boolean + style: StateStyle, + isDropdown: Boolean ) { - val shape = if (isError) style.error.shape else style.normal.shape Box( Modifier .border( - width = if (isError) style.error.border.width else style.normal.border.width, - color = if (isError) style.error.border.color else style.normal.border.color, - shape = shape + width = style.border.width, + color = style.border.color, + shape = style.shape ) .background( - color = if (isError) style.error.backgroundColor else style.normal.backgroundColor, - shape = shape + color = style.backgroundColor, + shape = style.shape ) - .clip(shape) + .clip(style.shape) .conditional(isDropdown) { clickable( onClick = {}, interactionSource = remember { MutableInteractionSource() }, - indication = rememberRipple( - color = if (isError) style.error.dropdownRippleColor else style.normal.dropdownRippleColor - ) + indication = rememberRipple(color = style.dropdownRippleColor) ) } ) } - @Composable - internal fun Placeholder( - style: Style, - text: String, - isError: Boolean - ) { - POText( - text = text, - color = if (isError) style.error.placeholderTextColor else style.normal.placeholderTextColor, - style = if (isError) style.error.text.textStyle else style.normal.text.textStyle - ) - } - fun keyboardActions( imeAction: ImeAction, actionId: String?, diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/code/POCodeField.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/code/POCodeField.kt index 1a15626cc..4a3bdf476 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/code/POCodeField.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/code/POCodeField.kt @@ -223,6 +223,11 @@ object POCodeField { text = error.text.copy( textStyle = ProcessOutTheme.typography.title ) + ), + focused = focused.copy( + text = focused.text.copy( + textStyle = ProcessOutTheme.typography.title + ) ) ) } @@ -242,6 +247,13 @@ object POCodeField { textAlign = TextAlign.Center ) ) + ), + focused = focused.copy( + text = focused.text.copy( + textStyle = focused.text.textStyle.copy( + textAlign = TextAlign.Center + ) + ) ) ) } diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/text/POTextField.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/text/POTextField.kt index 64850c475..c436443dd 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/text/POTextField.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/text/POTextField.kt @@ -10,19 +10,19 @@ import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.foundation.text.selection.LocalTextSelectionColors import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.OutlinedTextFieldDefaults -import androidx.compose.runtime.Composable -import androidx.compose.runtime.CompositionLocalProvider -import androidx.compose.runtime.remember +import androidx.compose.runtime.* import androidx.compose.ui.Modifier +import androidx.compose.ui.focus.onFocusChanged +import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.text.input.TextFieldValue import androidx.compose.ui.text.input.VisualTransformation import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.processout.sdk.ui.core.annotation.ProcessOutInternalApi +import com.processout.sdk.ui.core.component.POText import com.processout.sdk.ui.core.component.field.POField import com.processout.sdk.ui.core.component.field.POField.ContainerBox -import com.processout.sdk.ui.core.component.field.POField.Placeholder -import com.processout.sdk.ui.core.component.field.POField.cursorBrush +import com.processout.sdk.ui.core.component.field.POField.stateStyle import com.processout.sdk.ui.core.component.field.POField.textSelectionColors import com.processout.sdk.ui.core.component.field.POField.textStyle import com.processout.sdk.ui.core.theme.ProcessOutTheme @@ -52,21 +52,26 @@ fun POTextField( minLines: Int = 1, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() } ) { + var isFocused by remember { mutableStateOf(false) } + val stateStyle = style.stateStyle(isError = isError, isFocused = isFocused) CompositionLocalProvider( - LocalTextSelectionColors provides textSelectionColors(style = style, isError = isError) + LocalTextSelectionColors provides textSelectionColors(stateStyle.controlsTintColor) ) { BasicTextField( value = value, onValueChange = onValueChange, - modifier = modifier.requiredHeight(ProcessOutTheme.dimensions.formComponentMinHeight), + modifier = modifier + .requiredHeight(ProcessOutTheme.dimensions.formComponentMinHeight) + .onFocusChanged { + isFocused = it.isFocused + }, enabled = enabled, readOnly = readOnly, textStyle = textStyle( - style = style, - isError = isError, + style = stateStyle.text, forceTextDirectionLtr = forceTextDirectionLtr ), - cursorBrush = cursorBrush(style = style, isError = isError), + cursorBrush = SolidColor(stateStyle.controlsTintColor), keyboardOptions = keyboardOptions, keyboardActions = keyboardActions, singleLine = singleLine, @@ -81,11 +86,13 @@ fun POTextField( enabled = enabled, isError = isError, placeholder = { - if (!placeholderText.isNullOrBlank()) Placeholder( - style = style, - text = placeholderText, - isError = isError - ) + if (!placeholderText.isNullOrBlank()) { + POText( + text = placeholderText, + color = stateStyle.placeholderTextColor, + style = stateStyle.text.textStyle + ) + } }, leadingIcon = leadingIcon, trailingIcon = trailingIcon, @@ -95,9 +102,8 @@ fun POTextField( contentPadding = contentPadding, container = { ContainerBox( - style = style, - isDropdown = isDropdown, - isError = isError + style = stateStyle, + isDropdown = isDropdown ) } ) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/style/POFieldStyle.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/style/POFieldStyle.kt index 0cfb1646b..e334c3d54 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/style/POFieldStyle.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/style/POFieldStyle.kt @@ -7,7 +7,8 @@ import kotlinx.parcelize.Parcelize @Parcelize data class POFieldStyle( val normal: POFieldStateStyle, - val error: POFieldStateStyle + val error: POFieldStateStyle, + val focused: POFieldStateStyle? = null ) : Parcelable @Parcelize From 0411b844e38b70f56f1eec4393846f6642bcdaad Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Wed, 3 Jul 2024 16:45:30 +0300 Subject: [PATCH 40/42] POCodeField style improvements --- .../core/component/field/code/POCodeField.kt | 51 ++++++------------- 1 file changed, 15 insertions(+), 36 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/code/POCodeField.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/code/POCodeField.kt index 4a3bdf476..4cef954d7 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/code/POCodeField.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/code/POCodeField.kt @@ -214,50 +214,29 @@ object POCodeField { val default: POField.Style @Composable get() = with(POField.default) { copy( - normal = normal.copy( - text = normal.text.copy( - textStyle = ProcessOutTheme.typography.title - ) - ), - error = error.copy( - text = error.text.copy( - textStyle = ProcessOutTheme.typography.title - ) - ), - focused = focused.copy( - text = focused.text.copy( - textStyle = ProcessOutTheme.typography.title - ) - ) + normal = normal.default(), + error = error.default(), + focused = focused.default() ) } internal fun style(style: POField.Style) = with(style) { copy( - normal = normal.copy( - text = normal.text.copy( - textStyle = normal.text.textStyle.copy( - textAlign = TextAlign.Center - ) - ) - ), - error = error.copy( - text = error.text.copy( - textStyle = error.text.textStyle.copy( - textAlign = TextAlign.Center - ) - ) - ), - focused = focused.copy( - text = focused.text.copy( - textStyle = focused.text.textStyle.copy( - textAlign = TextAlign.Center - ) - ) - ) + normal = normal.textAlignCenter(), + error = error.textAlignCenter(), + focused = focused.textAlignCenter() ) } + @Composable + private fun POField.StateStyle.default() = copy( + text = text.copy(textStyle = ProcessOutTheme.typography.title) + ) + + private fun POField.StateStyle.textAlignCenter() = copy( + text = text.copy(textStyle = text.textStyle.copy(textAlign = TextAlign.Center)) + ) + val LengthMin = 1 val LengthMax = 6 From 0027b221f0345687f5408e916e37aede6df78c47 Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Wed, 3 Jul 2024 19:41:00 +0300 Subject: [PATCH 41/42] Focused state and style for PODropdownField --- .../sdk/ui/core/component/field/POField.kt | 2 +- .../core/component/field/dropdown/PODropdownField.kt | 12 ++++++++++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt index fe30ab0e9..608b80f99 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/POField.kt @@ -78,7 +78,7 @@ object POField { ), placeholderTextColor = colors.text.muted, backgroundColor = colors.input.backgroundDefault, - controlsTintColor = colors.text.error, + controlsTintColor = colors.text.primary, dropdownRippleColor = colors.text.muted, shape = shapes.roundedCornersSmall, border = POBorderStroke(width = 1.dp, color = colors.input.borderError) diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/dropdown/PODropdownField.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/dropdown/PODropdownField.kt index 1ff6c0494..8c3ed4b85 100644 --- a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/dropdown/PODropdownField.kt +++ b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/dropdown/PODropdownField.kt @@ -16,6 +16,7 @@ import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.rotate +import androidx.compose.ui.focus.onFocusChanged import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.colorResource import androidx.compose.ui.res.painterResource @@ -28,6 +29,7 @@ import com.processout.sdk.ui.core.annotation.ProcessOutInternalApi import com.processout.sdk.ui.core.component.POBorderStroke import com.processout.sdk.ui.core.component.POText import com.processout.sdk.ui.core.component.field.POField +import com.processout.sdk.ui.core.component.field.POField.stateStyle import com.processout.sdk.ui.core.component.field.text.POTextField import com.processout.sdk.ui.core.state.POAvailableValue import com.processout.sdk.ui.core.state.POImmutableList @@ -56,11 +58,17 @@ fun PODropdownField( expanded = expanded, onExpandedChange = { expanded = it } ) { + var isFocused by remember { mutableStateOf(false) } + val fieldStateStyle = fieldStyle.stateStyle(isError = isError, isFocused = isFocused) POTextField( value = availableValues.elements.find { it.value == value.text } ?.let { TextFieldValue(it.text) } ?: TextFieldValue(), onValueChange = {}, - modifier = modifier.menuAnchor(), + modifier = modifier + .menuAnchor() + .onFocusChanged { + isFocused = it.isFocused + }, style = fieldStyle, enabled = true, readOnly = true, @@ -72,7 +80,7 @@ fun PODropdownField( painter = painterResource(id = R.drawable.po_dropdown_arrow), contentDescription = null, modifier = Modifier.rotate(if (expanded) 180f else 0f), - tint = if (isError) fieldStyle.error.controlsTintColor else fieldStyle.normal.controlsTintColor + tint = fieldStateStyle.text.color ) } ) From ba39b702e930552f9b17158a41b6b6f973d5b214 Mon Sep 17 00:00:00 2001 From: Vitalii Vanziak Date: Wed, 3 Jul 2024 21:49:08 +0300 Subject: [PATCH 42/42] androidxFragmentVersion = '1.8.1' --- build.gradle | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build.gradle b/build.gradle index 23c27b546..0addd97e1 100644 --- a/build.gradle +++ b/build.gradle @@ -40,7 +40,7 @@ ext { androidxAppCompatVersion = '1.7.0' androidxConstraintLayoutVersion = '2.1.4' androidxActivityVersion = '1.9.0' - androidxFragmentVersion = '1.7.1' + androidxFragmentVersion = '1.8.1' androidxLifecycleVersion = '2.7.0' androidxRecyclerViewVersion = '1.3.2' androidxSwipeRefreshLayoutVersion = '1.1.0'