From 23a6a036bfed7532ddcc6f16ab48f49e88287b58 Mon Sep 17 00:00:00 2001
From: GeorginaShall <georgina.shall@creoshift.com>
Date: Fri, 27 Dec 2024 11:26:08 +0200
Subject: [PATCH] overall-home+scroll+back-on-mobile

---
 src/components/stakingCalculator.tsx        |  2 +-
 src/components/stakingPoolCard.tsx          | 10 ++---
 src/components/stakingPoolDetailsView.tsx   |  4 +-
 src/components/stakingPoolsList.tsx         |  8 ++--
 src/components/unstakingCalculator.tsx      |  2 +-
 src/components/withdrawUnstakedZilPanel.tsx | 16 ++++---
 src/components/withdrawZilView.tsx          | 11 +++--
 src/pages/index.tsx                         | 48 ++++++++++++++++-----
 8 files changed, 67 insertions(+), 34 deletions(-)

diff --git a/src/components/stakingCalculator.tsx b/src/components/stakingCalculator.tsx
index 450622c..8635548 100644
--- a/src/components/stakingCalculator.tsx
+++ b/src/components/stakingCalculator.tsx
@@ -206,7 +206,7 @@ const StakingCalculator: React.FC = () => {
         } 
 
         {stakeContractCallError && (
-          <div className="text-red-500 text-center">
+          <div className="text-red1 text-center">
             {stakeContractCallError.message}
           </div>
         )}
