style: set danger context menu items to use danger-text-color CSS variable

components/Message.vue

@@ -146,18 +146,18 @@ console.log("media links:", mediaLinks);
 //}
 
 const menuItems: ContextMenuItem[] = [
-	{ name: "Reply", icon: "lucide:reply", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
+	{ name: "Reply", icon: "lucide:reply", type: "normal", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
 ]
 
 console.log("me:", props.me);
 if (props.author?.uuid == props.me.uuid) {
 	// Inserts "edit" option at index 1 (below the "reply" option)
-	menuItems.splice(1, 0, { name: "Edit (WIP)", icon: "lucide:square-pen", callback: () => { /* if (messageElement.value) editMessage(messageElement.value, props) */ } });
+	menuItems.splice(1, 0, { name: "Edit (WIP)", icon: "lucide:square-pen", type: "normal", callback: () => { /* if (messageElement.value) editMessage(messageElement.value, props) */ } });
 }
 
 if (props.author?.uuid == props.me.uuid /* || check message delete permission*/) {
 	// Inserts "edit" option at index 2 (below the "edit" option)
-	menuItems.splice(2, 0, { name: "Delete (WIP)", icon: "lucide:trash", callback: () => {} });
+	menuItems.splice(2, 0, { name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} });
 }
 
 function getDayDifference(date1: Date, date2: Date) {

components/UserInterface/ContextMenu.vue

@@ -1,6 +1,8 @@
 <template>
 	<div id="context-menu">
-		<button v-for="item of props.menuItems" class="context-menu-item" @click="runCallback(item)">
+		<button v-for="item of props.menuItems" class="context-menu-item"
+				:class="'context-menu-item-' + item.type"
+				@click="runCallback(item)">
 			{{ item.name }} <Icon v-if="item.icon" :name="item.icon" />
 		</button>
 	</div>
@@ -59,4 +61,8 @@ function runCallback(item: ContextMenuItem) {
 	background-color: rgb(50, 50, 50);
 }
 
+.context-menu-item-danger {
+	color: var(--danger-text-color);
+}
+
 </style>

public/themes/ash.css

@@ -2,6 +2,7 @@
 	--text-color: #f0e5e0;
 	--secondary-text-color: #e8e0db;
 	--reply-text-color: #969696;
+	--danger-text-color: #ff0000;
 
 	--chat-background-color: #2f2e2d;
     --chat-highlighted-background-color: #3f3b38;

public/themes/dark.css

@@ -2,6 +2,7 @@
 	--text-color: #f7eee8;
 	--secondary-text-color: #f0e8e4;
 	--reply-text-color: #969696;
+	--danger-text-color: #ff0000;
 
 	--chat-background-color: #1f1e1d;
     --chat-highlighted-background-color: #2f2b28;

public/themes/light.css

@@ -2,6 +2,7 @@
 	--text-color: #170f08;
 	--secondary-text-color: #2f2b28;
 	--reply-text-color: #969696;
+	--danger-text-color: #ff0000;
 
     --chat-background-color: #f0ebe8;
     --chat-highlighted-background-color: #e8e4e0;

public/themes/rainbow-capitalism.css

@@ -2,6 +2,7 @@
 	--text-color: #161518;
 	--secondary-text-color: #2b2930;
 	--reply-text-color: #969696;
+	--danger-text-color: #ff0000;
 
     --chat-background-color: #80808000;
     --chat-highlighted-background-color: #ffffff20;

types/interfaces.ts

@@ -102,6 +102,7 @@ export interface ModalProps {
 export interface ContextMenuItem {
 	name: string,
 	icon?: string,
+	type: "normal" | "danger"
 	callback: (...args: any[]) => any;
 }