feat: implement mentions coloring

prose-im · Mar 9, 2024 · 5b7dea1 · 5b7dea1
1 parent b650878
commit 5b7dea1
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/res/fixtures/messaging.json b/res/fixtures/messaging.json
@@ -261,7 +261,7 @@
       "type": "text",
       "date": "2022-07-02T10:13:10.000Z",
       "from": "[email protected]",
-      "content": "I'm sharing a backtrace I just saw on the XMPP server:\n\n```\n&> Feb 13 20:43:50 modulemanager   error   Error initializing module 'storage_sql' on 'proxy.ssk.pm': /usr/share/lua/5.1/pr\nosody/util/startup.lua:203: module 'DBI' not found:No LuaRocks module found for DBI\n        no field package.preload['DBI']\n        no file './prosody/DBI.lua'\n        no file './DBI.lua'\n        no file '/usr/local/share/lua/5.1/prosody/DBI.lua'\n        no file '/usr/local/share/lua/5.1/DBI.lua'\n```\n\nCan someone have a look at it?",
+      "content": "I'm sharing a backtrace I just saw on the XMPP server:\n\n```\n&> Feb 13 20:43:50 modulemanager   error   Error initializing module 'storage_sql' on 'proxy.ssk.pm': /usr/share/lua/5.1/pr\nosody/util/startup.lua:203: module 'DBI' not found:No LuaRocks module found for DBI\n        no field package.preload['DBI']\n        no file './prosody/DBI.lua'\n        no file './DBI.lua'\n        no file '/usr/local/share/lua/5.1/prosody/DBI.lua'\n        no file '/usr/local/share/lua/5.1/DBI.lua'\n```\n\nCan someone have a look at it? @[Valerian Saliou](xmpp:[email protected])",
 
       "metas": {
         "encrypted": true,

diff --git a/src/messaging/components/message/message.css b/src/messaging/components/message/message.css
@@ -251,6 +251,19 @@
   text-decoration: underline;
 }
 
+.message-text-inner a[href^="xmpp:"] {
+  color: var(--color-blue-dark);
+  background-color: var(--color-blue-light);
+  text-decoration: none;
+  padding: 2px 4px 1px;
+  border-radius: 3px;
+}
+
+.message-text-inner a[href^="xmpp:"]:hover {
+  color: var(--color-white-default);
+  background-color: var(--color-blue-dark);
+}
+
 .message-text-inner ul,
 .message-text-inner ol {
   margin: 0.5em 0;