wip

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

@@ -100,11 +100,11 @@ struct BadgesPayView: View {
                     .scaledToFit()
                     .frame(width: 32, height: 32)
                     .foregroundColor(isSelected ? theme.colors.primary : theme.colors.secondary)
-                    .padding(.top, 20)
+                    .padding(.top, 30)
                 Text(period.label)
                     .font(.title3)
                     .fontWeight(.bold)
-                    .padding(.bottom, 20)
+                    .padding(.bottom, 30)
             }
             .frame(maxWidth: .infinity)
             .background(Color(uiColor: .secondarySystemGroupedBackground))

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

@@ -4,6 +4,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.*
 import androidx.compose.runtime.*
@@ -70,8 +71,10 @@ fun BadgesPayView(level: BadgeLevel) {
       modifier = Modifier.fillMaxWidth().padding(top = 4.dp)
     )
 
+    Spacer(Modifier.weight(1f).heightIn(min = 20.dp))
+
     Row(
-      Modifier.fillMaxWidth().padding(top = 12.dp),
+      Modifier.fillMaxWidth(),
       horizontalArrangement = Arrangement.spacedBy(12.dp)
     ) {
       PeriodCard(BadgePeriod.OneMonth, selectedPeriod, Modifier.weight(1f)) { selectedPeriod = it }
@@ -80,19 +83,24 @@ fun BadgesPayView(level: BadgeLevel) {
 
     Spacer(Modifier.weight(1f).heightIn(min = 20.dp))
 
-    // Plain Text (not TextButtonBelowOnboardingButton) because the billing footer is informational,
-    // not an action — using TextButtonBelowOnboardingButton would force a Medium-weight bold look.
-    // 15.5dp top padding matches the visual gap the TextButtonBelowOnboardingButton produces on
-    // the other two badges views (7.5dp Modifier + 8dp TextButton chip inner padding).
+    // Replicates TextButtonBelowOnboardingButton's exact structure (TextButton chip + 7.5dp outer
+    // Modifier padding + 5dp Text vertical padding) so Pay's action-button-to-supporting-text
+    // spacing matches Support Simplex and Your Level to the pixel. onClick = {} + no fontWeight
+    // keeps it non-interactive-feeling and normal weight (not Medium/bold).
     Column(horizontalAlignment = Alignment.CenterHorizontally) {
       PayButton(level, selectedPeriod)
-      Text(
-        stringResource(billingFooter(selectedPeriod)),
-        style = MaterialTheme.typography.body2,
-        color = MaterialTheme.colors.secondary,
-        textAlign = TextAlign.Center,
-        modifier = Modifier.fillMaxWidth().padding(top = 15.5.dp)
-      )
+      TextButton(
+        onClick = {},
+        modifier = Modifier.padding(top = 7.5.dp, bottom = 7.5.dp).clip(CircleShape)
+      ) {
+        Text(
+          stringResource(billingFooter(selectedPeriod)),
+          Modifier.padding(vertical = 5.dp),
+          style = MaterialTheme.typography.body2,
+          color = MaterialTheme.colors.secondary,
+          textAlign = TextAlign.Center
+        )
+      }
     }
   }
 }
@@ -108,7 +116,7 @@ private fun PeriodCard(period: BadgePeriod, selectedPeriod: BadgePeriod, modifie
       .background(MaterialTheme.colors.background.mixWith(MaterialTheme.colors.onBackground, 0.97f), shape)
       .border(2.dp, borderColor, shape)
       .clickable { onSelect(period) }
-      .padding(vertical = 20.dp, horizontal = 12.dp),
+      .padding(vertical = 30.dp, horizontal = 12.dp),
     horizontalAlignment = Alignment.CenterHorizontally,
     verticalArrangement = Arrangement.spacedBy(12.dp)
   ) {

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

@@ -111,8 +111,10 @@ fun BadgesYourLevelView() {
       )
     }
 
+    Spacer(Modifier.weight(1f).heightIn(min = 20.dp))
+
     Row(
-      Modifier.fillMaxWidth().padding(top = 8.dp),
+      Modifier.fillMaxWidth(),
       horizontalArrangement = Arrangement.spacedBy(12.dp)
     ) {
       LevelCard(BadgeLevel.Supporter, selectedLevel, Modifier.weight(1f)) { selectedLevel = it }

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/usersettings/SettingsView.kt

@@ -104,7 +104,9 @@ fun SettingsLayout(
     SectionDividerSpaced()
 
     SectionView {
-      SectionItemView(click = showSettingsModal { BadgesSupportSimplexView() }) {
+      // Direct showModal (no settings / cardScreen flags) — settings-style card chrome would render
+      // a gray top bar / back button that badges views don't want (they have their own inline titles).
+      SectionItemView(click = { ModalManager.start.showModal { BadgesSupportSimplexView() } }) {
         Image(painterResource(MR.images.badge_supporter), stringResource(MR.strings.supporter_perks), Modifier.size(24.dp))
         TextIconSpaced()
         Text(stringResource(MR.strings.supporter_perks))