From b775856dd9584da2c69e4ba720ca7e051b7f427a Mon Sep 17 00:00:00 2001 From: Mathieu Moran Date: Sat, 15 Aug 2026 20:34:29 -0400 Subject: [PATCH] fix(android): restore wordmark+subtitle header, content padding, OS light/dark theme --- .../java/com/yarisobd/app/MainActivity.kt | 3 +- .../yarisobd/app/ui/components/YarisHeader.kt | 62 +++++++++++-------- .../java/com/yarisobd/app/ui/theme/Theme.kt | 15 ++++- 3 files changed, 49 insertions(+), 31 deletions(-) diff --git a/android/app/src/main/java/com/yarisobd/app/MainActivity.kt b/android/app/src/main/java/com/yarisobd/app/MainActivity.kt index afd04b7..7f930e4 100644 --- a/android/app/src/main/java/com/yarisobd/app/MainActivity.kt +++ b/android/app/src/main/java/com/yarisobd/app/MainActivity.kt @@ -35,6 +35,7 @@ import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.painterResource +import androidx.compose.ui.unit.dp import androidx.lifecycle.viewmodel.compose.viewModel import com.yarisobd.app.data.remote.dto.TripSummary import com.yarisobd.app.ui.components.YarisHeader @@ -190,7 +191,7 @@ fun YarisMainScreen(client: OkHttpClient) { } } ) { padding -> - Column(modifier = Modifier.padding(padding)) { + Column(modifier = Modifier.padding(padding).padding(start = 4.dp, end = 4.dp, bottom = 16.dp)) { when (selectedTab) { 0 -> DashboardScreen( gps = gps, diff --git a/android/app/src/main/java/com/yarisobd/app/ui/components/YarisHeader.kt b/android/app/src/main/java/com/yarisobd/app/ui/components/YarisHeader.kt index 7f1affd..1f43fbf 100644 --- a/android/app/src/main/java/com/yarisobd/app/ui/components/YarisHeader.kt +++ b/android/app/src/main/java/com/yarisobd/app/ui/components/YarisHeader.kt @@ -1,18 +1,20 @@ package com.yarisobd.app.ui.components +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.Row +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.statusBarsPadding +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.drawBehind -import androidx.compose.ui.geometry.Offset -import androidx.compose.ui.geometry.Size import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.font.FontStyle import androidx.compose.ui.text.font.FontWeight @@ -21,33 +23,39 @@ import androidx.compose.ui.unit.sp import com.yarisobd.app.ui.theme.YarisDark import com.yarisobd.app.ui.theme.YarisRed -/** Global dark top bar matching the web UI's mobile topbar + YARIS wordmark. */ +/** Global dark top bar: YARIS wordmark + red underline + phase subtitle. */ @Composable fun YarisHeader() { Surface(color = YarisDark) { - Row(Modifier.fillMaxWidth().statusBarsPadding()) { - Column( + Column( + Modifier + .fillMaxWidth() + .statusBarsPadding() + .padding(horizontal = 16.dp, vertical = 10.dp) + ) { + Text( + "YARIS-OBD", + style = MaterialTheme.typography.titleLarge.copy( + fontWeight = FontWeight.Normal, + fontStyle = FontStyle.Italic, + letterSpacing = 1.5.sp, + ), + color = Color.White, + maxLines = 1, + ) + Spacer(Modifier.height(2.dp)) + Box( Modifier - .padding(horizontal = 16.dp, vertical = 12.dp) - .drawBehind { - drawRect( - color = YarisRed, - topLeft = Offset(0f, size.height - 4.dp.toPx()), - size = Size(size.width, 3.dp.toPx()), - ) - } - ) { - Text( - "YARIS-OBD", - style = MaterialTheme.typography.titleLarge.copy( - fontWeight = FontWeight.Normal, - fontStyle = FontStyle.Italic, - letterSpacing = 1.2.sp, - ), - color = Color.White, - maxLines = 1, - ) - } + .width(48.dp) + .height(3.dp) + .background(YarisRed, RoundedCornerShape(2.dp)) + ) + Spacer(Modifier.height(6.dp)) + Text( + "phase 28 — android companion", + style = MaterialTheme.typography.bodySmall, + color = Color.White.copy(alpha = 0.55f), + ) } } } diff --git a/android/app/src/main/java/com/yarisobd/app/ui/theme/Theme.kt b/android/app/src/main/java/com/yarisobd/app/ui/theme/Theme.kt index 01871a4..ee4e2ac 100644 --- a/android/app/src/main/java/com/yarisobd/app/ui/theme/Theme.kt +++ b/android/app/src/main/java/com/yarisobd/app/ui/theme/Theme.kt @@ -54,18 +54,28 @@ private val LightColorScheme = lightColorScheme( private val DarkColorScheme = darkColorScheme( primary = YarisBlue, onPrimary = Color.White, - background = YarisDark, + primaryContainer = Color(0xFF2B3B6E), + onPrimaryContainer = Color(0xFFD6E0FB), + secondary = YarisBlue, + onSecondary = Color.White, + background = Color(0xFF121316), onBackground = Color(0xFFE0E0E0), surface = YarisDark, onSurface = Color(0xFFE0E0E0), surfaceContainerHigh = Color(0xFF2A2A2C), + surfaceContainer = YarisDark, + surfaceVariant = Color(0xFF2A2A2C), onSurfaceVariant = Color(0xFFAAAAAA), error = YarisRed, + onError = Color.White, + errorContainer = Color(0xFF5A1016), + onErrorContainer = Color(0xFFFBE3E5), + outline = Color(0xFF3A3A3C), ) @Composable fun YarisOBDTheme( - darkTheme: Boolean = false, // the web UI is light — match it by default + darkTheme: Boolean = isSystemInDarkTheme(), dynamicColor: Boolean = false, // Off by default — use our brand colors content: @Composable () -> Unit ) { @@ -82,7 +92,6 @@ fun YarisOBDTheme( if (!view.isInEditMode) { SideEffect { val window = (view.context as Activity).window - window.statusBarColor = YarisDark.toArgb() // Dark top bar sits under the status bar, so status icons stay light. WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = false }