Improve Slate and Message Bubble contrast (#581)

* Improve Slate and Message Bubble contrast

* Update CHANGELOG.md

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)

lib/theme/semantic_colors.dart

@@ -504,6 +504,8 @@ class SemanticColors extends ThemeExtension<SemanticColors> {
   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<SemanticColors> {
     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<SemanticColors> {
     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<SemanticColors> {
     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<SemanticColors> {
     Color? backgroundPrimary,
     Color? backgroundSecondary,
     Color? backgroundTertiary,
+    Color? backgroundSlate,
+    Color? backgroundMessageIncoming,
     Color? backgroundContentPrimary,
     Color? backgroundContentSecondary,
     Color? backgroundContentTertiary,
@@ -768,6 +778,8 @@ class SemanticColors extends ThemeExtension<SemanticColors> {
       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<SemanticColors> {
       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,

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;

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),
               ],
             ),
           ),