From 3595c900596483d08797b25b12bd30d50abb976a Mon Sep 17 00:00:00 2001
From: LautaroC <lautarocutri@gmail.com>
Date: Thu, 28 Oct 2021 19:01:44 -0300
Subject: [PATCH] html and css #65

---
 web/lib/HabitatCommunity.js       |  43 +++---
 web/lib/HabitatToggle.js          |  36 +++--
 web/lib/HabitatTransactionCart.js | 239 +++++++++++++++++++++---------
 3 files changed, 212 insertions(+), 106 deletions(-)

diff --git a/web/lib/HabitatCommunity.js b/web/lib/HabitatCommunity.js
index 5ead4d7..04f0f34 100644
--- a/web/lib/HabitatCommunity.js
+++ b/web/lib/HabitatCommunity.js
@@ -190,15 +190,13 @@ button, .button {
   display: none;
   padding-bottom: 1em;
 }
-#sticky {
-  position: sticky;
-  top: .5em;
-  max-width: max-content;
-  padding: .5em 1em;
-  border-radius: 2em;
-  background-color: var(--color-bg);
-  border: 1px solid var(--color-bg-invert);
-  z-index: 9;
+#t_cart {
+  bottom: 26px;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  position: absolute;
+  display: flex;
 }
 #tabs * {
   outline: none;
@@ -320,27 +318,20 @@ button, .button {
           <div id='tabnav' class='flex row evenly'></div>
           <space></space>
         </div>
-
-        <space></space>
-
-        <div id='sticky' class='flex row center evenly'>
-          <div class='flex row'>
-            <habitat-toggle
-              id='delegateModeToggle'
-              left='Personal Mode'
-              tooltip-left='Your personal voting power'
-              right='Delegation Mode'
-              tooltip-right='Voting power delegated to you'
-            ></habitat-toggle>
-            <habitat-transaction-cart></habitat-transaction-cart>
-          </div>
-        </div>
-
         <div id='tabs'></div>
 
       </div>
       <space></space>
     </section>
+    <habitat-transaction-cart id='t_cart'>
+    <habitat-toggle
+      id='delegateModeToggle'
+      left='Personal Mode'
+      tooltip-left='Your personal voting power'
+      right='Delegation Mode'
+      tooltip-right='Voting power delegated to you'
+    ></habitat-toggle>
+  </habitat-transaction-cart>
   </div>
 </div>
 `;
@@ -694,4 +685,4 @@ button, .button {
     window.postMessage({ type: 'hbt-tx-bundle', value: batch }, window.location.origin);
   }
 }
-customElements.define('habitat-community', HabitatCommunity);
+customElements.define('habitat-community', HabitatCommunity);
\ No newline at end of file
diff --git a/web/lib/HabitatToggle.js b/web/lib/HabitatToggle.js
index f62a198..8419952 100644
--- a/web/lib/HabitatToggle.js
+++ b/web/lib/HabitatToggle.js
@@ -2,9 +2,6 @@ const TEMPLATE = document.createElement('template');
 TEMPLATE.innerHTML = `
 <style>
 * {
-  color: var(--color-text);
-  line-height: 1;
-  vertical-align: bottom;
   box-sizing: border-box;
 }
 #inner,
@@ -41,14 +38,19 @@ pin {
   background-color: var(--color-bg);
   transition: margin .2s ease-in;
 }
-#inner.on {
-  background-color: var(--color-bg-invert);
-}
+// #inner.on {
+//   background-color: var(--color-bg-invert);
+// }
 #inner.on > pin {
   margin-left: 1em;
 }
 #mode {
-  margin: 0 .2em 0 .5em;
+  margin: 0 .2em 2px 0;
+  color: white;
+  font-family: arial;
+  font-style: normal;
+  font-size: 14px;
+  line-height: 18px;
 }
 #tooltip {
   display: block;
@@ -60,11 +62,11 @@ pin {
   align-self: start;
   background-color: var(--color-bg-invert);
   visibility: hidden;
+  margin-top: -4px;
 }
 #tooltip > span {
   display: block;
   line-height: .9;
-  color: var(--color-bg);
 }
 #tooltip > #content {
   display: none;
@@ -94,16 +96,26 @@ pin {
 }
 #wrapper {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: center;
 }
+#top{
+  display: flex;
+  flex-direction: row;
+}
 </style>
