StyledModal - a re-export of Modali with custom Modal (#1455)

* removed modali styles from global

* StlyedModal aka global syled modali

* export modali from StyledModal

* change useSubmitTxModal to use new exports

* export StyledModali with custom Modal

* changing import strings

* StyledModal > Modal

* remove global variables from Modal

* Modali export rename

src/components/DepositWidget/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from 'react'
-import Modali from 'modali'
+import Modal from 'components/common/Modal'
 import styled from 'styled-components'
 import BN from 'bn.js'
 
@@ -376,7 +376,7 @@ const BalancesDisplay: React.FC<BalanceDisplayProps> = ({
             </tbody>
           </CardTable>
         )}
-        <Modali.Modal {...modalProps} />
+        <Modal.Modal {...modalProps} />
       </BalancesWidget>
     </StandaloneCardWrapper>
   )
@@ -449,8 +449,8 @@ const DepositWidget: React.FC = () => {
         {...restActions}
         requestWithdrawConfirmation={requestWithdrawConfirmation}
       />
-      <Modali.Modal {...withdrawOverwriteModal} />
-      <Modali.Modal {...withdrawAndClaimModal} />
+      <Modal.Modal {...withdrawOverwriteModal} />
+      <Modal.Modal {...withdrawAndClaimModal} />
     </>
   )
 }

src/components/DepositWidget/useDepositModals.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react'
 import BN from 'bn.js'
-import Modali, { useModali, ModalHook, toggleModaliComponent } from 'modali'
+import Modal, { useModal, ModalHook, toggleModal } from 'components/common/Modal'
 
 // Components
 import { DEFAULT_MODAL_OPTIONS, ModalBodyWrapper } from 'components/Modal'
