From 0c6c88f7f5764210e145252ce254d4d94e7abd2c Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Wed, 31 Aug 2022 16:12:54 +0300
Subject: [PATCH] improve handling of themes

---
 frontend/public/global.css             | 10 +++++++++-
 frontend/src/components/Main.svelte    | 13 +------------
 frontend/src/components/Message.svelte |  2 +-
 3 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/frontend/public/global.css b/frontend/public/global.css
index 9773301..e5abb75 100644
--- a/frontend/public/global.css
+++ b/frontend/public/global.css
@@ -29,6 +29,7 @@
 	--foreground-color-2: rgb(218, 219, 220);
 	--foreground-color-3: rgb(153, 154, 155);
 	--foreground-color-4: rgb(123, 124, 125);
+	--colored-element-text-color: var(--foreground-color-1);
 
 	--purple-1: hsl(280, 78%, 50%);
 	--blue-1: hsl(200, 78%, 50%);
@@ -211,12 +212,12 @@ body {
 /* button */
 
 .button {
+	color: var(--foreground-color-1);
 	background-color: var(--background-color-2);
 	text-align: center;
 	border: none;
 	padding: var(--space-sm);
 	border-radius: var(--radius-md);
-	color: currentColor;
 	font: inherit;
 	max-height: 3em;
 }
@@ -226,6 +227,7 @@ body {
 }
 
 .button-accent {
+	color: var(--colored-element-text-color);
 	background-color: var(--purple-2);
 }
 
@@ -238,6 +240,7 @@ body {
 }
 
 .button-red {
+	color: var(--colored-element-text-color);
 	background-color: var(--red-2);
 }
 
@@ -368,9 +371,14 @@ body {
 }
 
 .sidebar-button.selected {
+	color: var(--colored-element-text-color);
 	background-color: var(--purple-2);
 }
 
+.sidebar-button.selected .icon-button {
+	color: var(--colored-element-text-color);
+}
+
 /*! the tweaks below are heavily based on modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
 
 *,
diff --git a/frontend/src/components/Main.svelte b/frontend/src/components/Main.svelte
index 857ee89..808d566 100644
--- a/frontend/src/components/Main.svelte
+++ b/frontend/src/components/Main.svelte
@@ -21,19 +21,8 @@
                 --background-color-1: rgb(253, 254, 255);
                 --background-color-2: rgb(218, 219, 220);
                 --background-color-3: rgb(173, 174, 175);
-            }
 
-            .button {
-                color: var(--foreground-color-1);
-            }
-
-            .button-red, .button-accent {
-                color: var(--background-color-1);
-            }
-
-            .sidebar-button.selected,
-            .sidebar-button.selected .icon-button {
-                color: var(--background-color-1);
+                --colored-element-text-color: var(--background-color-0);
             }
         </style>
     {/if}
diff --git a/frontend/src/components/Message.svelte b/frontend/src/components/Message.svelte
index 9997360..4e54a20 100644
--- a/frontend/src/components/Message.svelte
+++ b/frontend/src/components/Message.svelte
@@ -9,7 +9,7 @@
     .message {
         display: flex;
         align-items: flex-start;
-        overflow-x: none;
+        overflow-x: hidden;
         word-break: break-all;
         padding: var(--space-xxs) var(--space-normplus) var(--space-xxs) var(--space-normplus);
     }