fix: fee explainer modal close button (#7611)

shapeshift · Aug 23, 2024 · c418be7 · c418be7
1 parent f9596dc
commit c418be7
Showing 1 changed file with 24 additions and 21 deletions.
diff --git a/src/components/FeeModal/FeeModal.tsx b/src/components/FeeModal/FeeModal.tsx
@@ -1,5 +1,6 @@
 import {
   Modal,
+  ModalBody,
   ModalCloseButton,
   ModalContent,
   ModalOverlay,
@@ -34,27 +35,29 @@ export const FeeModal = ({
     <Modal isOpen={isOpen} onClose={handleClose} size='lg'>
       <ModalOverlay />
       <ModalContent>
-        <ModalCloseButton />
-        <Tabs variant='button'>
-          <TabList px={6} py={4} borderBottomWidth={1} borderColor='border.base'>
-            <Tab color='text.subtle'>{translate('foxDiscounts.feeSummary')}</Tab>
-            <Tab color='text.subtle'>{translate('foxDiscounts.simulateFee')}</Tab>
-          </TabList>
-          <TabPanels>
-            <TabPanel p={0}>
-              <FeeBreakdown feeModel={feeModel} inputAmountUsd={inputAmountUsd} />
-            </TabPanel>
-            <TabPanel px={0} py={0}>
-              <FeeExplainer
-                inputAmountUsd={inputAmountUsd}
-                borderRadius='none'
-                bg='transparent'
-                boxShadow='none'
-                feeModel={feeModel}
-              />
-            </TabPanel>
-          </TabPanels>
-        </Tabs>
+        <ModalCloseButton zIndex='1' />
+        <ModalBody p={0}>
+          <Tabs variant='button'>
+            <TabList px={6} py={4} borderBottomWidth={1} borderColor='border.base'>
+              <Tab color='text.subtle'>{translate('foxDiscounts.feeSummary')}</Tab>
+              <Tab color='text.subtle'>{translate('foxDiscounts.simulateFee')}</Tab>
+            </TabList>
+            <TabPanels>
+              <TabPanel p={0}>
+                <FeeBreakdown feeModel={feeModel} inputAmountUsd={inputAmountUsd} />
+              </TabPanel>
+              <TabPanel px={0} py={0}>
+                <FeeExplainer
+                  inputAmountUsd={inputAmountUsd}
+                  borderRadius='none'
+                  bg='transparent'
+                  boxShadow='none'
+                  feeModel={feeModel}
+                />
+              </TabPanel>
+            </TabPanels>
+          </Tabs>
+        </ModalBody>
       </ModalContent>
     </Modal>
   )