From 464350e6d57e4ad091ca767ab0500befc6974198 Mon Sep 17 00:00:00 2001
From: Mark Hinschberger <foodaka@users.noreply.github.com>
Date: Mon, 4 Sep 2023 16:39:03 +0100
Subject: [PATCH] feat: rework button active states (#1772)

---
 .../BorrowedPositionsListItem.tsx             | 32 +++++++++----------
 .../GhoBorrowedPositionsListItem.tsx          | 28 ++++++++--------
 .../SuppliedPositionsListItem.tsx             | 23 +++++++------
 .../SuppliedPositionsListMobileItem.tsx       | 22 ++++++-------
 4 files changed, 52 insertions(+), 53 deletions(-)

diff --git a/src/modules/dashboard/lists/BorrowedPositionsList/BorrowedPositionsListItem.tsx b/src/modules/dashboard/lists/BorrowedPositionsList/BorrowedPositionsListItem.tsx
index cdfee0e95e..a914d51f37 100644
--- 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,19 +252,10 @@ 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`}
@@ -272,10 +263,19 @@ const BorrowedPositionsListItemMobile = ({
             <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
index bd6c795e59..7e10507dc2 100644
--- 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,17 +261,8 @@ 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>
         ) : (
@@ -279,6 +270,15 @@ const GhoBorrowedPositionsListItemMobile = ({
             <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
index 3304b591af..5d39be3eee 100644
--- 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
index d55cc6837a..dd4f3e977d 100644
--- 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>
   );