Implement new Welcome screen

PrimalHQ · Mar 5, 2024 · 46b0333 · 46b0333
1 parent ed9932d
commit 46b0333
Show file tree

Hide file tree

Showing 12 changed files with 501 additions and 212 deletions.
diff --git a/app/detekt-baseline.xml b/app/detekt-baseline.xml
@@ -21,8 +21,7 @@
     <ID>CyclomaticComplexMethod:ProfileDetailsScreen.kt$@Composable private fun ErrorHandler(error: ProfileError?, snackbarHostState: SnackbarHostState)</ID>
     <ID>CyclomaticComplexMethod:ProfileDetailsScreen.kt$@Suppress("MagicNumber") @OptIn(ExperimentalFoundationApi::class, ExperimentalMaterial3Api::class) @Composable fun ProfileDetailsScreen( state: ProfileDetailsContract.UiState, onClose: () -&gt; Unit, onPostClick: (String) -&gt; Unit, onPostReplyClick: (String) -&gt; Unit, onPostQuoteClick: (String) -&gt; Unit, onProfileClick: (String) -&gt; Unit, onEditProfileClick: () -&gt; Unit, onMessageClick: (String) -&gt; Unit, onZapProfileClick: (DraftTx) -&gt; Unit, onHashtagClick: (String) -&gt; Unit, onMediaClick: (String, String) -&gt; Unit, onGoToWallet: () -&gt; Unit, onFollowsClick: (String, ProfileFollowsType) -&gt; Unit, eventPublisher: (ProfileDetailsContract.UiEvent) -&gt; Unit, )</ID>
     <ID>CyclomaticComplexMethod:ThreadScreen.kt$@OptIn(ExperimentalMaterial3Api::class) @Composable fun ThreadScreen( state: ThreadContract.UiState, onClose: () -&gt; Unit, onPostClick: (String) -&gt; Unit, onPostReplyClick: (String) -&gt; Unit, onPostQuoteClick: (String) -&gt; Unit, onProfileClick: (String) -&gt; Unit, onHashtagClick: (String) -&gt; Unit, onMediaClick: (String, String) -&gt; Unit, onGoToWallet: () -&gt; Unit, onReplyInNoteEditor: (String, Uri?, String) -&gt; Unit, eventPublisher: (ThreadContract.UiEvent) -&gt; Unit, )</ID>
-    <ID>CyclomaticComplexMethod:TransactionEditor.kt$@Composable private fun TransactionHeaderColumn( modifier: Modifier, uiMode: UiMode, state: CreateTransactionContract.UiState, keyboardVisible: Boolean, onAmountClick: () -&gt; Unit, )</ID>
-    <ID>CyclomaticComplexMethod:TransactionEditor.kt$@ExperimentalMaterial3Api @ExperimentalComposeUiApi @Composable fun TransactionEditor( modifier: Modifier, state: CreateTransactionContract.UiState, paddingValues: PaddingValues, eventPublisher: (CreateTransactionContract.UiEvent) -&gt; Unit, onCancelClick: () -&gt; Unit, )</ID>
+    <ID>CyclomaticComplexMethod:TransactionEditor.kt$@Composable private fun TransactionHeaderColumn( modifier: Modifier, uiMode: UiDensityMode, state: CreateTransactionContract.UiState, keyboardVisible: Boolean, onAmountClick: () -&gt; Unit, )</ID>
     <ID>CyclomaticComplexMethod:WalletDashboardScreen.kt$@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class) @Composable fun WalletDashboardScreen( state: WalletDashboardContract.UiState, onPrimaryDestinationChanged: (PrimalTopLevelDestination) -&gt; Unit, onDrawerDestinationClick: (DrawerScreenDestination) -&gt; Unit, onWalletActivateClick: () -&gt; Unit, onProfileClick: (String) -&gt; Unit, onTransactionClick: (String) -&gt; Unit, onSendClick: () -&gt; Unit, onScanClick: () -&gt; Unit, onReceiveClick: () -&gt; Unit, eventPublisher: (UiEvent) -&gt; Unit, )</ID>
     <ID>CyclomaticComplexMethod:WalletTransactionsMediator.kt$WalletTransactionsMediator$override suspend fun load(loadType: LoadType, state: PagingState&lt;Int, WalletTransaction&gt;): MediatorResult</ID>
     <ID>DestructuringDeclarationWithTooManyEntries:PrimalDrawer.kt$val (avatarRef, usernameRef, iconRef, identifierRef, statsRef) = createRefs()</ID>
