fix: Settings header height matches other tabs + 48dp red underline

- Settings Column padding removed from around header
- Cards use horizontal padding individually
- YarisHeader underline: full-width → 48dp
This commit is contained in:
Mathieu Moran
2026-08-12 04:43:38 -04:00
parent e9309f4cdf
commit ffa84073ea
2 changed files with 23 additions and 17 deletions
@@ -47,14 +47,14 @@ fun SettingsScreen(client: OkHttpClient) {
var serverResult by remember { mutableStateOf<String?>(null) }
Column(
modifier = Modifier.fillMaxSize().verticalScroll(rememberScrollState()).padding(16.dp)
modifier = Modifier.fillMaxSize().verticalScroll(rememberScrollState())
) {
com.yarisobd.app.ui.components.YarisHeader()
Spacer(Modifier.height(8.dp))
Spacer(Modifier.height(16.dp))
// Server credentials
Card(
modifier = Modifier.fillMaxWidth(),
modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceContainerHigh)
) {
Column(modifier = Modifier.padding(16.dp)) {
@@ -102,7 +102,7 @@ fun SettingsScreen(client: OkHttpClient) {
// Network test
Card(
modifier = Modifier.fillMaxWidth(),
modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceContainerHigh)
) {
Column(modifier = Modifier.padding(16.dp)) {
@@ -1,34 +1,40 @@
package com.yarisobd.app.ui.components
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.width
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.graphics.Color
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
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 */
/** Shared branding header matching web UI style */
@Composable
fun YarisHeader() {
Text(
"YARIS",
style = MaterialTheme.typography.headlineLarge.copy(
fontWeight = FontWeight.Black,
letterSpacing = 4.sp,
"YARIS-OBD",
style = MaterialTheme.typography.headlineMedium.copy(
fontWeight = FontWeight.Normal,
fontStyle = FontStyle.Italic,
letterSpacing = 1.5.sp,
),
color = MaterialTheme.colorScheme.onBackground,
modifier = Modifier.padding(start = 16.dp, top = 8.dp)
color = Color.White,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
modifier = Modifier.padding(start = 16.dp, end = 16.dp, top = 12.dp)
)
Spacer(Modifier.height(2.dp))
// Red accent underline
androidx.compose.foundation.Canvas(
Spacer(Modifier.height(1.dp))
// Red accent underline — 48dp wide
Canvas(
Modifier
.padding(start = 16.dp)
.width(48.dp)
@@ -36,7 +42,7 @@ fun YarisHeader() {
) {
drawRect(color = YarisRed)
}
Spacer(Modifier.height(8.dp))
Spacer(Modifier.height(6.dp))
Text(
"phase 28 — android companion",
style = MaterialTheme.typography.bodySmall,