Update breakdown chart and adjust spacing for wallet connect modal

consensusnetworks · Jun 20, 2023 · 5c7fb65 · 5c7fb65
1 parent 7417613
commit 5c7fb65
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 15 deletions.
diff --git a/apps/web/src/layouts/default-layout.vue b/apps/web/src/layouts/default-layout.vue
@@ -221,16 +221,16 @@ onUnmounted(() =>{
           <Slide class="w-full h-full ">
             <div
               v-show="currentSlide === 1"
-              class="absolute top-0 left-0 w-full h-full bg-white card px-[25px] py-[12px]"
+              class="absolute top-0 left-0 w-full h-full bg-white card px-[50px] py-[25px]"
             >
               <h6 class="nav_items">
-                Select Wallet Provider
+                Select Provider
               </h6>
-              <div class="flex flex-wrap justify-between gap-[20px] w-full mt-[20px]">
+              <div class="flex flex-wrap justify-around gap-[20px] w-full mt-[20px]">
                 <button
                   v-for="wallet in activeWallets"
                   :key="wallet"
-                  class="w-[180px] h-[100px] border flex flex-col justify-center items-center rounded-[8px]"
+                  class="w-[140px] h-[100px] border flex flex-col justify-center items-center rounded-[8px]"
                   @click="selectProvider(wallet, 'ETH'), authFlowCardNumber = 2, selectedProivder = wallet"
                 >
                   <img
@@ -248,14 +248,14 @@ onUnmounted(() =>{
           <Slide class="w-full h-full ">
             <div
               v-show="currentSlide === 2"
-              class="absolute top-0 left-0 w-full h-full bg-white card px-[25px] py-[12px]"
+              class="absolute top-0 left-0 w-full h-full bg-white card px-[50px] py-[25px]"
             >
               <h6 class="nav_items flex items-center mb-[20px]">
                 <button @click="authFlowCardNumber = 1, selectedProivder = null">
                   <vue-feather
                     type="chevron-left"
-                    size="36"
-                    class="icon text-primary hover:text-blue_3 mr-[10px]"
+                    size=""
+                    class="icon w-[20px] h-min text-primary hover:text-blue_3 mr-[10px] mt-[5px]"
                   />
                 </button>
                 Select Address
@@ -269,11 +269,11 @@ onUnmounted(() =>{
                 </h6>
               </div>
               <div v-else>
-                <div class="my-[20px] nav_items">
+                <div class="my-[20px] px-[10px] nav_items">
                   <input
                     v-model="termsCheckbox"
                     type="checkbox"
-                    class=""
+                    class="mr-[5px]"
                   > By connecting my address, I certify that I have read and accept the updated 
                   <span class="text-primary"> Terms of Use </span> and <span class="text-primary">Privacy Notice</span>.
                 </div> 

diff --git a/apps/web/src/pages/overview/components/BreakdownChart.vue b/apps/web/src/pages/overview/components/BreakdownChart.vue
@@ -7,7 +7,7 @@ const selectedTimeframe = ref('1 month')
 
 const data = ref({} as any)
 
-const totalStaked = ref({
+const currentStaked = ref({
   usd: '$150',
   exchange: '0.00054 ETH'
 })
@@ -17,6 +17,11 @@ const stakingRewards = ref({
   exchange: '0.004 ETH'
 })
 
+const totalDeposited = ref({
+  usd: '$17.25',
+  exchange: '0.004 ETH'
+})
+
 const setMockData = () => {
   let labels  = [] as string[]
   let today = new Date()
@@ -111,14 +116,14 @@ watch(selectedTimeframe, () => {
     <div class="flex flex-wrap gap-[68px] mb-[52px]">
       <div>
         <h6 class="blance_title mb-[15px]">
-          Total Staked
+          Current Staked
         </h6>
         <div class="flex items-center gap-[12px]">
           <h5 class="blance_amount">
-            {{ totalStaked.usd }}
+            {{ currentStaked.usd }}
           </h5>
           <span class="blance_exchange">
-            {{ totalStaked.exchange }}
+            {{ currentStaked.exchange }}
           </span>
         </div>
       </div>
@@ -135,6 +140,19 @@ watch(selectedTimeframe, () => {
           </span>
         </div>
       </div>
+      <div>
+        <h6 class="blance_title mb-[15px]">
+          Total Deposited
+        </h6>
+        <div class="flex items-center gap-[12px]">
+          <h5 class="blance_amount">
+            {{ totalDeposited.usd }}
+          </h5>
+          <span class="blance_exchange">
+            {{ totalDeposited.exchange }}
+          </span>
+        </div>
+      </div>
     </div>
     <div class="flex flex-wrap gap-[20px] justify-between items-start">
       <div>

diff --git a/apps/web/src/pages/overview/components/StakingAvg.vue b/apps/web/src/pages/overview/components/StakingAvg.vue
@@ -53,7 +53,7 @@ onUnmounted(() =>{
   <div class="card_container px-[22px] pt-[22px] pb-[23px] text-black">
     <div class="flex justify-between items-start mb-[13px]">
       <h6 class="card_title">
-        Avg. Staking Reward
+        Estimated Staking Rewards
       </h6>
       <div
         class="whitespace-nowrap relative w-[120px]"
@@ -140,7 +140,7 @@ onUnmounted(() =>{
     font-family: 'IBM Plex Sans';
     font-style: normal;
     font-weight: 500;
-    font-size: 18px;
+    font-size: 12px;
     line-height: 23px;
     letter-spacing: -0.01em;
     color: #000000;