From f55f772659a505ceb8751d8728c22c810afed018 Mon Sep 17 00:00:00 2001
From: Reto Brunner <reto@slightlybroken.com>
Date: Sun, 27 Nov 2022 15:59:46 +0100
Subject: [PATCH] style: Put user colors into the smallest possible scope

The only thing that cares about user colors is the user component.
Putting a class value on the chat component seems to be the wrong
place.

This also allows us to remove various css selectors so that we
don't need to be that specific.
After all whatever has that class needs to be colored, we don't
care where it is.
---
 client/components/Chat.vue                  |  1 -
 client/components/Username.vue              |  6 +-
 client/components/Windows/SearchResults.vue |  1 -
 client/css/style.css                        | 66 ++++++++++-----------
 4 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/client/components/Chat.vue b/client/components/Chat.vue
index f1dfc51b..fe016d87 100644
--- a/client/components/Chat.vue
+++ b/client/components/Chat.vue
@@ -4,7 +4,6 @@
 			id="chat"
 			:class="{
 				'hide-motd': store.state.settings.motd,
-				'colored-nicks': store.state.settings.coloredNicks,
 				'time-seconds': store.state.settings.showSeconds,
 				'time-12h': store.state.settings.use12hClock,
 			}"
diff --git a/client/components/Username.vue b/client/components/Username.vue
index 371e89a5..0f0fe937 100644
--- a/client/components/Username.vue
+++ b/client/components/Username.vue
@@ -1,6 +1,6 @@
 <template>
 	<span
-		:class="['user', nickColor, {active: active}]"
+		:class="['user', {[nickColor]: store.state.settings.coloredNicks}, {active: active}]"
 		:data-name="user.nick"
 		role="button"
 		v-on="onHover ? {mouseenter: hover} : {}"
@@ -16,6 +16,7 @@ import {UserInMessage} from "../../server/models/msg";
 import eventbus from "../js/eventbus";
 import colorClass from "../js/helpers/colorClass";
 import type {ClientChan, ClientNetwork, ClientUser} from "../js/types";
+import {useStore} from "../js/store";
 
 type UsernameUser = Partial<UserInMessage> & {
 	mode?: string;
@@ -69,11 +70,14 @@ export default defineComponent({
 			});
 		};
 
+		const store = useStore();
+
 		return {
 			mode,
 			nickColor,
 			hover,
 			openContextMenu,
+			store,
 		};
 	},
 });
diff --git a/client/components/Windows/SearchResults.vue b/client/components/Windows/SearchResults.vue
index ef9190ad..c29d51e9 100644
--- a/client/components/Windows/SearchResults.vue
+++ b/client/components/Windows/SearchResults.vue
@@ -3,7 +3,6 @@
 		<div
 			id="chat"
 			:class="{
-				'colored-nicks': store.state.settings.coloredNicks,
 				'time-seconds': store.state.settings.showSeconds,
 				'time-12h': store.state.settings.use12hClock,
 			}"
diff --git a/client/css/style.css b/client/css/style.css
index d28499d2..e9b321d3 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1438,42 +1438,42 @@ textarea.input {
 
 /* Nicknames */
 
-#chat .user {
+.user {
 	color: #50a656;
 }
 
-#chat.colored-nicks .user.color-1 { color: #107ead; }
-#chat.colored-nicks .user.color-2 { color: #a86500; }
-#chat.colored-nicks .user.color-3 { color: #008a3c; }
-#chat.colored-nicks .user.color-4 { color: #e00096; }
-#chat.colored-nicks .user.color-5 { color: #f0000c; }
-#chat.colored-nicks .user.color-6 { color: #000094; }
-#chat.colored-nicks .user.color-7 { color: #006441; }
-#chat.colored-nicks .user.color-8 { color: #00566e; }
-#chat.colored-nicks .user.color-9 { color: #e6006b; }
-#chat.colored-nicks .user.color-10 { color: #0d8766; }
-#chat.colored-nicks .user.color-11 { color: #006b3b; }
-#chat.colored-nicks .user.color-12 { color: #00857e; }
-#chat.colored-nicks .user.color-13 { color: #00465b; }
-#chat.colored-nicks .user.color-14 { color: #eb005a; }
-#chat.colored-nicks .user.color-15 { color: #e62600; }
-#chat.colored-nicks .user.color-16 { color: #0f8546; }
-#chat.colored-nicks .user.color-17 { color: #e60067; }
-#chat.colored-nicks .user.color-18 { color: #eb002b; }
-#chat.colored-nicks .user.color-19 { color: #eb003f; }
-#chat.colored-nicks .user.color-20 { color: #007a56; }
-#chat.colored-nicks .user.color-21 { color: #095092; }
-#chat.colored-nicks .user.color-22 { color: #000bde; }
-#chat.colored-nicks .user.color-23 { color: #008577; }
-#chat.colored-nicks .user.color-24 { color: #00367d; }
-#chat.colored-nicks .user.color-25 { color: #007e9e; }
-#chat.colored-nicks .user.color-26 { color: #006119; }
-#chat.colored-nicks .user.color-27 { color: #007ea8; }
-#chat.colored-nicks .user.color-28 { color: #3c8500; }
-#chat.colored-nicks .user.color-29 { color: #e6007e; }
-#chat.colored-nicks .user.color-30 { color: #c75300; }
-#chat.colored-nicks .user.color-31 { color: #eb0400; }
-#chat.colored-nicks .user.color-32 { color: #e60082; }
+.user.color-1 { color: #107ead; }
+.user.color-2 { color: #a86500; }
+.user.color-3 { color: #008a3c; }
+.user.color-4 { color: #e00096; }
+.user.color-5 { color: #f0000c; }
+.user.color-6 { color: #000094; }
+.user.color-7 { color: #006441; }
+.user.color-8 { color: #00566e; }
+.user.color-9 { color: #e6006b; }
+.user.color-10 { color: #0d8766; }
+.user.color-11 { color: #006b3b; }
+.user.color-12 { color: #00857e; }
+.user.color-13 { color: #00465b; }
+.user.color-14 { color: #eb005a; }
+.user.color-15 { color: #e62600; }
+.user.color-16 { color: #0f8546; }
+.user.color-17 { color: #e60067; }
+.user.color-18 { color: #eb002b; }
+.user.color-19 { color: #eb003f; }
+.user.color-20 { color: #007a56; }
+.user.color-21 { color: #095092; }
+.user.color-22 { color: #000bde; }
+.user.color-23 { color: #008577; }
+.user.color-24 { color: #00367d; }
+.user.color-25 { color: #007e9e; }
+.user.color-26 { color: #006119; }
+.user.color-27 { color: #007ea8; }
+.user.color-28 { color: #3c8500; }
+.user.color-29 { color: #e6007e; }
+.user.color-30 { color: #c75300; }
+.user.color-31 { color: #eb0400; }
+.user.color-32 { color: #e60082; }
 
 #chat .self .content {
 	color: var(--body-color-muted);