Bug report styling

Signed-off-by: Percy Wegmann <percy@tailscale.com>

android/src/main/java/com/tailscale/ipn/ui/util/ClipboardValueView.kt

@@ -4,7 +4,6 @@
 package com.tailscale.ipn.ui.util
 
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
@@ -31,31 +30,29 @@ fun ClipboardValueView(
     fontFamily: FontFamily = FontFamily.Monospace
 ) {
   val localClipboardManager = LocalClipboardManager.current
-  Row {
+  ListItem(
-    ListItem(
+      modifier = Modifier.clickable { localClipboardManager.setText(AnnotatedString(value)) },
-        modifier = Modifier.clickable { localClipboardManager.setText(AnnotatedString(value)) },
+      overlineContent = { title?.let { Text(it, style = MaterialTheme.typography.titleMedium) } },
-        overlineContent = { title?.let { Text(it, style = MaterialTheme.typography.titleMedium) } },
+      headlineContent = {
-        headlineContent = {
+        Text(
+            text = value,
+            style = MaterialTheme.typography.bodyMedium,
+            fontFamily = fontFamily,
+            maxLines = 2,
+            overflow = TextOverflow.Ellipsis)
+      },
+      supportingContent = {
+        subtitle?.let { subtitle ->
           Text(
-              text = value,
+              subtitle,
-              style = MaterialTheme.typography.bodyMedium,
+              modifier = Modifier.padding(top = 8.dp),
-              fontFamily = fontFamily,
+              style = MaterialTheme.typography.bodyMedium)
-              maxLines = 2,
+        }
-              overflow = TextOverflow.Ellipsis)
+      },
-        },
+      trailingContent = {
-        supportingContent = {
+        Icon(
-          subtitle?.let { subtitle ->
+            painterResource(R.drawable.clipboard),
-            Text(
+            stringResource(R.string.copy_to_clipboard),
-                subtitle,
+            modifier = Modifier.width(24.dp).height(24.dp))
-                modifier = Modifier.padding(top = 8.dp),
+      })
-                style = MaterialTheme.typography.bodyMedium)
-          }
-        },
-        trailingContent = {
-          Icon(
-              painterResource(R.drawable.clipboard),
-              stringResource(R.string.copy_to_clipboard),
-              modifier = Modifier.width(24.dp).height(24.dp))
-        })
-  }
 }

android/src/main/java/com/tailscale/ipn/ui/view/BugReportView.kt

@@ -26,9 +26,8 @@ import androidx.compose.ui.text.withStyle
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.tailscale.ipn.R
 import com.tailscale.ipn.ui.Links
-import com.tailscale.ipn.ui.theme.ts_color_light_blue
+import com.tailscale.ipn.ui.theme.link
 import com.tailscale.ipn.ui.util.ClipboardValueView
-import com.tailscale.ipn.ui.util.Lists
 import com.tailscale.ipn.ui.viewModel.BugReportViewModel
 
 @Composable
@@ -40,23 +39,15 @@ fun BugReportView(nav: BackNavigation, model: BugReportViewModel = viewModel())
     Column(modifier = Modifier.padding(innerPadding).fillMaxWidth().fillMaxHeight()) {
       ListItem(
           headlineContent = {
-            ClickableText(
+            ClickableText(text = contactText(), onClick = { handler.openUri(Links.SUPPORT_URL) })
-                text = contactText(),
-                modifier = Modifier.fillMaxWidth(),
-                onClick = { handler.openUri(Links.SUPPORT_URL) })
           })
 
-      Lists.SectionDivider()
-
       ClipboardValueView(bugReportID, title = stringResource(R.string.bug_report_id))
 
-      Lists.SectionDivider()
-
       ListItem(
           headlineContent = {
             Text(
                 text = stringResource(id = R.string.bug_report_id_desc),
-                modifier = Modifier.fillMaxWidth(),
                 textAlign = TextAlign.Left,
                 style = MaterialTheme.typography.bodySmall)
           })
@@ -67,20 +58,19 @@ fun BugReportView(nav: BackNavigation, model: BugReportViewModel = viewModel())
 @Composable
 fun contactText(): AnnotatedString {
   val annotatedString = buildAnnotatedString {
-    withStyle(style = SpanStyle(color = MaterialTheme.colorScheme.primary)) {
+    append(stringResource(id = R.string.bug_report_instructions_prefix))
-      append(stringResource(id = R.string.bug_report_instructions_prefix))
-    }
 
     pushStringAnnotation(tag = "reportLink", annotation = Links.SUPPORT_URL)
     withStyle(
-        style = SpanStyle(color = ts_color_light_blue, textDecoration = TextDecoration.Underline)) {
+        style =
+            SpanStyle(
+                color = MaterialTheme.colorScheme.link,
+                textDecoration = TextDecoration.Underline)) {
           append(stringResource(id = R.string.bug_report_instructions_linktext))
         }
     pop()
 
-    withStyle(style = SpanStyle(color = MaterialTheme.colorScheme.primary)) {
+    append(stringResource(id = R.string.bug_report_instructions_suffix))
-      append(stringResource(id = R.string.bug_report_instructions_suffix))
-    }
   }
   return annotatedString
 }