diff --git a/apps/ios/Shared/Views/Badges/BadgesPayView.swift b/apps/ios/Shared/Views/Badges/BadgesPayView.swift index aa293f324a..4593820400 100644 --- a/apps/ios/Shared/Views/Badges/BadgesPayView.swift +++ b/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)) diff --git a/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/badges/BadgesPayView.kt b/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/badges/BadgesPayView.kt index 8bf23a3f60..549ecccb54 100644 --- a/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/badges/BadgesPayView.kt +++ b/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) ) { diff --git a/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/badges/BadgesYourLevelView.kt b/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/badges/BadgesYourLevelView.kt index 2f5b0b3706..5fcc63dcdf 100644 --- a/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/badges/BadgesYourLevelView.kt +++ b/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 } diff --git a/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/usersettings/SettingsView.kt b/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/usersettings/SettingsView.kt index 68bf93a203..ee109be047 100644 --- a/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/usersettings/SettingsView.kt +++ b/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))