fix(android): restore wordmark+subtitle header, content padding, OS light/dark theme

This commit is contained in:
Mathieu Moran
2026-08-15 20:34:29 -04:00
parent 699ce16dab
commit b775856dd9
3 changed files with 49 additions and 31 deletions
@@ -35,6 +35,7 @@ import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel import androidx.lifecycle.viewmodel.compose.viewModel
import com.yarisobd.app.data.remote.dto.TripSummary import com.yarisobd.app.data.remote.dto.TripSummary
import com.yarisobd.app.ui.components.YarisHeader import com.yarisobd.app.ui.components.YarisHeader
@@ -190,7 +191,7 @@ fun YarisMainScreen(client: OkHttpClient) {
} }
} }
) { padding -> ) { padding ->
Column(modifier = Modifier.padding(padding)) { Column(modifier = Modifier.padding(padding).padding(start = 4.dp, end = 4.dp, bottom = 16.dp)) {
when (selectedTab) { when (selectedTab) {
0 -> DashboardScreen( 0 -> DashboardScreen(
gps = gps, gps = gps,
@@ -1,18 +1,20 @@
package com.yarisobd.app.ui.components 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.Column
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBarsPadding 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.MaterialTheme
import androidx.compose.material3.Surface import androidx.compose.material3.Surface
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier 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.graphics.Color
import androidx.compose.ui.text.font.FontStyle import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight 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.YarisDark
import com.yarisobd.app.ui.theme.YarisRed 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 @Composable
fun YarisHeader() { fun YarisHeader() {
Surface(color = YarisDark) { Surface(color = YarisDark) {
Row(Modifier.fillMaxWidth().statusBarsPadding()) {
Column( Column(
Modifier Modifier
.padding(horizontal = 16.dp, vertical = 12.dp) .fillMaxWidth()
.drawBehind { .statusBarsPadding()
drawRect( .padding(horizontal = 16.dp, vertical = 10.dp)
color = YarisRed,
topLeft = Offset(0f, size.height - 4.dp.toPx()),
size = Size(size.width, 3.dp.toPx()),
)
}
) { ) {
Text( Text(
"YARIS-OBD", "YARIS-OBD",
style = MaterialTheme.typography.titleLarge.copy( style = MaterialTheme.typography.titleLarge.copy(
fontWeight = FontWeight.Normal, fontWeight = FontWeight.Normal,
fontStyle = FontStyle.Italic, fontStyle = FontStyle.Italic,
letterSpacing = 1.2.sp, letterSpacing = 1.5.sp,
), ),
color = Color.White, color = Color.White,
maxLines = 1, maxLines = 1,
) )
} Spacer(Modifier.height(2.dp))
Box(
Modifier
.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),
)
} }
} }
} }
@@ -54,18 +54,28 @@ private val LightColorScheme = lightColorScheme(
private val DarkColorScheme = darkColorScheme( private val DarkColorScheme = darkColorScheme(
primary = YarisBlue, primary = YarisBlue,
onPrimary = Color.White, onPrimary = Color.White,
background = YarisDark, primaryContainer = Color(0xFF2B3B6E),
onPrimaryContainer = Color(0xFFD6E0FB),
secondary = YarisBlue,
onSecondary = Color.White,
background = Color(0xFF121316),
onBackground = Color(0xFFE0E0E0), onBackground = Color(0xFFE0E0E0),
surface = YarisDark, surface = YarisDark,
onSurface = Color(0xFFE0E0E0), onSurface = Color(0xFFE0E0E0),
surfaceContainerHigh = Color(0xFF2A2A2C), surfaceContainerHigh = Color(0xFF2A2A2C),
surfaceContainer = YarisDark,
surfaceVariant = Color(0xFF2A2A2C),
onSurfaceVariant = Color(0xFFAAAAAA), onSurfaceVariant = Color(0xFFAAAAAA),
error = YarisRed, error = YarisRed,
onError = Color.White,
errorContainer = Color(0xFF5A1016),
onErrorContainer = Color(0xFFFBE3E5),
outline = Color(0xFF3A3A3C),
) )
@Composable @Composable
fun YarisOBDTheme( 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 dynamicColor: Boolean = false, // Off by default — use our brand colors
content: @Composable () -> Unit content: @Composable () -> Unit
) { ) {
@@ -82,7 +92,6 @@ fun YarisOBDTheme(
if (!view.isInEditMode) { if (!view.isInEditMode) {
SideEffect { SideEffect {
val window = (view.context as Activity).window val window = (view.context as Activity).window
window.statusBarColor = YarisDark.toArgb()
// Dark top bar sits under the status bar, so status icons stay light. // Dark top bar sits under the status bar, so status icons stay light.
WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = false WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = false
} }