ios, android: lead the badge cards with their price, and set the order card on a grouped background

apps/ios/Shared/Views/Badges/BadgesCheckOrderView.swift

@@ -35,16 +35,13 @@ struct BadgesCheckOrderView: View {
                         orderRow("Duration", Text(period.label))
                         Divider()
                             .padding(.top, 8)
-                        orderRow("Total", period.priceText(store.price(level, period, compact: false)), total: true)
+                            .padding(.bottom, 6)
+                        orderRow("Total", period.priceText(store.price(level, period, compact: false)))
                     }
                     .padding(.horizontal, 24)
                     .padding(.vertical, 12)
                     .background(Color(uiColor: .secondarySystemGroupedBackground))
                     .clipShape(RoundedRectangle(cornerRadius: 16))
-                    .overlay(
-                        RoundedRectangle(cornerRadius: 16)
-                            .stroke(Color(uiColor: .secondarySystemFill), lineWidth: 1)
-                    )
                     .padding(.top, 20)
 
                     Spacer(minLength: 20)
@@ -79,18 +76,17 @@ struct BadgesCheckOrderView: View {
         .alert(item: $alert) { $0.alert }
     }
 
-    private func orderRow(_ title: LocalizedStringKey, _ value: Text, total: Bool = false) -> some View {
+    private func orderRow(_ title: LocalizedStringKey, _ value: Text) -> some View {
         HStack {
             Text(title)
-                .fontWeight(total ? .semibold : .medium)
-                .foregroundColor(total ? nil : theme.colors.secondary)
+                .fontWeight(.medium)
+                .foregroundColor(theme.colors.secondary)
             Spacer()
             value
                 .fontWeight(.semibold)
         }
-        .font(total ? .title3 : .body)
-        .padding(.top, total ? 14 : 8)
-        .padding(.bottom, 8)
+        .font(.body)
+        .padding(.vertical, 8)
     }
 
     private func payButton() -> some View {

apps/ios/Shared/Views/Badges/BadgesChooseBadgeView.swift

@@ -130,15 +130,15 @@ struct BadgesChooseBadgeView: View {
                 Text(level.title)
                     .font(.title3)
                     .fontWeight(.bold)
+                BadgePeriod.monthly.priceText(store.price(level, .monthly))
+                    .font(.body)
                 VStack(spacing: 2) {
                     Text(level.fileSize)
                     Text(level.fileStorage)
                 }
                 .font(.subheadline)
                 .foregroundColor(theme.colors.secondary)
-                BadgePeriod.monthly.priceText(store.price(level, .monthly))
-                    .font(.body)
-                    .padding(.bottom, 20)
+                .padding(.bottom, 20)
             }
             .multilineTextAlignment(.center)
             .padding(.horizontal, 12)

apps/ios/Shared/Views/Badges/BadgesHowLongView.swift

@@ -138,12 +138,11 @@ struct BadgesHowLongView: View {
                     .foregroundColor(isSelected ? theme.colors.primary : theme.colors.secondary)
                     .opacity(forSale ? 1 : 0.4)
                 Text(period.label)
-                    .font(.body)
+                    .font(.subheadline)
                 period.priceText(store.price(level, period))
-                    .font(.title3)
-                    .fontWeight(.semibold)
-                if forSale, let percent = savingsPercent(period) {
-                    Text("Save \(percent)%")
+                    .font(.headline)
+                if let percent = savingsPercent(period) {
+                    Text("\(percent)% off")
                         .font(.footnote)
                         .foregroundColor(isSelected ? theme.colors.primary : theme.colors.secondary)
                 }
@@ -179,7 +178,7 @@ struct BadgesHowLongView: View {
 
             NavigationLink(isActive: $continueActive) {
                 BadgesCheckOrderView(level: level, period: selectedPeriod)
-                    .modifier(ThemedBackground())
+                    .modifier(ThemedBackground(grouped: true))
             } label: {
                 EmptyView()
             }

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/badges/BadgesCheckOrderView.kt

@@ -1,7 +1,6 @@
 package chat.simplex.common.views.badges
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.*
@@ -9,7 +8,6 @@ import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
@@ -29,7 +27,7 @@ fun BadgesCheckOrderView(level: BadgeLevel, period: BadgePeriod, modalManager: M
   CloseWhenSupportGivesWay(modalManager)
 
   ColumnWithScrollBar(
-    Modifier.background(MaterialTheme.colors.background).padding(horizontal = 25.dp).padding(top = 8.dp, bottom = 20.dp),
+    Modifier.padding(horizontal = 25.dp).padding(top = 8.dp, bottom = 20.dp),
     verticalArrangement = Arrangement.spacedBy(16.dp),
     horizontalAlignment = Alignment.CenterHorizontally,
     maxIntrinsicSize = true,
@@ -49,13 +47,12 @@ fun BadgesCheckOrderView(level: BadgeLevel, period: BadgePeriod, modalManager: M
         .padding(top = 20.dp)
         .clip(RoundedCornerShape(16.dp))
         .background(sectionCardColor())
-        .border(1.dp, MaterialTheme.colors.background.mixWith(MaterialTheme.colors.onBackground, 0.92f), RoundedCornerShape(16.dp))
         .padding(horizontal = 24.dp, vertical = 12.dp)
     ) {
       OrderRow(MR.strings.badges_your_badge, stringResource(level.title))
       OrderRow(MR.strings.badges_order_duration, stringResource(period.label))
-      Divider(Modifier.padding(top = 8.dp))
-      OrderRow(MR.strings.badges_order_total, period.priceText(BadgeStore.price(level, period, compact = false)), total = true)
+      Divider(Modifier.padding(top = 8.dp, bottom = 6.dp))
+      OrderRow(MR.strings.badges_order_total, period.priceText(BadgeStore.price(level, period, compact = false)))
     }
 
     Spacer(Modifier.weight(1f).heightIn(min = 20.dp))
@@ -84,17 +81,11 @@ fun BadgesCheckOrderView(level: BadgeLevel, period: BadgePeriod, modalManager: M
 }
 
 @Composable
-private fun OrderRow(title: StringResource, value: String, total: Boolean = false) {
-  val style = if (total) MaterialTheme.typography.h3 else MaterialTheme.typography.body1
-  Row(Modifier.fillMaxWidth().padding(top = if (total) 14.dp else 8.dp, bottom = 8.dp)) {
-    Text(
-      stringResource(title),
-      style = style,
-      fontWeight = if (total) FontWeight.SemiBold else FontWeight.Medium,
-      color = if (total) Color.Unspecified else MaterialTheme.colors.secondary
-    )
+private fun OrderRow(title: StringResource, value: String) {
+  Row(Modifier.fillMaxWidth().padding(vertical = 8.dp)) {
+    Text(stringResource(title), style = MaterialTheme.typography.body1, fontWeight = FontWeight.Medium, color = MaterialTheme.colors.secondary)
     Spacer(Modifier.weight(1f))
-    Text(value, style = style, fontWeight = FontWeight.SemiBold)
+    Text(value, style = MaterialTheme.typography.body1, fontWeight = FontWeight.SemiBold)
   }
 }
 

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/badges/BadgesChooseBadgeView.kt

@@ -144,11 +144,11 @@ private fun LevelCard(level: BadgeLevel, selectedLevel: BadgeLevel, modifier: Mo
       modifier = Modifier.size(60.dp)
     )
     Text(stringResource(level.title), style = MaterialTheme.typography.h3, fontWeight = FontWeight.Bold, textAlign = TextAlign.Center)
+    Text(BadgePeriod.Monthly.priceText(BadgeStore.price(level, BadgePeriod.Monthly)), style = MaterialTheme.typography.body1, textAlign = TextAlign.Center)
     Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(2.dp)) {
       Text(stringResource(level.fileSize), style = MaterialTheme.typography.body2, color = MaterialTheme.colors.secondary, textAlign = TextAlign.Center)
       Text(stringResource(level.fileStorage), style = MaterialTheme.typography.body2, color = MaterialTheme.colors.secondary, textAlign = TextAlign.Center)
     }
-    Text(BadgePeriod.Monthly.priceText(BadgeStore.price(level, BadgePeriod.Monthly)), style = MaterialTheme.typography.body1, textAlign = TextAlign.Center)
   }
 }
 

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/badges/BadgesHowLongView.kt

@@ -168,10 +168,10 @@ private fun PeriodCard(level: BadgeLevel, period: BadgePeriod, selectedPeriod: B
       tint = if (isSelected) MaterialTheme.colors.primary else MaterialTheme.colors.secondary,
       modifier = Modifier.size(32.dp).alpha(if (forSale) 1f else 0.4f)
     )
-    Text(stringResource(period.label), style = MaterialTheme.typography.body1, color = textColor, textAlign = TextAlign.Center)
-    Text(period.priceText(BadgeStore.price(level, period)), style = MaterialTheme.typography.h3, fontWeight = FontWeight.SemiBold, color = textColor, textAlign = TextAlign.Center)
+    Text(stringResource(period.label), style = MaterialTheme.typography.body2, color = textColor, textAlign = TextAlign.Center)
+    Text(period.priceText(BadgeStore.price(level, period)), style = MaterialTheme.typography.body1, fontWeight = FontWeight.SemiBold, color = textColor, textAlign = TextAlign.Center)
     val percent = savingsPercent(level, period)
-    if (forSale && percent != null) {
+    if (percent != null) {
       Text(
         stringResource(MR.strings.badges_savings).format("${percent}%"),
         style = MaterialTheme.typography.body2,
@@ -192,7 +192,7 @@ private fun ContinueButton(level: BadgeLevel, selectedPeriod: BadgePeriod, modal
     labelId = MR.strings.badges_continue,
     onboarding = null,
     onclick = {
-      modalManager.showModal { BadgesCheckOrderView(level, selectedPeriod, modalManager) }
+      modalManager.showModal(cardScreen = true) { BadgesCheckOrderView(level, selectedPeriod, modalManager) }
     }
   )
 }

apps/multiplatform/common/src/commonMain/resources/MR/base/strings.xml

@@ -3153,7 +3153,7 @@
   <string name="badges_pay_once">Pay %1$s</string>
   <string name="badges_price_loading">Loading…</string>
   <string name="badges_price_unavailable">Not available</string>
-  <string name="badges_savings">Save %1$s</string>
+  <string name="badges_savings">%1$s off</string>
   <string name="badges_level_supporter_summary">Supporter: 2 GB files available for 7 days.</string>
   <string name="badges_level_legend_summary">Legend: 5 GB files available for 21 days.</string>
   <string name="badges_period_one_month">1 month</string>