From 3453d96c2956bdc4603ac220530802deb0321ffe Mon Sep 17 00:00:00 2001
From: kari-ts <kari@tailscale.com>
Date: Tue, 3 Dec 2024 10:35:32 -0800
Subject: [PATCH] android: emphasize hex code in TV login

Add a rounded box around the hex code and emphasize the code with font/styling

Updates tailscale/corp#24837

Signed-off-by: kari-ts <kari@tailscale.com>
---
 .../com/tailscale/ipn/ui/view/LoginQRView.kt  | 37 ++++++++++++++-----
 android/src/main/res/values/strings.xml       |  2 +-
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/android/src/main/java/com/tailscale/ipn/ui/view/LoginQRView.kt b/android/src/main/java/com/tailscale/ipn/ui/view/LoginQRView.kt
index 03ea17e74a..022e47144e 100644
--- a/android/src/main/java/com/tailscale/ipn/ui/view/LoginQRView.kt
+++ b/android/src/main/java/com/tailscale/ipn/ui/view/LoginQRView.kt
@@ -25,6 +25,8 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Dialog
@@ -41,7 +43,6 @@ fun LoginQRView(onDismiss: () -> Unit = {}, model: LoginQRViewModel = viewModel(
     Dialog(onDismissRequest = onDismiss) {
       val image by model.qrCode.collectAsState()
       val numCode by model.numCode.collectAsState()
-
       Column(
           modifier =
               Modifier.clip(RoundedCornerShape(10.dp))
@@ -52,12 +53,13 @@ fun LoginQRView(onDismiss: () -> Unit = {}, model: LoginQRViewModel = viewModel(
             Text(
                 text = stringResource(R.string.scan_to_connect_to_your_tailnet),
                 style = MaterialTheme.typography.titleMedium,
-                color = MaterialTheme.colorScheme.onSurface)
+                color = MaterialTheme.colorScheme.onSurface,
+                textAlign = TextAlign.Center)
+
             Box(
                 modifier =
                     Modifier.size(200.dp)
-                        .background(MaterialTheme.colorScheme.onSurface)
-                        .fillMaxWidth(),
+                        .background(MaterialTheme.colorScheme.onSurface),
                 contentAlignment = Alignment.Center) {
                   image?.let {
                     Image(
@@ -66,13 +68,28 @@ fun LoginQRView(onDismiss: () -> Unit = {}, model: LoginQRViewModel = viewModel(
                         modifier = Modifier.fillMaxSize())
                   }
                 }
-            numCode?.let { it ->
-              Text(
-                  text = stringResource(R.string.enter_code_to_connect_to_tailnet, it),
-                  style = MaterialTheme.typography.titleMedium,
-                  color = MaterialTheme.colorScheme.onSurface)
+            Text(
+                text = stringResource(R.string.enter_code_to_connect_to_tailnet),
+                style = MaterialTheme.typography.bodyMedium,
+                color = MaterialTheme.colorScheme.onSurface)
+
+            numCode?.let {
+              Box(
+                  modifier =
+                      Modifier
+                          .clip(RoundedCornerShape(6.dp))
+                          .background(MaterialTheme.colorScheme.primary.copy(alpha = 0.1f)),
+                  contentAlignment = Alignment.Center) {
+                    Text(
+                        text =it,
+                        style =
+                            MaterialTheme.typography.bodyLarge.copy(fontWeight = FontWeight.Bold),
+                        color = MaterialTheme.colorScheme.onSurface)
+                  }
+            }
+            Button(onClick = onDismiss, modifier = Modifier.padding(top = 16.dp)) {
+              Text(text = stringResource(R.string.dismiss))
             }
-            Button(onClick = onDismiss) { Text(text = stringResource(R.string.dismiss)) }
           }
     }
   }
diff --git a/android/src/main/res/values/strings.xml b/android/src/main/res/values/strings.xml
index 59bbe9f361..8d6657ea61 100644
--- a/android/src/main/res/values/strings.xml
+++ b/android/src/main/res/values/strings.xml
@@ -244,7 +244,7 @@
     <string name="welcome1">Tailscale is a mesh VPN for securely connecting your devices.</string>
     <string name="welcome2">All connections are device-to-device, so we never see your data. We collect and use your email address and name, as well as your device name, OS version, and IP address in order to help you to connect your devices and manage your settings. We log when you are connected to your network.</string>
     <string name="scan_to_connect_to_your_tailnet">Scan this QR code to log in to your tailnet</string>
-    <string name="enter_code_to_connect_to_tailnet">or enter this code in the Machines > Add device section of the admin console: \n%1$s</string>
+    <string name="enter_code_to_connect_to_tailnet">or enter this code in the Machines > Add device section of the admin console: </string>
 
     <!-- Strings for intent handling -->
     <string name="vpn_is_not_ready_to_start">VPN is not ready to start</string>