Adding CloseIcon to Modal and updating code

src/components/Modal/Modal.css

@@ -1,3 +1,5 @@
+@import '../../marketplace.css';
+
 /* Content is visible as modal layer */
 .isOpen {
   display: flex;
@@ -8,7 +10,7 @@
   bottom: 0;
   width: 100%;
   z-index: 100;
-  background-color: white;
+  background-color: var(--matterColorLight);
   margin: 0 auto;
 }
 
@@ -33,31 +35,37 @@
 }
 
 .title {
-  margin: 1rem;
+  margin: 24px;
   flex-grow: 1;
 }
 
 .close {
+  display: flex;
+  align-items: baseline;
   width: auto;
-  height: 3em;
   background-color: transparent;
-  padding: 1em;
-  color: #999;
+  padding: 24px;
+  color: var(--matterColor);
   border: 0;
+  composes: tinyBoldFont from '../../marketplace.css';
 
   &:enabled:hover {
     background-color: transparent;
-    color: #666;
+    color: var(--matterColorDark);
   }
   &:enabled:active {
     background-color: transparent;
-    color: #000;
+    color: var(--matterColorDark);
   }
   &:disabled {
     background-color: transparent;
   }
 }
 
+.closeIcon {
+  margin-left: 12px;
+}
+
 .content {
   flex-grow: 1;
   display: flex;

src/components/Modal/Modal.js

@@ -10,10 +10,9 @@
  */
 import React, { Component, PropTypes } from 'react';
 import classNames from 'classnames';
-import { intlShape, injectIntl } from 'react-intl';
-import { Button } from '../../components';
+import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
+import { Button, CloseIcon } from '../../components';
 
-import closeIcon from './images/closeIcon.svg';
 import css from './Modal.css';
 
 export class ModalComponent extends Component {
@@ -53,8 +52,9 @@ export class ModalComponent extends Component {
     const closeModalMessage = intl.formatMessage({ id: 'Modal.closeModal' });
     const modalTitle = title ? <h2 className={css.title}>{title}</h2> : null;
     const closeBtn = (
-      <Button onClick={this.handleClose} className={css.close} title={closeModalMessage}>
-        <img src={closeIcon} alt={closeModalMessage} />
+      <Button onClick={this.handleClose} rootClassName={css.close} title={closeModalMessage}>
+        <span><FormattedMessage id="Modal.close" /></span>
+        <CloseIcon rootClassName={css.closeIcon} />
       </Button>
     );
 

src/translations/en.json

@@ -77,6 +77,7 @@
   "LoginForm.logIn": "Log in",
   "LoginForm.passwordLabel": "Password",
   "LoginForm.passwordRequired": "required",
+  "Modal.close": "CLOSE",
   "Modal.closeModal": "Close modal",
   "OrderDetailsPanel.orderAcceptedStatus": "{providerName} accepted the booking.",
   "OrderDetailsPanel.orderAcceptedTitle": "You have booked {title}.",