From 11fd220734ae697e8157d25fbf4cdfc250fe2df7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 19 Feb 2024 15:11:59 +0200
Subject: chat styles + related improvements

---
 src/components/chat_message/chat_message.scss | 38 +++------------------------
 1 file changed, 4 insertions(+), 34 deletions(-)

(limited to 'src/components/chat_message/chat_message.scss')

diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss
index fd5b7aa4..18eb610b 100644
--- a/src/components/chat_message/chat_message.scss
+++ b/src/components/chat_message/chat_message.scss
@@ -27,12 +27,6 @@
 
   .menu-icon {
     cursor: pointer;
-
-    &:hover,
-    .extra-button-popover.open & {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
   }
 
   .popover {
@@ -61,10 +55,12 @@
   }
 
   .status {
-    border-radius: $fallback--chatMessageRadius;
-    border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
+    background-color: var(--background);
+    color: var(--text);
+    border-radius: var(--roundness);
     display: flex;
     padding: 0.75em;
+    border: 1px solid var(--border);
   }
 
   .created-at {
@@ -117,16 +113,6 @@
     align-content: end;
     justify-content: flex-end;
 
-    a {
-      color: var(--chatMessageOutgoingLink, $fallback--link);
-    }
-
-    .status {
-      color: var(--chatMessageOutgoingText, $fallback--text);
-      background-color: var(--chatMessageOutgoingBg, $fallback--lightBg);
-      border: 1px solid var(--chatMessageOutgoingBorder, --lightBg);
-    }
-
     .chat-message-inner {
       align-items: flex-end;
     }
@@ -137,22 +123,6 @@
   }
 
   .incoming {
-    a {
-      color: var(--chatMessageIncomingLink, $fallback--link);
-    }
-
-    .status {
-      color: var(--chatMessageIncomingText, $fallback--text);
-      background-color: var(--chatMessageIncomingBg, $fallback--bg);
-      border: 1px solid var(--chatMessageIncomingBorder, --border);
-    }
-
-    .created-at {
-      a {
-        color: var(--chatMessageIncomingText, $fallback--text);
-      }
-    }
-
     .chat-message-menu {
       left: 0.4rem;
     }
-- 
cgit v1.2.3-70-g09d2


From 7575079da96a70eb00272e6273b90a10b02da0f0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Feb 2024 22:28:15 +0200
Subject: fix badge-notificaiton color in favicon and notifications

---
 src/components/badge.style.js                 |  6 ++++++
 src/components/chat_message/chat_message.scss |  8 ++------
 src/components/root.style.js                  | 16 +++++++++++++++-
 3 files changed, 23 insertions(+), 7 deletions(-)

(limited to 'src/components/chat_message/chat_message.scss')

diff --git a/src/components/badge.style.js b/src/components/badge.style.js
index 37833cdb..0697cac6 100644
--- a/src/components/badge.style.js
+++ b/src/components/badge.style.js
@@ -9,6 +9,12 @@ export default {
     notification: '.-notification'
   },
   defaultRules: [
+    {
+      component: 'Root',
+      directives: {
+        '--badgeNotification': 'color | --cRed'
+      }
+    },
     {
       directives: {
         background: '--cGreen'
diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss
index 18eb610b..f7254ea3 100644
--- a/src/components/chat_message/chat_message.scss
+++ b/src/components/chat_message/chat_message.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .chat-message-wrapper {
   &.hovered-message-chain {
     .animated.Avatar {
@@ -93,8 +91,7 @@
   .error {
     .status-content.media-body,
     .created-at {
-      color: $fallback--cRed;
-      color: var(--badgeNotification, $fallback--cRed);
+      color: var(--badgeNotification);
     }
   }
 
@@ -146,6 +143,5 @@
   margin: 1.4em 0;
   font-size: 0.9em;
   user-select: none;
-  color: $fallback--text;
-  color: var(--faintedText, $fallback--text);
+  color: var(--textFaint);
 }
diff --git a/src/components/root.style.js b/src/components/root.style.js
index 53777a4b..40c53172 100644
--- a/src/components/root.style.js
+++ b/src/components/root.style.js
@@ -15,9 +15,23 @@ export default {
   defaultRules: [
     {
       directives: {
+        // These are here just to establish order,
+        // themes should override those
+        '--bg': 'color | #121a24',
+        '--fg': 'color | #182230',
+        '--text': 'color | #b9b9ba',
+        '--link': 'color | #d8a070',
+        '--cRed': 'color | #FF0000',
+        '--cBlue': 'color | #0095ff',
+        '--cGreen': 'color | #0fa00f',
+        '--cOrange': 'color | #ffa500',
+
+        // Fonts
         '--font': 'generic | sans-serif',
         '--monoFont': 'generic | monospace',
-        '--bg': 'color | #000000', // just to establish order
+
+        // Fallback no-background-image color
+        // (also useful in some other places like scrollbars)
         '--wallpaper': 'color | --bg, -2'
       }
     }
-- 
cgit v1.2.3-70-g09d2