Implement small screen support for BankTransferMandateFragment.

app/src/main/java/org/thoughtcrime/securesms/components/settings/app/subscription/donate/card/CreditCardFragment.kt

@@ -65,13 +65,13 @@ class CreditCardFragment : Fragment(R.layout.credit_card_fragment) {
       }
     }
 
-    binding.title.text = if (args.request.donateToSignalType == DonateToSignalType.MONTHLY) {
+    binding.continueButton.text = if (args.request.donateToSignalType == DonateToSignalType.MONTHLY) {
       getString(
-        R.string.CreditCardFragment__donation_amount_s_per_month,
+        R.string.CreditCardFragment__donate_s_month,
         FiatMoneyUtil.format(resources, args.request.fiat, FiatMoneyUtil.formatOptions().trimZerosAfterDecimal())
       )
     } else {
-      getString(R.string.CreditCardFragment__donation_amount_s, FiatMoneyUtil.format(resources, args.request.fiat))
+      getString(R.string.CreditCardFragment__donate_s, FiatMoneyUtil.format(resources, args.request.fiat))
     }
 
     binding.description.setLinkColor(ContextCompat.getColor(requireContext(), R.color.signal_colorPrimary))

app/src/main/java/org/thoughtcrime/securesms/components/settings/app/subscription/donate/transfer/details/BankTransferDetailsFragment.kt

@@ -195,7 +195,7 @@ private fun BankTransferDetailsContent(
             onUrlClick = {
               onLearnMoreClick()
             },
-            style = MaterialTheme.typography.bodyLarge.copy(
+            style = MaterialTheme.typography.bodyMedium.copy(
               color = MaterialTheme.colorScheme.onSurfaceVariant
             ),
             modifier = Modifier.padding(vertical = 12.dp)

app/src/main/java/org/thoughtcrime/securesms/components/settings/app/subscription/donate/transfer/mandate/BankTransferMandateFragment.kt

@@ -5,6 +5,11 @@
 
 package org.thoughtcrime.securesms.components.settings.app.subscription.donate.transfer.mandate
 
+import android.os.Bundle
+import android.view.View
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.defaultMinSize
@@ -22,7 +27,9 @@ import androidx.compose.ui.Alignment.Companion.CenterHorizontally
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.graphics.vector.rememberVectorPainter
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
@@ -38,6 +45,7 @@ import org.signal.core.ui.Texts
 import org.signal.core.ui.theme.SignalTheme
 import org.thoughtcrime.securesms.R
 import org.thoughtcrime.securesms.compose.ComposeFragment
+import org.thoughtcrime.securesms.compose.StatusBarColorNestedScrollConnection
 import org.thoughtcrime.securesms.util.SpanUtil
 import org.thoughtcrime.securesms.util.navigation.safeNavigate
 
@@ -48,6 +56,16 @@ class BankTransferMandateFragment : ComposeFragment() {
 
   private val args: BankTransferMandateFragmentArgs by navArgs()
   private val viewModel: BankTransferMandateViewModel by viewModels()
+  private lateinit var statusBarColorNestedScrollConnection: StatusBarColorNestedScrollConnection
+
+  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+    statusBarColorNestedScrollConnection = StatusBarColorNestedScrollConnection(requireActivity())
+  }
+
+  override fun onResume() {
+    super.onResume()
+    statusBarColorNestedScrollConnection.setColorImmediate()
+  }
 
   @Composable
   override fun FragmentContent() {
@@ -57,7 +75,8 @@ class BankTransferMandateFragment : ComposeFragment() {
       bankMandate = mandate,
       onNavigationClick = this::onNavigationClick,
       onContinueClick = this::onContinueClick,
-      onLearnMoreClick = this::onLearnMoreClick
+      onLearnMoreClick = this::onLearnMoreClick,
+      modifier = Modifier.nestedScroll(statusBarColorNestedScrollConnection)
     )
   }
 
@@ -96,12 +115,23 @@ fun BankTransferScreen(
   bankMandate: String,
   onNavigationClick: () -> Unit,
   onContinueClick: () -> Unit,
-  onLearnMoreClick: () -> Unit
+  onLearnMoreClick: () -> Unit,
+  modifier: Modifier = Modifier
 ) {
   Scaffolds.Settings(
-    title = "",
+    title = stringResource(id = R.string.BankTransferMandateFragment__bank_transfer),
     onNavigationClick = onNavigationClick,
-    navigationIconPainter = rememberVectorPainter(ImageVector.vectorResource(id = R.drawable.symbol_arrow_left_24))
+    navigationIconPainter = rememberVectorPainter(ImageVector.vectorResource(id = R.drawable.symbol_arrow_left_24)),
+    titleContent = { contentOffset, title ->
+      AnimatedVisibility(
+        visible = contentOffset < 0f,
+        enter = fadeIn(),
+        exit = fadeOut()
+      ) {
+        Text(text = title, style = MaterialTheme.typography.titleLarge)
+      }
+    },
+    modifier = modifier
   ) {
     LazyColumn(
       horizontalAlignment = CenterHorizontally,
@@ -112,7 +142,7 @@ fun BankTransferScreen(
     ) {
       item {
         Image(
-          painter = painterResource(id = R.drawable.credit_card), // TODO [alex] -- final asset
+          painter = painterResource(id = R.drawable.bank_transfer),
           contentScale = ContentScale.Inside,
           contentDescription = null,
           modifier = Modifier
@@ -144,7 +174,9 @@ fun BankTransferScreen(
           style = MaterialTheme.typography.bodyLarge.copy(
             color = MaterialTheme.colorScheme.onSurfaceVariant
           ),
-          modifier = Modifier.padding(bottom = 12.dp, start = 32.dp, end = 32.dp)
+          modifier = Modifier
+            .padding(bottom = 12.dp)
+            .padding(horizontal = dimensionResource(id = R.dimen.bank_transfer_mandate_gutter))
         )
       }
 
@@ -156,7 +188,7 @@ fun BankTransferScreen(
         Text(
           text = bankMandate,
           color = MaterialTheme.colorScheme.onSurfaceVariant,
-          modifier = Modifier.padding(horizontal = 32.dp, vertical = 16.dp)
+          modifier = Modifier.padding(horizontal = dimensionResource(id = R.dimen.bank_transfer_mandate_gutter), vertical = 16.dp)
         )
       }
 

app/src/main/res/layout/credit_card_fragment.xml

@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
-    xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
 
@@ -17,35 +16,26 @@
         app:layout_constraintTop_toTopOf="parent"
         app:navigationContentDescription="@string/DSLSettingsToolbar__navigate_up"
         app:navigationIcon="@drawable/ic_arrow_left_24"
+        app:title="@string/CreditCardFragment__credit_or_debit_card"
         app:titleTextAppearance="@style/Signal.Text.TitleLarge" />
 
-    <TextView
-        android:id="@+id/title"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:gravity="center"
-        android:paddingHorizontal="32dp"
-        android:textAppearance="@style/Signal.Text.TitleLarge"
-        app:layout_constraintTop_toBottomOf="@id/toolbar"
-        tools:text="Donation amount: $20" />
-
     <org.thoughtcrime.securesms.util.views.LearnMoreTextView
         android:id="@+id/description"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_marginTop="8dp"
+        android:layout_marginTop="12dp"
-        android:gravity="center"
+        android:paddingHorizontal="@dimen/core_ui__gutter"
-        android:paddingHorizontal="32dp"
         android:text="@string/CreditCardFragment__enter_your_card_details"
+        android:textAppearance="@style/Signal.Text.BodyMedium"
         android:textColor="@color/signal_colorOnSurfaceVariant"
-        app:layout_constraintTop_toBottomOf="@id/title" />
+        app:layout_constraintTop_toBottomOf="@id/toolbar" />
 
     <com.google.android.material.textfield.TextInputLayout
         android:id="@+id/card_number_wrapper"
         style="@style/Widget.Signal.TextInputLayout.FilledBox.ContactNameEditor"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_marginTop="36dp"
+        android:layout_marginTop="24dp"
         android:hint="@string/CreditCardFragment__card_number"
         app:boxStrokeColor="@color/signal_colorPrimary"
         app:boxStrokeErrorColor="@color/signal_colorError"
@@ -72,7 +62,7 @@
         style="@style/Widget.Signal.TextInputLayout.FilledBox.ContactNameEditor"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:layout_marginTop="18dp"
+        android:layout_marginTop="12dp"
         android:hint="@string/CreditCardFragment__mm_yy"
         android:paddingEnd="18dp"
         app:boxStrokeColor="@color/signal_colorPrimary"
@@ -103,7 +93,7 @@
         style="@style/Widget.Signal.TextInputLayout.FilledBox.ContactNameEditor"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:layout_marginTop="18dp"
+        android:layout_marginTop="12dp"
         android:hint="@string/CreditCardFragment__cvv"
         android:paddingStart="18dp"
         app:boxStrokeColor="@color/signal_colorPrimary"
@@ -130,12 +120,13 @@
     <com.google.android.material.button.MaterialButton
         android:id="@+id/continue_button"
         style="@style/Signal.Widget.Button.Large.Primary"
-        android:layout_width="match_parent"
+        android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginHorizontal="@dimen/dsl_settings_gutter"
         android:layout_marginBottom="16dp"
         android:enabled="false"
-        android:text="@string/CreditCardFragment__continue"
+        android:minWidth="220dp"
+        android:text="@string/CreditCardFragment__donate_s"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent" />

app/src/main/res/values-sw360dp/dimens.xml

@@ -15,6 +15,7 @@
     <dimen name="payment_recovery_phrase_adapter_margin">92dp</dimen>
     <dimen name="payment_recovery_phrase_outline_margin">48dp</dimen>
 
+    <dimen name="bank_transfer_mandate_gutter">32dp</dimen>
     <dimen name="media_bubble_gif_width">260dp</dimen>
     <dimen name="dsl_settings_gutter">24dp</dimen>
     <dimen name="active_subscription_gutter_start">22dp</dimen>

app/src/main/res/values/dimens.xml

@@ -170,6 +170,7 @@
     <dimen name="payment_recovery_phrase_adapter_margin">49dp</dimen>
     <dimen name="payment_recovery_phrase_outline_margin">32dp</dimen>
 
+    <dimen name="bank_transfer_mandate_gutter">16dp</dimen>
     <dimen name="dsl_settings_gutter">16dp</dimen>
     <dimen name="active_subscription_gutter_start">14dp</dimen>
     <dimen name="media_overview_toggle_gutter">2dp</dimen>

app/src/main/res/values/strings.xml

@@ -120,11 +120,8 @@
     <string name="BlockedUsersActivity__block">Block</string>
 
     <!-- CreditCardFragment -->
-    <!-- Title of fragment detailing the donation amount for one-time donation, displayed above the credit card text fields -->
+    <!-- Title of fragment -->
-    <string name="CreditCardFragment__donation_amount_s">Donation amount: %1$s</string>
+    <string name="CreditCardFragment__credit_or_debit_card">Credit or debit card</string>
-    <!-- Title of fragment detailing the donation amount for monthly donation, displayed above the credit card text fields -->
-    <string name="CreditCardFragment__donation_amount_s_per_month">Donation amount: %1$s/month</string>
-    <!-- Explanation of how to fill in the form, displayed above the credit card text fields -->
     <!-- Explanation of how to fill in the form and a note about pii, displayed above the credit card text fields -->
     <string name="CreditCardFragment__enter_your_card_details">Enter your card details. Signal does not collect or store your personal information.</string>
     <!-- Displayed as a hint in the card number text field -->
@@ -149,8 +146,10 @@
     <string name="CreditCardFragment__year_required">Year required</string>
     <!-- Error displayed under the card expiry text field when the expiry year is invalid -->
     <string name="CreditCardFragment__invalid_year">Invalid year</string>
-    <!-- Button label to confirm credit card input and proceed with payment -->
+    <!-- Button label to confirm credit card input and proceed with one-time payment -->
-    <string name="CreditCardFragment__continue">Continue</string>
+    <string name="CreditCardFragment__donate_s">Donate %1$s</string>
+    <!-- Button label to confirm credit card input and proceed with subscription payment -->
+    <string name="CreditCardFragment__donate_s_month">Donate %1$s/month</string>
 
     <!-- BlockUnblockDialog -->
     <string name="BlockUnblockDialog_block_and_leave_s">Block and leave %1$s?</string>

core-ui/src/main/java/org/signal/core/ui/Scaffolds.kt

@@ -25,6 +25,9 @@ import org.signal.core.ui.theme.SignalTheme
 
 @OptIn(ExperimentalMaterial3Api::class)
 object Scaffolds {
+  /**
+   * @param titleContent The title area content. First parameter is the contentOffset.
+   */
   @Composable
   fun Settings(
     title: String,
@@ -32,6 +35,9 @@ object Scaffolds {
     navigationIconPainter: Painter,
     modifier: Modifier = Modifier,
     navigationContentDescription: String? = null,
+    titleContent: @Composable (Float, String) -> Unit = { _, title ->
+      Text(text = title, style = MaterialTheme.typography.titleLarge)
+    },
     content: @Composable (PaddingValues) -> Unit
   ) {
     val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()
@@ -40,10 +46,7 @@ object Scaffolds {
       topBar = {
         TopAppBar(
           title = {
-            Text(
+            titleContent(scrollBehavior.state.contentOffset, title)
-              text = title,
-              style = MaterialTheme.typography.titleLarge
-            )
           },
           navigationIcon = {
             IconButton(
@@ -57,7 +60,7 @@ object Scaffolds {
             }
           },
           scrollBehavior = scrollBehavior,
-          colors = TopAppBarDefaults.smallTopAppBarColors(
+          colors = TopAppBarDefaults.topAppBarColors(
             scrolledContainerColor = SignalTheme.colors.colorSurface2
           )
         )