From 38e26bb3c1949ea15d04378f7752ae32608c8c11 Mon Sep 17 00:00:00 2001 From: Konstantin Ivanov <54908981+konstantiniiv@users.noreply.github.com> Date: Tue, 11 Jun 2024 20:26:21 +0200 Subject: [PATCH] DROID-2580 Membership | Design review (#1286) --- .../core_ui/views/DesignSystemButtons.kt | 8 ++--- .../payments/screens/ConditionInfoView.kt | 24 +++++++++++--- .../payments/screens/EnterEmailView.kt | 8 ++--- .../anytype/payments/screens/InfoCardView.kt | 4 +-- .../payments/screens/MembershipScreen.kt | 4 +-- .../payments/screens/TierPreviewView.kt | 32 ++++++++++++++++--- .../anytype/payments/screens/TierScreen.kt | 29 +++++++++-------- 7 files changed, 75 insertions(+), 34 deletions(-) diff --git a/core-ui/src/main/java/com/anytypeio/anytype/core_ui/views/DesignSystemButtons.kt b/core-ui/src/main/java/com/anytypeio/anytype/core_ui/views/DesignSystemButtons.kt index a86b3a0a9e..6b6ec35ecb 100644 --- a/core-ui/src/main/java/com/anytypeio/anytype/core_ui/views/DesignSystemButtons.kt +++ b/core-ui/src/main/java/com/anytypeio/anytype/core_ui/views/DesignSystemButtons.kt @@ -518,12 +518,12 @@ enum class ButtonSize( ) { XSmall( cornerSize = 6.dp, - contentPadding = PaddingValues(9.5.dp, 4.8.dp, 9.5.dp, 4.8.dp), + contentPadding = PaddingValues(9.5.dp, 6.038.dp, 9.5.dp, 6.038.dp), textStyle = Caption1Medium ), XSmallSecondary( cornerSize = 6.dp, - contentPadding = PaddingValues(9.5.dp, 4.8.dp, 9.5.dp, 4.8.dp), + contentPadding = PaddingValues(9.5.dp, 6.038.dp, 9.5.dp, 6.038.dp), textStyle = Caption1Regular ), Small( @@ -548,12 +548,12 @@ enum class ButtonSize( ), Large( cornerSize = 12.dp, - contentPadding = PaddingValues(0.dp, 12.dp, 0.dp, 12.dp), + contentPadding = PaddingValues(0.dp, 13.52.dp, 0.dp, 12.dp), textStyle = ButtonMedium ), LargeSecondary( cornerSize = 12.dp, - contentPadding = PaddingValues(0.dp, 12.dp, 0.dp, 12.dp), + contentPadding = PaddingValues(0.dp, 13.52.dp, 0.dp, 12.dp), textStyle = ButtonRegular ) diff --git a/payments/src/main/java/com/anytypeio/anytype/payments/screens/ConditionInfoView.kt b/payments/src/main/java/com/anytypeio/anytype/payments/screens/ConditionInfoView.kt index 0038f3820c..21a89a0c71 100644 --- a/payments/src/main/java/com/anytypeio/anytype/payments/screens/ConditionInfoView.kt +++ b/payments/src/main/java/com/anytypeio/anytype/payments/screens/ConditionInfoView.kt @@ -1,5 +1,6 @@ package com.anytypeio.anytype.payments.screens +import android.widget.Space import androidx.compose.foundation.background import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row @@ -7,6 +8,7 @@ import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.layout.wrapContentWidth import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Text @@ -81,7 +83,7 @@ fun ConditionInfoView( } is TierConditionInfo.Visible.Error -> { - ConditionInfoViewPriceAndText(price = "", period = state.message) + ConditionInfoError(msg = state.message) } TierConditionInfo.Visible.Pending -> ConditionInfoViewPriceAndText( @@ -91,6 +93,20 @@ fun ConditionInfoView( } } +@Composable +private fun ConditionInfoError(msg: String) { + Text( + modifier = Modifier + .padding(horizontal = 20.dp) + .wrapContentWidth(), + text = msg, + color = colorResource(id = R.color.palette_system_red), + style = Relations2, + textAlign = TextAlign.Center + ) + Spacer(modifier = Modifier.height(16.dp)) +} + @Composable private fun ConditionInfoViewPriceAndText(price: String, period: String) { Row( @@ -138,7 +154,7 @@ fun ConditionInfoViewValid( style = BodyBold, textAlign = TextAlign.Center ) - Spacer(modifier = Modifier.height(14.dp)) + Spacer(modifier = Modifier.height(15.dp)) Column( modifier = Modifier .fillMaxWidth() @@ -151,7 +167,7 @@ fun ConditionInfoViewValid( Text( modifier = Modifier .fillMaxWidth() - .padding(top = 34.dp), + .padding(top = 36.dp), text = stringResource(id = R.string.payments_tier_current_valid), color = colorResource(id = R.color.text_primary), style = Relations2, @@ -160,7 +176,7 @@ fun ConditionInfoViewValid( Text( modifier = Modifier .fillMaxWidth() - .padding(top = 4.dp), + .padding(top = 6.dp), text = textValidUntil, color = colorResource(id = R.color.text_primary), style = HeadlineTitle, diff --git a/payments/src/main/java/com/anytypeio/anytype/payments/screens/EnterEmailView.kt b/payments/src/main/java/com/anytypeio/anytype/payments/screens/EnterEmailView.kt index 141ceabb4b..b94b2baf55 100644 --- a/payments/src/main/java/com/anytypeio/anytype/payments/screens/EnterEmailView.kt +++ b/payments/src/main/java/com/anytypeio/anytype/payments/screens/EnterEmailView.kt @@ -73,7 +73,7 @@ fun MembershipEmailScreen( ) .padding(horizontal = 20.dp) ) { - Spacer(modifier = Modifier.height(40.dp)) + Spacer(modifier = Modifier.height(41.dp)) Text( modifier = Modifier.fillMaxWidth(), text = stringResource(id = R.string.payments_email_title), @@ -81,7 +81,7 @@ fun MembershipEmailScreen( style = BodyRegular, textAlign = TextAlign.Start ) - Spacer(modifier = Modifier.height(6.dp)) + Spacer(modifier = Modifier.height(9.dp)) Text( modifier = Modifier.fillMaxWidth(), text = stringResource(id = R.string.payments_email_subtitle), @@ -89,7 +89,7 @@ fun MembershipEmailScreen( style = BodyCallout, textAlign = TextAlign.Start ) - Spacer(modifier = Modifier.height(10.dp)) + Spacer(modifier = Modifier.height(26.dp)) Box(modifier = Modifier) { BasicTextField2( modifier = Modifier @@ -128,7 +128,7 @@ fun MembershipEmailScreen( is TierEmail.Visible.ErrorOther -> colorResource(id = R.color.palette_system_red) to (state.message ?: stringResource(id = R.string.membership_any_name_unknown)) else -> Color.Transparent to "" } - Spacer(modifier = Modifier.height(10.dp)) + Spacer(modifier = Modifier.height(6.dp)) Text( modifier = Modifier .fillMaxWidth() diff --git a/payments/src/main/java/com/anytypeio/anytype/payments/screens/InfoCardView.kt b/payments/src/main/java/com/anytypeio/anytype/payments/screens/InfoCardView.kt index 1bfad3a670..1ac02fcd89 100644 --- a/payments/src/main/java/com/anytypeio/anytype/payments/screens/InfoCardView.kt +++ b/payments/src/main/java/com/anytypeio/anytype/payments/screens/InfoCardView.kt @@ -53,7 +53,7 @@ fun InfoCard( contentDescription = "Main payments image" ) } - Spacer(modifier = Modifier.height(24.dp)) + Spacer(modifier = Modifier.height(27.dp)) Text( modifier = Modifier .fillMaxWidth() @@ -65,7 +65,7 @@ fun InfoCard( ) Text( modifier = Modifier - .padding(start = 32.dp, end = 32.dp, top = 6.dp) + .padding(start = 32.dp, end = 32.dp, top = 9.dp) .verticalScroll(rememberScrollState()), text = subtitle, color = colorResource(id = R.color.text_primary), diff --git a/payments/src/main/java/com/anytypeio/anytype/payments/screens/MembershipScreen.kt b/payments/src/main/java/com/anytypeio/anytype/payments/screens/MembershipScreen.kt index d8dc3e0263..119a603b4e 100644 --- a/payments/src/main/java/com/anytypeio/anytype/payments/screens/MembershipScreen.kt +++ b/payments/src/main/java/com/anytypeio/anytype/payments/screens/MembershipScreen.kt @@ -112,7 +112,7 @@ private fun MainContent( ) { if (state is MembershipMainState.Default) { Title() - Spacer(modifier = Modifier.height(7.dp)) + Spacer(modifier = Modifier.height(8.dp)) if (state.subtitle != null) { Subtitle(state.subtitle) } @@ -183,7 +183,7 @@ private fun Title() { Text( modifier = Modifier .fillMaxWidth() - .padding(start = 20.dp, end = 20.dp, top = 37.dp), + .padding(start = 20.dp, end = 20.dp, top = 29.dp), text = stringResource(id = R.string.payments_header), color = colorResource(id = R.color.text_primary), style = headerTextStyle, diff --git a/payments/src/main/java/com/anytypeio/anytype/payments/screens/TierPreviewView.kt b/payments/src/main/java/com/anytypeio/anytype/payments/screens/TierPreviewView.kt index 07248014c6..35cabff3a1 100644 --- a/payments/src/main/java/com/anytypeio/anytype/payments/screens/TierPreviewView.kt +++ b/payments/src/main/java/com/anytypeio/anytype/payments/screens/TierPreviewView.kt @@ -1,5 +1,6 @@ package com.anytypeio.anytype.payments.screens +import android.content.res.Configuration import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.layout.Box @@ -12,6 +13,7 @@ import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -25,6 +27,7 @@ import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.em import androidx.compose.ui.unit.sp @@ -40,6 +43,8 @@ import com.anytypeio.anytype.payments.constants.MembershipConstants.CO_CREATOR_I import com.anytypeio.anytype.payments.constants.MembershipConstants.EXPLORER_ID import com.anytypeio.anytype.payments.models.TierPreview import com.anytypeio.anytype.payments.models.Tier +import com.anytypeio.anytype.payments.models.TierConditionInfo +import com.anytypeio.anytype.payments.models.TierPeriod import com.anytypeio.anytype.presentation.editor.cover.CoverColor import com.anytypeio.anytype.presentation.membership.models.TierId @@ -86,7 +91,7 @@ fun TierPreviewView( Text( modifier = Modifier .fillMaxWidth() - .padding(start = 17.dp, top = 10.dp), + .padding(start = 17.dp, top = 11.dp), text = tier.title, color = colorResource(id = R.color.text_primary), style = titleTextStyle, @@ -95,21 +100,22 @@ fun TierPreviewView( Text( modifier = Modifier .fillMaxWidth() - .height(96.dp) - .padding(start = 16.dp, end = 16.dp, top = 5.dp), + .height(99.dp) + .padding(start = 16.dp, end = 16.dp, top = 8.dp), text = tier.subtitle, color = colorResource(id = R.color.text_primary), style = Caption1Regular, textAlign = TextAlign.Start ) ConditionInfoPreview(state = tier.conditionInfo) + Spacer(modifier = Modifier.height(2.dp)) ButtonPrimary( text = stringResource(id = R.string.payments_button_learn), modifier = Modifier .fillMaxWidth() .padding(horizontal = 16.dp), onClick = { onClick(tier.id) }, - size = ButtonSize.Small + size = ButtonSize.XSmall ) Spacer(modifier = Modifier.height(10.dp)) } @@ -237,4 +243,20 @@ data class TierResources( data class TierColors( val gradientStart: Color, val gradientEnd: Color -) \ No newline at end of file +) + +@ExperimentalMaterial3Api +@Composable +@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES, name = "Light Mode") +@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_NO, name = "Dark Mode") +fun TierPreviewViewPreview() { + TierPreviewView( + tier = TierPreview( + id = TierId(BUILDER_ID), + title = "Builder", + subtitle = "For those who want to build and create", + conditionInfo = TierConditionInfo.Visible.Price("99.99", TierPeriod.Year(1)), + isActive = true + ) + ) {} +} \ No newline at end of file diff --git a/payments/src/main/java/com/anytypeio/anytype/payments/screens/TierScreen.kt b/payments/src/main/java/com/anytypeio/anytype/payments/screens/TierScreen.kt index 788c2d4b15..010655b7b3 100644 --- a/payments/src/main/java/com/anytypeio/anytype/payments/screens/TierScreen.kt +++ b/payments/src/main/java/com/anytypeio/anytype/payments/screens/TierScreen.kt @@ -1,5 +1,6 @@ package com.anytypeio.anytype.payments.screens +import android.content.res.Configuration import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.Image import androidx.compose.foundation.background @@ -35,6 +36,7 @@ import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.withStyle import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp +import com.anytypeio.anytype.core_models.membership.MembershipErrors import com.anytypeio.anytype.core_models.membership.MembershipPaymentMethod import com.anytypeio.anytype.core_ui.views.BodyCallout import com.anytypeio.anytype.core_ui.views.ButtonPrimary @@ -130,13 +132,13 @@ private fun TierViewVisible( ) { Icon( modifier = Modifier - .padding(start = 16.dp), + .padding(start = 20.dp), painter = painterResource(id = tierResources.mediumIcon), contentDescription = "logo", tint = tierResources.colors.gradientEnd ) } - Spacer(modifier = Modifier.height(14.dp)) + Spacer(modifier = Modifier.height(12.dp)) Text( modifier = Modifier .fillMaxWidth() @@ -158,18 +160,18 @@ private fun TierViewVisible( Text( modifier = Modifier .fillMaxWidth() - .padding(start = 20.dp, end = 20.dp, top = 22.dp), + .padding(start = 20.dp, end = 20.dp, top = 25.dp), text = stringResource(id = R.string.payments_details_whats_included), color = colorResource(id = R.color.text_secondary), style = BodyCallout, textAlign = TextAlign.Start ) - Spacer(modifier = Modifier.height(6.dp)) + Spacer(modifier = Modifier.height(9.dp)) state.tier.features.forEach { benefit -> Benefit(benefit = benefit) - Spacer(modifier = Modifier.height(6.dp)) + Spacer(modifier = Modifier.height(9.dp)) } - Spacer(modifier = Modifier.height(30.dp)) + Spacer(modifier = Modifier.height(23.dp)) } Column( modifier = Modifier @@ -180,7 +182,7 @@ private fun TierViewVisible( color = colorResource(id = R.color.background_primary) ) ) { - Spacer(modifier = Modifier.height(26.dp)) + Spacer(modifier = Modifier.height(27.dp)) if (state.tier.isActive) { ConditionInfoView(state = state.tier.conditionInfo) MembershipEmailScreen( @@ -194,11 +196,11 @@ private fun TierViewVisible( actionTier = actionTier ) } else { + ConditionInfoView(state = state.tier.conditionInfo) AnyNameView( anyNameState = state.tier.membershipAnyName, anyNameTextField = anyNameTextField ) - ConditionInfoView(state = state.tier.conditionInfo) Spacer(modifier = Modifier.height(14.dp)) MainButton( buttonState = state.tier.buttonState, @@ -226,7 +228,7 @@ fun Benefit(benefit: String) { Image( modifier = Modifier .wrapContentSize() - .align(Alignment.CenterStart), + .align(Alignment.TopStart), painter = painterResource(id = R.drawable.ic_check_16), contentDescription = "text check icon" ) @@ -402,10 +404,12 @@ private fun SupportText(text: String) { } @OptIn(ExperimentalFoundationApi::class) -@Preview +@ExperimentalMaterial3Api @Composable +@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES, name = "Light Mode") +@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_NO, name = "Dark Mode") fun TierViewScreenPreview() { - TierViewScreen( + TierViewVisible( state = MembershipTierState.Visible( tier = Tier( title = "Builder", @@ -416,7 +420,7 @@ fun TierViewScreenPreview() { "Feature 3", "Feature 1" ), - isActive = false, + isActive = true, conditionInfo = TierConditionInfo.Visible.Valid( dateEnds = 1714199910, period = TierPeriod.Year(1), @@ -435,7 +439,6 @@ fun TierViewScreenPreview() { ) ), actionTier = {}, - onDismiss = {}, anyNameTextField = TextFieldState(), anyEmailTextField = TextFieldState() )