Added Icons to Chatbar & Styled Chat Bubbles

img/qchat-send-message-icon.svg

@@ -0,0 +1,4 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <path d="M4.02 42l41.98-18-41.98-18-.02 14 30 4-30 4z" fill="#03a9f4"/>
+    <path d="M0 0h48v48h-48z" fill="none"/>
+</svg>

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

@@ -7,6 +7,7 @@ html {
   --border: #d0d6de;
   --border2: #dde2e8;
   --copybutton: #707584;
+  --chat-bubble: #efefef73;
   --sectxt: #576374;
   --vdicon: #707b8a;
   --tradehead: #6a6c75;
@@ -43,6 +44,7 @@ html[theme="dark"] {
   --border: #0b305e;
   --border2: #0b305e;
   --copybutton: #d0d6de;
+  --chat-bubble: #9694941a;
   --sectxt: #bbc3cd;
   --vdicon: #d0d6de;
   --tradehead: #008fd5;

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

@@ -7,6 +7,7 @@ html {
   --border: #d0d6de;
   --border2: #dde2e8;
   --copybutton: #707584;
+  --chat-bubble: #efefef73;
   --sectxt: #576374;
   --vdicon: #707b8a;
   --tradehead: #6a6c75;
@@ -42,6 +43,7 @@ html[theme="dark"] {
   --border: #0b305e;
   --border2: #0b305e;
   --copybutton: #d0d6de;
+  --chat-bubble: #9694941a;
   --sectxt: #bbc3cd;
   --vdicon: #d0d6de;
   --tradehead: #008fd5;

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

@@ -8,7 +8,6 @@ registerTranslateConfig({
 })
 import ShortUniqueId from 'short-unique-id';
 import Compressor from 'compressorjs';
-
 import { escape, unescape } from 'html-escaper';
 import { inputKeyCodes } from '../../utils/keyCodes.js'
 import './ChatScroller.js'
@@ -17,7 +16,6 @@ import './NameMenu.js'
 import './TimeAgo.js'
 import { EmojiPicker } from 'emoji-picker-js';
 import '@polymer/paper-spinner/paper-spinner-lite.js'
-
 import '@material/mwc-button'
 import '@material/mwc-dialog'
 import '@material/mwc-icon'
@@ -134,6 +132,7 @@ class ChatPage extends LitElement {
             margin: 0;
             color: var(--mdc-theme-primary);
             font-weight: bold;
+            user-select: none;
         }
 
         .original-message {
@@ -169,9 +168,9 @@ class ChatPage extends LitElement {
             width: auto;
             display: flex;
             justify-content: center;
-            align-items: flex-end;
+            align-items: center;
             height: auto;
-            padding: 5px;
+            padding: 5px 5px 5px 7px;
             overflow-y: hidden;
         }
 
@@ -194,6 +193,27 @@ class ChatPage extends LitElement {
         img {
             border-radius: 25%;
         }
+
+        .paperclip-icon {
+            color: #494949;
+            width: 25px;
+        }
+
+        .paperclip-icon:hover {
+            cursor: pointer;
+        }
+
+        .send-icon {
+            width: 30px;
+            margin-left: 5px;
+            transition: all 0.1s ease-in-out;
+        }
+
+        .send-icon:hover {
+            cursor: pointer;
+            filter: brightness(1.1);
+        }
+
         `
     }
 
@@ -238,7 +258,6 @@ class ChatPage extends LitElement {
                     ${this.isLoadingMessages ? html`<h1>${translate("chatpage.cchange22")}</h1>` : this.renderChatScroller(this._initialMessages)}
                     <mwc-dialog id="showDialogPublicKey" ?open=${this.imageFile}>
 					<div class="dialog-header">
-						
 					</div>
 					<div class="dialog-container">
 						hello
@@ -252,13 +271,10 @@ class ChatPage extends LitElement {
 						dialogAction="cancel"
 						class="red"
 						@click=${()=> {
-							
 							this._sendMessage({
                                 type: 'image',
                                 imageFile:  this.imageFile,
                                 caption: 'This is a caption'
-         
-           
                             })
 						}}
 					>
@@ -277,7 +293,7 @@ class ChatPage extends LitElement {
 					</mwc-button>
 				</mwc-dialog>
                 </div>
-                <div class="chat-text-area" style="${`height: ${this.iframeHeight}px`}">
+                <div class="chat-text-area" style="${`height: ${this.iframeHeight}px; ${(this.repliedToMessageObj || this.editedMessageObj) && "min-height: 120px"}`}">
                         <div class="typing-area">
                             ${this.repliedToMessageObj && html`
                                 <div class="repliedTo-container">
@@ -314,22 +330,41 @@ class ChatPage extends LitElement {
                                 </div>
                             `}
                         <div class="chatbar">
+                            <vaadin-icon
+                            class="paperclip-icon"
+                            icon="vaadin:paperclip"
+                            slot="icon"
+                            @click=${() => this.closeEditMessageContainer()}
+                            ></vaadin-icon>
                             <textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea>
                             <iframe style="${`height: ${this.iframeHeight}px`}" class="chat-editor" id="_chatEditorDOM" tabindex="-1" height=${this.iframeHeight}>
                             </iframe>
                             <button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
-                                ${this.isLoading === false ? html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg">` : html`<paper-spinner-lite active></paper-spinner-lite>`}
+                                ${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`}
                             </button>
                             ${this.editedMessageObj ? (
                                 html`
+                                <div>
+                                ${this.isLoading === false ? html`
                                     <vaadin-icon
                                         class="checkmark-icon"
                                         icon="vaadin:check"
                                         slot="icon"
                                         @click=${() => this._sendMessage()}
-                                        ></vaadin-icon>
+                                        >
+                                    </vaadin-icon>
+                                    ` :
+                                    html`
+                                    <paper-spinner-lite active></paper-spinner-lite>
+                                    `}
+                                </div>
+                                    `
+                            ) : 
+                                html`
+                                    <div style="display:flex;">
+                                        ${this.isLoading === false ? html`<img src="/img/qchat-send-message-icon.svg" alt="send-icon" class="send-icon" />` : html`<paper-spinner-lite active></paper-spinner-lite>`}
+                                    </div>
                                     `
-                                        ) : html`<div></div>`
                             }
                         </div>
                     </div>
@@ -1671,8 +1706,6 @@ class ChatPage extends LitElement {
 
                             editorConfig.insertImage(file)
                         
-    
-                        
                             navigator.clipboard.readText().then(clipboardText => {
     
                                 let escapedText = editorConfig.escape(clipboardText);

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

@@ -39,7 +39,7 @@ export const chatStyles = css`
 	ul {
 		list-style: none;
 		margin: 0;
-		padding: 20px;
+		padding: 20px 17px;
 	}
 
 	.last-message-ref {
@@ -77,6 +77,7 @@ export const chatStyles = css`
 
 	.message-data-name {
 		color: var(--black);
+		user-select: none;
 	}
 
 	.message-data-time {
@@ -84,6 +85,7 @@ export const chatStyles = css`
 		font-size: 13px;
 		padding-left: 6px;
 		padding-bottom: 4px;
+		user-select: none;
 	}
 
 	.message-data-level {
@@ -91,6 +93,7 @@ export const chatStyles = css`
 		font-size: 13px;
 		padding-left: 8px;
 		padding-bottom: 4px;
+		user-select: none;
 	}
 
 	.chat-bubble-container {
@@ -100,16 +103,27 @@ export const chatStyles = css`
 
 	.message-container {
 		position: relative;
+		margin-bottom: 20px;
+	}
+
+	.message-subcontainer {
+		position: relative;
     display: flex;
+		background-color: #f3f3f3;
     flex-grow: 0;
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
-    background-color: whitesmoke;
     border-radius: 5px;
     padding: 10px 15px;
     gap: 10px;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
+	}
+
+	.message-reactions {
+		background-color: transparent;
+		width: 100%;
+		margin-left: 54px;
 	}
 
 	.original-message {
@@ -120,10 +134,10 @@ export const chatStyles = css`
     line-height: 19px;
     overflow-wrap: break-word;
     user-select: text;
-    font-size: 16px;
+    font-size: 13px;
     width: 90%;
     border-radius: 5px;
-    background-color: rgba(209, 209, 209, 0.79);
+    background-color: rgba(232, 232, 232, 0.79);
     padding: 8px 5px 8px 25px;
 		white-space: nowrap;
 	}
@@ -169,12 +183,19 @@ export const chatStyles = css`
 		float: left;
 	}
 
-	.message-parent:hover .chat-hover {
+	.message-parent {
-		display: block;
+		padding: 3px;
+		background: rgba(245, 245, 245, 0);
+		transition: all 0.1s ease-in-out;
 	}
 
-	.message-parent:hover .message-container {
+	.message-parent:hover {
-		filter:brightness(0.90);
+		background: var(--chat-bubble);
+    border-radius: 8px;
+	}
+
+	.message-parent:hover .chat-hover {
+		display: block;
 	}
 
 	.chat-hover {
@@ -192,16 +213,6 @@ export const chatStyles = css`
 		object-fit: contain;
 	}
 	
-	.my-message {
-		background: #d1d1d1;
-		border: 2px solid #eeeeee;
-	}
-
-	.other-message {
-		background: #f1f1f1;
-		border: 2px solid #dedede;
-	}
-	
 	.align-left {
 		text-align: left;
 	}
@@ -322,12 +333,18 @@ export const chatStyles = css`
 	}
 
 	.reactions-bg {
-		background-color: #3C4048;
+		background-color: #d5d5d5;
 		border-radius: 10px;
-		padding: 4px;
+		padding: 5px;
-		color: white;
+		color: black;
 		margin-right: 10px;
-		cursor: pointer
+		transition: all 0.1s ease-in-out;
+		border: 0.5px solid transparent;
+		cursor: pointer;
+	}
+	
+	.reactions-bg:hover {
+		border: 0.5px solid #6b6969;
 	}
 
 	.image-container {

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

@@ -273,11 +273,10 @@ class MessageTemplate extends LitElement {
                 <div class="message-data-avatar">
                 ${avatarImg}
                 </div>
-                <div class="message-container ${this.messageObj.sender === this.myAddress ? "my-message" : "other-message"}">
+                <div class="message-container">
+                    <div class="message-subcontainer">
                         ${repliedToData && html`
-                    <div 
+                            <div class="original-message">
-                        class="original-message" 
-                        style=${this.messageObj.sender === this.myAddress && "background-color: rgb(179 179 179 / 79%)"}>
                                 <p class="original-message-sender">${repliedToData.sendName ?? repliedToData.sender}</p>
                                 <p class="replied-message">${repliedToData.decodedMessage.messageText}</p>
                             </div>
@@ -298,13 +297,19 @@ class MessageTemplate extends LitElement {
                             <div id="messageContent" class="message">
                                 ${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(message)))}
                             </div>
-                <div>
+                    </div>
+                    <div class="message-reactions">
                             ${reactions.map((reaction)=> {
-                       return html`<span @click=${() => this.sendMessage({
+                                return html`
+                                <span 
+                                @click=${() => this.sendMessage({
                                     type: 'reaction',
                                     editedMessageObj: this.messageObj,
                                     reaction:  reaction.type,
-                       })} class="reactions-bg" >${reaction.type} ${reaction.qty}</span>`
+                                    })} 
+                                class="reactions-bg">
+                                ${reaction.type} ${reaction.qty}
+                                </span>`
                             })}
                     </div>
                     <chat-menu 
@@ -326,6 +331,7 @@ class MessageTemplate extends LitElement {
                     > 
                     </chat-menu>
                 </div>
+            </div>
             </li>
             <chat-modals 
                 .openDialogPrivateMessage=${this.openDialogPrivateMessage}