diff --git a/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/WelcomeView.kt b/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/WelcomeView.kt index 091c87dc2e..0e3bad0b91 100644 --- a/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/WelcomeView.kt +++ b/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/WelcomeView.kt @@ -161,7 +161,7 @@ fun CreateFirstProfile(chatModel: ChatModel, close: () -> Unit) { contentAlignment = Alignment.Center ) { Image( - painter = painterResource(MR.images.intro_2), + painter = painterResource(MR.images.create_profile), contentDescription = null, modifier = Modifier.size(200.dp), contentScale = ContentScale.Fit diff --git a/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/onboarding/ChooseServerOperators.kt b/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/onboarding/ChooseServerOperators.kt index abc55f15c7..cbac9f9bae 100644 --- a/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/onboarding/ChooseServerOperators.kt +++ b/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/onboarding/ChooseServerOperators.kt @@ -15,7 +15,7 @@ import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.text.TextStyle - import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import chat.simplex.common.BuildConfigCommon @@ -53,8 +53,8 @@ fun ModalData.OnboardingConditionsView() { ) { Column( (if (appPlatform.isDesktop) Modifier.width(450.dp).align(Alignment.CenterHorizontally) else Modifier) - .fillMaxWidth() - .padding(horizontal = DEFAULT_ONBOARDING_HORIZONTAL_PADDING), + .fillMaxWidth() + .padding(horizontal = DEFAULT_ONBOARDING_HORIZONTAL_PADDING), horizontalAlignment = Alignment.CenterHorizontally ) { // Isometric illustration (conditional on USE_BRANDED_IMAGES) @@ -67,7 +67,7 @@ fun ModalData.OnboardingConditionsView() { contentAlignment = Alignment.Center ) { Image( - painter = painterResource(MR.images.intro_2), + painter = painterResource(MR.images.use_conditions), contentDescription = null, modifier = Modifier.size(200.dp), contentScale = ContentScale.Fit @@ -75,7 +75,6 @@ fun ModalData.OnboardingConditionsView() { } Spacer(Modifier.height(DEFAULT_PADDING)) } - // Title: "Conditions of use" (centered, bold) Text( text = stringResource(MR.strings.conditions_of_use_title), @@ -85,16 +84,14 @@ fun ModalData.OnboardingConditionsView() { textAlign = TextAlign.Center, modifier = Modifier.fillMaxWidth() ) - - Spacer(Modifier.height(DEFAULT_PADDING * 2)) + + Spacer(Modifier.height(DEFAULT_PADDING)) } - Spacer(Modifier.weight(1f)) - Column( (if (appPlatform.isDesktop) Modifier.width(450.dp).align(Alignment.CenterHorizontally) else Modifier) - .fillMaxWidth() - .padding(horizontal = DEFAULT_ONBOARDING_HORIZONTAL_PADDING), + .fillMaxWidth() + .padding(horizontal = DEFAULT_ONBOARDING_HORIZONTAL_PADDING), horizontalAlignment = Alignment.Start ) { // Body text (left-aligned) @@ -127,7 +124,7 @@ fun ModalData.OnboardingConditionsView() { // Privacy policy link (blue, underlined) Text( stringResource(MR.strings.onboarding_conditions_privacy_policy_and_conditions_of_use), - style = TextStyle(fontSize = 17.sp, textDecoration = TextDecoration.Underline), + style = TextStyle(fontSize = 17.sp), color = MaterialTheme.colors.primary, modifier = Modifier .clickable( @@ -140,11 +137,14 @@ fun ModalData.OnboardingConditionsView() { } ) } - Spacer(Modifier.weight(1f)) + Spacer(Modifier.height(DEFAULT_PADDING * 3)) Column(Modifier.widthIn(max = if (appPlatform.isAndroid) 450.dp else 1000.dp).align(Alignment.CenterHorizontally), horizontalAlignment = Alignment.CenterHorizontally) { + Spacer(Modifier.height(DEFAULT_PADDING)) + AcceptConditionsButton(enabled = selectedOperatorIds.value.isNotEmpty(), selectedOperatorIds) - + + Spacer(Modifier.height(DEFAULT_PADDING)) // Configure server operators link with icon Row( modifier = Modifier @@ -166,15 +166,15 @@ fun ModalData.OnboardingConditionsView() { fontSize = 16.sp ) Spacer(Modifier.width(8.dp)) - // Server operator icon - using network icon if available, otherwise a simple circle - Icon( - painterResource(MR.images.ic_info), - contentDescription = null, - tint = MaterialTheme.colors.secondary, - modifier = Modifier.size(16.dp) - ) + serverOperators.value.forEach { op -> + Image( + painterResource(op.logo), + contentDescription = op.tradeName, + modifier = Modifier.size(24.dp) + ) + Spacer(Modifier.width(4.dp)) + } } - // Configure notifications link with icon Row( modifier = Modifier @@ -196,14 +196,15 @@ fun ModalData.OnboardingConditionsView() { fontSize = 16.sp ) Spacer(Modifier.width(8.dp)) - // Notification icon - using bolt/lightning icon Icon( BoltFilled, contentDescription = null, tint = MaterialTheme.colors.primary, - modifier = Modifier.size(16.dp) + modifier = Modifier.size(24.dp) ) } + + Spacer(Modifier.width(DEFAULT_PADDING * 2)) } } } @@ -238,10 +239,11 @@ fun ModalData.ChooseServerOperators( } Spacer(Modifier.weight(1f)) - Column(( - if (appPlatform.isDesktop) Modifier.width(600.dp).align(Alignment.CenterHorizontally) else Modifier) - .fillMaxWidth() - .padding(horizontal = DEFAULT_ONBOARDING_HORIZONTAL_PADDING), + Column( + ( + if (appPlatform.isDesktop) Modifier.width(600.dp).align(Alignment.CenterHorizontally) else Modifier) + .fillMaxWidth() + .padding(horizontal = DEFAULT_ONBOARDING_HORIZONTAL_PADDING), horizontalAlignment = Alignment.CenterHorizontally ) { serverOperators.value.forEachIndexed { index, srvOperator -> @@ -271,13 +273,14 @@ fun ModalData.ChooseServerOperators( @Composable private fun OperatorCheckView(serverOperator: ServerOperator, selectedOperatorIds: MutableState>) { val checked = selectedOperatorIds.value.contains(serverOperator.operatorId) - TextButton({ - if (checked) { - selectedOperatorIds.value -= serverOperator.operatorId - } else { - selectedOperatorIds.value += serverOperator.operatorId - } - }, + TextButton( + { + if (checked) { + selectedOperatorIds.value -= serverOperator.operatorId + } else { + selectedOperatorIds.value += serverOperator.operatorId + } + }, border = BorderStroke(1.dp, color = if (checked) MaterialTheme.colors.primary else MaterialTheme.colors.secondary.copy(alpha = 0.5f)), shape = RoundedCornerShape(18.dp) ) { @@ -368,7 +371,7 @@ private fun AcceptConditionsButton( } private fun continueToNextStep() { - appPrefs.onboardingStage.set(if (appPlatform.isAndroid) OnboardingStage.Step4_SetNotificationsMode else OnboardingStage.OnboardingComplete) + appPrefs.onboardingStage.set(if (appPlatform.isAndroid) OnboardingStage.Step4_SetNotificationsMode else OnboardingStage.OnboardingComplete) } private fun continueToSetNotificationsAfterAccept() { diff --git a/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/onboarding/IntroCarouselView.kt b/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/onboarding/IntroCarouselView.kt index ed315d843c..811126a5fd 100644 --- a/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/onboarding/IntroCarouselView.kt +++ b/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/onboarding/IntroCarouselView.kt @@ -1,5 +1,6 @@ package chat.simplex.common.views.onboarding +import androidx.compose.foundation.Image import androidx.compose.foundation.layout.* import androidx.compose.foundation.pager.HorizontalPager import androidx.compose.foundation.pager.rememberPagerState @@ -8,6 +9,7 @@ import androidx.compose.material.MaterialTheme import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.unit.dp import chat.simplex.common.BuildConfigCommon import chat.simplex.common.model.ChatModel @@ -42,15 +44,12 @@ private fun IntroCarouselContent(chatModel: ChatModel) { Box( modifier = Modifier .fillMaxWidth() - .padding(top = DEFAULT_PADDING + 8.dp), + .padding(top = 100.dp), contentAlignment = Alignment.Center, ) { SimpleXLogo(modifier = Modifier.widthIn(max = if (appPlatform.isAndroid) 250.dp else 500.dp)) } - Spacer(Modifier.height(24.dp)) - - HorizontalPager( state = pagerState, modifier = Modifier @@ -72,19 +71,22 @@ private fun IntroCarouselContent(chatModel: ChatModel) { } val showButtons = page == 2 val introImage = when (page) { - 0 -> MR.images.intro_2 + 0 -> MR.images.intro_1 1 -> MR.images.intro_2 - else -> MR.images.intro_2 + else -> MR.images.intro_3 } IntroPage( headline = headline, subtitle = subtitle, centralContent = { if (BuildConfigCommon.USE_BRANDED_IMAGES) { - Icon( + Image( painter = painterResource(introImage), contentDescription = null, - modifier = Modifier.size(200.dp), + modifier = Modifier + .fillMaxWidth(0.65f) + .aspectRatio(1f), + contentScale = ContentScale.Fit, ) } }, diff --git a/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/onboarding/IntroPage.kt b/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/onboarding/IntroPage.kt index 5cda021321..120695a21d 100644 --- a/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/onboarding/IntroPage.kt +++ b/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/onboarding/IntroPage.kt @@ -31,16 +31,16 @@ fun IntroPage( verticalArrangement = Arrangement.Top, ) { + Spacer(Modifier.weight(1f)) + Box( - modifier = Modifier - .weight(0.5f) - .fillMaxWidth(), + modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center ) { centralContent() } - Spacer(Modifier.height(32.dp)) + Spacer(Modifier.height(24.dp)) Text( text = headline, @@ -50,7 +50,7 @@ fun IntroPage( textAlign = TextAlign.Center, lineHeight = 38.sp, ) - Spacer(Modifier.height(16.dp)) + Spacer(Modifier.height(12.dp)) Text( text = subtitle, style = MaterialTheme.typography.body1, @@ -59,8 +59,9 @@ fun IntroPage( lineHeight = 24.sp, ) + Spacer(Modifier.weight(if (showButtons) 0.5f else 1f)) + if (showButtons && (onCreateProfile != null || onMigrate != null)) { - Spacer(Modifier.height(DEFAULT_PADDING * 2)) Column( Modifier.widthIn(max = if (appPlatform.isAndroid) 450.dp else 1000.dp), horizontalAlignment = Alignment.CenterHorizontally, diff --git a/apps/multiplatform/common/src/commonMain/resources/MR/images/create_profile@4x.png b/apps/multiplatform/common/src/commonMain/resources/MR/images/create_profile@4x.png new file mode 100644 index 0000000000..d58a7dde7c Binary files /dev/null and b/apps/multiplatform/common/src/commonMain/resources/MR/images/create_profile@4x.png differ diff --git a/apps/multiplatform/common/src/commonMain/resources/MR/images/intro_1@4x.png b/apps/multiplatform/common/src/commonMain/resources/MR/images/intro_1@4x.png new file mode 100644 index 0000000000..f9d7bf8b0a Binary files /dev/null and b/apps/multiplatform/common/src/commonMain/resources/MR/images/intro_1@4x.png differ diff --git a/apps/multiplatform/common/src/commonMain/resources/MR/images/intro_2.svg b/apps/multiplatform/common/src/commonMain/resources/MR/images/intro_2.svg deleted file mode 100644 index 66f365ed92..0000000000 --- a/apps/multiplatform/common/src/commonMain/resources/MR/images/intro_2.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/apps/multiplatform/common/src/commonMain/resources/MR/images/intro_2@4x.png b/apps/multiplatform/common/src/commonMain/resources/MR/images/intro_2@4x.png new file mode 100644 index 0000000000..eb35856ccb Binary files /dev/null and b/apps/multiplatform/common/src/commonMain/resources/MR/images/intro_2@4x.png differ diff --git a/apps/multiplatform/common/src/commonMain/resources/MR/images/intro_3@4x.png b/apps/multiplatform/common/src/commonMain/resources/MR/images/intro_3@4x.png new file mode 100644 index 0000000000..7de2e8b2d5 Binary files /dev/null and b/apps/multiplatform/common/src/commonMain/resources/MR/images/intro_3@4x.png differ diff --git a/apps/multiplatform/common/src/commonMain/resources/MR/images/use_conditions@4x.png b/apps/multiplatform/common/src/commonMain/resources/MR/images/use_conditions@4x.png new file mode 100644 index 0000000000..26fac1a143 Binary files /dev/null and b/apps/multiplatform/common/src/commonMain/resources/MR/images/use_conditions@4x.png differ