From 45537347f343c754a619fc4dcee242de1d8c5727 Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Thu, 1 Sep 2022 20:10:27 +0300
Subject: [PATCH] highlight messages in which the user is mentioned

---
 frontend/public/global.css             | 3 ++-
 frontend/src/components/Message.svelte | 6 +++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/public/global.css b/frontend/public/global.css
index 029e9f6..e73837f 100644
--- a/frontend/public/global.css
+++ b/frontend/public/global.css
@@ -34,10 +34,11 @@
 	--purple-1: hsl(280, 78%, 50%);
 	--blue-1: hsl(200, 78%, 50%);
 	--green-1: hsl(140, 78%, 50%);
-	--yellow-1: hsl(50, 78%, 65%);
+	--yellow-1: hsl(50, 78%, 50%);
 	--red-1: hsl(2, 78%, 65%);
 
 	--purple-2: hsl(280, 78%, 45%);
+	--purple-alpha-2: hsla(280, 78%, 50%, 20%);
 	--blue-2: hsl(200, 78%, 45%);
 	--green-2: hsl(140, 78%, 40%);
 	--yellow-2: hsl(50, 78%, 60%);
diff --git a/frontend/src/components/Message.svelte b/frontend/src/components/Message.svelte
index b4542b9..d605a7c 100644
--- a/frontend/src/components/Message.svelte
+++ b/frontend/src/components/Message.svelte
@@ -27,6 +27,10 @@
         padding: var(--space-xxs) var(--space-normplus) var(--space-xxs) var(--space-normplus);
     }
 
+    .message.pinged {
+        background-color: var(--purple-alpha-2);
+    }
+
     .message .edit-message {
         visibility: hidden;
     }
@@ -60,7 +64,7 @@
     }
 </style>
 
-<div class="message">
+<div class="message" class:pinged={ userInfoStore.value && message.content.includes(`@${userInfoStore.value.username}`) }>
     <span class="author">{ message.author_username }</span>
     <span class="message-content" class:pending={ message._isPending }>{ message.content }</span>
     <button class="icon-button icon-button-auto edit-message" on:click="{ reply }" aria-label="Reply to Message">