diff --git a/packages/website/ts/components/modals/button_close.tsx b/packages/website/ts/components/modals/button_close.tsx new file mode 100644 index 0000000000..e2bfb54a73 --- /dev/null +++ b/packages/website/ts/components/modals/button_close.tsx @@ -0,0 +1,40 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { Icon } from 'ts/components/icon'; + +interface Props { + onClick: (e: React.MouseEvent) => void; +} + +export const ButtonClose = (props: Props) => { + const { onClick } = props; + return ( + + Close + + + ); +}; + +const StyledButtonClose = styled.button.attrs({ + type: 'button', +})` + cursor: pointer; + position: absolute; + right: 0; + top: 0; + overflow: hidden; + width: 27px; + height: 27px; + border: 0; + background-color: transparent; + padding: 0; + transform: translateY(-47px); + + span { + opacity: 0; + visibility: hidden; + position: absolute; + } +`; diff --git a/packages/website/ts/components/modals/modal_contact.tsx b/packages/website/ts/components/modals/modal_contact.tsx index 794cab5423..c9afd9a555 100644 --- a/packages/website/ts/components/modals/modal_contact.tsx +++ b/packages/website/ts/components/modals/modal_contact.tsx @@ -9,6 +9,7 @@ import '@reach/dialog/styles.css'; import { Button } from 'ts/components/button'; import { Icon } from 'ts/components/icon'; +import { ButtonClose } from 'ts/components/modals/button_close'; import { CheckBoxInput, Input, InputWidth, OptionSelector } from 'ts/components/modals/input'; import { Heading, Paragraph } from 'ts/components/text'; import { GlobalStyle } from 'ts/constants/globalStyle'; @@ -135,6 +136,7 @@ export class ModalContact extends React.Component { Done + diff --git a/packages/website/ts/pages/governance/modal_vote.tsx b/packages/website/ts/pages/governance/modal_vote.tsx index 3922e33798..dbe130d68d 100644 --- a/packages/website/ts/pages/governance/modal_vote.tsx +++ b/packages/website/ts/pages/governance/modal_vote.tsx @@ -10,6 +10,7 @@ import styled from 'styled-components'; import { Button } from 'ts/components/button'; import { Icon } from 'ts/components/icon'; +import { ButtonClose } from 'ts/components/modals/button_close'; import { Heading, Paragraph } from 'ts/components/text'; import { GlobalStyle } from 'ts/constants/globalStyle'; import { ConnectForm, WalletConnectedProps } from 'ts/pages/governance/connect_form'; @@ -128,10 +129,7 @@ export class ModalVote extends React.Component { - - Close - - + { } } -const ButtonClose = styled.button.attrs({})` - cursor: pointer; - position: absolute; - right: 0; - top: 0; - overflow: hidden; - width: 27px; - height: 27px; - border: 0; - background-color: transparent; - padding: 0; - transform: translateY(-47px); - - span { - opacity: 0; - visibility: hidden; - position: absolute; - } -`; const StyledDialogContent = styled(DialogContent)` position: relative; max-width: 800px;