fix: z-index bug which prevented modal click (#2264)

* Fix z-index bug which prevented modal click. Center button and remove underline

* Fix code style issues with ESLint

* fix: PR comments

* Fix code style issues with ESLint

* z-index comment

* Fix code style issues with ESLint
Co-authored-by: Lint Action <lint-action@samuelmeuli.com>

src/components/swap/UnsupportedCurrencyFooter.tsx

@@ -9,7 +9,7 @@ import { AutoRow, RowBetween } from 'components/Row'
 import { useActiveWeb3React } from 'hooks/web3'
 import { useState } from 'react'
 import styled from 'styled-components/macro'
-import { CloseIcon, ExternalLink, TYPE } from 'theme'
+import { CloseIcon, ExternalLink, TYPE, Z_INDEX } from 'theme'
 
 import { useUnsupportedTokens } from '../../hooks/Tokens'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
@@ -17,6 +17,8 @@ import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 const DetailsFooter = styled.div<{ show: boolean }>`
   padding-top: calc(16px + 2rem);
   padding-bottom: 20px;
+  margin-left: auto;
+  margin-right: auto;
   margin-top: -2rem;
   width: 100%;
   max-width: 400px;
@@ -24,13 +26,17 @@ const DetailsFooter = styled.div<{ show: boolean }>`
   border-bottom-right-radius: 20px;
   color: ${({ theme }) => theme.text2};
   background-color: ${({ theme }) => theme.advancedBG};
-  z-index: -1;
+  z-index: ${Z_INDEX.deprecated_zero};
 
   transform: ${({ show }) => (show ? 'translateY(0%)' : 'translateY(-100%)')};
   transition: transform 300ms ease-in-out;
   text-align: center;
 `
 
+const StyledButtonEmpty = styled(ButtonEmpty)`
+  text-decoration: none;
+`
+
 const AddressText = styled(TYPE.blue)`
   font-size: 12px;
 
@@ -101,11 +107,11 @@ export default function UnsupportedCurrencyFooter({
           </AutoColumn>
         </Card>
       </Modal>
-      <ButtonEmpty padding={'0'} onClick={() => setShowDetails(true)}>
+      <StyledButtonEmpty padding={'0'} onClick={() => setShowDetails(true)}>
         <TYPE.blue>
           <Trans>Read more about unsupported assets</Trans>
         </TYPE.blue>
-      </ButtonEmpty>
+      </StyledButtonEmpty>
     </DetailsFooter>
   )
 }

src/pages/AppBody.tsx

 import React from 'react'
 import styled from 'styled-components/macro'
+import { Z_INDEX } from 'theme'
 
 export const BodyWrapper = styled.main<{ margin?: string; maxWidth?: string }>`
   position: relative;
@@ -11,6 +12,7 @@ export const BodyWrapper = styled.main<{ margin?: string; maxWidth?: string }>`
     0px 24px 32px rgba(0, 0, 0, 0.01);
   border-radius: 24px;
   margin-top: 1rem;
+  z-index: ${Z_INDEX.deprecated_content};
 `
 
 /**

src/theme/index.tsx

@@ -21,6 +21,21 @@ export const MEDIA_WIDTHS = {
   upToLarge: 1280,
 }
 
+// Migrating to a standard z-index system https://getbootstrap.com/docs/5.0/layout/z-index/
+// Please avoid using deprecated numbers
+export enum Z_INDEX {
+  deprecated_zero = 0,
+  deprecated_content = 1,
+  dropdown = 1000,
+  sticky = 1020,
+  fixed = 1030,
+  modalBackdrop = 1040,
+  offcanvas = 1050,
+  modal = 1060,
+  popover = 1070,
+  tooltip = 1080,
+}
+
 const mediaWidthTemplates: { [width in keyof typeof MEDIA_WIDTHS]: typeof css } = Object.keys(MEDIA_WIDTHS).reduce(
   (accumulator, size) => {
     ;(accumulator as any)[size] = (a: any, b: any, c: any) => css`