Minor UI changes

docs/css/components.js

@@ -2952,3 +2952,73 @@ customElements.define('sm-checkbox', class extends HTMLElement {
         this.removeEventListener('change', this.handleClick)
     }
 })
+
+const lineLoader = document.createElement('template');
+lineLoader.innerHTML = `
+<style>     
+*{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+}
+.loader {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 0.2rem;
+    width: 8rem;
+    margin: 0 auto;
+    background-color: rgba(var(--text-color), 0.06);
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+  .loader::after {
+    content: "";
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: var(--accent-color);
+    left: 0;
+    border-radius: inherit;
+    -webkit-animation: line-loader 1.5s infinite;
+            animation: line-loader 1.5s infinite;
+    transform-origin: left;
+  }
+  
+  @-webkit-keyframes line-loader {
+    0% {
+      transform: translateX(0) scaleX(0);
+    }
+    60% {
+      transform: translateX(0) scaleX(1);
+    }
+    100% {
+      transform: translateX(100%) scaleX(1);
+    }
+  }
+  
+  @keyframes line-loader {
+    0% {
+      transform: translateX(0) scaleX(0);
+    }
+    60% {
+      transform: translateX(0) scaleX(1);
+    }
+    100% {
+      transform: translateX(100%) scaleX(1);
+    }
+  }
+</style>
+<div class="loader"></div>
+`;
+class LineLoader extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({
+            mode: 'open'
+        }).append(lineLoader.content.cloneNode(true));
+    }
+}
+window.customElements.define('line-loader', LineLoader);

docs/css/main.css

@@ -628,7 +628,7 @@ sm-checkbox {
   padding: 0 1.5rem;
 }
 #pages_container > * {
-  width: min(42rem, 100%);
+  min-width: min(26rem, 100%);
 }
 
 .listed-asset {

docs/css/main.scss

@@ -597,7 +597,7 @@ sm-checkbox {
   overflow-y: auto;
   padding: 0 1.5rem;
   & > * {
-    width: min(42rem, 100%);
+    min-width: min(26rem, 100%);
   }
 }
 .listed-asset {

docs/index.html

@@ -46,11 +46,12 @@
     </sm-popup>
     <div id="loading" class="page flex align-center justify-center">
         <div class="grid gap-2 text-center">
-            <sm-spinner></sm-spinner>
+            <line-loader></line-loader>
             <div class="grid gap-0-5">
                 <h4>RanchiMall Exchange</h4>
                 <p>Getting everything ready</p>
             </div>
+            <sm-button onclick="floExchangeAPI.clearAllLocalData()">Reset</sm-button>
         </div>
     </div>
     <article id="home" class="page hide">
@@ -1492,7 +1493,11 @@
             }
             catch (err) {
                 getRef('trade_button_wrapper').append(getRef('failure_template').content.cloneNode(true))
-                notify(err.data, 'error')
+                if (err.data === 'Insufficient rupee') {
+                    notify(`Insufficient balance to ${tradeType} ${asset}. Please deposit rupee to wallet first.`, 'error', { pinned: true })
+                } else {
+                    notify(err.data, 'error')
+                }
             }
             finally {
                 updateRate()