From 3c66d3e9bdf69e7f6c22999977912cc091cd6a58 Mon Sep 17 00:00:00 2001 From: Paul Hitt Date: Wed, 26 Aug 2026 06:37:32 -0400 Subject: [PATCH] Take the palette from the site instead of inventing one MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit flamenetmessenger.com declares its colours as CSS custom properties, so they were there to be read rather than guessed: --bg: #0a0e1a --panel: #121a2e --border: #1f2b45 --ink: #e8edf7 --muted: #9aa7c2 --flame: #ff5a1f --blue: #3b6fff --accent: #2dd4a7 ⚠️ The site is dark and the apps are light, so only the accents transfer literally. --ink and --muted are light-on-dark values that would be invisible on a light ground; the neutrals here are the same navy family resolved for light instead. Dark mode DOES use the site's real --bg and --panel. The apps had been warm — ember on parchment. They are now the site's flame on a cool navy-tinted ground, with the site's blue and teal available for informational and success states rather than a second invented accent. ⚠️ Two flames, on purpose. White on #ff5a1f is about 3.1:1 — acceptable for a bold button label under AA Large and not acceptable for small text. Small text and links take a darkened #c4400f, which clears 5:1 on white. An accent used uniformly is how it quietly becomes unreadable. `Palette.Parchment` is now `Palette.Mist`: it is a cool near-white and the old name described a colour that no longer exists here. Also fixes the contacts card reserving a slab of empty white. BuddyList's LazyColumn carried weight(1f), which always expands to whatever height it is offered — so bounding the CARD just moved the problem, and one contact still reserved 340dp. The list now caps itself with heightIn and the card sizes to its content, scrolling only once the list is genuinely long. Co-Authored-By: Claude Opus 5 --- .../io/flamenet/messenger/app/ChatScreens.kt | 7 ++- .../io/flamenet/messenger/app/MainActivity.kt | 2 +- .../kotlin/io/flamenet/messenger/app/Theme.kt | 55 ++++++++++++------- 3 files changed, 42 insertions(+), 22 deletions(-) diff --git a/app/src/main/kotlin/io/flamenet/messenger/app/ChatScreens.kt b/app/src/main/kotlin/io/flamenet/messenger/app/ChatScreens.kt index a241f43..02d0984 100644 --- a/app/src/main/kotlin/io/flamenet/messenger/app/ChatScreens.kt +++ b/app/src/main/kotlin/io/flamenet/messenger/app/ChatScreens.kt @@ -56,6 +56,7 @@ import androidx.compose.ui.unit.dp import java.text.SimpleDateFormat import java.util.Date import java.util.Locale +import androidx.compose.foundation.layout.heightIn /** * The people you talk to. @@ -155,7 +156,11 @@ fun ColumnScope.BuddyList(model: MessengerViewModel, phase: MessengerViewModel.P var expanded by remember { mutableStateOf(null) } - LazyColumn(modifier = Modifier.fillMaxWidth().weight(1f).testTag("buddies")) { + // ⚠️ heightIn, not weight(1f). Inside its card `weight` always expands to + // the full height it is offered, so a single contact still reserved a + // fixed slab of empty white. A max lets the card size to its content + // and start scrolling only once the list is actually long. + LazyColumn(modifier = Modifier.fillMaxWidth().heightIn(max = 320.dp).testTag("buddies")) { items(phase.buddies, key = { it.userId }) { buddy -> Row( modifier = Modifier diff --git a/app/src/main/kotlin/io/flamenet/messenger/app/MainActivity.kt b/app/src/main/kotlin/io/flamenet/messenger/app/MainActivity.kt index 07deed0..ed95827 100644 --- a/app/src/main/kotlin/io/flamenet/messenger/app/MainActivity.kt +++ b/app/src/main/kotlin/io/flamenet/messenger/app/MainActivity.kt @@ -353,7 +353,7 @@ private fun ColumnScope.SignedIn( shape = RoundedCornerShape(Radius.medium), color = MaterialTheme.colorScheme.surface, shadowElevation = 2.dp, - modifier = Modifier.fillMaxWidth().heightIn(min = 96.dp, max = 340.dp), + modifier = Modifier.fillMaxWidth(), ) { Column(Modifier.padding(Space.lg)) { BuddyList(model, phase) } } diff --git a/app/src/main/kotlin/io/flamenet/messenger/app/Theme.kt b/app/src/main/kotlin/io/flamenet/messenger/app/Theme.kt index 36eaa06..2233379 100644 --- a/app/src/main/kotlin/io/flamenet/messenger/app/Theme.kt +++ b/app/src/main/kotlin/io/flamenet/messenger/app/Theme.kt @@ -21,39 +21,54 @@ import androidx.compose.ui.unit.sp /** * The Flamenet design system. * + * 🔴 **Taken from flamenetmessenger.com, not invented.** The site declares + * `--flame: #ff5a1f`, `--blue: #3b6fff`, `--accent: #2dd4a7` over a dark navy + * ground (`--bg: #0a0e1a`, `--panel: #121a2e`). The accents transfer as-is; + * the site's `--ink`/`--muted` are light-on-dark and are NOT pasted in here, + * because the apps are light. Dark mode does use the site's real grounds. + * * 🔴 **One palette, two apps.** iOS carries the same values under the same * names in `Sources/Theme/Theme.swift`. This file's comment used to claim the * two were already matched — while iOS was indigo and this was ember, so the * claim was simply false and nobody noticed because nothing checks it. * **Change a value here and change it there in the same commit.** * - * The look: light parchment ground, white cards with a soft shadow and a + * The look: a light cool-navy ground, white cards with a soft shadow and a * generous corner radius, one confident accent, quiet neutrals, and space * between things. Screen structure and every `testTag` are deliberately * untouched — this is a skin over working screens. */ object Palette { - // Brand - val Ember = Color(0xFFE2571F) - val EmberDeep = Color(0xFFB33F12) - val EmberSoft = Color(0x1AE2571F) + // Brand — the site's --flame. + // ⚠️ White on Ember is about 3.1:1: fine for a bold button label (AA + // Large), NOT fine for small text. Small text and links use EmberDeep. + val Ember = Color(0xFFFF5A1F) + val EmberDeep = Color(0xFFC4400F) + val EmberSoft = Color(0x1AFF5A1F) - // Neutrals - val Ink = Color(0xFF16130F) - val Parchment = Color(0xFFFBF7F2) - val SurfaceAlt = Color(0xFFF4EFE9) - val IncomingBubble = Color(0xFFF1ECE5) - val AvatarFill = Color(0xFFF1E4DA) - val SecondaryText = Color(0xFF6B625A) - val Divider = Color(0x1416130F) + // The site's other two accents, used sparingly. + val Blue = Color(0xFF3B6FFF) // --blue, informational only + val Teal = Color(0xFF2DD4A7) // --accent, success and presence + + // Neutrals: the site's navy family resolved for a LIGHT ground. + // ⚠️ --ink (#e8edf7) and --muted (#9aa7c2) are light-on-dark values and + // would be invisible here, so they are not pasted in literally. + val Ink = Color(0xFF0F1626) + val Mist = Color(0xFFF6F8FC) // the light ground (was 'Parchment' when the palette was warm) + val SurfaceAlt = Color(0xFFEDF1F8) + val IncomingBubble = Color(0xFFEDF1F8) + val AvatarFill = Color(0xFFE4EAF6) + val SecondaryText = Color(0xFF5A6884) + val Divider = Color(0x1A1F2B45) // Semantic - val Success = Color(0xFF2E7D5B) + val Success = Color(0xFF1F9E7A) val Warning = Color(0xFFB8860B) val Danger = Color(0xFFC0392B) - // Dark-mode grounds - val InkSurface = Color(0xFF1F1B16) + // Dark-mode grounds — these ARE the site's, since the site is dark. + val InkSurface = Color(0xFF121A2E) // --panel + val NightGround = Color(0xFF0A0E1A) // --bg } /** Corner radii, matching `Theme.Radius` on iOS. */ @@ -125,11 +140,11 @@ fun MessengerTheme(content: @Composable () -> Unit) { primary = Palette.Ember, onPrimary = Color.White, secondary = Palette.EmberDeep, - background = Palette.Ink, + background = Palette.NightGround, surface = Palette.InkSurface, surfaceVariant = Palette.InkSurface, - onBackground = Palette.Parchment, - onSurface = Palette.Parchment, + onBackground = Palette.Mist, + onSurface = Palette.Mist, onSurfaceVariant = Palette.SecondaryText, error = Palette.Danger, outline = Palette.Divider, @@ -139,7 +154,7 @@ fun MessengerTheme(content: @Composable () -> Unit) { primary = Palette.EmberDeep, onPrimary = Color.White, secondary = Palette.Ember, - background = Palette.Parchment, + background = Palette.Mist, surface = Color.White, surfaceVariant = Palette.SurfaceAlt, onBackground = Palette.Ink,