From 64772decc35dcd5c24920e91034db252ee840cd2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Von=C3=A1=C5=A1ek?= <jakub.vonasek@cleevio.com>
Date: Tue, 27 Feb 2024 18:20:13 +0100
Subject: [PATCH] gas station update

---
 src/assets/icons/GasPumpIcon.svg              |  3 ++
 .../transactions/GasStation/GasStation.tsx    | 28 ++++++++-----------
 .../reserve-overview/ReserveActions.tsx       |  5 ++--
 3 files changed, 17 insertions(+), 19 deletions(-)
 create mode 100644 src/assets/icons/GasPumpIcon.svg

diff --git a/src/assets/icons/GasPumpIcon.svg b/src/assets/icons/GasPumpIcon.svg
new file mode 100644
index 000000000..183f5e616
--- /dev/null
+++ b/src/assets/icons/GasPumpIcon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="currentColor" d="m19.77 7.23.01-.01-3.72-3.72L15 4.56l2.11 2.11c-.94.36-1.61 1.26-1.61 2.33a2.5 2.5 0 0 0 2.5 2.5c.36 0 .69-.08 1-.21v7.21c0 .55-.45 1-1 1s-1-.45-1-1V14c0-1.1-.9-2-2-2h-1V5c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v16h10v-7.5h1.5v5a2.5 2.5 0 0 0 5 0V9c0-.69-.28-1.32-.73-1.77M12 10H6V5h6zm6 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1"/>
+</svg>
\ No newline at end of file
diff --git a/src/sections/lending/components/transactions/GasStation/GasStation.tsx b/src/sections/lending/components/transactions/GasStation/GasStation.tsx
index ed3115651..f4298e76b 100644
--- a/src/sections/lending/components/transactions/GasStation/GasStation.tsx
+++ b/src/sections/lending/components/transactions/GasStation/GasStation.tsx
@@ -1,10 +1,9 @@
 import { API_ETH_MOCK_ADDRESS } from "@aave/contract-helpers"
 import { normalize } from "@aave/math-utils"
-import LocalGasStationIcon from "@mui/icons-material/LocalGasStation"
-import { Box, CircularProgress, Stack } from "@mui/material"
 import { DisplayValue } from "components/DisplayValue/DisplayValue"
 import { InfoTooltip } from "components/InfoTooltip/InfoTooltip"
 import { SInfoIcon } from "components/InfoTooltip/InfoTooltip.styled"
+import { Spinner } from "components/Spinner/Spinner.styled"
 import { Text } from "components/Typography/Text/Text"
 import { BigNumber } from "ethers/lib/ethers"
 import { formatUnits, parseUnits } from "ethers/lib/utils"
@@ -25,6 +24,7 @@ import {
 } from "sections/lending/utils/marketsAndNetworksConfig"
 import invariant from "tiny-invariant"
 import { GasOption } from "./GasStationProvider"
+import GasPumpIcon from "assets/icons/GasPumpIcon.svg?react"
 
 export interface GasStationProps {
   gasLimit: BigNumber
@@ -90,17 +90,13 @@ export const GasStation: React.FC<GasStationProps> = ({
       : undefined
 
   return (
-    <Stack gap={6} sx={{ width: "100%" }}>
-      <Box sx={{ display: "flex", mt: 3, justifyContent: "space-between" }}>
-        <Box sx={{ display: "flex", alignItems: "center" }}>
-          <LocalGasStationIcon
-            color="primary"
-            sx={{ fontSize: "16px", mr: 6 }}
-          />
-
+    <div sx={{ flex: "column", gap: 24, width: "100%" }}>
+      <div sx={{ flex: "row", mt: 12, justify: "space-between" }}>
+        <div sx={{ flex: "row", align: "center" }}>
+          <GasPumpIcon width={20} height={20} sx={{ mr: 6 }} />
           {loadingTxns && !skipLoad ? (
             <div sx={{ flex: "row", align: "center", height: 16 }}>
-              <CircularProgress color="inherit" size="14px" sx={{ mr: 8 }} />
+              <Spinner width={16} height={16} />
             </div>
           ) : totalGasCostsUsd && !disabled ? (
             <>
@@ -114,18 +110,18 @@ export const GasStation: React.FC<GasStationProps> = ({
           ) : (
             "-"
           )}
-        </Box>
+        </div>
         {rightComponent}
-      </Box>
+      </div>
       {!disabled && Number(nativeBalanceUSD) < Number(totalGasCostsUsd) && (
-        <Box sx={{ display: "flex", alignItems: "center" }}>
+        <div sx={{ flex: "row", align: "center" }}>
           <Warning variant="warning" sx={{ mb: 0, mx: "auto" }}>
             You do not have enough {baseAssetSymbol} in your account to pay for
             transaction fees on {name} network. Please deposit {baseAssetSymbol}{" "}
             from another account.
           </Warning>
-        </Box>
+        </div>
       )}
-    </Stack>
+    </div>
   )
 }
diff --git a/src/sections/lending/modules/reserve-overview/ReserveActions.tsx b/src/sections/lending/modules/reserve-overview/ReserveActions.tsx
index 3c47333cf..042715e8b 100644
--- a/src/sections/lending/modules/reserve-overview/ReserveActions.tsx
+++ b/src/sections/lending/modules/reserve-overview/ReserveActions.tsx
@@ -332,7 +332,7 @@ const SupplyAction = ({
 }: ActionProps) => {
   const { t } = useTranslation()
   return (
-    <div sx={{ flex: "row", justify: "space-between" }}>
+    <div sx={{ flex: "row", justify: "space-between", align: "center" }}>
       <DataValue
         label="Available to supply"
         labelColor="basic400"
@@ -360,7 +360,6 @@ const SupplyAction = ({
 }
 
 const BorrowAction = ({
-  reserve,
   value,
   usdValue,
   symbol,
@@ -369,7 +368,7 @@ const BorrowAction = ({
 }: ActionProps) => {
   const { t } = useTranslation()
   return (
-    <div sx={{ flex: "row", justify: "space-between" }}>
+    <div sx={{ flex: "row", justify: "space-between", align: "center" }}>
       <DataValue
         label="Available to borrow"
         labelColor="basic400"