Changed message bubble colors + added new badges

qortal-ui-core/font/switch-theme.css

@@ -10,6 +10,7 @@ html {
   --chat-group: #080808;
   --chat-bubble: #9f9f9f0a;
   --chat-bubble-bg: #e6e6e6;
+  --chat-bubble-myBg: #d1ddf2;
   --chat-bubble-msg-color: #080808;
   --reaction-bubble-outline: #6b6969;
   --chat-menu-bg: #ffffff;
@@ -65,6 +66,7 @@ html[theme="dark"] {
   --chat-group: #ffffff;
   --chat-bubble: #9694941a;
   --chat-bubble-bg: #2d3749;
+  --chat-bubble-myBg: #40444d;
   --chat-bubble-msg-color: #ffffff;
   --reaction-bubble-outline: #ffffff;
   --chat-menu-bg: #32394c;

qortal-ui-core/src/styles/switch-theme.css

@@ -10,6 +10,7 @@ html {
   --chat-group: #080808;
   --chat-bubble: #9f9f9f0a;
   --chat-bubble-bg: #e6e6e6;
+  --chat-bubble-myBg: #d1ddf2;
   --chat-bubble-msg-color: #080808;
   --reaction-bubble-outline: #6b6969;
   --chat-menu-bg: #ffffff;
@@ -62,6 +63,7 @@ html[theme="dark"] {
   --chat-group: #ffffff;
   --chat-bubble: #9694941a;
   --chat-bubble-bg: #2d3749;
+  --chat-bubble-myBg: #40444d;
   --chat-bubble-msg-color: #ffffff;
   --reaction-bubble-outline: #ffffff;
   --chat-menu-bg: #32394c;

qortal-ui-plugins/plugins/core/components/ChatScroller-css.js

@@ -77,8 +77,8 @@ export const chatStyles = css`
 	}
 
 	.message-data-my-name {
-		color: var(--mdc-theme-primary);
+		color: #05be0e;
-		text-shadow: 0 0 3px var(--mdc-theme-primary);
+		font-weight: bold;
 	}
 
 	.message-data-time {
@@ -137,6 +137,11 @@ export const chatStyles = css`
     min-width: 150px;
 	}
 
+	
+	.message-myBg {
+		background-color: var(--chat-bubble-myBg) !important;
+	}
+
 	.message-triangle {
 		position: relative;
 	}
@@ -153,6 +158,22 @@ export const chatStyles = css`
 		border-color: transparent transparent var(--chat-bubble-bg) transparent;
 	}
 
+	.message-myTriangle {
+		position: relative;
+	}
+
+	.message-myTriangle:after {
+		content: "";
+		position: absolute;
+		bottom: 0px;
+    left: -9px;
+		width: 0;
+		height: 0;
+		border-style: solid;
+		border-width: 0px 0px 7px 9px;
+		border-color: transparent transparent var(--chat-bubble-myBg) transparent;
+	}
+
 	.message-reactions {
 		background-color: transparent;
 		width: calc(100% - 54px);
@@ -185,9 +206,7 @@ export const chatStyles = css`
 	}
 
 	.original-message-sender {
-		margin: 0 0 5px 0;
 		color: var(--mdc-theme-primary);
-		cursor: pointer;
 	}
 
 	.replied-message {
@@ -198,6 +217,7 @@ export const chatStyles = css`
 		max-width: 300px;
 		max-height: 40px;
 	}
+	
 	.replied-message p {
 		margin: 0px;
 		padding: 0px;
@@ -412,7 +432,7 @@ export const chatStyles = css`
 
 	.message-data-level  {
 		height: 21px;
-		width: 21px;
+		width: auto;
 		overflow: hidden;
 	}
 

qortal-ui-plugins/plugins/core/components/ChatScroller.js

@@ -502,9 +502,12 @@ class MessageTemplate extends LitElement {
                             `}
                             <div 
                             class="${`message-subcontainer2 
-                            ${((this.isFirstMessage === true && this.isSingleMessageInGroup === false) || 
+                            ${this.myAddress === this.messageObj.sender && "message-myBg" }
-                            (this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true)) && 
+                            ${(((this.isFirstMessage === true && this.isSingleMessageInGroup === false) || 
-                            'message-triangle'}`}" 
+                            (this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true)) && this.myAddress !== this.messageObj.sender)  
+                            ? 'message-triangle' 
+                            : (((this.isFirstMessage === true && this.isSingleMessageInGroup === false) || 
+                            (this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true)) && this.myAddress === this.messageObj.sender) ? "message-myTriangle" : null}`}" 
                             style="${(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false) ? 'margin-bottom: 0;' : null}
                             ${(this.isFirstMessage === false && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false)
                             ? 'border-radius: 8px 25px 25px 8px;'
@@ -552,14 +555,13 @@ class MessageTemplate extends LitElement {
                                         this.goToRepliedMessage(repliedToData)
                                     }}>
                                         <p  
-                                        
+                                            style=${"cursor: pointer; margin: 0 0 5px 0;"} 
-                                      
+                                            class=${this.myAddress !== repliedToData.sender
-                                            class="original-message-sender">
+                                            ? "original-message-sender" 
+                                            : "message-data-my-name"}>
                                              ${repliedToData.senderName ?? cropAddress(repliedToData.sender)}
                                         </p>
                                         <p class="replied-message">
-
-                                        
                                             ${version.toString() === '1' ? html`
                                             ${repliedToData.decodedMessage.messageText}
                                             ` : ''}
@@ -570,8 +572,8 @@ class MessageTemplate extends LitElement {
                                                 Highlight
                                                 // other extensions …
                                             ]))}
-                                        ` : ''}
+                                            ` 
-                                        
+                                        : ''}
                                         </p>
                                     </div>
                                     `}
@@ -604,7 +606,6 @@ class MessageTemplate extends LitElement {
                                             <vaadin-icon
                                             @click=${() => {
                                                 this.openDeleteImage = true;
-                                                this.chatE
                                                 }}
                                             class="image-delete-icon"  icon="vaadin:close" slot="icon"></vaadin-icon>
                                             ` : ''}

qortal-ui-plugins/plugins/core/components/LevelFounder.js

@@ -63,6 +63,7 @@ class LevelFounder extends LitElement {
             .message-data {
                 display: flex;
                 justify-content: center;
+                align-items: center;
                 gap: 5px;
             }