style: minimalist Material icon buttons (download, upload, delete)

- DashcamScreen: Download + Delete as IconButton with Icons.Filled - DownloadsScreen: CloudUpload + Delete as IconButton - No text labels, just clean Material icons
2026-08-12 04:27:51 -04:00
parent 6b47dafdb8
commit 2989f60f9c
5 changed files with 27 additions and 35 deletions
@@ -21,9 +21,14 @@ import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.LinearProgressIndicator
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Delete
+import androidx.compose.material.icons.filled.Download
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -58,7 +63,7 @@ fun DashcamScreen(
            modifier = Modifier.padding(start = 16.dp, top = 8.dp)
        )
        Text(
-            "Phase 28 — Android Companion",
+            "phase 28 — android companion",
            style = MaterialTheme.typography.bodySmall,
            color = MaterialTheme.colorScheme.onSurfaceVariant,
            modifier = Modifier.padding(start = 16.dp)
@@ -269,25 +274,14 @@ private fun VideoRow(

            // Actions
            Row {
-                Button(
+                IconButton(
                    onClick = onDownload,
                    enabled = !video.converting,
-                    colors = ButtonDefaults.buttonColors(
-                        containerColor = MaterialTheme.colorScheme.primary
-                    ),
-                    modifier = Modifier.height(36.dp)
                ) {
-                    Text("↓", style = MaterialTheme.typography.bodySmall)
+                    Icon(Icons.Filled.Download, "Download", tint = MaterialTheme.colorScheme.primary)
                }
-                Spacer(modifier = Modifier.width(4.dp))
-                Button(
-                    onClick = onDelete,
-                    colors = ButtonDefaults.buttonColors(
-                        containerColor = MaterialTheme.colorScheme.error
-                    ),
-                    modifier = Modifier.height(36.dp)
-                ) {
-                    Text("✕", style = MaterialTheme.typography.bodySmall)
+                IconButton(onClick = onDelete) {
+                    Icon(Icons.Filled.Delete, "Delete", tint = MaterialTheme.colorScheme.error)
                }
            }
        }
@@ -28,6 +28,11 @@ import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.LinearProgressIndicator
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.CloudUpload
+import androidx.compose.material.icons.filled.Delete
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Text
 import com.yarisobd.app.data.CredentialStore
@@ -73,7 +78,7 @@ fun DownloadsScreen(
            modifier = Modifier.padding(start = 16.dp, top = 8.dp)
        )
        Text(
-            "Phase 28 — Android Companion",
+            "phase 28 — android companion",
            style = MaterialTheme.typography.bodySmall,
            color = MaterialTheme.colorScheme.onSurfaceVariant,
            modifier = Modifier.padding(start = 16.dp)
@@ -228,20 +233,13 @@ fun DownloadsScreen(
                                CircularProgressIndicator(modifier = Modifier.size(20.dp), strokeWidth = 2.dp, color = MaterialTheme.colorScheme.error)
                            } else {
                                if (credentialsConfigured) {
-                                    Button(
-                                        onClick = { onUpload(file) },
-                                        colors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.colorScheme.tertiary),
-                                        modifier = Modifier.height(32.dp), shape = RoundedCornerShape(8.dp),
-                                        contentPadding = PaddingValues(horizontal = 10.dp, vertical = 0.dp)
-                                    ) { Text("↑", style = MaterialTheme.typography.bodySmall) }
-                                    Spacer(Modifier.width(4.dp))
+                                    IconButton(onClick = { onUpload(file) }) {
+                                        Icon(Icons.Filled.CloudUpload, "Upload", tint = MaterialTheme.colorScheme.tertiary)
+                                    }
+                                }
+                                IconButton(onClick = { onDelete(file) }) {
+                                    Icon(Icons.Filled.Delete, "Delete", tint = MaterialTheme.colorScheme.error)
                                }
-                                Button(
-                                    onClick = { onDelete(file) },
-                                    colors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.colorScheme.error),
-                                    modifier = Modifier.height(32.dp), shape = RoundedCornerShape(8.dp),
-                                    contentPadding = PaddingValues(horizontal = 10.dp, vertical = 0.dp)
-                                ) { Text("✕", style = MaterialTheme.typography.bodySmall) }
                            }
                        }
                    }
@@ -50,7 +50,7 @@ fun SettingsScreen(client: OkHttpClient) {
        modifier = Modifier.fillMaxSize().verticalScroll(rememberScrollState()).padding(16.dp)
    ) {
        Text("yaris-obd", style = MaterialTheme.typography.headlineLarge, color = MaterialTheme.colorScheme.primary)
-        Text("Phase 28 — Android Companion", style = MaterialTheme.typography.bodySmall, color = MaterialTheme.colorScheme.onSurfaceVariant)
+        Text("phase 28 — android companion", style = MaterialTheme.typography.bodySmall, color = MaterialTheme.colorScheme.onSurfaceVariant)

        Spacer(Modifier.height(20.dp))

@@ -27,7 +27,7 @@
    {# ── Desktop sidebar ─────────────────────────────────────────────────── #}
    <nav id="app-sidebar" class="app-sidebar d-none d-md-flex flex-column">
        <a class="sidebar-brand" href="{{ url_for('portal_index') }}" aria-label="Home">
-            <span class="sidebar-brand-logo">yaris-obd</span>
+            <span class="sidebar-brand-logo">YARIS-OBD</span>
        </a>
        <div class="px-3 pb-1 sidebar-env-badge">
            <span class="badge bg-warning text-dark w-100 text-center" style="font-size:.65rem;letter-spacing:.04em;">
@@ -84,7 +84,7 @@
        <nav class="topbar navbar navbar-light bg-white shadow-sm">
            <div class="container-fluid px-3 gap-2">
                <a class="navbar-brand d-flex d-md-none align-items-center gap-2 text-decoration-none" href="{{ url_for('portal_index') }}">
-                    <span style="font-family:'Racing Sans One','Arial Black',sans-serif;font-size:1.3rem;font-style:italic;color:#1c1c1e;">yaris-obd</span>
+                    <span style="font-family:'Racing Sans One','Arial Black',sans-serif;font-size:1.3rem;font-style:italic;color:#1c1c1e;">YARIS-OBD</span>
                    <span class="badge bg-warning text-dark ms-1" style="font-size:.6rem;">Remote</span>
                </a>
                <div class="d-flex align-items-center gap-2">
@@ -19,7 +19,7 @@
    {# ── Desktop sidebar ─────────────────────────────────────────────────── #}
    <nav id="app-sidebar" class="app-sidebar d-none d-md-flex flex-column">
        <a class="sidebar-brand" href="{{ url_for('index') }}" aria-label="Home">
-            <span class="sidebar-brand-logo">yaris-obd</span>
+            <span class="sidebar-brand-logo">YARIS-OBD</span>
        </a>
        <hr class="sidebar-divider">
        <ul class="nav flex-column flex-grow-1">
@@ -67,7 +67,7 @@
            <div class="container-fluid px-3 gap-2">
                {# Mobile: logo on left #}
                <a class="navbar-brand d-flex d-md-none align-items-center gap-2 text-decoration-none" href="{{ url_for('index') }}">
-                    <span style="font-family:'Racing Sans One','Arial Black',sans-serif;font-size:1.3rem;font-style:italic;color:#1c1c1e;">yaris-obd</span>
+                    <span style="font-family:'Racing Sans One','Arial Black',sans-serif;font-size:1.3rem;font-style:italic;color:#1c1c1e;">YARIS-OBD</span>
                </a>
                <div class="ms-auto d-flex align-items-center gap-2">
                    <div class="dropdown">