From 7df50f3076e16c6b75d16114799ad8065b73c146 Mon Sep 17 00:00:00 2001
From: Justin Ferrari <‘justinwesleyferrari@gmail.com’>
Date: Wed, 16 Nov 2022 12:40:51 -0500
Subject: [PATCH] Fixed chat image loading modal

---
 .../plugins/core/components/ChatPage.js       | 183 ++++++++----------
 .../plugins/core/components/ChatScroller.js   |  16 +-
 2 files changed, 84 insertions(+), 115 deletions(-)

diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js
index 782b2736..93e5e841 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatPage.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js
@@ -390,84 +390,77 @@ class ChatPage extends LitElement {
         }   
 
         .dialogCustom {
-				position: fixed;
-    				z-index: 10000;
-    				display: flex;
-    				justify-content: center;
-    				flex-direction: column;
-    				align-items: center;
-    				top: 10px;
-    				right: 20px;
-                    user-select: none;
-			}
+            position: fixed;
+            z-index: 10000;
+            display: flex;
+            justify-content: center;
+            flex-direction: column;
+            align-items: center;
+            top: 10px;
+            right: 20px;
+            user-select: none;
+        }
 
         .dialogCustom p {
             color: var(--black)
         }
-        .row {
-				display: flex;
-				width: 100%;
-				align-items: center;
-			}
-
-            .between {
-				justify-content: space-between;
-			}
 
         .dialogCustomInner {
-				min-width: 300px;
-				height: 40px;
-				background-color: var(--white);
-				box-shadow: var(--mdc-dialog-box-shadow, 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12));
-				padding: 10px;
-				border-radius: 4px;
-			}
-			.dialogCustomInner ul {
-				padding-left: 0px
-			}
-			.dialogCustomInner li {
-				margin-bottom: 10px;
-			}
-            .marginLoader {
-                margin-right: 8px;
+            min-width: 300px;
+            height: 40px;
+            background-color: var(--white);
+            box-shadow: rgb(119 119 119 / 32%) 0px 4px 12px;
+            padding: 10px;
+            border-radius: 4px;
+        }
+
+        .dialogCustomInner ul {
+            padding-left: 0px
+        }
+        .dialogCustomInner li {
+            margin-bottom: 10px;
+        }
+
+        .marginLoader {
+            margin-right: 8px;
+        }
+        .smallLoading,
+        .smallLoading:after {
+            border-radius: 50%;
+            width: 2px;
+            height: 2px;
+        }
+        .smallLoading {
+            border-width: 0.8em;
+            border-style: solid;
+            border-color: rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2)
+            rgba(3, 169, 244, 0.2) rgb(3, 169, 244);
+            font-size: 10px;
+            position: relative;
+            text-indent: -9999em;
+            transform: translateZ(0px);
+            animation: 1.1s linear 0s infinite normal none running loadingAnimation;
+        }
+        @-webkit-keyframes loadingAnimation {
+            0% {
+                -webkit-transform: rotate(0deg);
+                transform: rotate(0deg);
+            }
+            100% {
+                -webkit-transform: rotate(360deg);
+                transform: rotate(360deg);
+            }
+        }
+        @keyframes loadingAnimation {
+            0% {
+                -webkit-transform: rotate(0deg);
+                transform: rotate(0deg);
             }
-            .smallLoading,
-			.smallLoading:after {
-				border-radius: 50%;
-				width: 2px;
-				height: 2px;
-			}
-			.smallLoading {
-				border-width: 0.6em;
-				border-style: solid;
-				border-color: rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2)
-				rgba(3, 169, 244, 0.2) rgb(3, 169, 244);
-				font-size: 10px;
-				position: relative;
-				text-indent: -9999em;
-				transform: translateZ(0px);
-				animation: 1.1s linear 0s infinite normal none running loadingAnimation;
-			}
-			@-webkit-keyframes loadingAnimation {
-				0% {
-					-webkit-transform: rotate(0deg);
-					transform: rotate(0deg);
-				}
-				100% {
-					-webkit-transform: rotate(360deg);
-					transform: rotate(360deg);
-				}
-			}
-			@keyframes loadingAnimation {
-				0% {
-					-webkit-transform: rotate(0deg);
-					transform: rotate(0deg);
-				}
-				100% {
-					-webkit-transform: rotate(360deg);
-					transform: rotate(360deg);
-				}
-			}
+            100% {
+                -webkit-transform: rotate(360deg);
+                transform: rotate(360deg);
+            }
+        }
         
         .mdc-dialog .mdc-dialog__surface {
             border-radius: 10px;
@@ -479,20 +472,9 @@ class ChatPage extends LitElement {
             position: relative;
             display: flex;
             align-items: center;
-            justify-content: center;
-            flex-direction: column;
+            padding: 0 10px;
+            gap: 10px;
             height: 100%;
-            padding: 18px 18px 0 18px;
-            gap: 15px;
-        }
-
-        .dialog-container:after {
-            position: absolute;
-            content: "";
-            bottom: -15px;
-            height: 1px;
-            width: 95%;
-            background: #dddddd;
         }
 
         .dialog-image {
@@ -744,29 +726,18 @@ class ChatPage extends LitElement {
             </div>
             ${(this.isUploadingImage || this.isDeletingImage) ? html`
 					<div class="dialogCustom">
-                    <div class="dialogCustomInner">
-						<div class="dialog-container">
-						
-								<div class="row between">
-									
-									<div class=${`smallLoading marginLoader`}></div>
-                                    <p>
-                                    ${this.isDeletingImage ?
-                                        translate("chatpage.cchange31") : translate("chatpage.cchange30")}
-										
-									</p>
-								</div>
-
-								
-							
-						</div>
-						
-					</div>
-                                    
-			</div>
-                                </div>
+                        <div class="dialogCustomInner">
+                            <div class="dialog-container">
+                                <div class=${`smallLoading marginLoader`}></div>
+                                <p>
+                                ${this.isDeletingImage ?
+                                    translate("chatpage.cchange31") : translate("chatpage.cchange30")}
+                                </p>
+                            </div>			
+                        </div>                        
+			        </div>
+            </div>
 			`: ''}			
-		
         </div>
         `
     }
diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js
index ab3d7747..c0f50600 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js
@@ -114,16 +114,14 @@ class ChatScroller extends LitElement {
       }
 
     async firstUpdated() {
-        this.viewElement = this.shadowRoot.getElementById('viewElement')
-        this.upObserverElement = this.shadowRoot.getElementById('upObserver')
-        this.downObserverElement = this.shadowRoot.getElementById('downObserver')
-
-
+        this.viewElement = this.shadowRoot.getElementById('viewElement');
+        this.upObserverElement = this.shadowRoot.getElementById('upObserver');
+        this.downObserverElement = this.shadowRoot.getElementById('downObserver');
         // Intialize Observers
-        this.upElementObserver()
-        this.downElementObserver()
-        await this.updateComplete
-        this.viewElement.scrollTop = this.viewElement.scrollHeight + 50
+        this.upElementObserver();
+        this.downElementObserver();
+        await this.updateComplete;
+        this.viewElement.scrollTop = this.viewElement.scrollHeight;
     }
 
     _getOldMessage(_scrollElement) {