From fd8aa70ee2f9a5e2a659b55ece0f3d821ce4ae3c Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Wed, 9 Aug 2023 20:44:15 +0300
Subject: [PATCH] highlight messages with mentions

---
 frontend/src/components/Message.svelte | 18 +++++++++++++++++-
 frontend/src/styles/global.css         |  2 ++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Message.svelte b/frontend/src/components/Message.svelte
index 0539717..07a6b48 100644
--- a/frontend/src/components/Message.svelte
+++ b/frontend/src/components/Message.svelte
@@ -53,10 +53,26 @@
         height: 40px;
     }
 
-    .message:hover, .message.pinged {
+    .message:hover {
         background-color: var(--background-color-3);
     }
 
+    .message.pinged {
+        background-color: var(--purple-2-highlight);
+    }
+
+    .message.pinged::before {
+        content: "";
+        display: block;
+        position: absolute;
+        width: 3px;
+        border-radius: 2px;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        background-color: var(--purple-2);
+    }
+
     .message-content {
         color: var(--foreground-color-2);
         white-space: pre-wrap;
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index ed2d38c..2bca9e2 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -66,6 +66,8 @@
 	--yellow-2: hsl(50, 78%, 60%);
 	--red-2: hsl(2, 78%, 60%);
 
+	--purple-2-highlight: hsla(266, 62%, 58%, 0.1);
+
 
 	--space-unit: 1em;
 	--space-xxs: calc(0.25 * var(--space-unit));