Skip to content

[LiPS] Verification dialog / full screen design adjustments #10777

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Conversation

carlosmuvi-stripe
Copy link
Collaborator

@carlosmuvi-stripe carlosmuvi-stripe commented May 6, 2025

Summary

  • Adjusts dialog to latest designs. See Figma for reference.
light.mp4

Motivation

https://jira.corp.stripe.com/browse/LINK_MOBILE-188

Testing

  • Added tests
  • Modified tests
  • Manually verified

Screenshots

Before After
before screenshot after screenshot

Changelog

Copy link
Contributor

github-actions bot commented May 6, 2025

Diffuse output:

OLD: identity-example-release-base.apk (signature: V1, V2)
NEW: identity-example-release-pr.apk (signature: V1, V2)

          │          compressed           │          uncompressed          
          ├───────────┬───────────┬───────┼───────────┬───────────┬────────
 APK      │ old       │ new       │ diff  │ old       │ new       │ diff   
──────────┼───────────┼───────────┼───────┼───────────┼───────────┼────────
      dex │   2.1 MiB │   2.1 MiB │ +74 B │   4.3 MiB │   4.3 MiB │ +192 B 
     arsc │     1 MiB │     1 MiB │   0 B │     1 MiB │     1 MiB │    0 B 
 manifest │   2.3 KiB │   2.3 KiB │   0 B │     8 KiB │     8 KiB │    0 B 
      res │ 302.9 KiB │ 302.9 KiB │   0 B │   457 KiB │   457 KiB │    0 B 
   native │   6.2 MiB │   6.2 MiB │   0 B │  15.8 MiB │  15.8 MiB │    0 B 
    asset │   7.7 KiB │   7.7 KiB │   0 B │   7.4 KiB │   7.4 KiB │    0 B 
    other │  95.7 KiB │  95.7 KiB │  -6 B │ 183.5 KiB │ 183.5 KiB │    0 B 
──────────┼───────────┼───────────┼───────┼───────────┼───────────┼────────
    total │   9.8 MiB │   9.8 MiB │ +68 B │  21.8 MiB │  21.8 MiB │ +192 B 

 DEX     │ old   │ new   │ diff       
─────────┼───────┼───────┼────────────
   files │     1 │     1 │  0         
 strings │ 20668 │ 20669 │ +1 (+6 -5) 
   types │  6496 │  6496 │  0 (+0 -0) 
 classes │  5261 │  5261 │  0 (+0 -0) 
 methods │ 31499 │ 31499 │  0 (+5 -5) 
  fields │ 18206 │ 18208 │ +2 (+6 -4) 

 ARSC    │ old  │ new  │ diff 
─────────┼──────┼──────┼──────
 configs │  164 │  164 │  0   
 entries │ 3646 │ 3646 │  0
APK
    compressed    │   uncompressed    │                                           
──────────┬───────┼──────────┬────────┤                                           
 size     │ diff  │ size     │ diff   │ path                                      
──────────┼───────┼──────────┼────────┼───────────────────────────────────────────
  2.1 MiB │ +74 B │  4.3 MiB │ +192 B │ ∆ classes.dex                             
 29.2 KiB │  -3 B │ 64.6 KiB │    0 B │ ∆ META-INF/CERT.SF                        
  1.2 KiB │  -3 B │  1.2 KiB │    0 B │ ∆ META-INF/CERT.RSA                       
    272 B │  +1 B │    120 B │    0 B │ ∆ META-INF/version-control-info.textproto 
 25.9 KiB │  -1 B │ 64.5 KiB │    0 B │ ∆ META-INF/MANIFEST.MF                    
──────────┼───────┼──────────┼────────┼───────────────────────────────────────────
  2.1 MiB │ +68 B │  4.4 MiB │ +192 B │ (total)
DEX
STRINGS:

   old   │ new   │ diff       
  ───────┼───────┼────────────
   20668 │ 20669 │ +1 (+6 -5) 
  
  + , selectedBackground=
  + FZFLII
  + VZLLLLFFLLFLI
  + VZLLLLFFLLFLLI
  + VZLLZL
  + ~~R8{"backend":"dex","compilation-mode":"release","has-checksums":false,"min-api":21,"pg-map-id":"1616daa","r8-mode":"full","version":"8.8.34"}
  
  - FILZ
  - VLLZZL
  - VZLLLLFFLLLI
  - VZLLLLFFLLLLI
  - ~~R8{"backend":"dex","compilation-mode":"release","has-checksums":false,"min-api":21,"pg-map-id":"360944b","r8-mode":"full","version":"8.8.34"}
  

