From f52bd3669a4ac685add959a88d61703abf77bdc4 Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Tue, 14 Feb 2023 19:39:28 +0530
Subject: [PATCH] UI fixes

---
 index.html | 114 ++++++++++++++++++++++++++---------------------------
 1 file changed, 57 insertions(+), 57 deletions(-)

diff --git a/index.html b/index.html
index 25fc997..f57241e 100644
--- a/index.html
+++ b/index.html
@@ -1159,15 +1159,19 @@
     </script>
     <script id="standard_UI_functions">
         const { html, render: renderElem } = uhtml;
-        const domRefs = {}
+        const domRefs = {};
+        const uiGlobals = {
+            // Use to store global variables
+        }
         //Checks for internet connection status
+        uiGlobals.connectionErrorNotification = []
         if (!navigator.onLine)
-            floGlobals.connectionErrorNotification = notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error')
+            uiGlobals.connectionErrorNotification.push(notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error'))
         window.addEventListener('offline', () => {
-            floGlobals.connectionErrorNotification = notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error')
+            uiGlobals.connectionErrorNotification.push(notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error'))
         })
         window.addEventListener('online', () => {
-            getRef('notification_drawer').remove(floGlobals.connectionErrorNotification)
+            uiGlobals.connectionErrorNotification.forEach(notification => notification.remove())
             notify('We are back online.', 'success')
             location.reload()
         })
@@ -2293,60 +2297,57 @@
                 });
         }
 
-
-        const generateKeys = document.createElement('template')
-        generateKeys.innerHTML = `
-            <style>
-                :host{
-                    display: flex;
-                    justify-content: center;
-                }
-                .generated-keys-wrapper {
-                    padding: 1rem;
-                    background-color: rgba(var(--foreground-color), 1);
-                    border-radius: 0.5rem;
-                }
-                #flo_id_warning{
-                    padding-bottom: 1.5rem;
-                }
-                #flo_id_warning .icon {
-                    height: 3rem;
-                    width: 3rem;
-                    padding: 0.8rem;
-                    overflow: visible;
-                    background-color: #ffc107;
-                    border-radius: 3rem;
-                    fill: rgba(0, 0, 0, 0.8);
-                }
-            </style>     
-            <section class="grid gap-1-5">
-                <div id="flo_id_warning" class="flex gap-1">
-                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none" /> <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" /> </svg>
-                    <div class="grid gap-0-5">
-                        <strong>
-                            <h3> Keep your keys safe! </h3>
-                        </strong>
-                        <p>Don't share with anyone. Once lost private key can't be recovered.</p>
-                    </div>
-                </div>
-                <div class="grid gap-1-5 generated-keys-wrapper">
-                    <div class="grid gap-0-5">
-                        <h5>FLO address</h5>
-                        <sm-copy id="generated_flo_address"></sm-copy>
-                    </div>
-                    <div class="grid gap-0-5">
-                        <h5>Private key</h5>
-                        <sm-copy id="generated_private_key"></sm-copy>
-                    </div>
-                </div>
-                <button id="sign_up_button" class="button button--primary w-100">Sign in with these credentials</button>
-                <p class="margin-top-1">You can use these FLO credentials with other RanchiMall apps too. </p>
-            </section>
-        `
         window.customElements.define('keys-generator', class extends HTMLElement {
             constructor() {
                 super();
-                this.appendChild(generateKeys.content.cloneNode(true));
+                this.innerHTML = `
+                    <style>
+                        :host{
+                            display: flex;
+                            justify-content: center;
+                        }
+                        .generated-keys-wrapper {
+                            padding: 1rem;
+                            background-color: rgba(var(--foreground-color), 1);
+                            border-radius: 0.5rem;
+                        }
+                        #flo_id_warning{
+                            padding-bottom: 1.5rem;
+                        }
+                        #flo_id_warning .icon {
+                            height: 3rem;
+                            width: 3rem;
+                            padding: 0.8rem;
+                            overflow: visible;
+                            background-color: #ffc107;
+                            border-radius: 3rem;
+                            fill: rgba(0, 0, 0, 0.8);
+                        }
+                    </style>     
+                    <section class="grid gap-1-5">
+                        <div id="flo_id_warning" class="flex gap-1">
+                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none" /> <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" /> </svg>
+                            <div class="grid gap-0-5">
+                                <strong>
+                                    <h3> Keep your keys safe! </h3>
+                                </strong>
+                                <p>Don't share with anyone. Once lost private key can't be recovered.</p>
+                            </div>
+                        </div>
+                        <div class="grid gap-1-5 generated-keys-wrapper">
+                            <div class="grid gap-0-5">
+                                <h5>FLO address</h5>
+                                <sm-copy id="generated_flo_address"></sm-copy>
+                            </div>
+                            <div class="grid gap-0-5">
+                                <h5>Private key</h5>
+                                <sm-copy id="generated_private_key"></sm-copy>
+                            </div>
+                        </div>
+                        <button id="sign_up_button" class="button button--primary w-100">Sign in with these credentials</button>
+                        <p class="margin-top-1">You can use these FLO credentials with other RanchiMall apps too. </p>
+                    </section>
+                `
             }
             get keys() {
                 return {
@@ -2426,8 +2427,7 @@
                     <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"/></svg>
                     <h1>Ad-Blocker Detected!</h1>
                     <p>
-                        It seems like you are using an ad-blocker. Please disable it and reload the page.
-                        We don't show any ads on this app and we don't track you.    
+                        Please disable your ad-blocker for optimal experience. Our app doesn't show ads or track activity.   
                     </p>
                     ${isBrave ? `<strong>If you have enabled Brave shield then disable it also.</strong>` : ''}
                 `;