@@ -63,7 +62,7 @@
     <ID>LongMethod:SendPaymentScreen.kt$@OptIn(ExperimentalMaterial3Api::class) @Composable fun SendPaymentScreen( state: SendPaymentContract.UiState, eventPublisher: (SendPaymentContract.UiEvent) -&gt; Unit, onClose: () -&gt; Unit, )</ID>
     <ID>LongMethod:ThreadScreen.kt$@OptIn(ExperimentalComposeUiApi::class) @Composable fun ReplyToBottomBar( modifier: Modifier, publishingReply: Boolean, replyToAuthorName: String, replyToAuthorHandle: String, replyTextProvider: () -&gt; String, onPublishReplyClick: () -&gt; Unit, onReplyUpdated: (String) -&gt; Unit, onPhotoImported: (Uri) -&gt; Unit, onExpand: () -&gt; Unit, )</ID>
     <ID>LongMethod:ThreadScreen.kt$@OptIn(ExperimentalMaterial3Api::class) @Composable fun ThreadScreen( state: ThreadContract.UiState, onClose: () -&gt; Unit, onPostClick: (String) -&gt; Unit, onPostReplyClick: (String) -&gt; Unit, onPostQuoteClick: (String) -&gt; Unit, onProfileClick: (String) -&gt; Unit, onHashtagClick: (String) -&gt; Unit, onMediaClick: (String, String) -&gt; Unit, onGoToWallet: () -&gt; Unit, onReplyInNoteEditor: (String, Uri?, String) -&gt; Unit, eventPublisher: (ThreadContract.UiEvent) -&gt; Unit, )</ID>
-    <ID>LongMethod:TransactionEditor.kt$@Composable private fun TransactionHeaderColumn( modifier: Modifier, uiMode: UiMode, state: CreateTransactionContract.UiState, keyboardVisible: Boolean, onAmountClick: () -&gt; Unit, )</ID>
+    <ID>LongMethod:TransactionEditor.kt$@Composable private fun TransactionHeaderColumn( modifier: Modifier, uiMode: UiDensityMode, state: CreateTransactionContract.UiState, keyboardVisible: Boolean, onAmountClick: () -&gt; Unit, )</ID>
     <ID>LongMethod:TransactionEditor.kt$@ExperimentalMaterial3Api @ExperimentalComposeUiApi @Composable fun TransactionEditor( modifier: Modifier, state: CreateTransactionContract.UiState, paddingValues: PaddingValues, eventPublisher: (CreateTransactionContract.UiEvent) -&gt; Unit, onCancelClick: () -&gt; Unit, )</ID>
     <ID>LongMethod:WalletActivationScreen.kt$@ExperimentalComposeUiApi @Composable private fun WalletCodeActivationInput( working: Boolean, error: Throwable?, email: String, onCodeChanged: () -&gt; Unit, onCodeConfirmation: (String) -&gt; Unit, isKeyboardVisible: Boolean, )</ID>
     <ID>LongMethod:WalletActivationScreen.kt$@Suppress("MagicNumber") @OptIn(ExperimentalMaterial3Api::class) @ExperimentalComposeUiApi @Composable private fun WalletActivationDataInput( data: WalletActivationData, working: Boolean, error: Throwable?, onErrorDismiss: () -&gt; Unit, onDataChanged: (WalletActivationData) -&gt; Unit, onActivationCodeRequest: (WalletActivationData) -&gt; Unit, )</ID>
@@ -132,8 +131,6 @@
     <ID>MagicNumber:Timestamps.kt$7</ID>
     <ID>MagicNumber:ValidationUtils.kt$32</ID>
     <ID>MagicNumber:WalletDashboardScreen.kt$0.42f</ID>
-    <ID>MagicNumber:WelcomeScreen.kt$0.4f</ID>
-    <ID>MagicNumber:WelcomeScreen.kt$0.6f</ID>
     <ID>MagicNumber:ZapBottomSheet.kt$3</ID>
     <ID>MatchingDeclarationName:__PrimalIcons.kt$PrimalIcons</ID>
     <ID>NestedBlockDepth:FeedRemoteMediator.kt$FeedRemoteMediator$override suspend fun load(loadType: LoadType, state: PagingState&lt;Int, FeedPost&gt;): MediatorResult</ID>
