import { Component } from 'react';
import PropTypes from 'prop-types';

import styled from 'styled-components';
import oc from 'open-color';

import Modal from './Modal';

const TitleWrapper = styled.div`
  display: flex;
  justify-content: center;
  padding-top: 2rem;
  padding-bottom: 2rem;

  font-size: 1.2rem;
  color: ${oc.gray[8]};

  background: ${oc.gray[2]};
`;

const ButtonsWrapper = styled.div`
  display: flex;
`;

const Button = styled.div`
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  flex: 1;
  display: inline-block;
  
  cursor: pointer;
  text-align: center;
  font-weight: 500;
  font-size: 1.5rem;
  transition: all .3s;

  color: white;
  background: ${props => oc[props.color][7]};

  &:hover {
    background: ${props => oc[props.color][6]};
  }

  &:active {
    background: ${props => oc[props.color][8]};
  }
`;

Button.propType = {
  color: PropTypes.string
};

class Logout extends Component {

  static propTypes = { 
    visible: PropTypes.bool, 
    color: PropTypes.string, 
    onHide: PropTypes.func, 
    onAction: PropTypes.func,
  }

  render() {
    const { 
      visible,
      color,
      onHide,
      onAction,
    } = this.props;

    return (
      <Modal visible={visible} onHide={onHide}>
        <TitleWrapper>
          Are you sure you want to logout?
        </TitleWrapper>
        <ButtonsWrapper>
          <Button color="teal"
            onClick={onAction}>
            OK
          </Button>
          <Button 
            onClick={onHide}
            color="gray">
            Cancel
          </Button>
        </ButtonsWrapper>
      </Modal>
    );
  }
}

export default Logout;

@@ -131,24 +131,61 @@
 en-color';%0A%0A
+import Thumbnail from './Thumbnail';%0A
 import Modal
@@ -209,20 +209,24 @@
 %0Aconst T
-itle
+humbnail
 Wrapper 
@@ -231,32 +231,77 @@
 r = styled.div%60%0A
+  padding-top: 3rem;%0A  padding-bottom: 3rem;%0A
   display: flex;
@@ -332,73 +332,183 @@
 er;%0A
+%0A
   
-padding-top: 2rem;%0A  padding-bottom: 2rem;%0A%0A  font-size: 1.2rem
+background: white;%0A%60;%0A%0Aconst TitleWrapper = styled.div%60%0A  color: $%7Boc.gray%5B9%5D%7D;%0A  background: $%7Boc.gray%5B0%5D%7D;%0A%0A  font-size: 1.2rem;%0A  line-height: 4rem;%0A  text-align: center
 ;%0A  
@@ -524,17 +524,17 @@
 oc.gray%5B
-8
+7
 %5D%7D;%0A%0A  b
@@ -546,21 +546,110 @@
 ound
+-color
 : $%7Boc.
-gray%5B2
+pink%5B2%5D%7D;%0A  border-bottom: 1px solid $%7Boc.pink%5B3%5D%7D;%0A  box-shadow: 1px 1px 2px $%7Boc.pink%5B3
 %5D%7D;%0A
@@ -1606,32 +1606,145 @@
 %3C/TitleWrapper%3E%0A
+        %3CThumbnailWrapper%3E%0A          %3CThumbnail size='8rem' color=%7Boc%5B'blue'%5D%5B6%5D%7D /%3E%0A        %3C/ThumbnailWrapper%3E%0A
         %3CButtons

update it