@@ -36,19 +36,19 @@ interface Params {
 
 interface Result {
   withdrawOverwriteModal: ModalHook
-  toggleWithdrawOverwriteModal: toggleModaliComponent
+  toggleWithdrawOverwriteModal: toggleModal
   withdrawAndClaimModal: ModalHook
-  toggleWithdrawAndClaimModal: toggleModaliComponent
+  toggleWithdrawAndClaimModal: toggleModal
 }
 
 export function useDepositModals(params: Params): Result {
   const { amount, tokenAddress, requestWithdrawToken } = params
 
   const getButtons = useCallback(
-    (toggleModal: toggleModaliComponent): React.ReactNode[] => {
+    (toggleModal: toggleModal): React.ReactNode[] => {
       return [
-        <Modali.Button label="Cancel" key="no" isStyleCancel onClick={toggleModal} />,
-        <Modali.Button
+        <Modal.Button label="Cancel" key="no" isStyleCancel onClick={toggleModal} />,
+        <Modal.Button
           label="Continue"
           key="yes"
           isStyleDefault
@@ -63,7 +63,7 @@ export function useDepositModals(params: Params): Result {
     [amount, requestWithdrawToken, tokenAddress],
   )
 
-  const [withdrawOverwriteModal, toggleWithdrawOverwriteModal] = useModali({
+  const [withdrawOverwriteModal, toggleWithdrawOverwriteModal] = useModal({
     ...DEFAULT_MODAL_OPTIONS,
     title: 'Confirm withdraw overwrite',
     message: <OverwriteModalBody />,
@@ -72,7 +72,7 @@ export function useDepositModals(params: Params): Result {
     }),
   })
 
-  const [withdrawAndClaimModal, toggleWithdrawAndClaimModal] = useModali({
+  const [withdrawAndClaimModal, toggleWithdrawAndClaimModal] = useModal({
     ...DEFAULT_MODAL_OPTIONS,
     title: 'Please note',
     message: <WithdrawAndClaimModalBody />,

src/components/OrderBookBtn.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import styled from 'styled-components'
-import Modali, { useModali } from 'modali'
+import Modal, { useModal } from 'components/common/Modal'
 
 // assets
 import { faChartLine } from '@fortawesome/free-solid-svg-icons'
@@ -126,7 +126,7 @@ export const OrderBookBtn: React.FC<OrderBookBtnProps> = (props: OrderBookBtnPro
     setQuoteToken(quoteTokenDefault)
   }, [baseTokenDefault, quoteTokenDefault, setBaseToken, setQuoteToken])
 
-  const [modalHook, toggleModal] = useModali({
+  const [modalHook, toggleModal] = useModal({
     ...DEFAULT_MODAL_OPTIONS,
     onHide: () => {
       // Reset the selection on close
@@ -172,7 +172,7 @@ export const OrderBookBtn: React.FC<OrderBookBtnProps> = (props: OrderBookBtnPro
     ),
     buttons: [
       <>&nbsp;</>,
-      <Modali.Button label="Close" key="yes" isStyleDefault onClick={(): void => modalHook.hide()} />,
+      <Modal.Button label="Close" key="yes" isStyleDefault onClick={(): void => modalHook.hide()} />,
     ],
   })
 
@@ -181,7 +181,7 @@ export const OrderBookBtn: React.FC<OrderBookBtnProps> = (props: OrderBookBtnPro
       <ViewOrderBookBtn className={className} onClick={toggleModal} type="button">
         {label || 'View Order Book'} <FontAwesomeIcon className="chart-icon" icon={faChartLine} />
       </ViewOrderBookBtn>
-      <Modali.Modal {...modalHook} />
+      <Modal.Modal {...modalHook} />
     </>
   )
 }

src/components/TokenSelector.tsx

@@ -1,7 +1,7 @@
 import React, { CSSProperties, useMemo, useState, useCallback, useRef, useEffect } from 'react'
 import styled from 'styled-components'
 import Select, { ActionMeta } from 'react-select'
-import Modali from 'modali'
+import Modal from 'components/common/Modal'
 import { FormatOptionLabelContext } from 'react-select/src/Select'
 
 // assets
@@ -389,7 +389,7 @@ const TokenSelector: React.FC<Props> = ({ isDisabled, tokens, selected, onChange
           e.preventDefault()
         }}
       >
-        <Modali.Modal {...modalProps} />
+        <Modal.Modal {...modalProps} />
       </div>
     </Wrapper>
   )

src/components/TradeWidget/TokenAdder.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import Modali from 'modali'
+import Modal from 'components/common/Modal'
 
 import { useBetterAddTokenModal } from 'hooks/useBetterAddTokenModal'
 import { TokenDetails } from 'types'
@@ -24,7 +24,7 @@ const TokensAdder: React.FC<TokensAdderProps> = ({ tokenAddresses, networkId, on
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []) // no deps, so that we only open modal once on mount
 
-  return tokenAddresses.length > 0 ? <Modali.Modal {...modalProps} /> : null
+  return tokenAddresses.length > 0 ? <Modal.Modal {...modalProps} /> : null
 }
 
 export default TokensAdder

src/components/TradeWidget/index.tsx

@@ -4,7 +4,6 @@ import { useForm, useWatch, FormProvider, SubmitHandler } from 'react-hook-form'
 import { useParams } from 'react-router'
 import { toast } from 'toastify'
 import BN from 'bn.js'
-import Modali from 'modali'
 import styled from 'styled-components'
 
 import { decodeSymbol } from '@gnosis.pm/dex-js'
@@ -32,10 +31,10 @@ import { PendingTxObj } from 'api/exchange/ExchangeApi'
 import { tokenListApi } from 'api'
 
 // components
-
 import OrdersWidget from 'components/OrdersWidget'
 import { TxNotification } from 'components/TxNotification'
 import { Spinner } from 'components/common/Spinner'
+import Modal from 'components/common/Modal'
 
 // TradeWidget: subcomponents
 import {
@@ -722,7 +721,7 @@ const TradeWidget: React.FC<TradeWidgetProps> = ({
             {isSubmitting && <Spinner size="lg" spin={isSubmitting} />}{' '}
             {sameToken ? 'Select different tokens' : 'Submit limit order'}
           </SubmitButton>
-          <Modali.Modal {...modalProps} />
+          <Modal.Modal {...modalProps} />
         </WrappedForm>
       </FormProvider>
       <ExpandableOrdersPanel>

src/components/WrapEtherBtn.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useRef } from 'react'
 import { useForm } from 'react-hook-form'
 import styled from 'styled-components'
-import Modali, { useModali } from 'modali'
+import Modal, { useModal } from 'components/common/Modal'
 import BN from 'bn.js'
 
 import { DEFAULT_PRECISION, formatAmountFull, toWei, parseAmount, ZERO } from '@gnosis.pm/dex-js'
@@ -249,7 +249,7 @@ const WrapUnwrapEtherBtn: React.FC<WrapUnwrapEtherBtnProps> = (props: WrapUnwrap
   const toggleRef = useRef<() => void>()
   const isModalShownRef = useRef(false)
 
-  const [modalHook, toggleModal] = useModali({
+  const [modalHook, toggleModal] = useModal({
     ...DEFAULT_MODAL_OPTIONS,
     title,
     message: (
@@ -320,8 +320,8 @@ const WrapUnwrapEtherBtn: React.FC<WrapUnwrapEtherBtnProps> = (props: WrapUnwrap
       </ModalWrapper>
     ),
     buttons: [
-      <Modali.Button label="Cancel" key="no" isStyleCancel onClick={(): void => modalHook.hide()} />,
-      <Modali.Button
+      <Modal.Button label="Cancel" key="no" isStyleCancel onClick={(): void => modalHook.hide()} />,
+      <Modal.Button
         label="Continue"
         key="yes"
         isStyleDefault
@@ -369,7 +369,7 @@ const WrapUnwrapEtherBtn: React.FC<WrapUnwrapEtherBtnProps> = (props: WrapUnwrap
       <TooltipWrapper as="button" type="button" className={className} onClick={toggleModal} tooltip={tooltipText}>
         {loading && <FontAwesomeIcon icon={faSpinner} spin />} {label || title}
       </TooltipWrapper>
-      <Modali.Modal {...modalHook} />
+      <Modal.Modal {...modalHook} />
     </>
   )
 }

src/components/common/Modal.tsx

@@ -0,0 +1,168 @@
+import React from 'react'
+import { createGlobalStyle } from 'styled-components'
+import Modali, { ModalHook, toggleModaliComponent, useModali } from 'modali'
+
+import { MEDIA } from 'const'
+
+const ModaliGlobalStyle = createGlobalStyle` 
+/* Hack to fix Modali screen flash */
+  .modali-overlay {
+    display: none
+  }
+
+  .modali-wrapper::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    content: "";
+    background-color: var(--color-background-modali);
+  }
+
+  /* Hack to not darken view further when two modali are open */
+  .modali-wrapper:nth-last-of-type(n+3)::before {
+    display: none;
+  }
+
+  /* End hack */
+  
+  .modali-open .modali-overlay {
+    background-color: var(--color-background-modali);
+    opacity: 1;
+  }
+  
+  .modali-open .modali-wrapper-centered .modali {
+    background: var(--color-background-pageWrapper);
+    box-shadow: 0 .2rem .4rem 0 rgba(0,0,0,0.14);
+    border-radius: .6rem;
+    border: 0;
+    margin: 0 auto;
+    
+    .modali-header {
+      height: 5.6rem;
+      padding: 0 1.6rem;
+      box-sizing: border-box;
+      letter-spacing: 0;
+      font-size: 1.6rem;
+      text-align: left;
+      color: var(--color-text-primary);
+      margin: 0;
+      display: flex;
+      align-items: center;
+      font-family: var(--font-default);
+      font-weight: var(--font-weight-regular);
+      border-bottom: 0.1rem solid var(--color-background-banner);
+    }
+    
+    .modali-header .modali-title {
+      font-size: inherit;
+      font-weight: inherit;
+      line-height: 1;
+    }
+    
+    .modali-header .modali-close-button {
+      background: transparent;
+      font-size: 4rem;
+      line-height: 1;
+      color: var(--color-modali-close);
+      font-weight: normal;
+      opacity: .5;
+      padding: 0;
+      margin: auto 0 auto auto;
+      
+        &:hover {
+          opacity: 1;
+        }
+    }
+    
+    .modali-body {
+      font-size: 1.4rem;
+      line-height: 1.3;
+      background: inherit;
+      color: var(--color-text-primary);
+    }
+    
+    .modali-footer {
+      margin: 1.6rem auto 0;
+      height: 5.6rem;
+      border-top: 0.1rem solid var(--color-background-banner);
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 1.6rem;
+      box-sizing: border-box;
+
+      .modali-button.modali-button-default, .modali-button.modali-button-cancel {
+        margin: 0;
+        border-radius: 0.6rem;
+        outline: 0;
+        height: 3.6rem;
+        box-sizing: border-box;
+        letter-spacing: 0.03rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-decoration: none;
+        text-transform: uppercase;
+        background: var(--color-background-CTA);
+        color: var(--color-text-CTA);
+        font-weight: var(--font-weight-bold);
+        font-size: 1.4rem;
+        
+        &:hover {
+          background-color: var(--color-background-button-hover);
+          color: var(--color-text-button-hover);
+        }
+      }
+      
+      .modali-button.modali-button-default {
+        border-radius: 0.6rem;
+        min-width: 14rem;
+        padding: 0 1.6rem;
+      }
+
+      .modali-button.modali-button-cancel {
+        background: transparent;
+        color: var(--color-text-active);
+      }
+    }
+  }
+  
+  // Heavier specification of the selector to ensure override from global.ts
+  // Ideally take out the modali default injected styles and only load from our end.
+  body.modali-open .modali.modali-size-large {
+    width: 80vw;
+    max-width: initial;
+    min-width: initial;
+    max-height: 100%;
+      @media (min-width: 500px) {
+          min-width: initial !important;
+      }
+      @media ${MEDIA.mobile},
+      @media ${MEDIA.tablet} {
+        width: 100%;
+      }
+  }
+  
+  body.modali-open .modali-wrapper-centered {
+    top: 0!important;
+  }
+  
+  body.modali-open .modali-body-style {
+    padding: 0;
+  }
+`
+
+const Modal: React.FC<Modali.ModalProps> = (props) => (
+  <>
+    <ModaliGlobalStyle />
+    <Modali.Modal {...props} />
+  </>
+)
+
+// To import default Modali and not change much code elsewhere
+const StyledModali = { ...Modali, Modal }
+
+export { StyledModali as default, ModalHook, toggleModaliComponent as toggleModal, useModali as useModal }