feat: rework button active states (#1772)

aave · Sep 4, 2023 · 464350e · 464350e · github-actions · Sep 4, 2023
1 parent 1f5d2df
commit 464350e
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 53 deletions.
diff --git a/src/modules/dashboard/lists/BorrowedPositionsList/BorrowedPositionsListItem.tsx b/src/modules/dashboard/lists/BorrowedPositionsList/BorrowedPositionsListItem.tsx
@@ -152,23 +152,23 @@ const BorrowedPositionsListItemDesktop = ({
       </ListColumn>
 
       <ListButtonsColumn>
-        <Button disabled={disableRepay} variant="contained" onClick={onOpenRepay}>
-          <Trans>Repay</Trans>
-        </Button>
         {showSwitchButton ? (
           <Button
             disabled={disableSwitch}
-            variant="outlined"
+            variant="contained"
             onClick={onDetbSwitchClick}
             data-cy={`swapButton`}
           >
             <Trans>Switch</Trans>
           </Button>
         ) : (
-          <Button disabled={disableBorrow} variant="outlined" onClick={onOpenBorrow}>
+          <Button disabled={disableBorrow} variant="contained" onClick={onOpenBorrow}>
             <Trans>Borrow</Trans>
           </Button>
         )}
+        <Button disabled={disableRepay} variant="outlined" onClick={onOpenRepay}>
+          <Trans>Repay</Trans>
+        </Button>
       </ListButtonsColumn>
     </ListItemWrapper>
   );
@@ -252,30 +252,30 @@ const BorrowedPositionsListItemMobile = ({
       </Row>
 
       <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mt: 5 }}>
-        <Button
-          disabled={disableRepay}
-          variant="contained"
-          onClick={onOpenRepay}
-          sx={{ mr: 1.5 }}
-          fullWidth
-        >
-          <Trans>Repay</Trans>
-        </Button>
         {showSwitchButton ? (
           <Button
             disabled={disableSwitch}
-            variant="outlined"
+            variant="contained"
             fullWidth
             onClick={onDetbSwitchClick}
             data-cy={`swapButton`}
           >
             <Trans>Switch</Trans>
           </Button>
         ) : (
-          <Button disabled={disableBorrow} variant="outlined" onClick={onOpenBorrow} fullWidth>
+          <Button disabled={disableBorrow} variant="contained" onClick={onOpenBorrow} fullWidth>
             <Trans>Borrow</Trans>
           </Button>
         )}
+        <Button
+          disabled={disableRepay}
+          variant="outlined"
+          onClick={onOpenRepay}
+          sx={{ mr: 1.5 }}
+          fullWidth
+        >
+          <Trans>Repay</Trans>
+        </Button>
       </Box>
     </ListMobileItemWrapper>
   );

diff --git a/src/modules/dashboard/lists/BorrowedPositionsList/GhoBorrowedPositionsListItem.tsx b/src/modules/dashboard/lists/BorrowedPositionsList/GhoBorrowedPositionsListItem.tsx
@@ -184,13 +184,10 @@ const GhoBorrowedPositionsListItemDesktop = ({
         </ContentWithTooltip>
       </ListColumn>
       <ListButtonsColumn>
-        <Button disabled={disableRepay} variant="contained" onClick={onRepayClick}>
-          <Trans>Repay</Trans>
-        </Button>
         {showSwitchButton ? (
           <Button
             disabled={disableSwitch}
-            variant="outlined"
+            variant="contained"
             onClick={onSwitchClick}
             data-cy={`swapButton`}
           >
@@ -201,6 +198,9 @@ const GhoBorrowedPositionsListItemDesktop = ({
             <Trans>Borrow</Trans>
           </Button>
         )}
+        <Button disabled={disableRepay} variant="outlined" onClick={onRepayClick}>
+          <Trans>Repay</Trans>
+        </Button>
       </ListButtonsColumn>
     </ListItemWrapper>
   );
@@ -261,24 +261,24 @@ const GhoBorrowedPositionsListItemMobile = ({
         </ContentWithTooltip>
       </Row>
       <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mt: 5 }}>
-        <Button
-          disabled={disableRepay}
-          variant="contained"
-          onClick={onRepayClick}
-          sx={{ mr: 1.5 }}
-          fullWidth
-        >
-          <Trans>Repay</Trans>
-        </Button>
         {showSwitchButton ? (
-          <Button disabled={disableSwitch} variant="outlined" fullWidth onClick={onSwitchClick}>
+          <Button disabled={disableSwitch} variant="contained" fullWidth onClick={onSwitchClick}>
             <Trans>Switch</Trans>
           </Button>
         ) : (
           <Button disabled={borrowDisabled} variant="outlined" onClick={onBorrowClick} fullWidth>
             <Trans>Borrow</Trans>
           </Button>
         )}
+        <Button
+          disabled={disableRepay}
+          variant="outlined"
+          onClick={onRepayClick}
+          sx={{ mr: 1.5 }}
+          fullWidth
+        >
+          <Trans>Repay</Trans>
+        </Button>
       </Box>
     </ListMobileItemWrapper>
   );

diff --git a/src/modules/dashboard/lists/SuppliedPositionsList/SuppliedPositionsListItem.tsx b/src/modules/dashboard/lists/SuppliedPositionsList/SuppliedPositionsListItem.tsx
@@ -88,20 +88,10 @@ export const SuppliedPositionsListItem = ({
       </ListColumn>
 
       <ListButtonsColumn>
-        <Button
-          disabled={disableWithdraw}
-          variant="contained"
-          onClick={() => {
-            openWithdraw(underlyingAsset, currentMarket, reserve.name, 'dashboard');
-          }}
-        >
-          <Trans>Withdraw</Trans>
-        </Button>
-
         {isSwapButton ? (
           <Button
             disabled={disableSwap}
-            variant="outlined"
+            variant="contained"
             onClick={() => {
               // track
 
@@ -120,12 +110,21 @@ export const SuppliedPositionsListItem = ({
         ) : (
           <Button
             disabled={disableSupply}
-            variant="outlined"
+            variant="contained"
             onClick={() => openSupply(underlyingAsset, currentMarket, reserve.name, 'dashboard')}
           >
             <Trans>Supply</Trans>
           </Button>
         )}
+        <Button
+          disabled={disableWithdraw}
+          variant="outlined"
+          onClick={() => {
+            openWithdraw(underlyingAsset, currentMarket, reserve.name, 'dashboard');
+          }}
+        >
+          <Trans>Withdraw</Trans>
+        </Button>
       </ListButtonsColumn>
     </ListItemWrapper>
   );

diff --git a/src/modules/dashboard/lists/SuppliedPositionsList/SuppliedPositionsListMobileItem.tsx b/src/modules/dashboard/lists/SuppliedPositionsList/SuppliedPositionsListMobileItem.tsx
@@ -94,19 +94,10 @@ export const SuppliedPositionsListMobileItem = ({
       </Row>
 
       <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mt: 5 }}>
-        <Button
-          disabled={disableWithdraw}
-          variant="contained"
-          onClick={() => openWithdraw(underlyingAsset, currentMarket, reserve.name, 'dashboard')}
-          sx={{ mr: 1.5 }}
-          fullWidth
-        >
-          <Trans>Withdraw</Trans>
-        </Button>
         {isSwapButton ? (
           <Button
             disabled={disableSwap}
-            variant="outlined"
+            variant="contained"
             onClick={() => openSwap(underlyingAsset)}
             fullWidth
           >
@@ -115,13 +106,22 @@ export const SuppliedPositionsListMobileItem = ({
         ) : (
           <Button
             disabled={disableSupply}
-            variant="outlined"
+            variant="contained"
             onClick={() => openSupply(underlyingAsset, currentMarket, reserve.name, 'dashboard')}
             fullWidth
           >
             <Trans>Supply</Trans>
           </Button>
         )}
+        <Button
+          disabled={disableWithdraw}
+          variant="outlined"
+          onClick={() => openWithdraw(underlyingAsset, currentMarket, reserve.name, 'dashboard')}
+          sx={{ mr: 1.5 }}
+          fullWidth
+        >
+          <Trans>Withdraw</Trans>
+        </Button>
       </Box>
     </ListMobileItemWrapper>
   );