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 <[email protected]>

Author: kari-ts

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)) }
           }
     }
   }

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>