From 6dfe78e458546e6bc0e200159ecee67782b96b0a Mon Sep 17 00:00:00 2001 From: David Date: Mon, 5 Oct 2020 13:26:49 +0200 Subject: [PATCH] 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 | 8 +- .../DepositWidget/useDepositModals.tsx | 16 +- src/components/OrderBookBtn.tsx | 8 +- src/components/TokenSelector.tsx | 4 +- src/components/TradeWidget/TokenAdder.tsx | 4 +- src/components/TradeWidget/index.tsx | 5 +- src/components/WrapEtherBtn.tsx | 10 +- src/components/common/Modal.tsx | 168 ++++++++++++++++++ src/hooks/useBetterAddTokenModal.tsx | 8 +- src/hooks/useManageTokens.tsx | 8 +- src/hooks/useSubmitTxModal.tsx | 8 +- src/styles/global.ts | 148 --------------- 12 files changed, 207 insertions(+), 188 deletions(-) create mode 100644 src/components/common/Modal.tsx diff --git a/src/components/DepositWidget/index.tsx b/src/components/DepositWidget/index.tsx index 389973115..4b7d12c88 100644 --- a/src/components/DepositWidget/index.tsx +++ b/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 = ({ )} - + ) @@ -449,8 +449,8 @@ const DepositWidget: React.FC = () => { {...restActions} requestWithdrawConfirmation={requestWithdrawConfirmation} /> - - + + ) } diff --git a/src/components/DepositWidget/useDepositModals.tsx b/src/components/DepositWidget/useDepositModals.tsx index b08ece3f3..2fc15a70e 100644 --- a/src/components/DepositWidget/useDepositModals.tsx +++ b/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 [ - , - , + , @@ -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: , diff --git a/src/components/OrderBookBtn.tsx b/src/components/OrderBookBtn.tsx index 2d7b99005..4a2abbd4c 100644 --- a/src/components/OrderBookBtn.tsx +++ b/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 = (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 = (props: OrderBookBtnPro ), buttons: [ <> , - modalHook.hide()} />, + modalHook.hide()} />, ], }) @@ -181,7 +181,7 @@ export const OrderBookBtn: React.FC = (props: OrderBookBtnPro {label || 'View Order Book'} - + ) } diff --git a/src/components/TokenSelector.tsx b/src/components/TokenSelector.tsx index 45e8e1824..18e496754 100644 --- a/src/components/TokenSelector.tsx +++ b/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 = ({ isDisabled, tokens, selected, onChange e.preventDefault() }} > - + ) diff --git a/src/components/TradeWidget/TokenAdder.tsx b/src/components/TradeWidget/TokenAdder.tsx index 706124652..9a4e59625 100644 --- a/src/components/TradeWidget/TokenAdder.tsx +++ b/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 = ({ 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 ? : null + return tokenAddresses.length > 0 ? : null } export default TokensAdder diff --git a/src/components/TradeWidget/index.tsx b/src/components/TradeWidget/index.tsx index a68fcc1f7..fa52b07d8 100644 --- a/src/components/TradeWidget/index.tsx +++ b/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 = ({ {isSubmitting && }{' '} {sameToken ? 'Select different tokens' : 'Submit limit order'} - + diff --git a/src/components/WrapEtherBtn.tsx b/src/components/WrapEtherBtn.tsx index 4eccc0ff5..843a2c6b0 100644 --- a/src/components/WrapEtherBtn.tsx +++ b/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 = (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 = (props: WrapUnwrap ), buttons: [ - modalHook.hide()} />, - modalHook.hide()} />, + = (props: WrapUnwrap {loading && } {label || title} - + ) } diff --git a/src/components/common/Modal.tsx b/src/components/common/Modal.tsx new file mode 100644 index 000000000..ca6dd9238 --- /dev/null +++ b/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 = (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 } diff --git a/src/hooks/useBetterAddTokenModal.tsx b/src/hooks/useBetterAddTokenModal.tsx index e7cefba18..649833022 100644 --- a/src/hooks/useBetterAddTokenModal.tsx +++ b/src/hooks/useBetterAddTokenModal.tsx @@ -1,5 +1,5 @@ import React, { useRef, useEffect, useMemo, useCallback } from 'react' -import Modali, { useModali, ModalHook } from 'modali' +import Modal, { useModal, ModalHook } from 'components/common/Modal' import { fetchTokenData, FetchTokenResult } from 'services' import { Deferred, createDeferredPromise } from 'utils' import { TokenDetails } from 'types' @@ -263,7 +263,7 @@ export const useBetterAddTokenModal = (options: AddTokenOptions = defaultOptions [fetchResults], ) - const [modalProps, toggleModal] = useModali({ + const [modalProps, toggleModal] = useModal({ animated: true, centered: true, title: 'Do you want to add new Tokens?', @@ -281,7 +281,7 @@ export const useBetterAddTokenModal = (options: AddTokenOptions = defaultOptions buttons: [ // Cancel button only if there's anything to cancel canAddAnyToken ? ( -   ), - { const addTokensSafeModali: UseAddTokenModalResult['addTokensToList'] = useCallback( (...args) => { return addTokensToList(...args).finally(() => { - // hack for second Modali closing + // hack for second Modal closing document.body.classList.add('modali-open') }) }, @@ -239,7 +239,7 @@ const ManageTokensContainer: React.FC = () => { )} - + ) } @@ -250,7 +250,7 @@ interface UseManageTokensResult { } export const useManageTokens = (): UseManageTokensResult => { - const [modalProps, toggleModal] = useModali({ + const [modalProps, toggleModal] = useModal({ animated: true, centered: true, title: 'Manage your Token list', diff --git a/src/hooks/useSubmitTxModal.tsx b/src/hooks/useSubmitTxModal.tsx index 86b7c632d..91f6333eb 100644 --- a/src/hooks/useSubmitTxModal.tsx +++ b/src/hooks/useSubmitTxModal.tsx @@ -1,5 +1,5 @@ +import Modal, { ModalHook, useModal } from 'components/common/Modal' import React, { useRef } from 'react' -import Modali, { useModali, ModalHook } from 'modali' interface UseSubmitTxResult { toggleModal: () => void @@ -15,7 +15,7 @@ interface ClickWrapperProps { export const useSubmitTxModal = ({ onCancel, onConfirm, message }: ClickWrapperProps): UseSubmitTxResult => { const isShown = useRef(false) - const [modalProps, toggleModal] = useModali({ + const [modalProps, toggleModal] = useModal({ animated: true, centered: true, title: 'Order Confirmation', @@ -23,7 +23,7 @@ export const useSubmitTxModal = ({ onCancel, onConfirm, message }: ClickWrapperP message: isShown.current && (typeof message === 'function' ? message() : message), buttons: [ // Cancel button only if there's anything to cancel - , - div.MuiDialog-root { h3, h4, h5, span.MuiTypography-overline {