frontend/src/components/modals/username.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

import React from 'react';
import {
  Overlay,
  Panel,
  PanelHeader,
  PanelFooter,
  Button,
  Input,
  Close,
  Space,
} from 'rebass';

const Modal = ({ modalOpen, toggleModal }) => (
  <Overlay open={modalOpen} onDismiss={toggleModal('usernameModal')}>
    <Panel theme="info">
      <PanelHeader>
        What's your username ?
        <Space auto />
        <Close onClick={toggleModal('usernameModal')} />
      </PanelHeader>
      <Input
        label="Username"
        name="username"
        placeholder="Cesar92"
        rounded
        type="text"
      />
      <PanelFooter>
        <Space auto />
        <Button
          theme="success"
          onClick={toggleModal('usernameModal')}
          children="Ok"
        />
      </PanelFooter>
    </Panel>
  </Overlay>
);

export default Modal;