Sample app UI changes

app/src/main/java/com/auth0/android/sample/MainActivity.kt

@@ -170,11 +170,24 @@ fun SampleApp(
 
             composable<AppRoute.ChooseSignIn> {
                 val context = LocalContext.current
-                ChooseSignInScreen(
-                    onHostedLogin = { authViewModel.login(context, webAuthProvider) },
-                    onEmbeddedLogin = { navController.navigate(AppRoute.EmbeddedLogin) },
-                    onSettings = { navController.navigate(AppRoute.Appearance) }
-                )
+                val snackbarHostState = remember { SnackbarHostState() }
+
+                LaunchedEffect(Unit) {
+                    authViewModel.loginError.collect { message ->
+                        snackbarHostState.showSnackbar(message)
+                    }
+                }
+
+                Scaffold(
+                    snackbarHost = { SnackbarHost(snackbarHostState) },
+                    containerColor = androidx.compose.ui.graphics.Color.Transparent
+                ) { _ ->
+                    ChooseSignInScreen(
+                        onHostedLogin = { authViewModel.login(context, webAuthProvider) },
+                        onEmbeddedLogin = { navController.navigate(AppRoute.EmbeddedLogin) },
+                        onSettings = { navController.navigate(AppRoute.Appearance) }
+                    )
+                }
             }
 
             composable<AppRoute.EmbeddedLogin> {

app/src/main/java/com/auth0/android/sample/ui/components/Auth0LogoHeader.kt

@@ -12,6 +12,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import com.auth0.android.sample.R
+import com.auth0.android.sample.ui.theme.isAuth0DarkTheme
 import com.auth0.universalcomponents.theme.Auth0Theme
 
 /**
@@ -24,6 +25,8 @@ fun Auth0LogoHeader(
     modifier: Modifier = Modifier,
 ) {
     val dimensions = Auth0Theme.dimensions
+    val colors = Auth0Theme.colors
+    val logoTint = if (isAuth0DarkTheme()) colors.textBold else Color.Unspecified
 
     Spacer(modifier = Modifier.height(dimensions.spacingXl))
 
@@ -35,7 +38,7 @@ fun Auth0LogoHeader(
     ) {
         Icon(
             painterResource(R.drawable.ic_auth0), contentDescription = "Auth0 logo",
-            tint = Color.Unspecified
+            tint = logoTint
         )
     }
 }

app/src/main/java/com/auth0/android/sample/ui/components/FactorCard.kt

@@ -2,7 +2,8 @@ package com.auth0.android.sample.ui.components
 
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -18,9 +19,9 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.unit.dp
+import com.auth0.android.sample.ui.theme.isAuth0DarkTheme
 import com.auth0.universalcomponents.theme.Auth0Theme
 
 /**
@@ -31,37 +32,50 @@ import com.auth0.universalcomponents.theme.Auth0Theme
  * @param title Factor name (e.g. "Hosted Login")
  * @param description Short description of the factor
  * @param icon Leading icon for the factor
+ * @param isSelected Whether this card is currently selected; shows bold border and filled radio indicator
  * @param onClick Callback when the card is tapped
  */
 @Composable
 fun FactorCard(
     title: String,
     description: String,
     icon: Painter,
+    isSelected: Boolean = false,
     onClick: () -> Unit = {}
 ) {
     val colors = Auth0Theme.colors
     val typography = Auth0Theme.typography
     val shapes = Auth0Theme.shapes
     val dimensions = Auth0Theme.dimensions
     val sizes = Auth0Theme.sizes
+    val isDark = isAuth0DarkTheme()
+
+    // Light: selected=white (layerTop), unselected=near-white (layerMedium)
+    // Dark:  both cards use layerMedium (#27272A); selection is shown via border only
+    val cardBackground = when {
+        isSelected && !isDark -> colors.backgroundLayerTop
+        else -> colors.backgroundLayerMedium
+    }
 
     Card(
-        modifier = Modifier
-            .fillMaxWidth()
-            .height(112.dp)
-            .clickable { onClick() },
+        onClick = onClick,
+        modifier = Modifier.fillMaxWidth(),
         shape = shapes.large,
-        colors = CardDefaults.cardColors(
-            containerColor = Auth0Theme.colors.backgroundLayerBase
-        ),
-        border = BorderStroke(1.dp, colors.borderBold)
+        colors = CardDefaults.cardColors(containerColor = cardBackground),
+        border = BorderStroke(
+            width = if (isSelected) 2.dp else 1.dp,
+            color = when {
+                isSelected && isDark -> colors.backgroundAccent  // green #A7F3D0 in dark
+                isSelected -> colors.borderBold                  // grey #A1A1AA in light
+                else -> colors.borderDefault
+            }
+        )
     ) {
         Row(
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(dimensions.spacingMd),
-            verticalAlignment = Alignment.Top
+            verticalAlignment = Alignment.CenterVertically
         ) {
             Icon(
                 painter = icon,
@@ -78,12 +92,48 @@ fun FactorCard(
                     style = typography.title,
                     color = colors.textBold
                 )
+                Spacer(modifier = Modifier.height(dimensions.spacingXxs))
                 Text(
                     text = description,
                     style = typography.body,
-                    color = colors.textDefault
+                    color = colors.textDefault,
+                    minLines = 2
                 )
             }
+
+            Spacer(modifier = Modifier.width(dimensions.spacingMd))
+
+            // Radio selection indicator:
+            //   Light selected: dark filled circle (#09090B) + white inner dot
+            //   Dark selected:  green filled circle (#A7F3D0 accent) + dark inner dot
+            //   Unselected:     transparent circle with subtle border
+            val radioFill = when {
+                isSelected && isDark -> colors.backgroundAccent
+                isSelected -> colors.backgroundPrimary
+                else -> colors.backgroundLayerBase
+            }
+            val radioBorder = if (isSelected) radioFill else colors.borderDefault
+            val radioInnerDot = if (isDark) colors.backgroundLayerMedium else colors.backgroundLayerTop
+
+            Box(
+                modifier = Modifier
+                    .size(20.dp)
+                    .border(
+                        width = if (isSelected) 0.dp else 1.dp,
+                        color = radioBorder,
+                        shape = shapes.full
+                    )
+                    .background(color = radioFill, shape = shapes.full),
+                contentAlignment = Alignment.Center
+            ) {
+                if (isSelected) {
+                    Box(
+                        modifier = Modifier
+                            .size(8.dp)
+                            .background(color = radioInnerDot, shape = shapes.full)
+                    )
+                }
+            }
         }
     }
 }

app/src/main/java/com/auth0/android/sample/ui/components/NavigationGridCard.kt

@@ -51,8 +51,8 @@ fun NavigationGridCard(
             .clickable { onClick() },
         shape = shapes.extraLarge,
         colors = CardDefaults.cardColors(containerColor = colors.backgroundLayerTop),
-        border = BorderStroke(1.dp, colors.borderBold),
-        elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
+        border = BorderStroke(1.dp, colors.borderDefault),
+        elevation = CardDefaults.cardElevation(defaultElevation = 0.dp)
     ) {
         Column(
             modifier = Modifier

app/src/main/java/com/auth0/android/sample/ui/screens/AppearanceScreen.kt

@@ -23,6 +23,7 @@ import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.auth0.android.sample.ui.viewmodels.AppearanceViewModel
 import com.auth0.universalcomponents.presentation.ui.components.GradientButton
 import com.auth0.universalcomponents.presentation.ui.components.TopBar
+import com.auth0.android.sample.ui.theme.isAuth0DarkTheme
 import com.auth0.universalcomponents.theme.Auth0Theme
 
 /**
@@ -39,13 +40,23 @@ fun AppearanceScreen(
     onBack: () -> Unit,
     appearanceViewModel: AppearanceViewModel
 ) {
+    val selectedIndex by appearanceViewModel.selectedIndex.collectAsStateWithLifecycle()
+    val previewOption = appearanceViewModel.themeOptions.getOrElse(selectedIndex) {
+        appearanceViewModel.themeOptions[0]
+    }
+
+    // Wrap in a local Auth0Theme so the screen previews the selected theme immediately,
+    // while the global theme (in MainActivity) only updates when "Update Theme" is tapped.
+    Auth0Theme(
+        configuration = previewOption.configuration,
+        darkTheme = previewOption.darkTheme
+    ) {
     val colors = Auth0Theme.colors
     val typography = Auth0Theme.typography
     val shapes = Auth0Theme.shapes
     val dimensions = Auth0Theme.dimensions
     val sizes = Auth0Theme.sizes
-
-    val selectedIndex by appearanceViewModel.selectedIndex.collectAsStateWithLifecycle()
+    val isDark = isAuth0DarkTheme()
 
     Scaffold(
         topBar = {
@@ -108,7 +119,7 @@ fun AppearanceScreen(
                             selected = selectedIndex == index,
                             onClick = { appearanceViewModel.selectTheme(index) },
                             colors = RadioButtonDefaults.colors(
-                                selectedColor = colors.backgroundPrimary,
+                                selectedColor = if (isDark) colors.backgroundAccent else colors.backgroundPrimary,
                                 unselectedColor = colors.borderDefault
                             )
                         )
@@ -124,7 +135,7 @@ fun AppearanceScreen(
                 }
             }
 
-            Spacer(modifier = Modifier.weight(1f))
+            Spacer(modifier = Modifier.height(dimensions.spacingLg))
 
             GradientButton(
                 modifier = Modifier
@@ -142,7 +153,7 @@ fun AppearanceScreen(
                 )
             }
 
-            Spacer(modifier = Modifier.height(dimensions.spacingLg))
         }
     }
+    } // Auth0Theme
 }