From 691ef0cccb0e7c75e12206f24a45432faa9401db Mon Sep 17 00:00:00 2001
From: demogorgod <ssnajeeb2020@manchester.edu>
Date: Wed, 13 Sep 2023 12:55:37 -0400
Subject: [PATCH 1/6] Fix app bugs on Safari browser and Brave

---
 apps/web/src/layouts/default-layout.vue       |  6 +-
 .../overview/components/BreakdownTable.vue    | 47 +++++++---
 .../src/pages/overview/components/Staking.vue | 88 +++++++++++--------
 .../pages/overview/components/StakingAvg.vue  |  2 +-
 4 files changed, 94 insertions(+), 49 deletions(-)

diff --git a/apps/web/src/layouts/default-layout.vue b/apps/web/src/layouts/default-layout.vue
index 3f0db2b55..8b8197d04 100644
--- a/apps/web/src/layouts/default-layout.vue
+++ b/apps/web/src/layouts/default-layout.vue
@@ -85,7 +85,7 @@ onUnmounted(() =>{
 
         <div
           v-if="screenWidth >= 450"
-          class="flex flex-wrap items-center gap-50 h-full"
+          class="flex flex-wrap items-center gap-50 h-full "
         >
           <router-link
             to="/"
@@ -105,7 +105,7 @@ onUnmounted(() =>{
 
         <div
           v-else
-          class="nav_items nav_items_active relative"
+          class="nav_items nav_items_active relative "
         >
           <button
             class="flex items-center gap-[10px]"
@@ -163,7 +163,7 @@ onUnmounted(() =>{
           </div>
         </div>
 
-        <div class="flex items-center justify-between gap-[45px] 600s:gap-[10px] text-white">
+        <div class="flex items-center justify-between gap-[45px] 600s:gap-[10px] text-white h-[76px]">
           <button
             id="setting_modal_button"
           >
diff --git a/apps/web/src/pages/overview/components/BreakdownTable.vue b/apps/web/src/pages/overview/components/BreakdownTable.vue
index fc77ba529..7f8423eb0 100644
--- a/apps/web/src/pages/overview/components/BreakdownTable.vue
+++ b/apps/web/src/pages/overview/components/BreakdownTable.vue
@@ -309,6 +309,17 @@ const setTableData = () =>{
 
 }
 
+const checkAll = ref(false)
+watch(checkAll, () =>{
+  filteredData.value.map(item =>{
+    if(checkAll.value && !checkedItems.value.includes(item)){
+      checkedItems.value.push(item)
+    }else if(!checkAll && checkedItems.value.includes(item)){
+      removeItemFromCheckedList(item)
+    }
+  })
+})
+
 watch(rawUserAnalytics, () =>{
   setTableData()
   filterData()
@@ -323,7 +334,7 @@ onMounted(() =>{
 </script>
 
 <template>
-  <div class="card_container pt-[42px] pb-[34px] text-black">
+  <div class="card_container pt-[42px] pb-[34px] text-black flex flex-col">
     <div class="px-[32px]">
       <div class="flex flex-wrap gap-[20px] justify-between items-start pb-[20px] border-b border-b-[#EAECF0] ">
         <div>
@@ -338,7 +349,7 @@ onMounted(() =>{
         </div>
         <div class="flex items-start gap-[12px]">
           <button
-            class="flex items-center gap-[8px] export_button"
+            class="flex items-center gap-[8px] export_button h-[38px]"
             @click="exportFile()"
           >
             <vue-feather
@@ -406,8 +417,8 @@ onMounted(() =>{
         </div>
       </div>
     </div>
-    <div class="w-full overflow-x-scroll">
-      <table class="w-full">
+    <div class="w-full overflow-x-scroll h-full min-h-[200px]">
+      <table class="w-full min-h-[200px] ">
         <thead>
           <tr class="bg-[#FCFCFD] border-b border-b-[#EAECF0] whitespace-nowrap">
             <th
@@ -416,6 +427,22 @@ onMounted(() =>{
               class="table_header "
             >
               <div class="flex items-center gap-[5px]">
+                <div
+                  v-if="header.value === 'blank_column'"
+                  class="flex items-center"
+                >
+                  <button
+                    class="checkbox_button"
+                    @click="checkAll = !checkAll"
+                  >
+                    <vue-feather
+                      v-show="checkAll"
+                      type="check"
+                      size="20"
+                      class="icon w-[14px] h-min"
+                    />
+                  </button>
+                </div>
                 <div
                   v-if="header.value === 'bal'"
                   class="flex items-center tooltip_container"
@@ -469,20 +496,21 @@ onMounted(() =>{
                   {{ header.title }}
                 </div>
                 <button 
-                  class="ml-[4px] flex flex-col items-center justify-between"
-                  :class="selectedHeader === header.value? 'opacity-100' : 'opacity-25'"
+                  class="ml-[4px] h-min"
+                  :class="selectedHeader === header.value? 'opacity-100 text-primary' : 'opacity-90 text-grey_4'"
                   @click="selectedHeader = header.value, selectedOrientation === 'ascending'? selectedOrientation = 'descending' : selectedOrientation = 'ascending'"
                 >
                   <vue-feather
                     type="arrow-up"
                     size="20"
-                    class="icon h-min "
+                    class="icon h-[8px]"
                     :class="selectedOrientation === 'ascending'? 'w-[10px]' : 'w-[8px] opacity-50'"
-                  />
+                  /> 
+                  <br>
                   <vue-feather
                     type="arrow-down"
                     size="20"
-                    class="icon h-min"
+                    class="icon h-[8px]"
                     :class="selectedOrientation === 'descending'? 'w-[10px]' : 'w-[8px] opacity-50'"
                   />
                 </button>
@@ -840,7 +868,6 @@ onMounted(() =>{
 }
 .card_container{
     width: 100%;
-    height: 100%;
     box-sizing: border-box;
     background: #FFFFFF;
     border: 1px solid #D0D5DD;
diff --git a/apps/web/src/pages/overview/components/Staking.vue b/apps/web/src/pages/overview/components/Staking.vue
index 6dd44d097..055f9da8e 100644
--- a/apps/web/src/pages/overview/components/Staking.vue
+++ b/apps/web/src/pages/overview/components/Staking.vue
@@ -53,34 +53,17 @@ const handleInputOnAmountToStake = (event: any) => {
   formattedAmountToStake.value = parts.join('.')
 }
 
-const handleOutsideClick = (event: any) => {
-  const selectWalletInputContainer = document.getElementById('selectWalletInputContainer')
-  const selectWalletOptionsCard = document.getElementById('selectWalletOptionsCard')
-  const selectWalletInputButton = document.getElementById('selectWalletInputButton')
-  if (selectWalletInputContainer && selectWalletOptionsCard && selectWalletInputButton) {
-    if (openSelectWalletInput.value) {
-      if (!selectWalletInputContainer.contains(event.target)) {
-        if (!selectWalletInputButton.contains(event.target)) {
-          openSelectWalletInput.value = false
-        }
-      }
-    }
-  }
-
-  const termsOfServiceContainer = document.getElementById('termsOfServiceContainer')
-  const termsOfServiceCard = document.getElementById('termsOfServiceCard')
-  const termsOfServiceButton = document.getElementById('termsOfServiceButton')
-
-
-  if (termsOfServiceCard && termsOfServiceButton && termsOfServiceContainer) {
-    if (openTermsOfService.value) {
-      if (!termsOfServiceCard.contains(event.target)) {
-        if (!termsOfServiceButton.contains(event.target)) {
-          openTermsOfService.value = false
-        }
-      }
-    }
+const selectAmountInput = () => {
+  const inputElement = document.getElementById('amount_input')
+  
+  if(inputElement){
+
+    inputElement.setSelectionRange(0, inputElement.value.length)
+  
+    // For mobile devices
+    inputElement.select()
   }
+  
 }
 
 const aggregateAddressesByProvider = () => {
@@ -159,7 +142,6 @@ watch(user, async () => {
 })
 
 onMounted(async () => {
-  window.addEventListener('click', handleOutsideClick)
   aggregateAddressesByProvider()
   currentEthPrice.value = Math.round((await getCurrentPrice({ coin: 'ETH', currency: 'USD' })) * 100) / 100
   estimatedFees.value = await getDepositFees()
@@ -171,8 +153,39 @@ onMounted(async () => {
   }
 })
 
-onUnmounted(() => {
-  window.removeEventListener('click', handleOutsideClick)
+const handleOutsideClickForWalletInput = (event: any) => {
+  const selectWalletInputContainer = document.getElementById('selectWalletInputContainer')
+  const selectWalletInputButton = document.getElementById('selectWalletInputButton')
+
+  if(!selectWalletInputContainer?.contains(event.target) && !selectWalletInputButton?.contains(event.target)){
+    openSelectWalletInput.value = false
+  }
+}
+
+const handleOutsideClickForTermsOfService = (event: any) => {
+  const termsOfServiceContainer = document.getElementById('termsOfServiceContainer')
+  const termsOfServiceButton = document.getElementById('termsOfServiceButton')
+
+
+  if(!termsOfServiceContainer?.contains(event.target) && !termsOfServiceButton?.contains(event.target)){
+    openTermsOfService.value = false
+  }
+}
+
+watch(openSelectWalletInput, ()=>{
+  if(openSelectWalletInput.value){
+    window.addEventListener('click', handleOutsideClickForWalletInput)
+  }else {
+    window.removeEventListener('click', handleOutsideClickForWalletInput)
+  }
+})
+
+watch(openTermsOfService, ()=>{
+  if(openTermsOfService.value){
+    window.addEventListener('click', handleOutsideClickForTermsOfService)
+  }else {
+    window.removeEventListener('click', handleOutsideClickForTermsOfService)
+  }
 })
 
 const handleDeposit = async () => {
@@ -221,7 +234,10 @@ const handleDeposit = async () => {
     <h6 class="addressBalance mb-[12px]">
       Wallet Balance
     </h6>
-    <h5 class="addressBalance_amount mb-[5px]">
+    <h5
+      class="addressBalance_amount mb-[5px]"
+      :class="addressBalance? 'font-[500]' : 'font-[300]'"
+    >
       {{ addressBalance ? addressBalance : '- - -' }}
     </h5>
     <div class="text-[12px] mb-[13px] text-blue-400">
@@ -301,13 +317,16 @@ const handleDeposit = async () => {
     </div>
 
 
-    <div class="card_input text-black px-[10px] py-[14px]">
+    <button
+      class="card_input text-black px-[10px] py-[14px] cursor-text"
+      @click="selectAmountInput"
+    >
       <div class="flex items-center gap-[8px]">
         <!-- <h6 class="text-[#667085]">
           $
         </h6> -->
         <input
-          id="amount"
+          id="amount_input"
           v-model="formattedAmountToStake"
           type="text"
           pattern="^\d{1,3}(,\d{3})*(\.\d+)?$"
@@ -321,7 +340,7 @@ const handleDeposit = async () => {
           ETH
         </h6>
       </div>
-    </div>
+    </button>
 
     <p class="card_message">
       The amount to stake in set currency
@@ -459,7 +478,6 @@ const handleDeposit = async () => {
 
 .addressBalance_amount {
   font-style: normal;
-  font-weight: 500;
   font-size: 28px;
   line-height: 20px;
   letter-spacing: -0.01em;
diff --git a/apps/web/src/pages/overview/components/StakingAvg.vue b/apps/web/src/pages/overview/components/StakingAvg.vue
index d9815076f..6fc48d900 100644
--- a/apps/web/src/pages/overview/components/StakingAvg.vue
+++ b/apps/web/src/pages/overview/components/StakingAvg.vue
@@ -64,7 +64,7 @@ onUnmounted(() =>{
       >
         <button
           :id="`${props.viewId}_staking_avg_timeframe_button`"
-          class="flex justify-between items-center gap-[8px] px-[10px] py-[8px] card_input w-[120px] outline-none"
+          class="flex justify-between items-center gap-[8px] px-[10px] py-[8px] card_input w-[120px] outline-none h-[38px]"
           @click="openTimeFrameOptions = !openTimeFrameOptions"
         >
           {{ selectedTimeframe }}

From b14e14f8a1b61041870c5760e86d27e5fc3b767d Mon Sep 17 00:00:00 2001
From: demogorgod <ssnajeeb2020@manchester.edu>
Date: Thu, 14 Sep 2023 01:34:00 -0400
Subject: [PATCH 2/6] Fix Operator page and connect wallet modal safari and
 brave issues

---
 apps/web/src/layouts/default-layout.vue   |  2 +-
 apps/web/src/pages/operators/Operator.vue | 22 ++++++++++------------
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/layouts/default-layout.vue b/apps/web/src/layouts/default-layout.vue
index 8b8197d04..68aeea73d 100644
--- a/apps/web/src/layouts/default-layout.vue
+++ b/apps/web/src/layouts/default-layout.vue
@@ -308,7 +308,7 @@ onUnmounted(() =>{
               v-show="currentSlide === 2"
               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]">
+              <h6 class="nav_items flex items-center mb-[20px] h-[29px]">
                 <button @click="authFlowCardNumber = 1, selectedProvider = null">
                   <vue-feather
                     type="chevron-left"
diff --git a/apps/web/src/pages/operators/Operator.vue b/apps/web/src/pages/operators/Operator.vue
index 2358326d3..34b82bd71 100644
--- a/apps/web/src/pages/operators/Operator.vue
+++ b/apps/web/src/pages/operators/Operator.vue
@@ -123,7 +123,9 @@ watch(selectedWallet, async () =>{
   selectedPublicNodeURL.value = ''
   selectedCollateral.value = ''
 
-  await getUserOperators()
+  // TODO: @Chris change this back to the composable please! 
+  // maybe have Operators as an object for each account that they have connected? since it depends on the selected wallet.
+  // await getUserOperators()
 
   if (selectedWallet.value.address === '') {
     availableOperatorIDs.value = []
@@ -245,7 +247,7 @@ async function submitRegisterOperatorForm() {
       </h6>
 
       <button
-        class="flex items-center gap-[8px] export_button  hover:text-blue_3 hover:border-blue_3"
+        class="flex items-center gap-[8px] export_button  hover:text-blue_3 hover:border-blue_3 h-[38px]"
         :disabled="!user?.accounts"
         @click="openAddOperatorModal = true"
       >
@@ -329,7 +331,7 @@ async function submitRegisterOperatorForm() {
               </button>
               <div
                 v-show="openSelectWalletOptions"
-                class="z-[3] absolute top-[110%] left-0 w-full border rounded-[8px] border-[#D0D5DD] p-[15px] bg-white"
+                class="z-[3] absolute top-[110%] left-0 w-full border rounded-[8px] border-[#D0D5DD] p-[15px] bg-white max-h-[200px] overflow-auto"
               >
                 <h6 class="text-[12px]">
                   Your Connected Wallets
@@ -340,17 +342,11 @@ async function submitRegisterOperatorForm() {
                   type="button"
                   class="border-y border-y-grey_1 hover:border-y-grey_3
                    text-grey_4 my-[10px] w-full flex justify-between truncate"
-                  @click="selectedWallet = {address: act.address, wallet_provider: act.walletProvider}"
+                  @click="selectedWallet = {address: act.address, wallet_provider: act.walletProvider}, openSelectWalletOptions = false"
                 >
                   <span>{{ act.walletProvider }}</span>
                   <span>{{ convertString(act.address) }}</span>
                 </button>
-                <button
-                  class="text-primary underline"
-                  @click="openWalletsModal = true"
-                >
-                  Connect Wallet
-                </button>
               </div>
             </div>
             <div class="text-[12px] mt-[4px] text-grey_4 pl-[5px] whitespace-normal">
@@ -387,7 +383,7 @@ async function submitRegisterOperatorForm() {
               </button> -->
               <div
                 v-show="openSelectOperatorID"
-                class="z-[3] absolute top-[110%] left-0 w-full border rounded-[8px] border-[#D0D5DD] p-[15px] bg-white"
+                class="z-[3] absolute top-[110%] left-0 w-full border rounded-[8px] border-[#D0D5DD] p-[15px] bg-white max-h-[200px] overflow-auto"
               >
                 <h6 class="text-[12px]">
                   Avaliable Operators
@@ -490,6 +486,7 @@ async function submitRegisterOperatorForm() {
               <button
                 type="submit"
                 class="export_button"
+                @click="submitRegisterOperatorForm"
               >
                 <span v-if="loadingRegisteredOperators">Submitting</span>
                 <span v-else>Submit</span>
@@ -513,7 +510,7 @@ async function submitRegisterOperatorForm() {
         </div>
         <div class="flex items-start gap-[12px]">
           <button
-            class="flex items-center gap-[8px] export_button"
+            class="flex items-center gap-[8px] export_button h-[38px]"
             @click="exportFile(checkedItems, filteredData)"
           >
             <vue-feather
@@ -683,6 +680,7 @@ async function submitRegisterOperatorForm() {
     letter-spacing: -0.01em;
     color: #101828;
     margin-bottom: 6px;
+    height: 34px;
 }
 .dynamic_padding{
   padding: 12px 24px;

From 4d62e1732daaa3347d2e9902612cd9212a0754da Mon Sep 17 00:00:00 2001
From: demogorgod <ssnajeeb2020@manchester.edu>
Date: Thu, 14 Sep 2023 21:39:29 -0400
Subject: [PATCH 3/6] Fix settings tabs on safari

---
 apps/web/src/layouts/default-layout.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/layouts/default-layout.vue b/apps/web/src/layouts/default-layout.vue
index 68aeea73d..e694cda9b 100644
--- a/apps/web/src/layouts/default-layout.vue
+++ b/apps/web/src/layouts/default-layout.vue
@@ -189,7 +189,7 @@ onUnmounted(() =>{
           id="setting_modal"
           class="absolute right-[60px] 800s:right-[5%] bg-white top-[80%] w-[200px] setting_modal"
         >
-          <button class="border-b border-[#EAECF0] flex items-center px-[16px] py-[10px] gap-[12px] w-full">
+          <button class="border-b border-[#EAECF0] flex items-center px-[16px] py-[10px] gap-[12px] w-full h-[41px]">
             <vue-feather
               type="user"
               size="36"
@@ -231,7 +231,7 @@ onUnmounted(() =>{
             </span>
           </button> -->
           <button
-            class="border-t border-[#EAECF0] flex items-center px-[16px] py-[10px] gap-[12px] w-full"
+            class="border-t border-[#EAECF0] flex items-center px-[16px] py-[10px] gap-[12px] w-full h-[41px]"
             :disabled="!user"
             @click="logout"
           >

From 72d302803b70d78402c9b505dc164149e9df99ba Mon Sep 17 00:00:00 2001
From: demogorgod <ssnajeeb2020@manchester.edu>
Date: Thu, 14 Sep 2023 21:41:22 -0400
Subject: [PATCH 4/6] Fix pages numbers tabs

---
 apps/web/src/pages/overview/components/BreakdownTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/pages/overview/components/BreakdownTable.vue b/apps/web/src/pages/overview/components/BreakdownTable.vue
index 7f8423eb0..d6d2a7db2 100644
--- a/apps/web/src/pages/overview/components/BreakdownTable.vue
+++ b/apps/web/src/pages/overview/components/BreakdownTable.vue
@@ -636,7 +636,7 @@ onMounted(() =>{
     </div>
     <div class="flex justify-between items-center mt-[12px]">
       <div class="page_number ml-[56px]">
-        Page {{ currentPage }} of {{ totalPages }}
+        Page {{ totalPages === 0? 0 : currentPage }} of {{ totalPages }}
       </div>
       <div class="flex items-center gap-[12px]">
         <button

From c976b48d01a03733f1e28a5a19230aa2e9245061 Mon Sep 17 00:00:00 2001
From: demogorgod <ssnajeeb2020@manchester.edu>
Date: Fri, 15 Sep 2023 11:06:43 -0400
Subject: [PATCH 5/6] Fix scroll bar shifting isssue

---
 apps/web/src/layouts/default-layout.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/layouts/default-layout.vue b/apps/web/src/layouts/default-layout.vue
index e694cda9b..e8cc1feba 100644
--- a/apps/web/src/layouts/default-layout.vue
+++ b/apps/web/src/layouts/default-layout.vue
@@ -59,7 +59,11 @@ const handleOutsideClick = (event: any) => {
   }
 }
 
+const doesScrollBarExist = ref(true)
+
 onMounted(() => {
+  doesScrollBarExist.value =  document.documentElement.scrollHeight > document.documentElement.clientHeight
+
   window.addEventListener('click', handleOutsideClick)
 })
 
@@ -249,7 +253,7 @@ onUnmounted(() =>{
 
       <div
         class="relative text-black"
-        :class="openWalletsModal? 'overflow-hidden pr-[15px]' : ''"
+        :class="openWalletsModal && doesScrollBarExist? 'overflow-hidden pr-[15px]' : ''"
       >
         <slot />
         <div

From b71fef3b6fb807925b459f88b7e08724e9c3428d Mon Sep 17 00:00:00 2001
From: demogorgod <ssnajeeb2020@manchester.edu>
Date: Fri, 15 Sep 2023 11:16:45 -0400
Subject: [PATCH 6/6] Fix scroll bar shifting isssue

---
 apps/web/src/layouts/default-layout.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/layouts/default-layout.vue b/apps/web/src/layouts/default-layout.vue
index e8cc1feba..8e861c1e1 100644
--- a/apps/web/src/layouts/default-layout.vue
+++ b/apps/web/src/layouts/default-layout.vue
@@ -79,7 +79,7 @@ onUnmounted(() =>{
     <div :class="openWalletsModal? 'flex flex-col h-screen' : ''">
       <div
         class="px-[60px] 800s:px-[5%]  pt-[17px] pb-[19px] flex flex-wrap gap-[20px] justify-between items-center bg-black relative"
-        :class="openWalletsModal? 'pr-[75px]' : ''"
+        :class="openWalletsModal && doesScrollBarExist? 'pr-[75px]' : ''"
       >
         <img
           src="/casimir.svg"