Use banner instead

financial-connections/res/drawable/stripe_ic_info.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="12dp"
+    android:height="12dp"
+    android:viewportWidth="12"
+    android:viewportHeight="12">
+  <path
+      android:pathData="M6.75,6C6.75,5.586 6.414,5.25 6,5.25H4.125C3.711,5.25 3.375,5.586 3.375,6C3.375,6.414 3.711,6.75 4.125,6.75H5.25V9.75C5.25,10.164 5.586,10.5 6,10.5C6.414,10.5 6.75,10.164 6.75,9.75V6ZM3,0H9C10.657,0 12,1.343 12,3V9C12,10.657 10.657,12 9,12H3C1.343,12 0,10.657 0,9V3C0,1.343 1.343,0 3,0ZM6,4.125C6.621,4.125 7.125,3.621 7.125,3C7.125,2.379 6.621,1.875 6,1.875C5.379,1.875 4.875,2.379 4.875,3C4.875,3.621 5.379,4.125 6,4.125Z"
+      android:fillColor="#000000"
+      android:fillType="evenOdd"/>
+</vector>

financial-connections/src/main/java/com/stripe/android/financialconnections/features/common/VerificationSection.kt

@@ -8,7 +8,6 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.size
-import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
@@ -27,8 +26,8 @@ import com.stripe.android.financialconnections.features.consent.FinancialConnect
 import com.stripe.android.financialconnections.ui.LocalTestMode
 import com.stripe.android.financialconnections.ui.TextResource
 import com.stripe.android.financialconnections.ui.components.AnnotatedText
-import com.stripe.android.financialconnections.ui.components.FinancialConnectionsButton
 import com.stripe.android.financialconnections.ui.components.StringAnnotation
+import com.stripe.android.financialconnections.ui.components.TestModeBanner
 import com.stripe.android.financialconnections.ui.theme.FinancialConnectionsTheme.colors
 import com.stripe.android.financialconnections.ui.theme.FinancialConnectionsTheme.typography
 import com.stripe.android.financialconnections.ui.theme.StripeThemeForConnections
@@ -46,6 +45,16 @@ internal fun VerificationSection(
 
     StripeThemeForConnections {
         Column(horizontalAlignment = Alignment.CenterHorizontally) {
+            if (LocalTestMode.current) {
+                TestModeBanner(
+                    enabled = enabled,
+                    buttonLabel = stringResource(R.string.stripe_verification_useTestCode),
+                    onButtonClick = otpElement::populateTestCode,
+                )
+
+                Spacer(modifier = Modifier.height(24.dp))
+            }
+
             OTPElementUI(
                 otpInputPlaceholder = "",
                 boxSpacing = 8.dp,
@@ -59,18 +68,6 @@ internal fun VerificationSection(
                 element = otpElement,
                 modifier = Modifier.fillMaxWidth(),
             )
-
-            if (LocalTestMode.current) {
-                Spacer(modifier = Modifier.height(24.dp))
-
-                FinancialConnectionsButton(
-                    enabled = enabled,
-                    type = FinancialConnectionsButton.Type.Secondary,
-                    onClick = otpElement::populateTestCode,
-                ) {
-                    Text(stringResource(R.string.stripe_verification_useTestCode))
-                }
-            }
         }
         LaunchedEffect(confirmVerificationError) {
             if (confirmVerificationError is OTPError) {

financial-connections/src/main/java/com/stripe/android/financialconnections/ui/components/TestModeBanner.kt

@@ -0,0 +1,99 @@
+package com.stripe.android.financialconnections.ui.components
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Button
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.stripe.android.financialconnections.R
+import com.stripe.android.financialconnections.ui.theme.FinancialConnectionsTheme
+
+@Composable
+internal fun TestModeBanner(
+    enabled: Boolean,
+    buttonLabel: String,
+    onButtonClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    description: String = "You're in test mode.",
+) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(8.dp),
+        modifier = modifier
+            .fillMaxWidth()
+            .background(
+                color = FinancialConnectionsTheme.colors.backgroundCaution,
+                shape = RoundedCornerShape(12.dp),
+            )
+            .padding(horizontal = 8.dp),
+    ) {
+        Image(
+            painter = painterResource(R.drawable.stripe_ic_info),
+            colorFilter = ColorFilter.tint(
+                color = FinancialConnectionsTheme.colors.iconCaution,
+            ),
+            contentDescription = null,
+        )
+
+        Text(
+            text = description,
+            style = FinancialConnectionsTheme.typography.bodyMedium,
+            modifier = Modifier
+                .padding(vertical = 8.dp)
+                .weight(1f),
+        )
+
+        Button(
+            enabled = enabled,
+            contentPadding = PaddingValues(horizontal = 8.dp),
+            colors = FinancialConnectionsButton.Type.Secondary.buttonColors(),
+            onClick = onButtonClick,
+        ) {
+            Text(buttonLabel)
+        }
+    }
+}
+
+@Preview(
+    group = "Test Mode Banner",
+    name = "Enabled",
+)
+@Composable
+internal fun TestModeBannerPreviewEnabled() {
+    FinancialConnectionsTheme {
+        TestModeBanner(
+            enabled = true,
+            buttonLabel = "Use test code",
+            onButtonClick = {},
+            modifier = Modifier.padding(16.dp),
+        )
+    }
+}
+
+@Preview(
+    group = "Test Mode Banner",
+    name = "Disabled",
+)
+@Composable
+internal fun TestModeBannerPreviewDisabled() {
+    FinancialConnectionsTheme {
+        TestModeBanner(
+            enabled = false,
+            buttonLabel = "Use test code",
+            onButtonClick = {},
+            modifier = Modifier.padding(16.dp),
+        )
+    }
+}

financial-connections/src/main/java/com/stripe/android/financialconnections/ui/theme/Color.kt

@@ -43,6 +43,7 @@ internal data class FinancialConnectionsColors(
     val iconSubdued: Color,
     val iconWhite: Color,
     val iconBrand: Color,
+    val iconCaution: Color,
     val buttonPrimary: Color,
     val buttonPrimaryHover: Color,
     val buttonPrimaryPressed: Color,
@@ -53,6 +54,7 @@ internal data class FinancialConnectionsColors(
     val background: Color,
     val backgroundOffset: Color,
     val backgroundBrand: Color,
+    val backgroundCaution: Color,
     val border: Color,
     val borderBrand: Color
 )

financial-connections/src/main/java/com/stripe/android/financialconnections/ui/theme/Theme.kt

@@ -40,6 +40,7 @@ private val Colors = FinancialConnectionsColors(
     iconSubdued = Color(0xFF6C7688),
     iconWhite = Color(0xFFFFFFFF),
     iconBrand = Color(0xFF675DFF),
+    iconCaution = Color(0xFFFF8F0E),
     buttonPrimary = Color(0xFF675DFF),
     buttonPrimaryHover = Color(0xFF857AFE),
     buttonPrimaryPressed = Color(0xFF533AFD),
@@ -50,8 +51,9 @@ private val Colors = FinancialConnectionsColors(
     backgroundSurface = Color(0xFFFFFFFF),
     backgroundOffset = Color(0xFFF6F8FA),
     backgroundBrand = Color(0xFFF5F6F8),
+    backgroundCaution = Color(0xFFFEF9DA),
     border = Color(0xFFD8DEE4),
-    borderBrand = Color(0xFF675DFF)
+    borderBrand = Color(0xFF675DFF),
 )
 
 private val lineHeightStyle = LineHeightStyle(