More little UI tweaks in SettingsView, add underline to links in BugR…

…eportView
tailscale · Mar 21, 2024 · 6c692ac · 6c692ac
1 parent 3aa9958
commit 6c692ac
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 19 deletions.
diff --git a/android/src/main/java/com/tailscale/ipn/ui/view/BugReportView.kt b/android/src/main/java/com/tailscale/ipn/ui/view/BugReportView.kt
@@ -24,20 +24,22 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalClipboardManager
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.unit.dp
 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.util.defaultPaddingModifier
 import com.tailscale.ipn.ui.util.settingsRowModifier
 import com.tailscale.ipn.ui.viewModel.BugReportViewModel
@@ -48,18 +50,18 @@ fun BugReportView(nav: BackNavigation, model: BugReportViewModel = viewModel())
   val handler = LocalUriHandler.current
 
   Scaffold(topBar = { Header(R.string.bug_report_title, onBack = nav.onBack) }) { innerPadding ->
-    Column(modifier = Modifier.padding(innerPadding).padding(8.dp).fillMaxWidth().fillMaxHeight()) {
+    Column(modifier = Modifier.padding(innerPadding).padding(24.dp).fillMaxWidth().fillMaxHeight()) {
       ClickableText(
           text = contactText(),
           modifier = Modifier.fillMaxWidth(),
           style = MaterialTheme.typography.bodyMedium,
           onClick = { handler.openUri(Links.SUPPORT_URL) })
 
-      Spacer(modifier = Modifier.height(8.dp))
+      Spacer(modifier = Modifier.height(16.dp))
 
       ReportIdRow(bugReportIdFlow = model.bugReportID)
 
-      Spacer(modifier = Modifier.height(8.dp))
+      Spacer(modifier = Modifier.height(16.dp))
 
       Text(
           text = stringResource(id = R.string.bug_report_id_desc),
@@ -87,7 +89,8 @@ fun ReportIdRow(bugReportIdFlow: StateFlow<String>) {
           Text(
               text = bugReportId.value,
               style = MaterialTheme.typography.titleMedium,
-              maxLines = 1,
+              fontFamily = FontFamily.Monospace,
+              maxLines = 2,
               overflow = TextOverflow.Ellipsis,
               modifier = defaultPaddingModifier())
         }
@@ -105,7 +108,7 @@ fun contactText(): AnnotatedString {
     }
 
     pushStringAnnotation(tag = "reportLink", annotation = Links.SUPPORT_URL)
-    withStyle(style = SpanStyle(color = Color.Blue)) {
+    withStyle(style = SpanStyle(color = ts_color_light_blue, textDecoration = TextDecoration.Underline)) {
       append(stringResource(id = R.string.bug_report_instructions_linktext))
     }
     pop()

diff --git a/android/src/main/java/com/tailscale/ipn/ui/view/PeerDetails.kt b/android/src/main/java/com/tailscale/ipn/ui/view/PeerDetails.kt
@@ -42,7 +42,7 @@ fun PeerDetails(
   Scaffold(topBar = { Header(title = R.string.peer_details, onBack = nav.onBack) }) { innerPadding
     ->
     Column(
-        modifier = Modifier.fillMaxWidth().padding(innerPadding).padding(horizontal = 8.dp),
+        modifier = Modifier.fillMaxWidth().padding(innerPadding).padding(horizontal = 16.dp).padding(top = 22.dp),
     ) {
       Text(
           text = model.nodeName,
@@ -87,25 +87,26 @@ fun AddressRow(address: String, type: String) {
   val localClipboardManager = LocalClipboardManager.current
 
   Row(
+      verticalAlignment = Alignment.CenterVertically,
       modifier =
-          Modifier.padding(horizontal = 8.dp, vertical = 4.dp)
+          Modifier.padding(horizontal = 8.dp, vertical = 8.dp)
               .clickable(onClick = { localClipboardManager.setText(AnnotatedString(address)) })) {
         Column {
-          Text(text = address, style = MaterialTheme.typography.titleMedium)
-          Text(text = type, style = MaterialTheme.typography.bodyMedium)
+          Text(text = address)
+          Text(text = type, fontSize = MaterialTheme.typography.labelLarge.fontSize, color = MaterialTheme.colorScheme.secondary)
         }
         Box(modifier = Modifier.weight(1f), contentAlignment = Alignment.CenterEnd) {
-          Icon(Icons.Outlined.Share, null)
+          Icon(Icons.Outlined.Share, null, tint = MaterialTheme.colorScheme.secondary)
         }
       }
 }
 
 @Composable
 fun ValueRow(title: String, value: String) {
-  Row(modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp).fillMaxWidth()) {
-    Text(text = title, style = MaterialTheme.typography.titleMedium)
+  Row(modifier = Modifier.padding(horizontal = 8.dp, vertical = 8.dp).fillMaxWidth()) {
+    Text(text = title)
     Box(modifier = Modifier.weight(1f), contentAlignment = Alignment.CenterEnd) {
-      Text(text = value, style = MaterialTheme.typography.bodyMedium)
+      Text(text = value, color = MaterialTheme.colorScheme.secondary)
     }
   }
 }
diff --git a/android/src/main/java/com/tailscale/ipn/ui/view/SettingsView.kt b/android/src/main/java/com/tailscale/ipn/ui/view/SettingsView.kt
@@ -51,7 +51,7 @@ fun Settings(
   val isAdmin = viewModel.isAdmin.collectAsState().value
 
   Scaffold(topBar = { Header(title = R.string.settings_title, onBack = settingsNav.onBackPressed) }) { innerPadding ->
-    Column(modifier = Modifier.padding(innerPadding).fillMaxHeight()) {
+    Column(modifier = Modifier.padding(innerPadding).fillMaxHeight().padding(16.dp)) {
       UserView(
           profile = user,
           actionState = UserActionState.NAV,

diff --git a/android/src/main/java/com/tailscale/ipn/ui/view/SharedViews.kt b/android/src/main/java/com/tailscale/ipn/ui/view/SharedViews.kt
@@ -5,6 +5,7 @@ package com.tailscale.ipn.ui.view
 
 import androidx.annotation.StringRes
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
@@ -42,7 +43,7 @@ fun Header(@StringRes title: Int, onBack: (() -> Unit)? = null) {
 
 @Composable
 fun BackArrow(action: () -> Unit) {
-  Icon(Icons.AutoMirrored.Filled.ArrowBack, null, modifier = Modifier.clickable { action() })
+  Icon(Icons.AutoMirrored.Filled.ArrowBack, null, modifier = Modifier.clickable { action() }.padding(start = 15.dp, end = 20.dp))
 }
 
 @Composable

diff --git a/android/src/main/res/values/strings.xml b/android/src/main/res/values/strings.xml
@@ -29,9 +29,9 @@
     <!-- Strings for the bug reporting screen -->
     <string name="bug_report_title">Report a Bug</string>
     <string name="bug_report_instructions_prefix">To report a bug,&#160;</string>
-    <string name="bug_report_instructions_linktext">contact our support team&#160; </string>
-    <string name="bug_report_instructions_suffix">and include the ID below.</string>
-    <string name="bug_report_id_desc">This ID helps us find the event ino our diagnostic logs.  This process does not share any of your personally-identifiable information.</string>
+    <string name="bug_report_instructions_linktext">contact our support team&#160;</string>
+    <string name="bug_report_instructions_suffix"> and include the ID below.</string>
+    <string name="bug_report_id_desc">This ID helps us find the event in our diagnostic logs. This process does not share any of your personally-identifiable information.</string>
 
     <!-- Strings for the settings screen -->
     <string name="settings_title">Settings</string>