@@ -151,7 +148,6 @@
     <ID>ThrowingExceptionsWithoutMessageOrCause:ThreadViewModel.kt$ThreadViewModel$IllegalStateException()</ID>
     <ID>ThrowsCount:FileUploader.kt$FileUploader$@Throws(UnsuccessfulFileUpload::class) suspend fun uploadFile(userId: String, uri: Uri): String</ID>
     <ID>ThrowsCount:LnInvoiceUtils.kt$LnInvoiceUtils$private fun decodeUnlimitedLength(invoice: String): Boolean</ID>
-    <ID>ThrowsCount:PrimalApiClient.kt$PrimalApiClient$@Throws(WssException::class) suspend fun query(message: PrimalCacheFilter): PrimalQueryResult</ID>
     <ID>TooGenericExceptionCaught:NostrIncomingMessageParser.kt$error: Exception</ID>
     <ID>TooManyFunctions:ConversionUtils.kt$net.primal.android.crypto.ConversionUtils.kt</ID>
     <ID>TooManyFunctions:NostrNotary.kt$NostrNotary</ID>

diff --git a/app/src/main/kotlin/net/primal/android/attachments/gallery/MediaGalleryScreen.kt b/app/src/main/kotlin/net/primal/android/attachments/gallery/MediaGalleryScreen.kt
@@ -118,12 +118,8 @@ fun MediaGalleryScreen(
             }
         },
         actionLabel = stringResource(id = R.string.media_gallery_retry_save),
