diff --git a/app/src/main/java/de/bollwerk/app/ui/settings/SettingsScreen.kt b/app/src/main/java/de/bollwerk/app/ui/settings/SettingsScreen.kt index a957dd4..8629bda 100644 --- a/app/src/main/java/de/bollwerk/app/ui/settings/SettingsScreen.kt +++ b/app/src/main/java/de/bollwerk/app/ui/settings/SettingsScreen.kt @@ -7,6 +7,7 @@ import androidx.activity.result.contract.ActivityResultContracts import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut +import androidx.compose.foundation.border import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row @@ -17,6 +18,7 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.foundation.verticalScroll @@ -26,6 +28,7 @@ import androidx.compose.material3.AlertDialog import androidx.compose.material3.Button import androidx.compose.material3.CircularProgressIndicator import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.CardDefaults import androidx.compose.material3.ElevatedCard import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Icon @@ -300,7 +303,18 @@ internal fun SettingsScreen( Spacer(modifier = Modifier.height(12.dp)) if (uiState.isLoggedIn) { - ElevatedCard(modifier = Modifier.fillMaxWidth()) { + ElevatedCard( + modifier = Modifier + .fillMaxWidth() + .border( + width = 1.dp, + color = MaterialTheme.colorScheme.outline.copy(alpha = 0.6f), + shape = RoundedCornerShape(12.dp) + ), + colors = CardDefaults.elevatedCardColors( + containerColor = MaterialTheme.colorScheme.surfaceContainerHigh + ) + ) { Column(modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp)) { Text( text = "Angemeldet als: ${uiState.loggedInUsername}", @@ -542,7 +556,18 @@ internal fun SettingsScreen( private fun SyncStatusCard( uiState: SettingsUiState ) { - ElevatedCard(modifier = Modifier.fillMaxWidth()) { + ElevatedCard( + modifier = Modifier + .fillMaxWidth() + .border( + width = 1.dp, + color = MaterialTheme.colorScheme.outline.copy(alpha = 0.6f), + shape = RoundedCornerShape(12.dp) + ), + colors = CardDefaults.elevatedCardColors( + containerColor = MaterialTheme.colorScheme.surfaceContainerHigh + ) + ) { Column(modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp)) { Row( modifier = Modifier.fillMaxWidth(), diff --git a/app/src/main/java/de/bollwerk/app/ui/theme/Color.kt b/app/src/main/java/de/bollwerk/app/ui/theme/Color.kt index 7b00940..63455a8 100644 --- a/app/src/main/java/de/bollwerk/app/ui/theme/Color.kt +++ b/app/src/main/java/de/bollwerk/app/ui/theme/Color.kt @@ -3,65 +3,66 @@ package de.bollwerk.app.ui.theme import androidx.compose.ui.graphics.Color /** - * Material 3 color tokens aligned with Admin-UI palette. + * Material 3 color tokens – "Mars trifft Beton & Stahl" * - * Admin design reference colors: - * - Primary accent: #C1440E (burnt orange) - * - Text: #E8D5B0 (warm beige) - * - Background: #16140F (dark chocolate brown) - * - Borders: #4A3F2F (dark olive-brown) - * - Labels: #A89070 (muted tan) + * Palette-Konzept: + * - Primär-Akzent: #C1440E (Mars-Rost, Eisenoxid) + * - Text: #EAD0B0 (Marstaub auf Beton) + * - Hintergrund: #101218 (Betonkeller, dunkel-kühl) + * - Surfaces: blaugrau gestaffelt (Stahlkonsistenz) + * - Ränder: #4E5E70 (sichtbares Stahl-Blaugrau) + * - Sekundärtext: #94A8B8 (Stahlgrau, deutlich lesbarer als Warmtan) */ -// Primary – burnt orange accent (Admin: button.primary, border-bottom, h2::before) +// Primary – Mars-Rost (Eisenoxid, burnt orange) val md_theme_dark_primary = Color(0xFFE8875A) val md_theme_dark_onPrimary = Color(0xFF3A1100) val md_theme_dark_primaryContainer = Color(0xFF5C2000) val md_theme_dark_onPrimaryContainer = Color(0xFFFFBB9A) -// Secondary – warm tan (Admin: labels, secondary text) -val md_theme_dark_secondary = Color(0xFFD4BFA8) -val md_theme_dark_onSecondary = Color(0xFF382C1E) -val md_theme_dark_secondaryContainer = Color(0xFF4A3F2F) -val md_theme_dark_onSecondaryContainer = Color(0xFFE8D5B0) +// Secondary – Stahl-Grau (industrielle Beschriftungen) +val md_theme_dark_secondary = Color(0xFFAAB8C4) +val md_theme_dark_onSecondary = Color(0xFF1C2430) +val md_theme_dark_secondaryContainer = Color(0xFF2A3240) +val md_theme_dark_onSecondaryContainer = Color(0xFFD8E2E8) -// Tertiary – gold/amber (Admin: inv-badge color) +// Tertiary – Gold/Amber (Mars-Canyon im Abendlicht) val md_theme_dark_tertiary = Color(0xFFD4B060) val md_theme_dark_onTertiary = Color(0xFF3A2E10) val md_theme_dark_tertiaryContainer = Color(0xFF4A3A14) val md_theme_dark_onTertiaryContainer = Color(0xFFF0D888) -// Error – kept slightly warm for readability +// Error – leicht warm für Lesbarkeit val md_theme_dark_error = Color(0xFFFFB4AB) val md_theme_dark_onError = Color(0xFF690005) val md_theme_dark_errorContainer = Color(0xFF8B1A1A) val md_theme_dark_onErrorContainer = Color(0xFFFFDAD6) -// Background & Surface (Admin: body #16140F, header #1A1815) -val md_theme_dark_background = Color(0xFF16140F) -val md_theme_dark_onBackground = Color(0xFFE8D5B0) -val md_theme_dark_surface = Color(0xFF1A1815) -val md_theme_dark_onSurface = Color(0xFFE8D5B0) +// Background & Surface (Betonbunker, Marsstaub auf Stahl) +val md_theme_dark_background = Color(0xFF101218) +val md_theme_dark_onBackground = Color(0xFFEAD0B0) +val md_theme_dark_surface = Color(0xFF14181E) +val md_theme_dark_onSurface = Color(0xFFEAD0B0) -// Surface Variant & Outline (Admin: borders #4A3F2F, footer #6B5B3E) -val md_theme_dark_surfaceVariant = Color(0xFF3A3428) -val md_theme_dark_onSurfaceVariant = Color(0xFFA89070) -val md_theme_dark_outline = Color(0xFF6B5B3E) -val md_theme_dark_outlineVariant = Color(0xFF4A3F2F) +// Surface Variant & Outline (Stahlbewehrung, sichtbare Ränder) +val md_theme_dark_surfaceVariant = Color(0xFF252E3C) +val md_theme_dark_onSurfaceVariant = Color(0xFF94A8B8) // Stahlgrau statt Warmtan → viel mehr Kontrast +val md_theme_dark_outline = Color(0xFF4E5E70) // Sichtbare Stahlränder +val md_theme_dark_outlineVariant = Color(0xFF263040) // Subtile Strukturkanten // Inverse -val md_theme_dark_inverseSurface = Color(0xFFE8D5B0) -val md_theme_dark_inverseOnSurface = Color(0xFF2E2B22) +val md_theme_dark_inverseSurface = Color(0xFFE8D0B0) +val md_theme_dark_inverseOnSurface = Color(0xFF262E38) val md_theme_dark_inversePrimary = Color(0xFFC1440E) // Scrim val md_theme_dark_scrim = Color(0xFF000000) -// Surface containers (Admin tonal progression: #16140F → #1A1815 → #1E1C17 → #242119 → #2E2B22 → #3A3428) -val md_theme_dark_surfaceDim = Color(0xFF14120D) -val md_theme_dark_surfaceBright = Color(0xFF3A3428) -val md_theme_dark_surfaceContainerLowest = Color(0xFF110F0A) -val md_theme_dark_surfaceContainerLow = Color(0xFF1E1C17) -val md_theme_dark_surfaceContainer = Color(0xFF242119) -val md_theme_dark_surfaceContainerHigh = Color(0xFF2E2B22) -val md_theme_dark_surfaceContainerHighest = Color(0xFF3A3428) +// Surface containers (Beton auf verschiedenen Elevationen – deutlich gestaffelt) +val md_theme_dark_surfaceDim = Color(0xFF0C0E14) +val md_theme_dark_surfaceBright = Color(0xFF283240) +val md_theme_dark_surfaceContainerLowest = Color(0xFF09090F) +val md_theme_dark_surfaceContainerLow = Color(0xFF1C2230) // ElevatedCard: klar sichtbar auf bg +val md_theme_dark_surfaceContainer = Color(0xFF1E2838) +val md_theme_dark_surfaceContainerHigh = Color(0xFF253040) +val md_theme_dark_surfaceContainerHighest = Color(0xFF2C3848)