+<div id='top'>
 <div id='wrapper'>
+  <span id='mode'></span>
   <div id='inner'>
     <pin></pin>
   </div>
-  <span id='mode'></span>
-  <div id='tooltip'><span>ℹ</span><p id='content'> </p></div>
+</div>
+<div id='tooltip'>
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.77778 0.00537109C0.791111 0.00537109 0 0.796482 0 1.78315V8.00537H1.77778H6.22222C7.20889 8.00537 8 7.21426 8 6.22759V1.78315C8 0.796482 7.20889 0.00537109 6.22222 0.00537109H1.77778ZM4 1.3387C4.48889 1.3387 4.88889 1.7387 4.88889 2.22759C4.88889 2.71648 4.48889 3.11648 4 3.11648C3.51111 3.11648 3.11111 2.71648 3.11111 2.22759C3.11111 1.7387 3.51111 1.3387 4 1.3387ZM3.55556 3.56093H4.44444C4.69333 3.56093 4.88889 3.75648 4.88889 4.00537V6.22759C4.88889 6.47648 4.69333 6.67204 4.44444 6.67204H3.55556C3.30667 6.67204 3.11111 6.47648 3.11111 6.22759V4.00537C3.11111 3.75648 3.30667 3.56093 3.55556 3.56093Z" fill="white"/>
+</svg>
+<p id='content'> </p></div>
 </div>
 `;
 
@@ -152,4 +164,4 @@ class HabitatToggle extends HTMLElement {
     this.shadowRoot.querySelector('#content').innerHTML = tooltipText;
   }
 }
-customElements.define('habitat-toggle', HabitatToggle);
+customElements.define('habitat-toggle', HabitatToggle);
\ No newline at end of file
diff --git a/web/lib/HabitatTransactionCart.js b/web/lib/HabitatTransactionCart.js
index d696f97..98e63b1 100644
--- a/web/lib/HabitatTransactionCart.js
+++ b/web/lib/HabitatTransactionCart.js
@@ -6,73 +6,175 @@ import BalanceTracker from './BalanceTracker.js';
 const TEMPLATE = document.createElement('template');
 TEMPLATE.innerHTML = `
 <style>
-:host {
-  display: flex;
-}
-
-#outer {
-  padding: .25em;
-  cursor: pointer;
-  overflow: hidden;
-}
-
-#txGrid {
-  display: grid;
-  max-height: 6em;
-  overflow: scroll;
-  overflow: overlay;
-  -webkit-overflow-scrolling: touch;
-  gap: .1rem;
-  grid-template-columns: 1fr;
-}
-
-#txGrid > * {
-  font-weight: lighter;
-}
-
-#txBundle {
-  display: flex;
-  opacity: 0;
-  max-width: 0;
-  max-height: 0;
-  transition: opacity .2s ease-out;
-}
-
-#outer.expanded #txBundle {
-  opacity: 1;
-  max-width: max-content;
-  max-height: max-content;
-  padding: 1em;
-  position: absolute;
-  right: 1em;
-  top: 3em;
-  border-radius: 0 0 1em 1em;
-  border: 1px solid var(--color-bg-invert);
-  background: var(--color-bg);
-}
-
-#count {
-  color: #F28F74;
-}
-
-#close {
-  place-self: flex-end;
-}
-
-#bal {
-  text-decoration: underline;
-}
+  :host {
+    all: initial;
+    box-sizing: border-box;
+    color: white;
+    -webkit-touch-callout: none; 
+    -webkit-user-select: none; 
+    -khtml-user-select: none; 
+    -moz-user-select: none; 
+    -ms-user-select: none; 
+    user-select: none;
+  }
+  button{
+    all:initial;
+  }
+  button:hover{
+    all: initial;
+  }
+  span{
+    all: initial;
+    color: white;
+    font-family: arial;
+    font-style: normal;
+    font-size: 14px;
+    line-height: 18px;
+  }
+  td{
+    all: initial;
+    color: white;
+    font-family: arial;
+  }
+  td:nth-child(1){
+    float: left;
+  }
+  td:nth-child(2){
+    float: right;
+  }
+  tr{
+    margin-top: 8px;
+  }
+  #HTC_detail{
+    width: 75%;
+    align-self: center;
+    background-color: #222222;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 20px 20px 0 0;
+    display: flex;
+    flex-direction: column;
+  }
+  #HTC_container{
+    display: flex;
+    flex-direction: column;
+    margin: auto;
+    color: white;
+  }
+  #HTC_bar{
+    padding: 16px 25px 16px 25px;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 30px 0 30px 0;
+    display: flex;
+    flex-direction: row;
+    background-color: #222222;
+    align-items: center;
+    height: 70px;
+  }
+  #HTC_abail{
+    margin-right: 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  #HTC_toggle > span{
+    color: white;
+    font-family: arial;
+    font-style: normal;
+    font-size: 14px;
+    line-height: 18px;
+  }
+  #HTC_toggle{
+    margin-right: 20px;
+    display: flex;
+    align-content: middle;
+    align-items: center;
+  }
+  #HTC_tran{
+    margin-right: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  #HTC_submit{
+    width: 110px;
+    height: 38px;
+    border-radius: 27px;
+    border: none;
+    padding: 0;
+    margin: 0;
+    background-color: #1BB186;
+    font-weight: bold;
+    color: black;
+    font-style: normal;
+    font-size: 14px;
+    line-height: 18px;
+    font-family: arial;
+  }
+  #HTC_grid{
+    margin-left: 38px;
+    margin-right: 96px;
+    margin-top: 9px;
+  }
+  #HTC_grid *{
+    font-style: normal;
+    font-weight: normal;
+    font-size: 12px;
+    line-height: 16px;
+  }
+  #HTC_title{
+    margin-left: 38px;
+    margin-top: 10px;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 18px;
+  }
+  #HTC_line{
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid white;
+    width: 100%;
+    margin-top: 11px;
+    margin-bottom: 3px;
+  }
 </style>