-        onErrorDismiss = {
-            eventPublisher(MediaGalleryContract.UiEvent.DismissError)
-        },
-        onActionPerformed = {
-            currentImage()?.let { eventPublisher(MediaGalleryContract.UiEvent.SaveMedia(it.url)) }
-        },
+        onErrorDismiss = { eventPublisher(MediaGalleryContract.UiEvent.DismissError) },
+        onActionPerformed = { currentImage()?.let { eventPublisher(MediaGalleryContract.UiEvent.SaveMedia(it.url)) } },
     )
 
     Scaffold(

diff --git a/app/src/main/kotlin/net/primal/android/auth/welcome/WelcomeScreen.kt b/app/src/main/kotlin/net/primal/android/auth/welcome/WelcomeScreen.kt
@@ -8,128 +8,163 @@ 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.navigationBarsPadding
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.systemBarsPadding
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.widthIn
-import androidx.compose.foundation.layout.wrapContentWidth
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.shadow
-import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.IntSize
+import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import kotlin.math.roundToInt
 import net.primal.android.R
+import net.primal.android.core.compose.ApplySystemBarColors
 import net.primal.android.core.compose.ToSAndPrivacyPolicyText
-import net.primal.android.core.compose.button.PrimalCallToActionButton
-import net.primal.android.core.compose.fadingBottomEdge
+import net.primal.android.core.compose.UiDensityMode
+import net.primal.android.core.compose.button.PrimalFilledButton
+import net.primal.android.core.compose.detectUiDensityModeFromMaxHeight
 import net.primal.android.theme.AppTheme
 import net.primal.android.theme.PrimalTheme
 import net.primal.android.theme.domain.PrimalTheme
 
 @Composable
 fun WelcomeScreen(onSignInClick: () -> Unit, onCreateAccountClick: () -> Unit) {
-    Surface(
-        modifier = Modifier
-            .systemBarsPadding()
-            .navigationBarsPadding()
-            .fillMaxSize(),
-    ) {
-        Column(
+    ApplySystemBarColors(
+        statusBarColor = Color.Transparent,
+        navigationBarColor = Color.Transparent,
+    )
+    BoxWithConstraints {
+        val uiMode = this.maxHeight.detectUiDensityModeFromMaxHeight()
+
+        Image(
             modifier = Modifier.fillMaxSize(),
+            imageVector = ImageVector.vectorResource(id = R.drawable.onboarding_bg_full),
+            contentScale = ContentScale.FillHeight,
+            alignment = OnboardingAlignment(fullXOffset = 0.0f),
+            contentDescription = null,
+        )
+
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .systemBarsPadding(),
         ) {
             Column(
-                modifier = Modifier
-                    .padding(top = 32.dp)
-                    .weight(0.6f)
-                    .fillMaxSize(),
+                modifier = Modifier.fillMaxSize(),
                 verticalArrangement = Arrangement.Center,
                 horizontalAlignment = Alignment.CenterHorizontally,
             ) {
                 Image(
-                    painter = painterResource(id = R.drawable.primal_logo),
+                    modifier = Modifier
+                        .widthIn(240.dp, MAX_COMPONENT_WIDTH.dp)
+                        .heightIn(
+                            0.dp,
+                            this@BoxWithConstraints.maxHeight * when (uiMode) {
+                                UiDensityMode.Normal, UiDensityMode.Comfortable -> ONE_HALF
+                                else -> TWO_FIFTHS
+                            },
+                        )
+                        .fillMaxWidth(),
+                    painter = painterResource(id = R.drawable.welcome),
                     contentDescription = null,
+                    alignment = Alignment.BottomCenter,
                 )
 
                 Image(
-                    modifier = Modifier
-                        .wrapContentWidth()
-                        .padding(bottom = 40.dp)
-                        .fadingBottomEdge()
-                        .shadow(
-                            elevation = 128.dp,
-                            shape = CircleShape,
-                            clip = false,
-                            ambientColor = AppTheme.colorScheme.primary,
-                            spotColor = AppTheme.colorScheme.primary,
-                        ),
-                    painter = painterResource(id = R.drawable.welcome),
+                    modifier = Modifier.width(200.dp),
+                    painter = painterResource(id = R.drawable.primal_logo),
                     contentDescription = null,
-                    alignment = Alignment.BottomCenter,
                 )
-            }
 
-            BoxWithConstraints(
-                modifier = Modifier.weight(0.4f),
-                contentAlignment = Alignment.TopCenter,
-            ) {
-                val maxHeight = with(LocalDensity.current) { maxHeight.roundToPx() }
-                Column(
-                    modifier = Modifier.fillMaxSize(),
-                    verticalArrangement = Arrangement.Top,
-                    horizontalAlignment = Alignment.CenterHorizontally,
-                ) {
-                    PrimalCallToActionButton(
-                        modifier = Modifier
-                            .widthIn(0.dp, 420.dp)
-                            .fillMaxWidth()
-                            .padding(horizontal = 32.dp),
-                        title = stringResource(id = R.string.welcome_create_account_button_title),
-                        subtitle = if (maxHeight > MIN_HEIGHT_FOR_SUBTITLE) {
-                            stringResource(id = R.string.welcome_create_account_button_subtitle)
-                        } else {
-                            null
+                Text(
+                    modifier = Modifier.padding(vertical = 8.dp),
+                    text = "The Social Bitcoin Wallet",
+                    style = AppTheme.typography.bodyMedium.copy(
+                        color = Color.White,
+                        fontSize = 18.sp,
+                        lineHeight = 24.sp,
+                    ),
+                )
+
+                Spacer(
+                    modifier = Modifier.height(
+                        when (uiMode) {
+                            UiDensityMode.Normal -> 24.dp
+                            UiDensityMode.Comfortable -> 20.dp
+                            else -> 16.dp
                         },
-                        onClick = onCreateAccountClick,
-                    )
+                    ),
+                )
 
-                    Spacer(modifier = Modifier.height(16.dp))
+                WelcomeButton(
+                    text = stringResource(id = R.string.welcome_sign_in_button_title),
+                    onClick = onSignInClick,
+                )
 
-                    PrimalCallToActionButton(
-                        modifier = Modifier
-                            .widthIn(0.dp, 420.dp)
-                            .fillMaxWidth()
-                            .padding(horizontal = 32.dp),
-                        title = stringResource(id = R.string.welcome_sign_in_button_title),
-                        subtitle = if (maxHeight > MIN_HEIGHT_FOR_SUBTITLE) {
-                            stringResource(id = R.string.welcome_sign_in_button_subtitle)
-                        } else {
-                            null
-                        },
-                        onClick = onSignInClick,
-                    )
+                Spacer(modifier = Modifier.height(8.dp))
 
-                    Spacer(modifier = Modifier.height(16.dp))
+                WelcomeButton(
+                    text = stringResource(id = R.string.welcome_create_account_button_title),
+                    onClick = onCreateAccountClick,
+                )
 
-                    ToSAndPrivacyPolicyText(
-                        modifier = Modifier
-                            .widthIn(0.dp, 360.dp)
-                            .fillMaxWidth()
-                            .padding(horizontal = 32.dp),
-                        tosPrefix = stringResource(id = R.string.welcome_tos_prefix),
-                    )
-                }
+                ToSAndPrivacyPolicyText(
+                    modifier = Modifier
+                        .widthIn(0.dp, MAX_COMPONENT_WIDTH.dp)
+                        .fillMaxWidth()
+                        .padding(top = 16.dp),
+                    color = Color.White,
+                    fontSize = 16.sp,
+                    linksColor = Color.White,
+                    tosPrefix = stringResource(id = R.string.welcome_tos_prefix),
+                )
             }
         }
     }
 }
 
-private const val MIN_HEIGHT_FOR_SUBTITLE = 500
+class OnboardingAlignment(var fullXOffset: Float = 0.0f) : Alignment {
+    override fun align(
+        size: IntSize,
+        space: IntSize,
+        layoutDirection: LayoutDirection,
+    ): IntOffset {
+        val shiftedX = (fullXOffset * (size.width - space.width)) * -1f
+        val centerY = (space.height - size.height).toFloat()
+        return IntOffset(shiftedX.roundToInt(), centerY.roundToInt())
+    }
+}
+
+@Composable
+private fun WelcomeButton(text: String, onClick: () -> Unit) {
+    PrimalFilledButton(
+        modifier = Modifier
+            .widthIn(240.dp, MAX_COMPONENT_WIDTH.dp)
+            .fillMaxWidth(),
+        containerColor = Color.Black,
+        contentColor = Color.White,
+        onClick = onClick,
+    ) {
+        Text(text = text)
+    }
+}
+
+private const val MAX_COMPONENT_WIDTH = 320
+private const val ONE_HALF = 0.5f
+private const val TWO_FIFTHS = 0.4f
 
 @Preview
 @Composable

diff --git a/app/src/main/kotlin/net/primal/android/core/compose/ToS.kt b/app/src/main/kotlin/net/primal/android/core/compose/ToS.kt
@@ -2,12 +2,16 @@ package net.primal.android.core.compose
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.sp
 import net.primal.android.R
 import net.primal.android.core.ext.openUriSafely
 import net.primal.android.theme.AppTheme
@@ -19,8 +23,14 @@ private const val PRIMAL_TOS_URL = "https://www.primal.net/terms"
 private const val PRIMAL_PRIVACY_POLICY_URL = "https://www.primal.net/privacy"
 
 @Composable
-fun ToSAndPrivacyPolicyText(modifier: Modifier = Modifier, tosPrefix: String) {
-    val linkSpanStyle = SpanStyle(color = AppTheme.colorScheme.primary)
+fun ToSAndPrivacyPolicyText(
+    tosPrefix: String,
+    modifier: Modifier = Modifier,
+    fontSize: TextUnit = 14.sp,
+    color: Color = AppTheme.extraColorScheme.onSurfaceVariantAlt3,
+    linksColor: Color = AppTheme.colorScheme.primary,
+) {
+    val linkSpanStyle = SpanStyle(color = linksColor, textDecoration = TextDecoration.Underline)
     val annotatedString = buildAnnotatedString {
         append(tosPrefix)
         append("\n")
@@ -36,7 +46,6 @@ fun ToSAndPrivacyPolicyText(modifier: Modifier = Modifier, tosPrefix: String) {
         withStyle(style = linkSpanStyle) {
             append(stringResource(id = R.string.legal_privacy_policy_hint_highlighted_word))
         }
-        append(".")
         pop()
     }
 
@@ -45,7 +54,8 @@ fun ToSAndPrivacyPolicyText(modifier: Modifier = Modifier, tosPrefix: String) {
         modifier = modifier,
         text = annotatedString,
         style = AppTheme.typography.bodySmall.copy(
-            color = AppTheme.extraColorScheme.onSurfaceVariantAlt3,
+            color = color,
+            fontSize = fontSize,
             textAlign = TextAlign.Center,
         ),
         onClick = { position, offset ->