Progress

app/javascript/gabsocial/components/modal/confirmation_modal.js

@@ -1,12 +1,15 @@
 import { injectIntl, FormattedMessage } from 'react-intl'
-import ModalLayout from './modal_layout'
+import Block from '../block'
 import Button from '../button'
+import Heading from '../heading'
+import Text from '../text'
 
 export default
 @injectIntl
 class ConfirmationModal extends PureComponent {
 
   static propTypes = {
+    title: PropTypes.node.isRequired,
     message: PropTypes.node.isRequired,
     confirm: PropTypes.string.isRequired,
     onClose: PropTypes.func.isRequired,
@@ -32,7 +35,7 @@ class ConfirmationModal extends PureComponent {
   }
 
   handleCancel = () => {
-    const {onClose, onCancel} = this.props
+    const { onClose, onCancel } = this.props
     onClose()
     if (onCancel) onCancel()
   }
@@ -41,24 +44,67 @@ class ConfirmationModal extends PureComponent {
     this.button = c
   }
 
-  render () {
-    const { message, confirm, secondary } = this.props
+  render() {
+    const {
+      title,
+      message,
+      confirm,
+      secondary
+    } = this.props
 
     return (
-      <div className='modal-root__modal confirmation-modal'>
-        <div className='confirmation-modal__container'>
-          {message}
-        </div>
+      <div className={_s.width330PX}>
+        <Block>
+          <div className={[_s.default, _s.px15, _s.py15].join(' ')}>
+            <div className={[_s.default, _s.px15, _s.py15].join(' ')}>
 
-        <div className='confirmation-modal__action-bar'>
-          <Button onClick={this.handleCancel} className='confirmation-modal__cancel-button'>
-            <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
-          </Button>
-          {secondary !== undefined && (
-            <Button text={secondary} onClick={this.handleSecondary} className='confirmation-modal__secondary-button' />
-          )}
-          <Button text={confirm} onClick={this.handleClick} ref={this.setRef} />
-        </div>
+              <Heading size='h1' center>
+                {title}
+              </Heading>
+
+              <div className={[_s.default, _s.mt10].join(' ')}>
+                <Text align='center' color='secondary'>
+                  {message}
+                </Text>
+
+                <div className={[_s.default, _s.flexRow, _s.mt10, _s.pt10].join(' ')}>
+                  <Button
+                    backgroundColor='tertiary'
+                    color='primary'
+                    onClick={this.handleCancel}
+                    className={[_s.mr10, _s.flexGrow1].join(' ')}
+                  >
+                    <Text size='medium' weight='bold' color='inherit'>
+                      <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
+                    </Text>
+                  </Button>
+                  
+                  { /**
+                    : todo :
+                     */
+                    secondary !== undefined && (
+                      <Button text={secondary} onClick={this.handleSecondary} />
+                    )
+                  }
+
+                  <Button 
+                    backgroundColor='brand'
+                    color='white'
+                    onClick={this.handleClick}
+                    ref={this.setRef}
+                    className={_s.flexGrow1}
+                  >
+                    <Text size='medium' weight='bold' color='inherit'>
+                      {confirm}
+                    </Text>
+                  </Button>
+                </div>
+
+              </div>
+
+            </div>
+          </div>
+        </Block>
       </div>
     )
   }