From 1e7bb2fde2cf9ed425ff653a40f23f34a93cdcb6 Mon Sep 17 00:00:00 2001 From: emir yorulmaz Date: Mon, 20 Apr 2026 14:35:49 +0300 Subject: [PATCH] Improve Slate and Message Bubble contrast (#581) * Improve Slate and Message Bubble contrast * Update CHANGELOG.md --- CHANGELOG.md | 1 + lib/theme/semantic_colors.dart | 18 ++++++++++++++++++ lib/widgets/wn_message_bubble.dart | 2 +- lib/widgets/wn_slate.dart | 6 +++--- 4 files changed, 23 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8ee688c..b3e47d4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -29,6 +29,7 @@ and this project adheres to Calendar Versioning (CalVer). - Add block/unblock hook [PR #573](https://github.com/marmot-protocol/whitenoise/pull/573) ### Changed +- Improve Slate and Message Bubble contrast [PR #581](https://github.com/marmot-protocol/whitenoise/pull/581) - UI Polish: Profile Keys & Sign out Screens [PR #552](https://github.com/marmot-protocol/whitenoise/pull/552) - UI Polish: Donate Screen [PR #553](https://github.com/marmot-protocol/whitenoise/pull/553) - UI Polish: Share & Edit Profile Screens [PR #544](https://github.com/marmot-protocol/whitenoise/pull/544) diff --git a/lib/theme/semantic_colors.dart b/lib/theme/semantic_colors.dart index ba55860..35f2a50 100644 --- a/lib/theme/semantic_colors.dart +++ b/lib/theme/semantic_colors.dart @@ -504,6 +504,8 @@ class SemanticColors extends ThemeExtension { final Color backgroundPrimary; final Color backgroundSecondary; final Color backgroundTertiary; + final Color backgroundSlate; + final Color backgroundMessageIncoming; final Color backgroundContentPrimary; final Color backgroundContentSecondary; final Color backgroundContentTertiary; @@ -556,6 +558,8 @@ class SemanticColors extends ThemeExtension { required this.backgroundPrimary, required this.backgroundSecondary, required this.backgroundTertiary, + required this.backgroundSlate, + required this.backgroundMessageIncoming, required this.backgroundContentPrimary, required this.backgroundContentSecondary, required this.backgroundContentTertiary, @@ -609,6 +613,8 @@ class SemanticColors extends ThemeExtension { backgroundPrimary: _BaseColors.white, backgroundSecondary: _NeutralColors.neutral50, backgroundTertiary: _NeutralColors.neutral100, + backgroundSlate: _NeutralColors.neutral50, + backgroundMessageIncoming: _NeutralColors.neutral100, backgroundContentPrimary: _NeutralColors.neutral950, backgroundContentSecondary: _NeutralColors.neutral500, backgroundContentTertiary: _NeutralColors.neutral400, @@ -662,6 +668,8 @@ class SemanticColors extends ThemeExtension { backgroundPrimary: _BaseColors.black, backgroundSecondary: _NeutralColors.neutral950, backgroundTertiary: _NeutralColors.neutral900, + backgroundSlate: _NeutralColors.neutral900, + backgroundMessageIncoming: _NeutralColors.neutral800, backgroundContentPrimary: _BaseColors.white, backgroundContentSecondary: _NeutralColors.neutral400, backgroundContentTertiary: _NeutralColors.neutral500, @@ -716,6 +724,8 @@ class SemanticColors extends ThemeExtension { Color? backgroundPrimary, Color? backgroundSecondary, Color? backgroundTertiary, + Color? backgroundSlate, + Color? backgroundMessageIncoming, Color? backgroundContentPrimary, Color? backgroundContentSecondary, Color? backgroundContentTertiary, @@ -768,6 +778,8 @@ class SemanticColors extends ThemeExtension { backgroundPrimary: backgroundPrimary ?? this.backgroundPrimary, backgroundSecondary: backgroundSecondary ?? this.backgroundSecondary, backgroundTertiary: backgroundTertiary ?? this.backgroundTertiary, + backgroundSlate: backgroundSlate ?? this.backgroundSlate, + backgroundMessageIncoming: backgroundMessageIncoming ?? this.backgroundMessageIncoming, backgroundContentPrimary: backgroundContentPrimary ?? this.backgroundContentPrimary, backgroundContentSecondary: backgroundContentSecondary ?? this.backgroundContentSecondary, backgroundContentTertiary: backgroundContentTertiary ?? this.backgroundContentTertiary, @@ -827,6 +839,12 @@ class SemanticColors extends ThemeExtension { backgroundPrimary: Color.lerp(backgroundPrimary, other.backgroundPrimary, t)!, backgroundSecondary: Color.lerp(backgroundSecondary, other.backgroundSecondary, t)!, backgroundTertiary: Color.lerp(backgroundTertiary, other.backgroundTertiary, t)!, + backgroundSlate: Color.lerp(backgroundSlate, other.backgroundSlate, t)!, + backgroundMessageIncoming: Color.lerp( + backgroundMessageIncoming, + other.backgroundMessageIncoming, + t, + )!, backgroundContentPrimary: Color.lerp( backgroundContentPrimary, other.backgroundContentPrimary, diff --git a/lib/widgets/wn_message_bubble.dart b/lib/widgets/wn_message_bubble.dart index 11c60f0..69df340 100644 --- a/lib/widgets/wn_message_bubble.dart +++ b/lib/widgets/wn_message_bubble.dart @@ -760,7 +760,7 @@ class WnMessageBubble extends StatelessWidget { ? Colors.transparent : _isOutgoing ? colors.fillPrimary - : colors.backgroundTertiary; + : colors.backgroundMessageIncoming; final textColor = isDeleted || !_isOutgoing ? colors.backgroundContentPrimary : colors.fillContentPrimary; diff --git a/lib/widgets/wn_slate.dart b/lib/widgets/wn_slate.dart index bb53bac..322b457 100644 --- a/lib/widgets/wn_slate.dart +++ b/lib/widgets/wn_slate.dart @@ -33,7 +33,7 @@ class WnSlate extends HookWidget { BoxDecoration _decoration(SemanticColors colors) { return BoxDecoration( - color: colors.backgroundSecondary, + color: colors.backgroundSlate, borderRadius: BorderRadius.circular(16.r), border: Border.all(color: colors.borderTertiary), boxShadow: [ @@ -85,9 +85,9 @@ class WnSlate extends HookWidget { children: [ child!, if (showTopScrollEffect && canScrollUp.value) - WnScrollEdgeEffect.slateTop(color: colors.backgroundSecondary), + WnScrollEdgeEffect.slateTop(color: colors.backgroundSlate), if (showBottomScrollEffect && canScrollDown.value) - WnScrollEdgeEffect.slateBottom(color: colors.backgroundSecondary), + WnScrollEdgeEffect.slateBottom(color: colors.backgroundSlate), ], ), ),