METHODS:

   old   │ new   │ diff      
  ───────┼───────┼───────────
   31499 │ 31499 │ 0 (+5 -5) 
  
  + a.a i(boolean, A, o, a, J, float, float, String, B, float, q, p, int)
  + b4.e a(boolean, float, p, int, int) → float
  + e4.B <init>(long, long, long, long, long)
  + e4.C <init>(boolean, A, o, a, J, float, float, String, B, float, q, int)
  + e4.K <init>(boolean, B, String, boolean, String)
  
  - a.a i(boolean, A, o, a, J, float, float, String, B, q, p, int)
  - b4.e a(int, p, boolean) → float
  - e4.B <init>(long, long, long, long)
  - e4.C <init>(boolean, A, o, a, J, float, float, String, B, q, int)
  - e4.K <init>(B, String, boolean, boolean, String)
  

FIELDS:

   old   │ new   │ diff       
  ───────┼───────┼────────────
   18206 │ 18208 │ +2 (+6 -4) 
  
  + e4.B e: long
  + e4.C Y: float
  + e4.C Z: q
  + e4.K P: boolean
  + e4.K Q: B
  + e4.K R: String
  
  - e4.C Y: q
  - e4.K P: B
  - e4.K Q: String
  - e4.K R: boolean

@carlosmuvi-stripe carlosmuvi-stripe force-pushed the carlosmuvi/LINK_MOBILE-188_android-tweak-verification-screen-design branch from eb0cf90 to 5fb8df2 Compare May 6, 2025 21:05
…INK_MOBILE-188_android-tweak-verification-screen-design

# Conflicts:
#	paymentsheet/src/main/java/com/stripe/android/link/ui/verification/VerificationDialog.kt
#	paymentsheet/src/main/java/com/stripe/android/link/ui/verification/VerificationScreen.kt
…ILE-188_android-tweak-verification-screen-design

