adding more basic code

css/main.css

@@ -505,8 +505,9 @@ h3 {
   display: grid;
   gap: 0.5rem;
   width: 100%;
-  padding: 0 1.5rem;
+  padding: 0 1.5rem 0 0.5rem;
   align-items: center;
+  grid-template-columns: auto 1fr;
 }
 .popup__header > * {
   grid-row: 1;
@@ -519,8 +520,6 @@ h3 {
 }
 .popup__header__close {
   grid-column: 1;
-  margin-left: -1rem;
-  justify-self: flex-start;
 }
 
 #loading {
@@ -542,7 +541,6 @@ h3 {
 
 #main_header {
   display: flex;
-  flex-wrap: wrap;
   gap: 1rem;
   padding: max(1rem, 1.5vw);
   width: 100%;
@@ -569,6 +567,8 @@ h3 {
   background-color: rgba(var(--text-color), 0.06);
   border-radius: 2rem;
   font-size: 0.8rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 .drag-drop-container,
@@ -579,6 +579,7 @@ h3 {
   box-shadow: 0 0 0 1px rgba(var(--text-color), 0.1);
   border-radius: 0.5rem;
   margin: 0 auto;
+  transition: box-shadow 0.2s, background-color 0.2s;
 }
 
 .drag-drop-container {
@@ -588,7 +589,6 @@ h3 {
   cursor: pointer;
   justify-content: center;
   align-items: center;
-  transition: box-shadow 0.2s ease-in-out;
 }
 .drag-drop-container.drag-over, .drag-drop-container:hover {
   box-shadow: 0 0 0 0.1rem var(--accent-color);
@@ -614,6 +614,26 @@ h3 {
   padding: 1.5rem;
 }
 
+@media screen and (max-width: 40rem) {
+  theme-toggle {
+    order: 2;
+  }
+  #user_popup_button {
+    flex: 1;
+    order: 1;
+  }
+  .hide-on-small {
+    display: none !important;
+  }
+}
+@media screen and (min-width: 64rem) {
+  sm-popup {
+    --width: 24rem;
+  }
+  .popup__header {
+    padding: 1.5rem 1.5rem 0 0.75rem;
+  }
+}
 @media (any-hover: hover) {
   ::-webkit-scrollbar {
     width: 0.5rem;

css/main.scss

@@ -476,8 +476,9 @@ h3 {
   display: grid;
   gap: 0.5rem;
   width: 100%;
-  padding: 0 1.5rem;
+  padding: 0 1.5rem 0 0.5rem;
   align-items: center;
+  grid-template-columns: auto 1fr;
   & > * {
     grid-row: 1;
   }
@@ -489,8 +490,6 @@ h3 {
   }
   &__close {
     grid-column: 1;
-    margin-left: -1rem;
-    justify-self: flex-start;
   }
 }
 
@@ -513,7 +512,6 @@ h3 {
 
 #main_header {
   display: flex;
-  flex-wrap: wrap;
   gap: 1rem;
   padding: max(1rem, 1.5vw);
   width: 100%;
@@ -539,6 +537,8 @@ h3 {
   background-color: rgba(var(--text-color), 0.06);
   border-radius: 2rem;
   font-size: 0.8rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 .drag-drop-container,
@@ -549,6 +549,7 @@ h3 {
   box-shadow: 0 0 0 1px rgba(var(--text-color), 0.1);
   border-radius: 0.5rem;
   margin: 0 auto;
+  transition: box-shadow 0.2s, background-color 0.2s;
 }
 .drag-drop-container {
   flex-direction: column;
@@ -557,7 +558,6 @@ h3 {
   cursor: pointer;
   justify-content: center;
   align-items: center;
-  transition: box-shadow 0.2s ease-in-out;
   &.drag-over,
   &:hover {
     box-shadow: 0 0 0 0.1rem var(--accent-color);
@@ -583,8 +583,26 @@ h3 {
 #file_upload_section {
   padding: 1.5rem;
 }
+@media screen and (max-width: 40rem) {
+  theme-toggle {
+    order: 2;
+  }
+  #user_popup_button {
+    flex: 1;
+    order: 1;
+  }
+  .hide-on-small {
+    display: none !important;
+  }
+}
 
 @media screen and (min-width: 64rem) {
+  sm-popup {
+    --width: 24rem;
+  }
+  .popup__header {
+    padding: 1.5rem 1.5rem 0 0.75rem;
+  }
 }
 @media (any-hover: hover) {
   ::-webkit-scrollbar {

scripts/main.js

@@ -1,4 +1,5 @@
 
+const { html, render: renderElem } = uhtml;
 // Use instead of document.getElementById
 const domRefs = {};
 function getRef(elementId) {
@@ -180,6 +181,119 @@ function loading(show = true) {
         getRef('loading').classList.add('hidden')
     }
 }
+function getSignedIn(passwordType) {
+    return new Promise((resolve, reject) => {
+        try {
+            console.log(floDapps.user.id)
+            getPromptInput('Enter password', '', {
+                isPassword: true,
+            }).then(password => {
+                if (password) {
+                    resolve(password)
+                }
+            })
+        } catch (err) {
+            if (passwordType === 'PIN/Password') {
+                floGlobals.isPrivKeySecured = true;
+                getRef('private_key_field').removeAttribute('data-private-key');
+                getRef('private_key_field').setAttribute('placeholder', 'Password');
+                getRef('private_key_field').customValidation = null
+            } else {
+                floGlobals.isPrivKeySecured = false;
+                getRef('private_key_field').dataset.privateKey = ''
+                getRef('private_key_field').setAttribute('placeholder', 'FLO private key');
+                getRef('private_key_field').customValidation = floCrypto.getPubKeyHex;
+            }
+            if (window.location.hash.includes('sign_in') || window.location.hash.includes('sign_up')) {
+                routeTo(window.location.hash);
+            } else {
+                location.hash = `#/sign_in`;
+            }
+            getRef('sign_in_button').onclick = () => {
+                resolve(getRef('private_key_field').value.trim());
+                getRef('private_key_field').value = '';
+                routeTo('loading');
+            };
+            getRef('sign_up_button').onclick = () => {
+                resolve(getRef('keys_generator').keys.privKey);
+                getRef('keys_generator').clearKeys();
+                routeTo('loading');
+            };
+        }
+    });
+}
+function setSecurePassword() {
+    if (!floGlobals.isPrivKeySecured) {
+        const password = getRef('secure_pwd_input').value.trim();
+        floDapps.securePrivKey(password).then(() => {
+            floGlobals.isPrivKeySecured = true;
+            notify('Password set successfully', 'success');
+            closePopup();
+        }).catch(err => {
+            notify(err, 'error');
+        })
+    }
+}
+function signOut() {
+    getConfirmation('Sign out?', { message: 'You are about to sign out of the app, continue?', confirmText: 'Leave', cancelText: 'Stay' })
+        .then(async (res) => {
+            if (res) {
+                await floDapps.clearCredentials();
+                location.reload();
+            }
+        });
+}
+
+// detect browser version
+function detectBrowser() {
+    let ua = navigator.userAgent,
+        tem,
+        M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
+    if (/trident/i.test(M[1])) {
+        tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
+        return 'IE ' + (tem[1] || '');
+    }
+    if (M[1] === 'Chrome') {
+        tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
+        if (tem != null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
+    }
+    M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
+    if ((tem = ua.match(/version\/(\d+)/i)) != null) M.splice(1, 1, tem[1]);
+    return M.join(' ');
+}
+function createRipple(event, target) {
+    const circle = document.createElement("span");
+    const diameter = Math.max(target.clientWidth, target.clientHeight);
+    const radius = diameter / 2;
+    const targetDimensions = target.getBoundingClientRect();
+    circle.style.width = circle.style.height = `${diameter}px`;
+    circle.style.left = `${event.clientX - (targetDimensions.left + radius)}px`;
+    circle.style.top = `${event.clientY - (targetDimensions.top + radius)}px`;
+    circle.classList.add("ripple");
+    const rippleAnimation = circle.animate(
+        [
+            {
+                opacity: 1,
+                transform: `scale(0)`
+            },
+            {
+                transform: "scale(4)",
+                opacity: 0,
+            },
+        ],
+        {
+            duration: 600,
+            fill: "forwards",
+            easing: "ease-out",
+        }
+    );
+    target.append(circle);
+    rippleAnimation.onfinish = () => {
+        circle.remove();
+    };
+}
+
+
 function getApprovedAggregators() {
     floGlobals.approvedKycAggregators = {};
     return new Promise((resolve, reject) => {