Started styling of the groups

qortal-ui-core/font/material-icons.css

@@ -2,19 +2,35 @@
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
-  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
+  src: url(MaterialIcons-Regular.eot);
+  /* For IE6-8 */
   src: local('Material Icons'),
-       local('MaterialIcons-Regular'),
+    local('MaterialIcons-Regular'),
-       url(MaterialIcons-Regular.woff2) format('woff2'),
+    url(MaterialIcons-Regular.woff2) format('woff2'),
-       url(MaterialIcons-Regular.woff) format('woff'),
+    url(MaterialIcons-Regular.woff) format('woff'),
-       url(MaterialIcons-Regular.ttf) format('truetype');
+    url(MaterialIcons-Regular.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: local('Montserrat'),
+    local('Montserrat'),
+    url(Montserrat.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Raleway';
+  src: local('Raleway'),
+    local('Raleway'),
+    url(Raleway.ttf) format('truetype');
 }
 
 .material-icons {
   font-family: 'Material Icons';
   font-weight: normal;
   font-style: normal;
-  font-size: 24px;  /* Preferred icon size */
+  font-size: 24px;
+  /* Preferred icon size */
   display: inline-block;
   line-height: 1;
   text-transform: none;

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

@@ -48,6 +48,8 @@ html {
   --chatHeadText: #080808;
   --chatHeadTextActive: #080808;
   --lightChatHeadHover: #1e1f201a;
+  --group-header: #929292;
+  --group-drop-shadow: rgb(17 17 26 / 10%) 0px 1px 0px;
 }
 
 html[theme="dark"] {
@@ -100,4 +102,6 @@ html[theme="dark"] {
   --chatHeadText: #ffffff;
   --chatHeadTextActive: #ffffff;
   --lightChatHeadHover: #e0e1e31a;
+  --group-header: #c8c8c8;
+  --group-drop-shadow: rgb(191 191 191 / 32%) 0px 1px 0px
 }

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

@@ -46,6 +46,8 @@ html {
   --chatHeadBgActive: #ebebeb;
   --chatHeadText: #080808;
   --chatHeadTextActive: #080808;
+  --group-header: #929292;
+  --group-drop-shadow: rgb(17 17 26 / 10%) 0px 1px 0px;
 }
 
 html[theme="dark"] {
@@ -96,4 +98,6 @@ html[theme="dark"] {
   --chatHeadBgActive: #0f1a2e;
   --chatHeadText: #ffffff;
   --chatHeadTextActive: #ffffff;
+  --group-header: #c8c8c8;
+  --group-drop-shadow: rgb(191 191 191 / 32%) 0px 1px 0px
 }

qortal-ui-plugins/package.json

@@ -51,12 +51,12 @@
 		"@rollup/plugin-commonjs": "23.0.0",
 		"@rollup/plugin-node-resolve": "15.0.0",
 		"@rollup/plugin-replace": "5.0.0",
+		"@vaadin/avatar": "23.2.5",
 		"@vaadin/button": "23.2.5",
 		"@vaadin/grid": "23.2.5",
+		"@vaadin/horizontal-layout": "23.2.5",
 		"@vaadin/icons": "23.2.5",
 		"@vaadin/tabs": "23.2.5",
-		"@vaadin/avatar": "23.2.5",
-		"@vaadin/horizontal-layout": "23.2.5",
 		"epml": "0.3.3",
 		"file-saver": "2.0.5",
 		"html-escaper": "3.0.3",

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

@@ -43,9 +43,11 @@ class ChatGroupSettings extends LitElement {
             width: 18px;
             transition: .2s all;
         }
+
         .top-bar-icon:hover {
             color: var(--black)
         }
+        
         .modal-button {
             font-family: Roboto, sans-serif;
             font-size: 16px;

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

@@ -532,12 +532,14 @@ class ChatPage extends LitElement {
             cursor: pointer;
             background-color: #03a8f475;
         }
+
         .chat-container {
             display: grid;
             grid-template-rows: minmax(40px, auto) minmax(6%, 92vh) minmax(40px, auto);
             max-height: 100%;
            flex: 3;
         }
+
         .chat-right-panel {
             flex: 0;
             border-left: 3px solid rgb(221, 221, 221);
@@ -545,30 +547,50 @@ class ChatPage extends LitElement {
             overflow-y: auto;
             background: transparent;
         }
+
         .movedin {
-      flex: 1 !important;
+            flex: 1 !important;
-      background: transparent;
+            background: transparent;
         }
       
-        .chat-right-panel-label {
-            color: white;
-            padding: 5px;
-            font-size: 16px;
-            user-select: none;
-        }
         .main-container {
             display: flex;
             height: 100%;
         }
-        .top-bar-icon {
+
-            cursor: pointer;
+        .group-nav-container {
-            height: 18px;
+            display: flex;
-            width: 18px;
+            height: 40px; 
-            transition: .2s all;
+            padding: 25px 5px 25px 20px; 
+            margin: 0px;
+            background-color: var(--chat-bubble-bg); 
+            box-sizing: border-box; 
+            align-items: center;
+            justify-content: space-between;
+            box-shadow: var(--group-drop-shadow);
         }
+
+        .top-bar-icon {
+            border-radius: 50%;
+            color: var(--chat-bubble-msg-color);
+            transition: 0.3s all ease-in-out;
+            padding: 5px;
+            background-color: transparent;
+        }
+
         .top-bar-icon:hover {
+            background-color: #e6e6e69b;
+            cursor: pointer;
             color: var(--black)
         }
+
+        .group-name {
+            font-family: Raleway, sans-serif;
+            font-size: 16px;
+            color: var(--black);
+            margin:0px;
+            padding:0px;
+        }
         `
     }
 
@@ -634,16 +656,16 @@ class ChatPage extends LitElement {
             <div class="main-container">
             <div class="chat-container">
                 ${(!this.isReceipient && +this._chatId !== 0) ? html`
-                <div style="display:flex; height:40px; padding:3px; margin:0px;background-color: var(--chat-bubble-bg); box-sizing: border-box; align-items: center;justify-content: space-between">
+                <div class="group-nav-container">
                 <div @click=${this._toggle} style="height: 100%;display: flex;align-items: center;flex-grow: 1;cursor: pointer;cursor:pointer;user-select:none">
-                <p style="color: var(--black);margin:0px;padding:0px">${this.groupInfo && this.groupInfo.groupName}</p>
+                <p class="group-name">${this.groupInfo && this.groupInfo.groupName}</p>
                 </div>
                    <div style="display:flex;height:100%;align-items:center">
                     <vaadin-icon class="top-bar-icon" @click=${this._toggle} style="margin: 0px 10px" icon="vaadin:info" slot="icon"></vaadin-icon>
-                    <chat-group-settings .chatHeads=${this.chatHeads} .selectedAddress=${this.selectedAddress} .leaveGroupObj=${this.groupInfo} .setActiveChatHeadUrl=${(val)=> this.setActiveChatHeadUrl(val)}></chat-group-settings>
+                    <!-- <chat-group-settings .chatHeads=${this.chatHeads} .selectedAddress=${this.selectedAddress} .leaveGroupObj=${this.groupInfo} .setActiveChatHeadUrl=${(val)=> this.setActiveChatHeadUrl(val)}></chat-group-settings> -->
                     <!-- <vaadin-icon class="top-bar-icon" style="margin: 0px 20px" icon="vaadin:search" slot="icon"></vaadin-icon> -->
                     <!-- <vaadin-icon class="top-bar-icon" style="margin: 0px 20px" icon="vaadin:exit" slot="icon"></vaadin-icon> -->
-                    <chat-leave-group .chatHeads=${this.chatHeads} .selectedAddress=${this.selectedAddress} .leaveGroupObj=${this.groupInfo} .setActiveChatHeadUrl=${(val)=> this.setActiveChatHeadUrl(val)}></chat-leave-group>
+                    <!-- <chat-leave-group .chatHeads=${this.chatHeads} .selectedAddress=${this.selectedAddress} .leaveGroupObj=${this.groupInfo} .setActiveChatHeadUrl=${(val)=> this.setActiveChatHeadUrl(val)}></chat-leave-group> -->
                     </div>
                 </div>
                 ` : html`<div></div>`}

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

@@ -23,8 +23,8 @@ class ChatRightPanel extends LitElement {
 			groupAdmin: { attribute: false },
 			groupMembers: { attribute: false },
 			selectedHead: { type: Object },
-            toggle: {attribute: false},
+            toggle: { attribute: false },
-            getMoreMembers:{attribute: false}
+            getMoreMembers:{ attribute: false }
 		}
 	}
 
@@ -44,80 +44,135 @@ class ChatRightPanel extends LitElement {
         this.downObserverElement = ''
 	}
 
-	static get styles() {
+static get styles() {
-		return css`
+return css`
-			.top-bar-icon {
+    .top-bar-icon {
-				cursor: pointer;
+        cursor: pointer;
-				height: 18px;
+        height: 18px;
-				width: 18px;
+        width: 18px;
-				transition: 0.2s all;
+        transition: 0.2s all;
-			}
+    }
-			.top-bar-icon:hover {
-				color: var(--black);
-			}
-			.modal-button {
-				font-family: Roboto, sans-serif;
-				font-size: 16px;
-				color: var(--mdc-theme-primary);
-				background-color: transparent;
-				padding: 8px 10px;
-				border-radius: 5px;
-				border: none;
-				transition: all 0.3s ease-in-out;
-			}
-            .close-row {
-                width: 100%;
-                display: flex;
-                justify-content: flex-end;
-                height: 50px;
-                flex:0
 
-            }
+    .top-bar-icon:hover {
-            .container-body {
+        color: var(--black);
-                width: 100%;
+    }
-                display: flex; 
-                flex-direction: column; 
-                flex-grow: 1; 
-                overflow:auto;
-                margin-top: 15px;
-                padding: 0px 5px;
-                box-sizing: border-box;
-            }
-            .container-body::-webkit-scrollbar-track {
-                        background-color: whitesmoke;
-                        border-radius: 7px;
-                    }
 
-                    .container-body::-webkit-scrollbar {
+    .modal-button {
-                        width: 6px;
+        font-family: Roboto, sans-serif;
-                        border-radius: 7px;
+        font-size: 16px;
-                        background-color: whitesmoke;
+        color: var(--mdc-theme-primary);
-                    }
+        background-color: transparent;
+        padding: 8px 10px;
+        border-radius: 5px;
+        border: none;
+        transition: all 0.3s ease-in-out;
+    }
 
-                    .container-body::-webkit-scrollbar-thumb {
+    .close-row {
-                        background-color: rgb(180, 176, 176);
+        width: 100%;
-                        border-radius: 7px;
+        display: flex;
-                        transition: all 0.3s ease-in-out;
+        justify-content: flex-end;
-                    }
+        height: 50px;
+        flex:0
 
-                    .container-body::-webkit-scrollbar-thumb:hover {
+    }
-                        background-color: rgb(148, 146, 146);
+
-                        cursor: pointer;
+    .container-body {
-                    }    
+        width: 100%;
-            p {
+        display: flex; 
-                color: var(--black);
+        flex-direction: column; 
-                margin: 0px;
+        flex-grow: 1; 
-                padding: 0px;
+        overflow:auto;
-                word-break: break-all;
+        margin-top: 5px;
-            }
+        padding: 0px 6px;
-            .container {
+        box-sizing: border-box;
-                display: flex;
+    }
-                width: 100%;
+
-                flex-direction: column;
+    .container-body::-webkit-scrollbar-track {
-                height: 100%;
+        background-color: whitesmoke;
-            }
+        border-radius: 7px;
-		`
+    }
-	}
+    
+    .container-body::-webkit-scrollbar {
+        width: 6px;
+        border-radius: 7px;
+        background-color: whitesmoke;
+    }
+    
+    .container-body::-webkit-scrollbar-thumb {
+        background-color: rgb(180, 176, 176);
+        border-radius: 7px;
+        transition: all 0.3s ease-in-out;
+    }
+
+    .container-body::-webkit-scrollbar-thumb:hover {
+        background-color: rgb(148, 146, 146);
+        cursor: pointer;
+    }   
+
+    p {
+        color: var(--black);
+        margin: 0px;
+        padding: 0px;
+        word-break: break-all;
+    }
+
+    .container {
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    .chat-right-panel-label {
+        font-family: Montserrat, sans-serif;
+        color: var(--group-header);
+        padding: 5px;
+        font-size: 13px;
+        user-select: none;
+    }
+
+    .group-info {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        gap: 10px;
+    }
+
+    .group-name {
+        font-family: Raleway, sans-serif;
+        font-size: 20px;
+        color: var(--chat-bubble-msg-color);
+        text-align: center;
+        user-select: none;
+    }
+
+    .group-description {
+        font-family: Roboto, sans-serif;
+        color: var(--chat-bubble-msg-color);
+        letter-spacing: 0.3px;
+        font-weight: 300;
+        font-size: 14px;
+        margin-top: 15px;
+        word-break: break-word;
+        user-select: none;
+    }
+
+    .group-subheader {
+        font-family: Montserrat, sans-serif;
+        font-size: 14px;
+        color: var(--chat-bubble-msg-color);
+    }
+
+    .group-data {
+        font-family: Roboto, sans-serif;
+        letter-spacing: 0.3px;
+        font-weight: 300;
+        font-size: 14px;
+        color: var(--chat-bubble-msg-color);
+    }
+`
+}
 
 	firstUpdated() {
         this.viewElement = this.shadowRoot.getElementById('viewElement');
@@ -167,20 +222,20 @@ class ChatRightPanel extends LitElement {
 	}
 
 	async unitFee(txType) {
-        const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]
+        const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
-        const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port
+        const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
-        const url = `${nodeUrl}/transactions/unitfee?txType=${txType}`
+        const url = `${nodeUrl}/transactions/unitfee?txType=${txType}`;
-        let fee = null
+        let fee = null;
 
         try {
-            const res = await fetch(url)
+            const res = await fetch(url);
-            const data = await res.json()
+            const data = await res.json();
-            fee = (Number(data) / 1e8).toFixed(3)
+            fee = (Number(data) / 1e8).toFixed(3);
         } catch (error) {
-            fee = null
+            fee = null;
         }
   
-      return fee
+      return fee;
     }
 
 	async getLastRef() {
@@ -188,7 +243,7 @@ class ChatRightPanel extends LitElement {
 			type: "api",
 			url: `/addresses/lastreference/${this.selectedAddress.address}`,
 		})
-		return myRef
+		return myRef;
 	}
 
 	getTxnRequestResponse(txnResponse, reference) {
@@ -381,7 +436,8 @@ class ChatRightPanel extends LitElement {
             }
         }
 	render() {
-        console.log('this.groupMembers', this.groupMembers)
+        console.log('this.groupMembers', this.groupMembers);
+        console.log(5, "Chat Right Panel Here");
         const owner = this.groupAdmin.filter((admin)=> admin.address === this.leaveGroupObj.owner)
 		return html`
         <div class="container">
@@ -389,42 +445,44 @@ class ChatRightPanel extends LitElement {
         <vaadin-icon class="top-bar-icon" @click=${()=> this.toggle(false)} style="margin: 0px 10px" icon="vaadin:close" slot="icon"></vaadin-icon>
         </div>
         <div id="viewElement" class="container-body">
-            <p style="font-size: 20px;">${this.leaveGroupObj && this.leaveGroupObj.groupName}</p>
+            <p class="group-name">${this.leaveGroupObj && this.leaveGroupObj.groupName}</p> 
-                <p style="font-size: 14px;margin-top: 5px">${this.leaveGroupObj && this.leaveGroupObj.description}</p>
+            <div class="group-info">
-                <p style="font-size: 14px;margin-top: 10px">Members: ${this.leaveGroupObj && this.leaveGroupObj.memberCount}</p>
+                <p class="group-description">${this.leaveGroupObj && this.leaveGroupObj.description}</p>
+                <p class="group-subheader">Members: <span class="group-data">${this.leaveGroupObj && this.leaveGroupObj.memberCount}</span></p>
     
-                <p style="font-size: 14px;margin-top: 5px">Date created : ${new Date(this.leaveGroupObj.created).toLocaleDateString("en-US")}</p>
+                <p class="group-subheader">Date created : <span class="group-data">${new Date(this.leaveGroupObj.created).toLocaleDateString("en-US")}</span></p>
-                <br />
-                <p class="chat-right-panel-label">Group Owner</p>
-                ${owner.map((item) => {
-					return html`<chat-side-nav-heads
-						activeChatHeadUrl=""
-						.setActiveChatHeadUrl=${(val) => {}}
-						chatInfo=${JSON.stringify(item)}
-					></chat-side-nav-heads>`
-				})}
-                <p class="chat-right-panel-label">Admins</p>
-                ${this.groupAdmin.map((item) => {
-					return html`<chat-side-nav-heads
-						activeChatHeadUrl=""
-						.setActiveChatHeadUrl=${(val) => {}}
-						chatInfo=${JSON.stringify(item)}
-					></chat-side-nav-heads>`
-				})}
-                <p class="chat-right-panel-label">Members</p>
-                ${this.groupMembers.map((item) => {
-					return html`<chat-side-nav-heads
-						activeChatHeadUrl=""
-						.setActiveChatHeadUrl=${(val) => {
-							console.log({ val })
-							this.selectedHead = val
-							this.isOpenLeaveModal = true
-						}}
-						chatInfo=${JSON.stringify(item)}
-					></chat-side-nav-heads>`
-				})}
-                <div id='downObserver'></div>
             </div>
+            <br />
+            <p class="chat-right-panel-label">GROUP OWNER</p>
+            ${owner.map((item) => {
+                return html`<chat-side-nav-heads
+                    activeChatHeadUrl=""
+                    .setActiveChatHeadUrl=${(val) => {}}
+                    chatInfo=${JSON.stringify(item)}
+                ></chat-side-nav-heads>`
+            })}
+            <p class="chat-right-panel-label">ADMINS</p>
+            ${this.groupAdmin.map((item) => {
+                return html`<chat-side-nav-heads
+                    activeChatHeadUrl=""
+                    .setActiveChatHeadUrl=${(val) => {}}
+                    chatInfo=${JSON.stringify(item)}
+                ></chat-side-nav-heads>`
+            })}
+            <p class="chat-right-panel-label">MEMBERS</p>
+            ${this.groupMembers.map((item) => {
+                return html`<chat-side-nav-heads
+                    activeChatHeadUrl=""
+                    .setActiveChatHeadUrl=${(val) => {
+                        console.log({ val })
+                        this.selectedHead = val
+                        this.isOpenLeaveModal = true
+                    }}
+                    chatInfo=${JSON.stringify(item)}
+                ></chat-side-nav-heads>`
+            })}
+            <div id='downObserver'></div>
+        </div>
 
          <wrapper-modal 
                 .removeImage=${() => {

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

@@ -47,18 +47,15 @@ class ChatSideNavHeads extends LitElement {
                 color: var(--chat-group);
             }
 
-            .about {
-                margin-top: 8px;
-            }
-
-            .about {
-                padding-left: 8px;
-            }
-
             .status {
                 color: #92959e;
             }
 
+            .clearfix {
+                display: flex;
+                align-items: center;
+            }
+
             .clearfix:after {
                 visibility: hidden;
                 display: block;
@@ -129,7 +126,7 @@ class ChatSideNavHeads extends LitElement {
                 ${!this.isImageLoaded && !this.chatInfo.name && !this.chatInfo.groupName ? html`<mwc-icon class="img-icon">account_circle</mwc-icon>` : html`` }
                 ${!this.isImageLoaded && this.chatInfo.name ? html`<div  style="width:30px; height:30px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadBgActive)' : 'var(--chatHeadBg)' }; color: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadTextActive)' : 'var(--chatHeadText)' }; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize">${this.chatInfo.name.charAt(0)}</div>`: ''}
                 ${!this.isImageLoaded && this.chatInfo.groupName ? html`<div  style="width:30px; height:30px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadBgActive)' : 'var(--chatHeadBg)' }; color: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadTextActive)' : 'var(--chatHeadText)' }; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize">${this.chatInfo.groupName.charAt(0)}</div>`: ''}
-                <div class="about">
+                <div>
                     <div class="name"><span style="float:left; padding-left: 8px; color: var(--chat-group);">${this.chatInfo.groupName ? this.chatInfo.groupName : this.chatInfo.name !== undefined ? this.chatInfo.name : this.chatInfo.address.substr(0, 15)} </span> </div>
                 </div>
             </li>