# Conflicts:
#	paymentsheet/res/drawable/stripe_link_add_green.xml
#	paymentsheet/src/main/java/com/stripe/android/link/theme/Color.kt
#	paymentsheet/src/main/java/com/stripe/android/link/ui/ErrorText.kt
#	paymentsheet/src/main/java/com/stripe/android/link/ui/LinkButton.kt
#	paymentsheet/src/main/java/com/stripe/android/link/ui/LinkContent.kt
#	paymentsheet/src/main/java/com/stripe/android/link/ui/LinkSpinner.kt
#	paymentsheet/src/main/java/com/stripe/android/link/ui/PrimaryButton.kt
#	paymentsheet/src/main/java/com/stripe/android/link/ui/SecondaryButton.kt
#	paymentsheet/src/main/java/com/stripe/android/link/ui/menu/LinkMenu.kt
#	paymentsheet/src/main/java/com/stripe/android/link/ui/signup/SignUpScreen.kt
#	paymentsheet/src/main/java/com/stripe/android/link/ui/verification/VerificationDialog.kt
#	paymentsheet/src/main/java/com/stripe/android/link/ui/verification/VerificationScreen.kt
#	paymentsheet/src/main/java/com/stripe/android/link/ui/wallet/PaymentDetails.kt
#	paymentsheet/src/main/java/com/stripe/android/link/ui/wallet/WalletScreen.kt
#	paymentsheet/src/test/java/com/stripe/android/link/ui/verification/VerificationScreenshotTest.kt
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.inline_LinkFieldsScreenshotTest_testErrorMessage[DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.inline_LinkFieldsScreenshotTest_testErrorMessage[DarkTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.inline_LinkFieldsScreenshotTest_testErrorMessage[LightTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.inline_LinkFieldsScreenshotTest_testErrorMessage[LightTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.paymentmethod_PaymentMethodScreenScreenshotTest_form_with_button_disabled[].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.paymentmethod_PaymentMethodScreenScreenshotTest_form_with_button_enabled[].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.paymentmethod_PaymentMethodScreenScreenshotTest_form_with_error_message[].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenInputtingPrimaryFieldIdleErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenInputtingPrimaryFieldIdle][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenInputtingPrimaryFieldRequiresNameCollectionIdleErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenInputtingPrimaryFieldRequiresNameCollectionIdle][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenInputtingRemainingFieldsIdleErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenInputtingRemainingFieldsIdle][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenInputtingRemainingFieldsRequiresNameCollectionIdleErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenInputtingRemainingFieldsRequiresNameCollectionIdle][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenInputtingRemainingFieldsRequiresNameCollectionSubmittingErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenInputtingRemainingFieldsRequiresNameCollectionSubmitting][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenInputtingRemainingFieldsSubmittingErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenInputtingRemainingFieldsSubmitting][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenSignUpEnabledInputtingPrimaryFieldIdleErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenSignUpEnabledInputtingPrimaryFieldIdle][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenSignUpEnabledInputtingPrimaryFieldRequiresNameCollectionIdleErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenSignUpEnabledInputtingPrimaryFieldRequiresNameCollectionIdle][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenSignUpEnabledInputtingRemainingFieldsIdleErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenSignUpEnabledInputtingRemainingFieldsIdle][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenSignUpEnabledInputtingRemainingFieldsRequiresNameCollectionIdleErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenSignUpEnabledInputtingRemainingFieldsRequiresNameCollectionIdle][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenSignUpEnabledInputtingRemainingFieldsRequiresNameCollectionSubmittingErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenSignUpEnabledInputtingRemainingFieldsRequiresNameCollectionSubmitting][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenSignUpEnabledInputtingRemainingFieldsSubmittingErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenSignUpEnabledInputtingRemainingFieldsSubmitting][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenSignUpEnabledVerifyingEmailIdleErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenSignUpEnabledVerifyingEmailIdle][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenSignUpEnabledVerifyingEmailRequiresNameCollectionIdleErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenSignUpEnabledVerifyingEmailRequiresNameCollectionIdle][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenVerifyingEmailIdleErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenVerifyingEmailIdle][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenVerifyingEmailRequiresNameCollectionIdleErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenVerifyingEmailRequiresNameCollectionIdle][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.updatecard_UpdateCardScreenshotTest_testScreen[Canonical][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.updatecard_UpdateCardScreenshotTest_testScreen[Canonical][LightTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.updatecard_UpdateCardScreenshotTest_testScreen[Default][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.updatecard_UpdateCardScreenshotTest_testScreen[Default][LightTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.updatecard_UpdateCardScreenshotTest_testScreen[Error][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.updatecard_UpdateCardScreenshotTest_testScreen[Error][LightTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.updatecard_UpdateCardScreenshotTest_testScreen[Processing][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.updatecard_UpdateCardScreenshotTest_testScreen[Processing][LightTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.updatecard_UpdateCardScreenshotTest_testScreen[Unchanged][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.updatecard_UpdateCardScreenshotTest_testScreen[Unchanged][LightTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.verification_VerificationScreenshotTest_testContent[VerificationDialogWithOTPFilledAndErrorMessage][].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.verification_VerificationScreenshotTest_testContent[VerificationDialogWithOTPFilled][].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.verification_VerificationScreenshotTest_testContent[VerificationDialogWithOTPNotFilled][].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.verification_VerificationScreenshotTest_testContent[VerificationScreenWithOTPFilledAndErrorMessage][].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.verification_VerificationScreenshotTest_testContent[VerificationScreenWithOTPFilledAndProcessing][].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.verification_VerificationScreenshotTest_testContent[VerificationScreenWithOTPFilledAndSendingNewCode][].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.verification_VerificationScreenshotTest_testContent[VerificationScreenWithOTPFilled][].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.verification_VerificationScreenshotTest_testContent[VerificationScreenWithOTPNotFilled][].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testBankAccountEnabled[DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testBankAccountEnabled[DarkTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testBankAccountEnabled[LightTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testBankAccountEnabled[LightTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testBankAccountLiveModeEnabled[DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testBankAccountLiveModeEnabled[DarkTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testBankAccountLiveModeEnabled[LightTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testBankAccountLiveModeEnabled[LightTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testCardDisabledAndSelected[DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testCardDisabledAndSelected[DarkTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testCardDisabledAndSelected[LightTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testCardDisabledAndSelected[LightTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testCardEnabledAndSelected[DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testCardEnabledAndSelected[DarkTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testCardEnabledAndSelected[LightTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testCardEnabledAndSelected[LightTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testCardEnabledAndUnavailable[DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testCardEnabledAndUnavailable[DarkTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testCardEnabledAndUnavailable[LightTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testCardEnabledAndUnavailable[LightTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testCardEnabledAndUpdating[DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testCardEnabledAndUpdating[DarkTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testCardEnabledAndUpdating[LightTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testCardEnabledAndUpdating[LightTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testCardEnabled[DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testCardEnabled[DarkTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testCardEnabled[LightTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testCardEnabled[LightTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testPassThroughEnabled[DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testPassThroughEnabled[DarkTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testPassThroughEnabled[LightTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_PaymentDetailsListItemScreenShotTest_testPassThroughEnabled[LightTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_WalletPaymentMethodMenuScreenshotTest_testBankAccountAsDefault[DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_WalletPaymentMethodMenuScreenshotTest_testBankAccountAsDefault[DarkTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_WalletPaymentMethodMenuScreenshotTest_testBankAccountAsDefault[LightTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_WalletPaymentMethodMenuScreenshotTest_testBankAccountAsDefault[LightTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_WalletPaymentMethodMenuScreenshotTest_testBankAccount[DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_WalletPaymentMethodMenuScreenshotTest_testBankAccount[DarkTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_WalletPaymentMethodMenuScreenshotTest_testBankAccount[LightTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_WalletPaymentMethodMenuScreenshotTest_testBankAccount[LightTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_WalletPaymentMethodMenuScreenshotTest_testCardAsDefault[DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_WalletPaymentMethodMenuScreenshotTest_testCardAsDefault[DarkTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_WalletPaymentMethodMenuScreenshotTest_testCardAsDefault[LightTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_WalletPaymentMethodMenuScreenshotTest_testCardAsDefault[LightTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_WalletPaymentMethodMenuScreenshotTest_testCard[DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_WalletPaymentMethodMenuScreenshotTest_testCard[DarkTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_WalletPaymentMethodMenuScreenshotTest_testCard[LightTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_WalletPaymentMethodMenuScreenshotTest_testCard[LightTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_WalletPaymentMethodMenuScreenshotTest_testPassthrough[DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_WalletPaymentMethodMenuScreenshotTest_testPassthrough[DarkTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_WalletPaymentMethodMenuScreenshotTest_testPassthrough[LightTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.wallet_WalletPaymentMethodMenuScreenshotTest_testPassthrough[LightTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui_LinkAppBarMenuScreenshotTest_testMenu[DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui_LinkAppBarMenuScreenshotTest_testMenu[DarkTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui_LinkAppBarMenuScreenshotTest_testMenu[LightTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui_LinkAppBarMenuScreenshotTest_testMenu[LightTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui_LinkAppBarScreenshotTest_testLinkAppBarState[LinkAppBarNoHeaderWithOverflowMenuWithEmail][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui_LinkAppBarScreenshotTest_testLinkAppBarState[LinkAppBarNoHeaderWithOverflowMenuWithEmail][DarkTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui_LinkAppBarScreenshotTest_testLinkAppBarState[LinkAppBarWithHeaderNoOverflowMenuWithEmail][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui_LinkAppBarScreenshotTest_testLinkAppBarState[LinkAppBarWithHeaderNoOverflowMenuWithEmail][DarkTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui_LinkAppBarScreenshotTest_testLinkAppBarState[LinkAppBarWithHeaderWithOverflowMenuWithEmail][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui_LinkAppBarScreenshotTest_testLinkAppBarState[LinkAppBarWithHeaderWithOverflowMenuWithEmail][DarkTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui_LinkContentScreenshotTest_testLinkContentScreenHasOpaqueBackground[DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui_LinkContentScreenshotTest_testLinkContentScreenHasOpaqueBackground[DarkTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui_PrimaryButtonScreenshotTest_testProcessingState[DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui_PrimaryButtonScreenshotTest_testProcessingState[DarkTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui_PrimaryButtonScreenshotTest_testProcessingState[LightTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui_PrimaryButtonScreenshotTest_testProcessingState[LightTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui_SecondaryButtonScreenshotTest_testDisabledState[DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui_SecondaryButtonScreenshotTest_testDisabledState[DarkTheme,LargeFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui_SecondaryButtonScreenshotTest_testEnabledState[DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui_SecondaryButtonScreenshotTest_testEnabledState[DarkTheme,LargeFont].png
@carlosmuvi-stripe carlosmuvi-stripe force-pushed the carlosmuvi/LINK_MOBILE-188_android-tweak-verification-screen-design branch from e23d583 to 0d76e30 Compare May 14, 2025 16:58
Comment on lines +181 to +185
modifier = Modifier
// - IconButton ensures a 48.dp touch target for accessibility targets.
// - The dialog padding is 24.dp.
// - The icon is 16.dp
.padding(12.dp)
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

small calculation to ensure we match design paddings keeping the button accessible.

…ILE-188_android-tweak-verification-screen-design

# Conflicts:
#	paymentsheet/src/main/java/com/stripe/android/link/ui/verification/VerificationScreen.kt
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenInputtingPrimaryFieldIdleErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenInputtingPrimaryFieldIdle][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenInputtingPrimaryFieldRequiresNameCollectionIdleErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenInputtingPrimaryFieldRequiresNameCollectionIdle][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenInputtingRemainingFieldsIdleErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenInputtingRemainingFieldsIdle][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenInputtingRemainingFieldsRequiresNameCollectionIdleErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenInputtingRemainingFieldsRequiresNameCollectionIdle][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenInputtingRemainingFieldsRequiresNameCollectionSubmittingErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenInputtingRemainingFieldsRequiresNameCollectionSubmitting][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenInputtingRemainingFieldsSubmittingErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenInputtingRemainingFieldsSubmitting][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenSignUpEnabledInputtingPrimaryFieldIdleErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenSignUpEnabledInputtingPrimaryFieldIdle][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenSignUpEnabledInputtingPrimaryFieldRequiresNameCollectionIdleErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenSignUpEnabledInputtingPrimaryFieldRequiresNameCollectionIdle][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenSignUpEnabledVerifyingEmailIdleErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenSignUpEnabledVerifyingEmailIdle][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenSignUpEnabledVerifyingEmailRequiresNameCollectionIdleErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenSignUpEnabledVerifyingEmailRequiresNameCollectionIdle][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenVerifyingEmailIdleErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenVerifyingEmailIdle][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenVerifyingEmailRequiresNameCollectionIdleErrorMessage][DarkTheme,DefaultFont].png
#	paymentsheet/src/test/snapshots/images/com.stripe.android.link.ui.signup_SignUpScreenshotTest_testScreen[SignUpScreenVerifyingEmailRequiresNameCollectionIdle][DarkTheme,DefaultFont].png
Comment on lines 84 to 89
@Composable
private fun OTPSection(
verificationState: VerificationViewState,
otpElement: OTPElement
) {
Box(
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extracted to function because main method was too long.

Comment on lines 519 to 523
fun MaterialTheme.getBorderStrokeWidth(
isSelected: Boolean,
selectedStrokeWidth: Dp = 1.5.dp
) =
if (isSelected) maxDp(stripeShapes.borderStrokeWidth.dp, selectedStrokeWidth) else stripeShapes.borderStrokeWidth.dp
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

increases border to 1.5 per designs.

@@ -269,7 +270,7 @@ private fun OTPInputDecorationBox(
interactionSource = remember { MutableInteractionSource() },
colors = TextFieldDefaults.textFieldColors(
textColor = MaterialTheme.stripeColors.onComponent,
backgroundColor = colors.background,
backgroundColor = if (isSelected) colors.selectedBackground else colors.background,
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

allows for selected vs unselected bg on the otp.

@carlosmuvi-stripe carlosmuvi-stripe force-pushed the carlosmuvi/LINK_MOBILE-188_android-tweak-verification-screen-design branch from c60327d to ce49367 Compare June 10, 2025 10:23
@carlosmuvi-stripe carlosmuvi-stripe marked this pull request as ready for review June 10, 2025 10:33
@carlosmuvi-stripe carlosmuvi-stripe requested review from a team as code owners June 10, 2025 10:33
Copy link
Collaborator Author

@carlosmuvi-stripe carlosmuvi-stripe Jun 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not sure why loading does not show on the screenshot, but it does on device (guessing this is due to AnimatedVisibility)

@tianzhao-stripe
Copy link
Contributor

Whats going on with the screenshot tests?

modifier = Modifier
.testTag(VERIFICATION_OTP_TAG)
.alpha(if (verificationState.isProcessing) ContentAlpha.disabled else ContentAlpha.high),
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

disabled alpha is already applied in the otp component.

modifier = Modifier
.testTag(VERIFICATION_OTP_TAG)
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll add this back when adding screenshot tests.

@@ -138,7 +141,6 @@ internal class VerificationScreenTest {
onOtpTag().assertIsDisplayed()
onEmailTag().assertIsDisplayed().assertIsEnabled()
onErrorTag().assertDoesNotExist()
onLoaderTag().assertIsDisplayed()
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The resend loader shows, but Espresso is not able to assert it after moving to LinkSpinner. I'll figure this out, creating a task for it!

tillh-stripe
tillh-stripe previously approved these changes Jun 10, 2025
@tillh-stripe tillh-stripe merged commit 32e563d into master Jun 11, 2025
13 checks passed
@tillh-stripe tillh-stripe deleted the carlosmuvi/LINK_MOBILE-188_android-tweak-verification-screen-design branch June 11, 2025 14:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants