Merge pull request #1734 from webdev403/fix/ui-issues-in-my-pools

Fix: UI issues in my pools section

Author: sameepsi

src/pages/PoolsPage/v3/MyDefiedgePoolsV3/DefiedgeLPItemDetails/index.scss

@@ -1,7 +1,7 @@
 @use 'styles/variables' as *;
 @use 'styles/breakpoints' as *;
 
-.gamma-liquidity-item-buttons {
+.defiedge-liquidity-item-buttons {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
@@ -16,7 +16,7 @@
   }
 }
 
-.gamma-liquidity-item-button {
-  height: 48px;
-  border-radius: 16px;
+.defiedge-liquidity-item-button {
+  height: 38px;
+  border-radius: 10px;
 }

src/pages/PoolsPage/v3/MyDefiedgePoolsV3/DefiedgeLPItemDetails/index.tsx

@@ -89,15 +89,15 @@ const DefiedgeLPItemDetails: React.FC<{ defiedgePosition: any }> = ({
           <small>{balance1 ? formatNumber(balance1) : 0}</small>
         </Box>
       </Box>
-      <Box mt={2} className='gamma-liquidity-item-buttons'>
+      <Box mt={2} className='defiedge-liquidity-item-buttons'>
         <Button
-          className='gamma-liquidity-item-button'
+          className='defiedge-liquidity-item-button'
           onClick={() => setShowAddLPModal(true)}
         >
           <small>{t('addLiquidity')}</small>
         </Button>
         <Button
-          className='gamma-liquidity-item-button'
+          className='defiedge-liquidity-item-button'
           onClick={() => setShowWithdrawModal(true)}
           disabled={defiedgePosition.lpAmount <= 0}
         >

src/pages/PoolsPage/v3/MyGammaPoolsV3/GammaLPItem/index.scss

@@ -5,6 +5,7 @@
   background-color: $secondary1;
   padding: 20px;
   border-radius: 10px;
+  position: relative;
   margin-top: 16px;
   @include media('screen', '<phone') {
     padding: 16px 12px;
@@ -21,7 +22,16 @@
 }
 
 .gamma-liquidity-item-expand {
-  cursor: pointer;
+  position: absolute;
   width: 24px;
   height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  background-color: $primaryLight;
+  color: $primary;
+  right: 20px;
+  top: 20px;
+  cursor: pointer;
 }

src/pages/PoolsPage/v3/MyICHIPools/ICHILPItem/index.scss

@@ -5,6 +5,7 @@
   background-color: $secondary1;
   padding: 20px;
   border-radius: 10px;
+  position: relative;
   margin-top: 16px;
   @include media('screen', '<phone') {
     padding: 16px 12px;
@@ -21,7 +22,16 @@
 }
 
 .ichi-liquidity-item-expand {
-  cursor: pointer;
+  position: absolute;
   width: 24px;
   height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  background-color: $primaryLight;
+  color: $primary;
+  right: 20px;
+  top: 20px;
+  cursor: pointer;
 }

src/pages/PoolsPage/v3/MyQuickswapPoolsV3/components/PositionList/index.tsx

@@ -42,7 +42,7 @@ export default function PositionList({
   }, [positions]);
 
   return (
-    <Box mb={-2}>
+    <Box>
       {_positionsOnOldFarming.map((p) => {
         return (
           <Box mb={2} key={p.tokenId.toString()}>

src/pages/PoolsPage/v3/MySteerPoolsV3/SteerLPItem/index.scss

@@ -5,6 +5,7 @@
   background-color: $secondary1;
   padding: 20px;
   border-radius: 10px;
+  position: relative;
   margin-top: 16px;
   @include media('screen', '<phone') {
     padding: 16px 12px;
@@ -21,7 +22,16 @@
 }
 
 .steer-liquidity-item-expand {
-  cursor: pointer;
+  position: absolute;
   width: 24px;
   height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  background-color: $primaryLight;
+  color: $primary;
+  right: 20px;
+  top: 20px;
+  cursor: pointer;
 }

src/pages/PoolsPage/v3/MySteerPoolsV3/SteerLPItemDetails/index.scss

@@ -17,6 +17,6 @@
 }
 
 .steer-liquidity-item-button {
-  height: 48px;
-  border-radius: 16px;
+  height: 38px;
+  border-radius: 10px;
 }

src/pages/PoolsPage/v3/MySteerPoolsV3/index.tsx

@@ -19,7 +19,7 @@ export default function MySteerPoolsV3({ isForAll }: { isForAll?: boolean }) {
   return (
     <>
       {steerPositions && steerPositions.length > 0 ? (
-        <Box style={{ marginTop: '32px' }}>
+        <Box>
           {steerPositions.map((position, index) => (
             <SteerLPItem key={index} position={position} />
           ))}