style: YARIS logo with red underline + #1c1c1e dark theme

- Shared YarisHeader composable: bold YARIS + red accent bar + subtitle
- Dark theme: #1c1c1e background, #2a2a2c surface (matching web UI sidebar)
- Red accent #e63946 matches web logo underline
- Applied to Dashcam, Downloads, Settings screens
This commit is contained in:
Mathieu Moran
2026-08-12 04:36:55 -04:00
parent b69ae3a229
commit e9309f4cdf
6 changed files with 61 additions and 34 deletions
@@ -55,19 +55,7 @@ fun DashcamScreen(
onDelete: (VideoFile) -> Unit,
) {
Column(modifier = Modifier.fillMaxSize()) {
// Branding header
Text(
"yaris-obd",
style = MaterialTheme.typography.headlineLarge,
color = MaterialTheme.colorScheme.primary,
modifier = Modifier.padding(start = 16.dp, top = 8.dp)
)
Text(
"phase 28 — android companion",
style = MaterialTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.onSurfaceVariant,
modifier = Modifier.padding(start = 16.dp)
)
com.yarisobd.app.ui.components.YarisHeader()
// Header card
Card(
@@ -179,6 +179,9 @@ class DashcamViewModel(application: Application) : AndroidViewModel(application)
}
_activeDownloads.value = _activeDownloads.value - filename
}
WorkInfo.State.CANCELLED -> {
_activeDownloads.value = _activeDownloads.value - filename
}
else -> {}
}
}
@@ -271,6 +274,9 @@ class DashcamViewModel(application: Application) : AndroidViewModel(application)
viewModelScope.launch { _downloadEvents.emit("✗ Upload failed: $err") }
_uploadProgress.value = _uploadProgress.value - file.name
}
WorkInfo.State.CANCELLED -> {
_uploadProgress.value = _uploadProgress.value - file.name
}
else -> {}
}
}
@@ -70,19 +70,7 @@ fun DownloadsScreen(
val context = LocalContext.current
Column(modifier = Modifier.fillMaxSize()) {
// Branding header
Text(
"yaris-obd",
style = MaterialTheme.typography.headlineLarge,
color = MaterialTheme.colorScheme.primary,
modifier = Modifier.padding(start = 16.dp, top = 8.dp)
)
Text(
"phase 28 — android companion",
style = MaterialTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.onSurfaceVariant,
modifier = Modifier.padding(start = 16.dp)
)
com.yarisobd.app.ui.components.YarisHeader()
// Header card
Card(
@@ -49,10 +49,8 @@ fun SettingsScreen(client: OkHttpClient) {
Column(
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)
Spacer(Modifier.height(20.dp))
com.yarisobd.app.ui.components.YarisHeader()
Spacer(Modifier.height(8.dp))
// Server credentials
Card(
@@ -0,0 +1,46 @@
package com.yarisobd.app.ui.components
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.yarisobd.app.ui.theme.YarisRed
/** Shared branding header matching web UI: Racing Sans One YARIS with red underline */
@Composable
fun YarisHeader() {
Text(
"YARIS",
style = MaterialTheme.typography.headlineLarge.copy(
fontWeight = FontWeight.Black,
letterSpacing = 4.sp,
),
color = MaterialTheme.colorScheme.onBackground,
modifier = Modifier.padding(start = 16.dp, top = 8.dp)
)
Spacer(Modifier.height(2.dp))
// Red accent underline
androidx.compose.foundation.Canvas(
Modifier
.padding(start = 16.dp)
.width(48.dp)
.height(3.dp)
) {
drawRect(color = YarisRed)
}
Spacer(Modifier.height(8.dp))
Text(
"phase 28 — android companion",
style = MaterialTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.onSurfaceVariant,
modifier = Modifier.padding(start = 16.dp)
)
}
@@ -16,12 +16,13 @@ import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalView
import androidx.core.view.WindowCompat
// Brand colors — dark, car-friendly. Inspired by the Pi web UI's dark sidebar.
// Brand colors — matching web UI: #1c1c1e sidebar, #e63946 red, green primary
private val YarisGreen = Color(0xFF4CAF50)
private val YarisGreenDark = Color(0xFF388E3C)
private val YarisBackground = Color(0xFF121212)
private val YarisSurface = Color(0xFF1E1E1E)
private val YarisSurfaceVariant = Color(0xFF2C2C2C)
val YarisRed = Color(0xFFE63946)
private val YarisBackground = Color(0xFF1C1C1E)
private val YarisSurface = Color(0xFF2A2A2C)
private val YarisSurfaceVariant = Color(0xFF3A3A3C)
private val DarkColorScheme = darkColorScheme(
primary = YarisGreen,