Added amount to open orders

docs/css/main.css

@@ -829,9 +829,16 @@ sm-checkbox {
           user-select: none;
   align-items: center;
   gap: 0.5rem;
-  grid-template-columns: -webkit-min-content repeat(3, 1fr) -webkit-min-content;
+  grid-template-columns: -webkit-min-content 1fr auto;
-  grid-template-columns: min-content repeat(3, 1fr) min-content;
+  grid-template-columns: min-content 1fr auto;
   border-radius: 0.5rem;
+  grid-template-areas: "checkbox quantity quantity time" "checkbox price amount cancel";
+}
+.order-card > .grid:nth-of-type(2) {
+  grid-area: price;
+}
+.order-card > .grid:nth-of-type(3) {
+  grid-area: amount;
 }
 .order-card__type {
   font-size: 0.9rem;
@@ -852,6 +859,7 @@ sm-checkbox {
   pointer-events: none;
 }
 .order-card sm-checkbox {
+  grid-area: checkbox;
   cursor: pointer;
   margin-right: 0.5rem;
 }
@@ -860,9 +868,17 @@ sm-checkbox {
   color: rgba(var(--text-color), 0.9);
 }
 .order-card__time {
+  grid-area: time;
   font-size: 0.8rem;
   color: rgba(var(--text-color), 0.8);
 }
+.order-card .cancel-order {
+  grid-area: cancel;
+  color: var(--danger-color);
+}
+.order-card .cancel-order .icon {
+  fill: var(--danger-color);
+}
 
 .cancel-order {
   align-items: center;
@@ -1542,6 +1558,11 @@ sm-checkbox {
     height: 2rem;
     background-color: var(--accent-color);
   }
+
+  .order-card {
+    grid-template-columns: auto 1fr 1fr 1fr auto;
+    grid-template-areas: "checkbox quantity price amount time cancel";
+  }
 }
 @media screen and (max-width: 80rem) and (min-width: 40rem) {
   .main_navbar__item {

docs/css/main.scss

@@ -778,8 +778,17 @@ sm-checkbox {
   user-select: none;
   align-items: center;
   gap: 0.5rem;
-  grid-template-columns: min-content repeat(3, 1fr) min-content;
+  grid-template-columns: min-content 1fr auto;
   border-radius: 0.5rem;
+  grid-template-areas: "checkbox quantity quantity time" "checkbox price amount cancel";
+  & > .grid {
+    &:nth-of-type(2) {
+      grid-area: price;
+    }
+    &:nth-of-type(3) {
+      grid-area: amount;
+    }
+  }
   &__type {
     font-size: 0.9rem;
     font-weight: 500;
@@ -801,6 +810,7 @@ sm-checkbox {
     }
   }
   sm-checkbox {
+    grid-area: checkbox;
     cursor: pointer;
     margin-right: 0.5rem;
   }
@@ -811,9 +821,17 @@ sm-checkbox {
   }
 
   &__time {
+    grid-area: time;
     font-size: 0.8rem;
     color: rgba(var(--text-color), 0.8);
   }
+  .cancel-order {
+    grid-area: cancel;
+    color: var(--danger-color);
+    .icon {
+      fill: var(--danger-color);
+    }
+  }
 }
 .cancel-order {
   align-items: center;
@@ -1374,6 +1392,10 @@ sm-checkbox {
       }
     }
   }
+  .order-card {
+    grid-template-columns: auto 1fr 1fr 1fr auto;
+    grid-template-areas: "checkbox quantity price amount time cancel";
+  }
 }
 @media screen and (max-width: 80rem) and (min-width: 40rem) {
   .main_navbar__item {

docs/index.html

@@ -852,11 +852,15 @@
                 <div class="order-card__type capitalize"></div>
                 <div class="order-card__quantity"></div>
             </div>
+            <time class="order-card__time"></time>
             <div class="grid">
                 <span class="label order-card__price-type"></span>
                 <div class="order-card__price"></div>
             </div>
-            <time class="order-card__time"></time>
+            <div class="grid">
+                <span class="label order-card__amount-type"></span>
+                <div class="order-card__amount"></div>
+            </div>
             <button class="cancel-order" title="Cancel this order">
                 <svg xmlns="http://www.w3.org/2000/svg" class="icon" height="24px" viewBox="0 0 24 24" width="24px">
                     <path d="M0 0h24v24H0V0z" fill="none" />
@@ -1000,7 +1004,7 @@
         const domRefs = {};
         let timerId;
         const currentYear = new Date().getFullYear();
-        const relativeTime = new RelativeTime({ style: 'narrow' });
+        const relativeTime = new RelativeTime('en', { style: 'short' });
 
         //Checks for internet connection status
         if (!navigator.onLine) {
@@ -1645,7 +1649,9 @@
                 card.querySelector('.order-card__type').textContent = type
                 card.querySelector('.order-card__quantity').textContent = `${quantity} ${asset}`
                 card.querySelector('.order-card__price-type').textContent = type === 'buy' ? 'Valid upto' : 'Valid until'
-                card.querySelector('.order-card__price').textContent = formatAmount(price)
+                card.querySelector('.order-card__amount').textContent = formatAmount(price)
+                card.querySelector('.order-card__amount-type').textContent = type === 'buy' ? 'Locked amount' : 'Min amount'
+                card.querySelector('.order-card__price').textContent = formatAmount(price * quantity, true)
                 card.querySelector('.order-card__time').textContent = relativeTime.from(new Date(time).getTime())
                 return card
             },