diff --git a/src/components/stakingPoolCard.tsx b/src/components/stakingPoolCard.tsx
index 804c6c7..7d3695a 100644
--- a/src/components/stakingPoolCard.tsx
+++ b/src/components/stakingPoolCard.tsx
@@ -49,7 +49,7 @@ const StakingPoolCard: React.FC<StakingPoolCardProps> = ({
                 {stakingPoolData.definition.tokenSymbol}
               </div>
             </div>
-            <div className="base2 lg:block hidden">
+            <div className="base2 lg:block hidden text-aqua1">
               {userStakingPoolData &&
               userStakingPoolData.stakingTokenAmount ? (
                 <> 
@@ -60,7 +60,7 @@ const StakingPoolCard: React.FC<StakingPoolCardProps> = ({
                     )} ${stakingPoolData.definition.tokenSymbol}`}
                 </>
               ) : (
-                <span className="text-gray2">-</span>
+                <span className="text-aqua1">-</span>
               )}
             </div>
             <Image
@@ -78,7 +78,7 @@ const StakingPoolCard: React.FC<StakingPoolCardProps> = ({
                 {
                   stakingPoolData.data ? (
                     <div
-                      className={`base max-xs:ml-2 xs:max-md:ml-6 ${
+                      className={`base max-xs:ml-2 xs:max-lg:ml-6 ${
                         stakingPoolData.data.votingPower * 100 >= 50
                           ? 'text-red1'
                           : stakingPoolData.data.votingPower * 100 >= 30
@@ -90,7 +90,7 @@ const StakingPoolCard: React.FC<StakingPoolCardProps> = ({
                     </div>
                   ) : (
                     <>
-                      <span className='base max-xs:ml-2 xs:max-md:ml-6'>VP</span>
+                      <span className='base max-xs:ml-2 xs:max-lg:ml-6'>VP</span>
                       <span className="w-[3em] ml-1 animated-gradient" />
                     </>
                   )
@@ -108,7 +108,7 @@ const StakingPoolCard: React.FC<StakingPoolCardProps> = ({
                   }
                 </div>
               </div>
-              <div className="flex base text-aqua1 max-md:order-1">
+              <div className="flex base text-gray2 max-md:order-1 ">
                 APR{' '}
                 {
                   stakingPoolData.data ? (
diff --git a/src/components/stakingPoolDetailsView.tsx b/src/components/stakingPoolDetailsView.tsx
index 1b911d2..11008f1 100644
--- a/src/components/stakingPoolDetailsView.tsx
+++ b/src/components/stakingPoolDetailsView.tsx
@@ -74,8 +74,8 @@ const StakingPoolDetailsView: React.FC<StakingPoolDetailsViewProps> = ({
   const humanReadableStakingToken = (value: bigint) => formatUnitsToHumanReadable(value, stakingPoolData.definition.tokenDecimals);
 
   return (
-    <div className="relative overflow-y-auto max-h-[calc(100vh-38vh)] xs:max-h-[calc(100vh-30vh)] lg:max-h-[calc(100vh-20vh)]
-      scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2"
+    <div className="relative overflow-y-auto max-h-[calc(90vh-10vh)] sm:max-h-[calc(90vh-15vh)]
+      scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2 pb-2"
     >
       <div className="items-center flex justify-between py-1 lg:py-7.5">
         <div className="max-lg:ms-1 items-center flex">
diff --git a/src/components/stakingPoolsList.tsx b/src/components/stakingPoolsList.tsx
index 40f8a95..57ff5d4 100644
--- a/src/components/stakingPoolsList.tsx
+++ b/src/components/stakingPoolsList.tsx
@@ -50,11 +50,11 @@ const StakingPoolsList: React.FC = () => {
 
   return (
     <>
-      <div className="h3 text-white2 max-lg:w-1/4  mb-4">
+      <div className="h3 text-white2 sm:max-lg:w-1/4 mb-4 max-h-[10vh]">
         Liquid Validators
       </div>
 
-      <div className="flex gap-x-2.5 mt-6 mb-5">
+      <div className="flex gap-x-2.5 mt-6 mb-5 max-h-[5vh]">
         <SortBtn
           variable="APR"
           isClicked={isAscending && sortCriteria == 'APR'}
@@ -72,8 +72,8 @@ const StakingPoolsList: React.FC = () => {
         />
       </div>
 
-      <div className="grid grid-cols-1 gap-2.5 lg:gap-4 overflow-y-auto max-h-[calc(100vh-38vh)] xs:max-h-[calc(100vh-30vh)] lg:max-h-[calc(100vh-27vh)]
-       scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2 lg:pb-10">
+      <div className="grid grid-cols-1 gap-2.5 lg:gap-4 overflow-y-auto max-h-[calc(90vh-25vh)]
+       scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2 pb-20">
         {sortedStakingPoolsData.map(({ stakingPool, userData }) => (
           <StakingPoolCard
             key={stakingPool.definition.id}
diff --git a/src/components/unstakingCalculator.tsx b/src/components/unstakingCalculator.tsx
index d9b46f4..cd76563 100644
--- a/src/components/unstakingCalculator.tsx
+++ b/src/components/unstakingCalculator.tsx
@@ -202,7 +202,7 @@ const UnstakingCalculator: React.FC = () => {
           </div>
 
           {unstakeContractCallError && (
-            <div className="text-red-500 text-center">
+            <div className="text-red1 text-center">
               {unstakeContractCallError.message}
             </div>
           )}
diff --git a/src/components/withdrawUnstakedZilPanel.tsx b/src/components/withdrawUnstakedZilPanel.tsx
index 708b69c..faf0e2a 100644
--- a/src/components/withdrawUnstakedZilPanel.tsx
+++ b/src/components/withdrawUnstakedZilPanel.tsx
@@ -65,12 +65,16 @@ const WithdrawZilPanel: React.FC<WithdrawZilPanelProps> = ({
           >
             <div className="items-center h4 w-full flex justify-between text-gray4">
               {stakingPoolData.data ? (
-                <div>
-                  {parseFloat(
-                    formatUnits(item.zilAmount, 18)
-                  ).toFixed(3)}{' '}
-                  ZIL
-                </div>
+                 <div className='flex'>
+                 <div>
+                   {parseFloat(
+                     formatUnits(item.zilAmount, 18)
+                   ).toFixed(3)}{' '}
+                   ZIL
+                 </div>
+                 <div className="body1-s lg:ml-2.5  mt-2">avZIL</div>
+ 
+                 </div>
               ) : (
                 <div className="w-[4em] h-[1em] animated-gradient" />
               )}
diff --git a/src/components/withdrawZilView.tsx b/src/components/withdrawZilView.tsx
index 683792d..2be2c56 100644
--- a/src/components/withdrawZilView.tsx
+++ b/src/components/withdrawZilView.tsx
@@ -22,20 +22,23 @@ const WithdrawZilView: React.FC = () => {
   ]
 
   return (
-    <div className="flex flex-col gap-4" >
-      <div className=" text-center lg:text-end">
+    <div className="relative overflow-y-auto max-h-[calc(90vh-15vh)]   
+    scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2
+     flex flex-col gap-2" >
+      <div className=" text-center lg:text-end max-h-[20vh]">
         <h1 className="hero text-white mt-4">
           <span className="hidden lg:block">Staking Portal</span>
           <span className="block lg:hidden">Claims</span>
         </h1>
-        <p className="w-2/3 sm:w-1/2 md:w-1/4 lg:w-full max-lg:mx-auto mt-2 lg:mt-5 body2">
+        <p className="w-2/3 sm:w-1/2 md:w-1/4 lg:w-full max-lg:mx-auto my-2 lg:my-5 body2">
           Below are withdrawal claims waiting for you       
         </p>
       </div>
 
       {
         unstakingItems.length > 0 ? (
-          <div className="grid grid-cols-1 gap-4 lg:gap-5 overflow-y-auto max-h-[calc(100vh-38vh)] xs:max-h-[calc(100vh-42vh)] lg:max-h-[calc(100vh-27vh)]
+
+          <div className="grid grid-cols-1 gap-4 lg:gap-5 overflow-y-auto  max-h-[calc(90vh-30vh)]
           scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2 lg:pb-10">
             {
               unstakingItems.map((item, claimIdx) => (
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 3bf4d07..b6ce788 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -48,7 +48,7 @@ const HomePage = () => {
   const [mobileShowClaims, setMobileShowClaims] = useState<boolean>(false);
 
   const mobileOverlayWrapper = (children: React.ReactNode) => (
-    <div className='absolute lg:hidden top-0 left-0 z-25 h-full w-full bg-black p-4 pt-[5em]'>
+    <div className='absolute lg:hidden top-0 left-0 z-25 h-full w-full bg-black p-4 lg:pt-[10vh]'>
       {children}
     </div>
   )
@@ -59,7 +59,8 @@ const HomePage = () => {
         !isWalletConnected ? (
           <LoginView />
         ) : stakingPoolForView ? (
-          <div className="bg-black xs:pt-5 lg:pt-7.5 xs:px-5 lg:px-7.5 rounded-2.5xl">
+          <div className="bg-black xs:pt-5 lg:pt-7.5 xs:px-5 lg:px-7.5 rounded-2.5xl overflow-y-auto  max-h-[80vh]
+          scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2">
             <StakingPoolDetailsView
               selectStakingPoolForStaking={(stakingPoolId) => {
                 selectStakingPoolForView(null);
@@ -105,14 +106,14 @@ const HomePage = () => {
   )
 
   const mobileBottomNavition = (
-    <div className='fixed bottom-0 left-0 lg:hidden w-full mt-7.5'>
+    <div className='fixed bottom-0 left-0 lg:hidden w-full mt-7.5 bg-black pt-1.5'>
       <div className='flex justify-between gap-1 mb-4 mx-2.5'>
       {
         isWalletConnected ? (
           <>
             {
               mobileShowClaims && (
-                <div className='min-w-[200px] xs:min-w-[320px] mx-auto'>
+                <div className='max-lg:w-full lg:min-w-[320px] mx-auto'>
                   <Button
                     type="default"
                     size="large"
@@ -134,7 +135,7 @@ const HomePage = () => {
             }
             {
               !mobileShowClaims && stakingPoolForView && (
-                <div className='w-1/2'>
+                <div className={`${!mobileShowClaims && availableForUnstaking.length + pendingUnstaking.length != 0 ? "w-1/2" : "w-full"}`}>
                 <Button
                   type="default"
                   size="large"
@@ -177,9 +178,33 @@ const HomePage = () => {
             }
           </>
         ) : (
-          connectWallet
+      <>
+       {       stakingPoolForView && (
+              <div className='w-1/2'>
+              <Button
+                type="default"
+                size="large"
+                className='btn-secondary-lg group justify-start'
+                onClick={() => {
+                  selectStakingPoolForView(null);
+                }}
+              > <Image
+                  className="mx-1 xs:mx-3 h-[24px] w-[24px] transform transition-transform ease-out duration-500 group-hover:-translate-x-2"
+                  src={ArrowBack}
+                  alt={`arrow icon`}
+                  width={24}
+                  height={24}
+                /> 
+                Back
+              </Button></div>
+            ) }
+            <div className={`${stakingPoolForView ? "xs:w-1/2" : "w-full"}`}>
+            {connectWallet}
+           </div>
+            </>
+  
         )
-      }
+      })
     </div></div>
   )
 
@@ -187,7 +212,7 @@ const HomePage = () => {
     <div className="h-screen w-screen relative">
 
       {/* Header */}
-      <div className="absolute z-50 top-0 left-0 h-[4em] w-full flex items-center justify-center text-white border-b-2 border-white">
+      <div className="h-[10vh] w-full flex items-center justify-center text-white border-b-2 border-white">
         <div className="flex max-w-screen-2xl w-full justify-between px-4">
 
           <div className="flex items-center">
@@ -233,10 +258,11 @@ const HomePage = () => {
         </div>
       </div>
 
-      <div className="relative max-w-screen-2xl mx-auto h-screen overflow-y-hidden">
-        <div className='grid grid-cols-1 lg:grid-cols-2 gap-5 px-4 pt-[5em]'>
+      <div className={` ${(mobileShowClaims || stakingPoolForView || availableForUnstaking.length + pendingUnstaking.length != 0) ? 'lg:h-[90vh] h-[80vh] ' : ' h-[90vh] ' } relative max-w-screen-2xl mx-auto 
+      overflow-y-hidden `}>
+        <div className='grid grid-cols-1 lg:grid-cols-2 gap-5 px-4 pt-3 lg:pt-[10vh]'>
         {/* Left column */}
-        <div className="bg-black xs:p-6 rounded-2.5xl">
+        <div className="bg-black p-2 xs:p-6 rounded-2.5xl">
           <StakingPoolsList />
         </div>