diff --git a/app/src/main/java/app/closer/ui/home/HomeScreen.kt b/app/src/main/java/app/closer/ui/home/HomeScreen.kt index 7b19c6d4..98ee9a42 100644 --- a/app/src/main/java/app/closer/ui/home/HomeScreen.kt +++ b/app/src/main/java/app/closer/ui/home/HomeScreen.kt @@ -17,7 +17,7 @@ import app.closer.ui.questions.displayCategoryName import app.closer.ui.theme.CloserPalette import app.closer.ui.theme.closerBackgroundBrush import app.closer.ui.theme.closerCardColor -import androidx.compose.foundation.BorderStroke +import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box @@ -25,6 +25,7 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.navigationBarsPadding import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.safeDrawingPadding @@ -38,8 +39,6 @@ import androidx.compose.material.icons.automirrored.filled.ArrowForward import androidx.compose.material.icons.filled.Favorite import androidx.compose.material.icons.filled.Lock import androidx.compose.material.icons.filled.LocalFireDepartment -import androidx.compose.material.icons.filled.Person -import androidx.compose.material.icons.filled.PersonAdd import app.closer.domain.model.OutcomeDay import app.closer.ui.components.OutcomeCheckInDialog import androidx.compose.material3.Icon @@ -58,7 +57,10 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.Brush import androidx.compose.foundation.clickable +import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color +import androidx.compose.ui.layout.ContentScale +import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview @@ -66,6 +68,7 @@ import androidx.compose.ui.unit.dp import androidx.compose.material3.SnackbarHost import androidx.compose.material3.SnackbarHostState import androidx.hilt.navigation.compose.hiltViewModel +import app.closer.R @Composable fun HomeScreen( @@ -522,31 +525,31 @@ private fun PartnerActivationCard( } } - Row( - modifier = Modifier.fillMaxWidth(), - horizontalArrangement = Arrangement.spacedBy(16.dp), - verticalAlignment = Alignment.CenterVertically - ) { - PartnerActivationAvatars() - Column( - modifier = Modifier.weight(1f), - verticalArrangement = Arrangement.spacedBy(8.dp) - ) { - Text( - text = "A private space for two", - style = MaterialTheme.typography.headlineSmall.copy(fontWeight = FontWeight.SemiBold), - color = MaterialTheme.colorScheme.onSurface, - maxLines = 2, - overflow = TextOverflow.Ellipsis - ) - Text( - text = "Invite your partner to unlock shared reveals, games, streaks, and answers you can both respond to.", - style = MaterialTheme.typography.bodyMedium, - color = Color(0xFF4D4354), - maxLines = 4, - overflow = TextOverflow.Ellipsis - ) - } + Image( + painter = painterResource(R.drawable.illustration_partner_activation), + contentDescription = null, + contentScale = ContentScale.Crop, + modifier = Modifier + .fillMaxWidth() + .height(142.dp) + .clip(RoundedCornerShape(22.dp)) + ) + + Column(verticalArrangement = Arrangement.spacedBy(8.dp)) { + Text( + text = "A private space for two", + style = MaterialTheme.typography.headlineSmall.copy(fontWeight = FontWeight.SemiBold), + color = MaterialTheme.colorScheme.onSurface, + maxLines = 2, + overflow = TextOverflow.Ellipsis + ) + Text( + text = "Invite your partner to unlock shared reveals, games, streaks, and answers you can both respond to.", + style = MaterialTheme.typography.bodyMedium, + color = Color(0xFF4D4354), + maxLines = 4, + overflow = TextOverflow.Ellipsis + ) } Row( @@ -579,45 +582,6 @@ private fun PartnerActivationCard( } } -@Composable -private fun PartnerActivationAvatars() { - Box(modifier = Modifier.size(width = 92.dp, height = 58.dp)) { - Surface( - modifier = Modifier - .size(52.dp) - .align(Alignment.CenterStart), - shape = RoundedCornerShape(999.dp), - color = CloserPalette.PurpleDeep - ) { - Box(contentAlignment = Alignment.Center) { - Icon( - imageVector = Icons.Filled.Person, - contentDescription = null, - tint = MaterialTheme.colorScheme.surface, - modifier = Modifier.size(27.dp) - ) - } - } - Surface( - modifier = Modifier - .size(52.dp) - .align(Alignment.CenterEnd), - shape = RoundedCornerShape(999.dp), - color = MaterialTheme.colorScheme.surface.copy(alpha = 0.9f), - border = BorderStroke(1.5.dp, CloserPalette.PurpleDeep.copy(alpha = 0.42f)) - ) { - Box(contentAlignment = Alignment.Center) { - Icon( - imageVector = Icons.Filled.PersonAdd, - contentDescription = null, - tint = CloserPalette.PurpleDeep, - modifier = Modifier.size(26.dp) - ) - } - } - } -} - @Composable private fun ActivationBenefitPill( label: String, diff --git a/app/src/main/res/drawable-nodpi/illustration_partner_activation.png b/app/src/main/res/drawable-nodpi/illustration_partner_activation.png new file mode 100644 index 00000000..696c8349 Binary files /dev/null and b/app/src/main/res/drawable-nodpi/illustration_partner_activation.png differ diff --git a/iphone/Closer/Pairing/PairingViews.swift b/iphone/Closer/Pairing/PairingViews.swift index ca67d1fe..a7ae51d7 100644 --- a/iphone/Closer/Pairing/PairingViews.swift +++ b/iphone/Closer/Pairing/PairingViews.swift @@ -79,20 +79,23 @@ struct PartnerActivationCard: View { .clipShape(Capsule()) } - HStack(alignment: .center, spacing: CloserSpacing.lg) { - ActivationAvatarPair() + Image("illustration-partner-activation") + .resizable() + .scaledToFill() + .frame(maxWidth: .infinity) + .frame(height: 148) + .clipShape(RoundedRectangle(cornerRadius: CloserRadius.large, style: .continuous)) - VStack(alignment: .leading, spacing: CloserSpacing.sm) { - Text("A private space for two") - .font(CloserFont.title2) - .foregroundColor(.closerText) - .fixedSize(horizontal: false, vertical: true) + VStack(alignment: .leading, spacing: CloserSpacing.sm) { + Text("A private space for two") + .font(CloserFont.title2) + .foregroundColor(.closerText) + .fixedSize(horizontal: false, vertical: true) - Text("Invite your partner to unlock shared reveals, games, streaks, and answers you can both respond to.") - .font(CloserFont.callout) - .foregroundColor(.closerTextSecondary) - .fixedSize(horizontal: false, vertical: true) - } + Text("Invite your partner to unlock shared reveals, games, streaks, and answers you can both respond to.") + .font(CloserFont.callout) + .foregroundColor(.closerTextSecondary) + .fixedSize(horizontal: false, vertical: true) } HStack(spacing: CloserSpacing.sm) { @@ -130,37 +133,6 @@ struct PartnerActivationCard: View { } } -private struct ActivationAvatarPair: View { - var body: some View { - ZStack { - Circle() - .fill(Color.closerPrimary) - .frame(width: 54, height: 54) - .overlay { - Image(systemName: "person.fill") - .font(.system(size: 25, weight: .semibold)) - .foregroundColor(.white) - } - .offset(x: -18) - - Circle() - .fill(Color.closerBackground.opacity(0.9)) - .frame(width: 54, height: 54) - .overlay { - Circle() - .stroke(Color.closerPrimary.opacity(0.42), lineWidth: 1.5) - } - .overlay { - Image(systemName: "person.crop.circle.badge.plus") - .font(.system(size: 23, weight: .semibold)) - .foregroundColor(.closerPrimary) - } - .offset(x: 18) - } - .frame(width: 92, height: 62) - } -} - private struct ActivationBenefitChip: View { let label: String diff --git a/iphone/Closer/Resources/illustration-partner-activation.png b/iphone/Closer/Resources/illustration-partner-activation.png new file mode 100644 index 00000000..696c8349 Binary files /dev/null and b/iphone/Closer/Resources/illustration-partner-activation.png differ