diff --git a/app/src/main/java/com/example/sw0b_001/ui/viewModels/OnboardingViewModel.kt b/app/src/main/java/com/example/sw0b_001/ui/viewModels/OnboardingViewModel.kt index f6366f67..a47070c6 100644 --- a/app/src/main/java/com/example/sw0b_001/ui/viewModels/OnboardingViewModel.kt +++ b/app/src/main/java/com/example/sw0b_001/ui/viewModels/OnboardingViewModel.kt @@ -96,57 +96,6 @@ class OnboardingViewModel @Inject constructor( } } ), - InteractiveOnboarding( - title = context.getString(R.string.save_your_accounts), - description = context.getString(R.string.you_can_also_use_sms_to_send_messages_from_your_online_accounts_saving_them_guarantees_you_can_use_them_without_an_internet_connection), - actionButtonText = context.getString(R.string.give_it_a_try), - image = R.drawable.vault_illus, - onClickCallToAction = { - showLoginSignupModal = true - } - ), - InteractiveOnboarding( - title = context.getString(R.string.start_messaging_now), - description = context.getString(R.string.you_can_now_send_messages_from_your_saved_accounts_you_can_also_save_more_accounts_later), - actionButtonText = context.getString(R.string.give_it_a_try), - image = R.drawable.try_sending_message_illus, - onClickCallToAction = { - showSendPlatformsModal = true - } - ), - InteractiveOnboarding( - title = context.getString(R.string.secure_your_app), - description = context.getString(R.string.from_locking_with_device_pin_code_to_other_secure_ways_of_making_sure_you_maintain_your_app_s_privacy), - actionButtonText = context.getString(R.string.let_s_lock_this_down), - image = R.drawable.undraw_fingerprint_kdwq, - onClickCallToAction = { - viewModelScope.launch { - _showBiometrics.emit { next() } - } - } - ), - InteractiveOnboarding( - title = context.getString(R.string.make_default_sms_app), - description = context.getString(R.string.you_can_manage_all_your_sms_messages_from_a_single_place), - subDescription = context.getString(R.string.this_also_unlocks_features_like_sending_images_with_sms_yes_not_mms), - actionButtonText = context.getString(R.string.set_as_default_sms_app), - image = R.drawable.try_sending_message_illus, - onClickCallToAction = { -// if (Build.VERSION.SDK_INT > Build.VERSION_CODES.P) { -// val roleManager = context -// .getSystemService(RoleManager::class.java) -// val roleRequestIntent = roleManager -// .createRequestRoleIntent(RoleManager.ROLE_SMS) -// activity.startActivityForResult(roleRequestIntent, 12) -// } else { -// val intent = Intent(Telephony.Sms.Intents.ACTION_CHANGE_DEFAULT) -// intent.putExtra(Telephony.Sms.Intents.EXTRA_PACKAGE_NAME, -// context.packageName) -// context.startActivity(intent) -// } - showMakeDefaultRequest = true - } - ), ) } diff --git a/app/src/main/java/com/example/sw0b_001/ui/views/DefaultSmsAppView.kt b/app/src/main/java/com/example/sw0b_001/ui/views/DefaultSmsAppView.kt new file mode 100644 index 00000000..2ab39e47 --- /dev/null +++ b/app/src/main/java/com/example/sw0b_001/ui/views/DefaultSmsAppView.kt @@ -0,0 +1,205 @@ +package com.example.sw0b_001.ui.views + +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 +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.statusBarsPadding +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.KeyboardArrowRight +import androidx.compose.material3.Button +import androidx.compose.material3.Icon +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.OutlinedButton +import androidx.compose.material3.Text +import androidx.compose.material3.TextButton +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.platform.LocalContext +import androidx.compose.ui.platform.LocalInspectionMode +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import androidx.navigation.NavController +import com.afkanerd.smswithoutborders_libsmsmms.extensions.context.isDefault +import com.afkanerd.smswithoutborders_libsmsmms.ui.getSetDefaultBehaviour +import com.example.sw0b_001.R +import com.example.sw0b_001.ui.navigation.HomepageScreen +import com.example.sw0b_001.ui.theme.AppTheme +import com.example.sw0b_001.ui.views.threads.makeDefault + +@Composable +fun DefaultSmsAppScreen( + navController: NavController, + onSkip: () -> Unit, + onBack: () -> Unit, + onSetDefault: () -> Unit, + onDone: () -> Unit, +) { + val context = LocalContext.current + val previewMode = LocalInspectionMode.current + + var isDefault by remember { + mutableStateOf(previewMode || context.isDefault()) + } + + val getDefaultPermission = getSetDefaultBehaviour(context) { + isDefault = context.isDefault() + if (isDefault) { + navController.navigate(HomepageScreen) { + popUpTo(0) + launchSingleTop = true + } + } + } + + Column( + modifier = Modifier + .fillMaxSize() + .statusBarsPadding() + .padding(horizontal = 32.dp) + ) { + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.End + ) { + TextButton(onClick = onSkip) { + Text("Skip") + } + } + + Spacer(modifier = Modifier.weight(0.4f)) + + Column( + modifier = Modifier.fillMaxWidth(), + horizontalAlignment = Alignment.CenterHorizontally + ) { + Image( + painter = painterResource(R.drawable.try_sending_message_illus), + contentDescription = null, + modifier = Modifier.size(150.dp) + ) + + Spacer(modifier = Modifier.height(40.dp)) + + Text( + text = "Make RelaySMS your\ndefault SMS app", + textAlign = TextAlign.Center, + style = MaterialTheme.typography.headlineMedium + ) + + Spacer(modifier = Modifier.height(20.dp)) + + Text( + text = "Manage your SMS messages from one place and send images through SMS!", + textAlign = TextAlign.Center, + style = MaterialTheme.typography.bodyLarge, + color = MaterialTheme.colorScheme.onSurfaceVariant + ) + + Spacer(modifier = Modifier.height(40.dp)) + + Button( + onClick = { + getDefaultPermission.launch(makeDefault(context)) + }, + shape = RoundedCornerShape(50.dp), + modifier = Modifier.height(48.dp) + ) { + Text("Set as Default SMS App") + } + } + + Spacer(modifier = Modifier.weight(1f)) + + Row( + modifier = Modifier + .fillMaxWidth() + .padding(bottom = 24.dp), + verticalAlignment = Alignment.CenterVertically + ) { + Row( + modifier = Modifier.weight(1f), + horizontalArrangement = Arrangement.spacedBy(6.dp) + ) { + repeat(3) { index -> + Box( + modifier = Modifier + .size( + width = if (index == 2) 20.dp else 8.dp, + height = 8.dp + ) + .clip(CircleShape) + .background( + if (index == 2) + MaterialTheme.colorScheme.primary + else + MaterialTheme.colorScheme.outlineVariant + ) + ) + } + } + + TextButton(onClick = onBack) { + Text("Back") + } + + Spacer(modifier = Modifier.width(12.dp)) + + OutlinedButton( + onClick = onDone, + shape = RoundedCornerShape(50.dp), + border = BorderStroke(1.dp, MaterialTheme.colorScheme.primary) + ) { + Text("Done !") + Spacer(modifier = Modifier.width(12.dp)) + Box( + modifier = Modifier + .size(40.dp) + .background(MaterialTheme.colorScheme.primary, CircleShape), + contentAlignment = Alignment.Center + ) { + Icon( + Icons.Default.KeyboardArrowRight, + contentDescription = null, + tint = MaterialTheme.colorScheme.onPrimary + ) + } + } + } + } +} + +@Preview(showBackground = true) +@Composable +fun GetStartedPreviewLoggedIn() { + val context = LocalContext.current + AppTheme(darkTheme = false) { + DefaultSmsAppScreen( + navController = NavController(context), + onSkip = {}, + onBack = {}, + onSetDefault = {}, + onDone = {}, + ) + } +} \ No newline at end of file diff --git a/app/src/main/java/com/example/sw0b_001/ui/views/SendingMessages.kt b/app/src/main/java/com/example/sw0b_001/ui/views/SendingMessages.kt new file mode 100644 index 00000000..0771198b --- /dev/null +++ b/app/src/main/java/com/example/sw0b_001/ui/views/SendingMessages.kt @@ -0,0 +1,316 @@ +package com.example.sw0b_001.ui.views + +import androidx.compose.foundation.BorderStroke +import androidx.compose.foundation.Image +import androidx.compose.foundation.background +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.icons.Icons +import androidx.compose.material.icons.filled.KeyboardArrowRight +import androidx.compose.material3.* +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.res.painterResource +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.example.sw0b_001.R +import com.example.sw0b_001.ui.theme.AppTheme + +@Composable +fun ChooseMessageModeScreen( + onSkip: () -> Unit, + onBack: () -> Unit, + onNext: () -> Unit, +) { + var selected by remember { mutableIntStateOf(0) } + + Column( + modifier = Modifier + .fillMaxSize() + .statusBarsPadding() + .padding(horizontal = 20.dp) + ) { + + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.End + ) { + Text( + text = "Skip", + modifier = Modifier.clickable { onSkip() }, + style = MaterialTheme.typography.bodyLarge + ) + } + + Spacer(modifier = Modifier.height(80.dp)) + + Text( + text = "Choose how you want to\nsend a message.", + modifier = Modifier.fillMaxWidth(), + textAlign = TextAlign.Center, + style = MaterialTheme.typography.headlineMedium.copy( + fontWeight = FontWeight.SemiBold + ) + ) + + Spacer(modifier = Modifier.height(40.dp)) + + MessageOptionCard( + selected = selected == 0, + title = "Relay account (Default)", + badge = "NO SETUP REQUIRED", + badgeContainerColor = MaterialTheme.colorScheme.errorContainer, + badgeContentColor = MaterialTheme.colorScheme.onErrorContainer, + description = "Send with your RelaySMS email alias created with your phone number, e.g. 12345689@relaysms.me.", + imageRes = R.drawable.relay_to_account, + imageCentered = true, + onClick = { selected = 0 } + ) + + Spacer(modifier = Modifier.height(20.dp)) + + Text( + text = "Or", + modifier = Modifier.fillMaxWidth(), + textAlign = TextAlign.Center, + style = MaterialTheme.typography.titleMedium + ) + + Spacer(modifier = Modifier.height(20.dp)) + + MessageOptionCard( + selected = selected == 1, + title = "Use your online accounts", + badge = "REQUIRES INTERNET", + badgeContainerColor = MaterialTheme.colorScheme.secondaryContainer, + badgeContentColor = MaterialTheme.colorScheme.onSecondaryContainer, + description = "Link your existing Gmail, Telegram, or X account(s) to send messages from your real identity.", + imageRes = R.drawable.relay_sms_save_vault, + imageCentered = false, + onClick = { selected = 1 } + ) + + Spacer(modifier = Modifier.weight(1f)) + + BottomNavigationRow( + currentStep = 1, + onBack = onBack, + onNext = onNext + ) + + Spacer(modifier = Modifier.height(24.dp)) + } +} + +@Composable +private fun MessageOptionCard( + selected: Boolean, + title: String, + badge: String, + badgeContainerColor: Color, + badgeContentColor: Color, + description: String, + imageRes: Int, + imageCentered: Boolean, + onClick: () -> Unit +) { + OutlinedCard( + modifier = Modifier + .fillMaxWidth() + .clickable(onClick = onClick), + shape = RoundedCornerShape(28.dp), + colors = CardDefaults.outlinedCardColors( + containerColor = MaterialTheme.colorScheme.surfaceBright + ), + border = BorderStroke( + width = if (selected) 2.dp else 1.dp, + color = if (selected) + MaterialTheme.colorScheme.primary + else + MaterialTheme.colorScheme.outline.copy(alpha = 0.4f) + ) + ) { + + Column( + modifier = Modifier.padding(20.dp) + ) { + + Row( + verticalAlignment = Alignment.CenterVertically + ) { + + Text( + text = title, + modifier = Modifier.weight(1f), + style = MaterialTheme.typography.titleMedium + ) + + Surface( + shape = RoundedCornerShape(8.dp), + color = badgeContainerColor + ) { + Text( + text = badge, + modifier = Modifier.padding( + horizontal = 10.dp, + vertical = 6.dp + ), + style = MaterialTheme.typography.labelSmall, + color = badgeContentColor + ) + } + } + + Spacer(modifier = Modifier.height(18.dp)) + + if (imageCentered) { + + Box( + modifier = Modifier + .fillMaxWidth() + .height(90.dp), + contentAlignment = Alignment.Center + ) { + Image( + painter = painterResource(imageRes), + contentDescription = null, + modifier = Modifier.size(190.dp) + ) + } + + Spacer(modifier = Modifier.height(16.dp)) + + Text( + text = description, + modifier = Modifier.fillMaxWidth(), + textAlign = TextAlign.Center, + style = MaterialTheme.typography.bodyMedium + ) + + } else { + + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically + ) { + + Text( + text = description, + modifier = Modifier.weight(1f), + style = MaterialTheme.typography.bodyMedium + ) + + Spacer(modifier = Modifier.width(16.dp)) + + Image( + painter = painterResource(imageRes), + contentDescription = null, + modifier = Modifier.size(100.dp) + ) + } + } + } + } +} + +@Composable +private fun BottomNavigationRow( + currentStep: Int, + onBack: () -> Unit, + onNext: () -> Unit +) { + + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically + ) { + + Row( + modifier = Modifier.weight(1f), + horizontalArrangement = Arrangement.spacedBy(6.dp) + ) { + + repeat(3) { index -> + + Box( + modifier = Modifier + .size( + width = if (index == currentStep) 22.dp else 8.dp, + height = 8.dp + ) + .clip(CircleShape) + .background( + if (index == currentStep) + MaterialTheme.colorScheme.primary + else + MaterialTheme.colorScheme.outlineVariant + ) + ) + } + } + + TextButton(onClick = onBack) { + Text("Back") + } + + Spacer(modifier = Modifier.width(12.dp)) + + OutlinedButton( + onClick = onNext, + shape = RoundedCornerShape(50.dp), + border = BorderStroke( + 1.dp, + MaterialTheme.colorScheme.primary + ), + contentPadding = PaddingValues( + start = 22.dp, + end = 6.dp, + top = 6.dp, + bottom = 6.dp + ) + ) { + + Text("Next") + + Spacer(modifier = Modifier.width(14.dp)) + + Box( + modifier = Modifier + .size(38.dp) + .background( + MaterialTheme.colorScheme.primary, + CircleShape + ), + contentAlignment = Alignment.Center + ) { + + Icon( + imageVector = Icons.Default.KeyboardArrowRight, + contentDescription = null, + tint = MaterialTheme.colorScheme.onPrimary + ) + } + } + } +} + + + +@Preview(showBackground = true) +@Composable +fun ChooseMessageModeScreenPreview() { + AppTheme(darkTheme = false) { + ChooseMessageModeScreen( + onSkip = {}, + onBack = {}, + onNext = {} + ) + } +} \ No newline at end of file diff --git a/app/src/main/java/com/example/sw0b_001/ui/views/WelcomeView.kt b/app/src/main/java/com/example/sw0b_001/ui/views/WelcomeView.kt index efc63030..8f820dd5 100644 --- a/app/src/main/java/com/example/sw0b_001/ui/views/WelcomeView.kt +++ b/app/src/main/java/com/example/sw0b_001/ui/views/WelcomeView.kt @@ -1,191 +1,264 @@ package com.example.sw0b_001.ui.views -import android.content.Intent import android.content.res.Configuration +import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.Image -import androidx.compose.foundation.clickable +import androidx.compose.foundation.background +import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.fillMaxHeight +import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width +import androidx.compose.foundation.pager.HorizontalPager +import androidx.compose.foundation.pager.rememberPagerState +import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.Language +import androidx.compose.material.icons.filled.KeyboardArrowRight import androidx.compose.material3.Button -import androidx.compose.material3.ButtonDefaults -import androidx.compose.material3.DropdownMenu -import androidx.compose.material3.DropdownMenuItem +import androidx.compose.material3.CardDefaults import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.OutlinedButton +import androidx.compose.material3.OutlinedCard import androidx.compose.material3.Scaffold import androidx.compose.material3.Text import androidx.compose.runtime.Composable -import androidx.compose.runtime.LaunchedEffect -import androidx.compose.runtime.getValue -import androidx.compose.runtime.mutableStateOf -import androidx.compose.runtime.remember -import androidx.compose.runtime.setValue +import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.platform.LocalContext -import androidx.compose.ui.platform.LocalInspectionMode import androidx.compose.ui.res.painterResource -import androidx.compose.ui.res.stringArrayResource -import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.navigation.NavController -import com.example.sw0b_001.R -import androidx.core.net.toUri import androidx.navigation.compose.rememberNavController -import com.afkanerd.smswithoutborders_libsmsmms.extensions.context.getCurrentLocale -import com.afkanerd.smswithoutborders_libsmsmms.extensions.context.setLocale -import com.example.sw0b_001.data.Helpers -import com.example.sw0b_001.ui.navigation.OnboardingInteractiveScreen +import com.example.sw0b_001.R +import com.example.sw0b_001.extensions.context.settingsSetOnboardedCompletely +import com.example.sw0b_001.ui.navigation.HomepageScreen import com.example.sw0b_001.ui.theme.AppTheme +import kotlinx.coroutines.launch @Composable -fun WelcomeMainView( - navController: NavController -) { +fun WelcomeMainView(navController: NavController) { + + val pageCount = 3 + val pagerState = rememberPagerState(pageCount = { pageCount }) + val scope = rememberCoroutineScope() val context = LocalContext.current - var localeExpanded by remember { mutableStateOf(false) } - val localeArraysValues = stringArrayResource(R.array.language_values) - val localeArraysOptions= stringArrayResource(R.array.language_options) + fun finishOnboarding() { + context.settingsSetOnboardedCompletely(true) + navController.navigate(HomepageScreen) { + popUpTo(0) + launchSingleTop = true + } + } Scaffold { innerPadding -> Column( modifier = Modifier - .fillMaxHeight() + .fillMaxSize() .padding(innerPadding) - .padding(start = 16.dp, end = 16.dp), - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.Center ) { - Image( - painter = painterResource(id = R.drawable.relay_sms_welcome,), - contentDescription = null, - modifier = Modifier.size(250.dp) - ) - Spacer(modifier = Modifier.height(32.dp)) + HorizontalPager( + state = pagerState, + modifier = Modifier.weight(1f) + ) { page -> - Column( - modifier = Modifier.fillMaxWidth(), - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.Center - ) { - OutlinedButton( - onClick = { - localeExpanded = true - }, - shape = RoundedCornerShape(24.dp), - modifier = Modifier.padding(end = 8.dp), - ) { - Icon( - imageVector = Icons.Filled.Language, - contentDescription = stringResource(R.string.language), - modifier = Modifier.size(20.dp), + when (page) { + 0 -> PageOneContent() + + 1 -> ChooseMessageModeScreen( + onSkip = { finishOnboarding() }, + onBack = { + scope.launch { pagerState.animateScrollToPage(0) } + }, + onNext = { + scope.launch { pagerState.animateScrollToPage(2) } + } ) - Spacer(modifier = Modifier.width(4.dp)) - Text( - text = context.getCurrentLocale()?.displayName ?: - stringResource(R.string.english1), + + 2 -> DefaultSmsAppScreen( + navController = navController, + onSkip = { finishOnboarding() }, + onBack = { + scope.launch { pagerState.animateScrollToPage(1) } + }, + onSetDefault = { }, + onDone = { finishOnboarding() } ) } - Column( + } + + if (pagerState.currentPage == 0) { + Row( modifier = Modifier .fillMaxWidth() - .padding(start = 8.dp) + .padding(horizontal = 24.dp, vertical = 24.dp), + horizontalArrangement = Arrangement.SpaceBetween, + verticalAlignment = Alignment.CenterVertically ) { - DropdownMenu( - expanded = localeExpanded, - onDismissRequest = { localeExpanded = false } + Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) { + repeat(pageCount) { index -> + Box( + modifier = Modifier + .size( + width = if (pagerState.currentPage == index) 24.dp else 8.dp, + height = 8.dp + ) + .background( + color = if (pagerState.currentPage == index) + MaterialTheme.colorScheme.primary + else + MaterialTheme.colorScheme.outlineVariant, + shape = CircleShape + ) + ) + } + } + + Button( + onClick = { + scope.launch { + pagerState.animateScrollToPage(pagerState.currentPage + 1) + } + }, + shape = RoundedCornerShape(50.dp) ) { - localeArraysOptions.forEachIndexed { i, item -> - DropdownMenuItem( - text = { Text(item) }, - onClick = { - context.setLocale(localeArraysValues[i]) - localeExpanded = false - } + Text(text = "Get Started") + Spacer(modifier = Modifier.width(8.dp)) + + val isDark = isSystemInDarkTheme() + Box( + modifier = Modifier + .size(30.dp) + .background( + color = if (isDark) + MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.6f) + else + MaterialTheme.colorScheme.surface, + shape = CircleShape + ), + contentAlignment = Alignment.Center + ) { + Icon( + imageVector = Icons.Default.KeyboardArrowRight, + contentDescription = null, + tint = if (isDark) + MaterialTheme.colorScheme.onSurfaceVariant + else + MaterialTheme.colorScheme.primary ) } } } - } + Spacer(modifier = Modifier.height(5.dp)) + } + } +} +@Composable +fun PageOneContent() { + Column( + modifier = Modifier + .fillMaxSize() + .padding(horizontal = 24.dp), + horizontalAlignment = Alignment.CenterHorizontally + ) { + Spacer(modifier = Modifier.weight(1f)) - Spacer(modifier = Modifier.height(64.dp)) + Image( + painter = painterResource(id = R.drawable.relay_sms_welcome), + contentDescription = null, + modifier = Modifier.size(200.dp) + ) - Text( - text = stringResource(R.string.welcome_to_relaysms_), - style = MaterialTheme.typography.headlineMedium, - textAlign = TextAlign.Center, - color = MaterialTheme.colorScheme.onSurface - ) + Spacer(modifier = Modifier.height(24.dp)) - Spacer(modifier = Modifier.height(16.dp)) + Text( + text = "Welcome to RelaySMS", + style = MaterialTheme.typography.headlineMedium.copy( + fontWeight = FontWeight.Bold + ), + textAlign = TextAlign.Center, + modifier = Modifier.fillMaxWidth() + ) - Text( - text = stringResource(R.string.use_sms_to_make_a_post_send_emails_and_messages_with_no_internet_connection), - style = MaterialTheme.typography.bodyMedium, - textAlign = TextAlign.Center, - color = MaterialTheme.colorScheme.onSurfaceVariant - ) + Spacer(modifier = Modifier.height(12.dp)) - Spacer(modifier = Modifier.weight(1f)) + Text( + text = "Send encrypted emails and online updates using SMS. No internet required.", + style = MaterialTheme.typography.bodyLarge, + textAlign = TextAlign.Center, + color = MaterialTheme.colorScheme.onSurfaceVariant, + modifier = Modifier.fillMaxWidth() + ) - Button( - onClick = { - navController.navigate(OnboardingInteractiveScreen) - }, - modifier = Modifier.fillMaxWidth(), - colors = ButtonDefaults.buttonColors( - MaterialTheme.colorScheme.primary) - ) { - Text(text = stringResource(R.string.learn_how_it_works_), - color = MaterialTheme.colorScheme.onPrimary) - } + Spacer(modifier = Modifier.height(50.dp)) - Spacer(modifier = Modifier.height(16.dp)) - Text( - text = stringResource(R.string.read_our_privacy_policy), - modifier = if(LocalInspectionMode.current) Modifier - else Modifier.clickable(onClick = { - val intent = Intent(Intent.ACTION_VIEW, - context.getString(R.string.https_smswithoutborders_com_privacy_policy).toUri()) - context.startActivity(intent) - }), - color = MaterialTheme.colorScheme.primary, - style = MaterialTheme.typography.bodySmall + OutlinedCard( + modifier = Modifier.fillMaxWidth(), + shape = RoundedCornerShape(16.dp), + border = BorderStroke(1.dp, MaterialTheme.colorScheme.primary), + colors = CardDefaults.outlinedCardColors( + containerColor = MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.3f) ) - Spacer(modifier = Modifier.height(64.dp)) + ) { + Column( + modifier = Modifier + .padding(16.dp) + .fillMaxWidth(), + horizontalAlignment = Alignment.CenterHorizontally + ) { + Row( + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.Center, + modifier = Modifier.fillMaxWidth() + ) { + Image( + painter = painterResource(id = R.drawable.lock_open_right), + contentDescription = null, + modifier = Modifier.size(24.dp) + ) + Spacer(modifier = Modifier.width(10.dp)) + Text( + text = "Zero Accounts, Zero Passwords", + textAlign = TextAlign.Center, + style = MaterialTheme.typography.bodyLarge.copy( + fontWeight = FontWeight.Bold + ) + ) + } + Spacer(modifier = Modifier.height(8.dp)) + Text( + text = "Your device is completely independent. We never ask you to register or log in.", + style = MaterialTheme.typography.bodyMedium, + color = MaterialTheme.colorScheme.onSurfaceVariant, + textAlign = TextAlign.Center, + modifier = Modifier.fillMaxWidth() + ) + } } + + Spacer(modifier = Modifier.height(80.dp)) } } -@Preview( - uiMode = Configuration.UI_MODE_NIGHT_YES, - name = "DefaultPreviewDark", - group = "Default" -) -@Preview( - uiMode = Configuration.UI_MODE_NIGHT_NO, - name = "DefaultPreviewLight", -) +@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, name = "DefaultPreviewDark", group = "Default") +@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO, name = "DefaultPreviewLight") @Composable -fun OnboardingViewPreview() { +fun WelcomeMainViewPreview() { AppTheme { WelcomeMainView(rememberNavController()) } diff --git a/app/src/main/res/drawable/lock_open_right.xml b/app/src/main/res/drawable/lock_open_right.xml new file mode 100644 index 00000000..906a70d2 --- /dev/null +++ b/app/src/main/res/drawable/lock_open_right.xml @@ -0,0 +1,10 @@ + + + diff --git a/app/src/main/res/drawable/relay_to_account.png b/app/src/main/res/drawable/relay_to_account.png new file mode 100644 index 00000000..3055f538 Binary files /dev/null and b/app/src/main/res/drawable/relay_to_account.png differ