Added close button to contact modal

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<HTMLElement>) => void;
+}
+
+export const ButtonClose = (props: Props) => {
+    const { onClick } = props;
+    return (
+        <StyledButtonClose onClick={onClick}>
+            <span>Close</span>
+            <Icon name="close-modal" size={27} margin={[0, 0, 0, 0]} />
+        </StyledButtonClose>
+    );
+};
+
+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;
+    }
+`;

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<Props> {
                                 Done
                             </Button>
                         </Confirmation>
+                        <ButtonClose onClick={this.props.onDismiss} />
                     </StyledDialogContent>
                 </DialogOverlay>
             </>

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<Props> {
                                 </Button>
                             </ButtonWrap>
                         </Confirmation>
-                        <ButtonClose type="button" onClick={this.props.onDismiss}>
+                        <ButtonClose onClick={this.props.onDismiss} />
-                            <span>Close</span>
-                            <Icon name="close-modal" size={27} margin={[0, 0, 0, 0]} />
-                        </ButtonClose>
                         <ErrorModal
                             isOpen={isErrorModalOpen}
                             text={errorMessage}
@@ -257,25 +255,6 @@ export class ModalVote extends React.Component<Props> {
     }
 }
 
-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;