-<div id='outer' class='flex row'>
-  <span id='bal' class='s'></span>
-  <div id='txBundle' class='flex col s'>
-    <span>
-      <span id='count' class='bold l'></span>
-      <span>Pending Transactions</span>
-    </span>
-    <div id='txGrid'></div>
-    <button id='txSign' class='m'>Sign</button>
-    <a id='close'>&#10006;</a>
+<div id='HTC_container'>
+  <div id='HTC_detail'>
+  <span id='HTC_title'>Your transactions</span>
+    <table id='HTC_grid'>
+      <tbody id='HTC_grid_elem'>
+        <tr>
+          <td>Vote on rollup features</td>
+          <td>200 HBT</td>
+        </tr>
+        <tr>
+          <td>Vote on liquidity</td>
+          <td>140 HBT</td>
+        </tr>
+        <tr>
+          <td id='HTC_line' rowspan='2'></td>
+        </tr>
+        <tr>
+          <td id='HTC_total'>Total</td>
+          <td id='HTC_total_result'>345 HBT</td>
+        </tr>  
+      </tbody>
+    </table>
+  </div>
+  <div id='HTC_bar'>
+    <div id='HTC_toggle'><slot></slot></div>
+    <div id='HTC_abail'>
+      <span>Available tokens</span>
+      <span>803 HBT</span>
+    </div>
+    <div id ='HTC_tran'>
+      <span>Transactions</span>
+      <span>2(=345 HBT)</span>
+    </div>
+    <button id='HTC_submit'>
+      SIGN (2)
+    </button>
   </div>
 </div>
 `;
@@ -115,7 +217,7 @@ class HabitatTransactionCart extends HTMLElement {
 
     if (evt.data.type === 'hbt-tx-bundle') {
       this._txBundle = evt.data.value;
-
+      console.log("hbt-tx-bundle")
       const container = this.shadowRoot.querySelector('#txBundle');
       const grid = this.shadowRoot.querySelector('#txGrid');
       grid.innerHTML = '';
@@ -140,6 +242,7 @@ class HabitatTransactionCart extends HTMLElement {
     }
 
     if (evt.data.type === 'hbt-balance-tracker-update') {
+      console.log("hbt-balance-tracker-update")
       const obj = evt.data.value;
       const token = await getTokenV2(obj.tokenAddress);
       const { available } = await BalanceTracker.stat(token, obj.delegationMode);
@@ -148,4 +251,4 @@ class HabitatTransactionCart extends HTMLElement {
     }
   }
 }
-customElements.define('habitat-transaction-cart', HabitatTransactionCart);
+customElements.define('habitat-transaction-cart', HabitatTransactionCart);
\ No newline at end of file