From f96b6328df347c16efb2b2cfa66aaec86e4985a6 Mon Sep 17 00:00:00 2001
From: kari-ts <135075563+kari-ts@users.noreply.github.com>
Date: Tue, 3 Dec 2024 10:41:44 -0800
Subject: [PATCH] android: emphasize hex code in TV login (#578)

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 03ea17e..022e471 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 59bbe9f..8d6657e 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>