DROID-2580 Membership | Design review (#1286)

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,

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()

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),

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,

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
-)
+)
+
+@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
+        )
+    ) {}
+}

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()
     )