Añadir plantilla

Base para front

6 files changed, 1006 insertions, 0 deletions

diff --git a/front/odiparpack/app/components/Contact/AddContact.js b/front/odiparpack/app/components/Contact/AddContact.js
new file mode 100644
index 0000000..2690f1d
--- /dev/null
+++ b/front/odiparpack/app/components/Contact/AddContact.js
@@ -0,0 +1,82 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Add from '@material-ui/icons/Add';
+import { Tooltip, Fab } from '@material-ui/core';
+import AddContactForm from './AddContactForm';
+import FloatingPanel from '../Panel/FloatingPanel';
+import styles from './contact-jss';
+
+
+class AddContact extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      img: '',
+      files: []
+    };
+    this.onDrop = this.onDrop.bind(this);
+  }
+
+  onDrop(filesVal) {
+    const { files } = this.state;
+    const filesLimit = 1;
+    let oldFiles = files;
+    oldFiles = oldFiles.concat(filesVal);
+    if (oldFiles.length > filesLimit) {
+      console.log('Cannot upload more than ' + filesLimit + ' items.');
+    } else {
+      this.setState({ img: filesVal[0] });
+    }
+  }
+
+  sendValues = (values) => {
+    const { submit } = this.props;
+    const { img } = this.state;
+    const { avatarInit } = this.props;
+    const avatar = img === null ? avatarInit : img;
+    setTimeout(() => {
+      submit(values, avatar);
+      this.setState({ img: null });
+    }, 500);
+  }
+
+  render() {
+    const {
+      classes,
+      openForm,
+      closeForm,
+      avatarInit,
+      addContact
+    } = this.props;
+    const { img } = this.state;
+    const branch = '';
+    return (
+      <div>
+        <Tooltip title="Add New Contact">
+          <Fab color="secondary" onClick={() => addContact()} className={classes.addBtn}>
+            <Add />
+          </Fab>
+        </Tooltip>
+        <FloatingPanel openForm={openForm} branch={branch} closeForm={closeForm}>
+          <AddContactForm
+            onSubmit={this.sendValues}
+            onDrop={this.onDrop}
+            imgAvatar={img === null ? avatarInit : img}
+          />
+        </FloatingPanel>
+      </div>
+    );
+  }
+}
+
+AddContact.propTypes = {
+  classes: PropTypes.object.isRequired,
+  submit: PropTypes.func.isRequired,
+  addContact: PropTypes.func.isRequired,
+  openForm: PropTypes.bool.isRequired,
+  avatarInit: PropTypes.string.isRequired,
+  closeForm: PropTypes.func.isRequired,
+};
+
+export default withStyles(styles)(AddContact);
diff --git a/front/odiparpack/app/components/Contact/AddContactForm.js b/front/odiparpack/app/components/Contact/AddContactForm.js
new file mode 100644
index 0000000..0b51684
--- /dev/null
+++ b/front/odiparpack/app/components/Contact/AddContactForm.js
@@ -0,0 +1,273 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Dropzone from 'react-dropzone';
+import { withStyles } from '@material-ui/core/styles';
+import Type from 'ba-styles/Typography.scss';
+import PhotoCamera from '@material-ui/icons/PhotoCamera';
+import { connect } from 'react-redux';
+import { reduxForm, Field } from 'redux-form/immutable';
+import PermContactCalendar from '@material-ui/icons/PermContactCalendar';
+import Bookmark from '@material-ui/icons/Bookmark';
+import LocalPhone from '@material-ui/icons/LocalPhone';
+import Email from '@material-ui/icons/Email';
+import Smartphone from '@material-ui/icons/Smartphone';
+import LocationOn from '@material-ui/icons/LocationOn';
+import Work from '@material-ui/icons/Work';
+import Language from '@material-ui/icons/Language';
+import css from 'ba-styles/Form.scss';
+import { Button, Avatar, IconButton, Typography, Tooltip, InputAdornment } from '@material-ui/core';
+import { TextFieldRedux } from '../Forms/ReduxFormMUI';
+import styles from './contact-jss';
+
+
+// validation functions
+const required = value => (value == null ? 'Required' : undefined);
+const email = value => (
+  value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
+    ? 'Invalid email'
+    : undefined
+);
+
+class AddContactForm extends React.Component {
+  saveRef = ref => {
+    this.ref = ref;
+    return this.ref;
+  };
+
+  render() {
+    const {
+      classes,
+      reset,
+      pristine,
+      submitting,
+      handleSubmit,
+      onDrop,
+      imgAvatar
+    } = this.props;
+    let dropzoneRef;
+    const acceptedFiles = ['image/jpeg', 'image/png', 'image/bmp'];
+    const fileSizeLimit = 300000;
+    const imgPreview = img => {
+      if (typeof img !== 'string' && img !== '') {
+        return URL.createObjectURL(imgAvatar);
+      }
+      return img;
+    };
+    return (
+      <div>
+        <form onSubmit={handleSubmit}>
+          <section className={css.bodyForm}>
+            <div>
+              <Typography variant="button" component="p" className={Type.textCenter}>Upload Avatar</Typography>
+              <Dropzone
+                className={classes.hiddenDropzone}
+                accept={acceptedFiles.join(',')}
+                acceptClassName="stripes"
+                onDrop={onDrop}
+                maxSize={fileSizeLimit}
+                ref={(node) => { dropzoneRef = node; }}
+              >
+                {({ getRootProps, getInputProps }) => (
+                  <div {...getRootProps()}>
+                    <input {...getInputProps()} />
+                  </div>
+                )}
+              </Dropzone>
+              <div className={classes.avatarWrap}>
+                <Avatar
+                  alt="John Doe"
+                  className={classes.uploadAvatar}
+                  src={imgPreview(imgAvatar)}
+                />
+                <Tooltip id="tooltip-upload" title="Upload Photo">
+                  <IconButton
+                    className={classes.buttonUpload}
+                    component="button"
+                    onClick={() => {
+                      dropzoneRef.open();
+                    }}
+                  >
+                    <PhotoCamera />
+                  </IconButton>
+                </Tooltip>
+              </div>
+            </div>
+            <div>
+              <Field
+                name="name"
+                component={TextFieldRedux}
+                placeholder="Name"
+                label="Name"
+                validate={required}
+                required
+                ref={this.saveRef}
+                className={classes.field}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <PermContactCalendar />
+                    </InputAdornment>
+                  )
+                }}
+              />
+            </div>
+            <div>
+              <Field
+                name="title"
+                component={TextFieldRedux}
+                placeholder="Title"
+                label="Title"
+                className={classes.field}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <Bookmark />
+                    </InputAdornment>
+                  )
+                }}
+              />
+            </div>
+            <div>
+              <Field
+                name="phone"
+                component={TextFieldRedux}
+                placeholder="Phone"
+                type="tel"
+                label="Phone"
+                className={classes.field}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <LocalPhone />
+                    </InputAdornment>
+                  )
+                }}
+              />
+            </div>
+            <div>
+              <Field
+                name="secondaryPhone"
+                component={TextFieldRedux}
+                placeholder="Secondary Phone"
+                type="tel"
+                label="Secondary Phone"
+                className={classes.field}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <Smartphone />
+                    </InputAdornment>
+                  )
+                }}
+              />
+            </div>
+            <div>
+              <Field
+                name="personalEmail"
+                component={TextFieldRedux}
+                placeholder="Personal Email"
+                type="email"
+                validate={email}
+                label="Personal Email"
+                className={classes.field}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <Email />
+                    </InputAdornment>
+                  )
+                }}
+              />
+            </div>
+            <div>
+              <Field
+                name="companyEmail"
+                component={TextFieldRedux}
+                placeholder="Company Email"
+                type="email"
+                validate={email}
+                label="Company Email"
+                className={classes.field}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <Work />
+                    </InputAdornment>
+                  )
+                }}
+              />
+            </div>
+            <div>
+              <Field
+                name="address"
+                component={TextFieldRedux}
+                placeholder="Address"
+                label="Address"
+                className={classes.field}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <LocationOn />
+                    </InputAdornment>
+                  )
+                }}
+              />
+            </div>
+            <div>
+              <Field
+                name="website"
+                component={TextFieldRedux}
+                placeholder="Website"
+                type="url"
+                label="Website"
+                className={classes.field}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <Language />
+                    </InputAdornment>
+                  )
+                }}
+              />
+            </div>
+          </section>
+          <div className={css.buttonArea}>
+            <Button variant="contained" color="secondary" type="submit" disabled={submitting}>
+              Submit
+            </Button>
+            <Button
+              type="button"
+              disabled={pristine || submitting}
+              onClick={reset}
+            >
+              Reset
+            </Button>
+          </div>
+        </form>
+      </div>
+    );
+  }
+}
+
+AddContactForm.propTypes = {
+  classes: PropTypes.object.isRequired,
+  handleSubmit: PropTypes.func.isRequired,
+  reset: PropTypes.func.isRequired,
+  onDrop: PropTypes.func.isRequired,
+  pristine: PropTypes.bool.isRequired,
+  submitting: PropTypes.bool.isRequired,
+  imgAvatar: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
+};
+
+const AddContactFormRedux = reduxForm({
+  form: 'immutableAddContact',
+  enableReinitialize: true,
+})(AddContactForm);
+
+const AddContactInit = connect(
+  state => ({
+    initialValues: state.getIn(['contact', 'formValues'])
+  })
+)(AddContactFormRedux);
+
+export default withStyles(styles)(AddContactInit);
diff --git a/front/odiparpack/app/components/Contact/ContactDetail.js b/front/odiparpack/app/components/Contact/ContactDetail.js
new file mode 100644
index 0000000..f6d2dfc
--- /dev/null
+++ b/front/odiparpack/app/components/Contact/ContactDetail.js
@@ -0,0 +1,195 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import Edit from '@material-ui/icons/Edit';
+import Star from '@material-ui/icons/Star';
+import StarBorder from '@material-ui/icons/StarBorder';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import LocalPhone from '@material-ui/icons/LocalPhone';
+import Email from '@material-ui/icons/Email';
+import Smartphone from '@material-ui/icons/Smartphone';
+import LocationOn from '@material-ui/icons/LocationOn';
+import Work from '@material-ui/icons/Work';
+import Language from '@material-ui/icons/Language';
+import {
+  List,
+  ListItem,
+  ListItemText,
+  ListItemAvatar,
+  Avatar,
+  Menu,
+  MenuItem,
+  IconButton,
+  Typography,
+  Divider,
+} from '@material-ui/core';
+import styles from './contact-jss';
+
+
+const optionsOpt = [
+  'Block Contact',
+  'Delete Contact',
+  'Option 1',
+  'Option 2',
+  'Option 3',
+];
+
+const ITEM_HEIGHT = 48;
+
+class ContactDetail extends React.Component {
+  state = {
+    anchorElOpt: null,
+  };
+
+  handleClickOpt = event => {
+    this.setState({ anchorElOpt: event.currentTarget });
+  };
+
+  handleCloseOpt = () => {
+    this.setState({ anchorElOpt: null });
+  };
+
+  deleteContact = (item) => {
+    this.props.remove(item);
+    this.setState({ anchorElOpt: null });
+  }
+
+  render() {
+    const {
+      classes,
+      dataContact,
+      itemSelected,
+      edit,
+      favorite,
+      showMobileDetail
+    } = this.props;
+    const { anchorElOpt } = this.state;
+    return (
+      <main className={classNames(classes.content, showMobileDetail ? classes.detailPopup : '')}>
+        <section className={classes.cover}>
+          <div className={classes.opt}>
+            <IconButton className={classes.favorite} aria-label="Favorite" onClick={() => favorite(dataContact.get(itemSelected))}>
+              {dataContact.getIn([itemSelected, 'favorited']) ? (<Star />) : <StarBorder />}
+            </IconButton>
+            <IconButton aria-label="Edit" onClick={() => edit(dataContact.get(itemSelected))}>
+              <Edit />
+            </IconButton>
+            <IconButton
+              aria-label="More"
+              aria-owns={anchorElOpt ? 'long-menu' : null}
+              aria-haspopup="true"
+              className={classes.button}
+              onClick={this.handleClickOpt}
+            >
+              <MoreVertIcon />
+            </IconButton>
+            <Menu
+              id="long-menu"
+              anchorEl={anchorElOpt}
+              open={Boolean(anchorElOpt)}
+              onClose={this.handleCloseOpt}
+              PaperProps={{
+                style: {
+                  maxHeight: ITEM_HEIGHT * 4.5,
+                  width: 200,
+                },
+              }}
+            >
+              {optionsOpt.map(option => {
+                if (option === 'Delete Contact') {
+                  return (
+                    <MenuItem key={option} selected={option === 'Edit Profile'} onClick={() => this.deleteContact(dataContact.get(itemSelected))}>
+                      {option}
+                    </MenuItem>
+                  );
+                }
+                return (
+                  <MenuItem key={option} selected={option === 'Edit Profile'} onClick={this.handleCloseOpt}>
+                    {option}
+                  </MenuItem>
+                );
+              })}
+            </Menu>
+          </div>
+          <Avatar alt={dataContact.getIn([itemSelected, 'name'])} src={dataContact.getIn([itemSelected, 'avatar'])} className={classes.avatar} />
+          <Typography className={classes.userName} variant="h4">
+            {dataContact.getIn([itemSelected, 'name'])}
+            <Typography variant="caption" display="block">
+              {dataContact.getIn([itemSelected, 'title'])}
+            </Typography>
+          </Typography>
+        </section>
+        <div>
+          <List>
+            <ListItem>
+              <ListItemAvatar>
+                <Avatar className={classes.blueIcon}>
+                  <LocalPhone />
+                </Avatar>
+              </ListItemAvatar>
+              <ListItemText primary={dataContact.getIn([itemSelected, 'phone'])} secondary="Phone" />
+            </ListItem>
+            <Divider variant="inset" />
+            <ListItem>
+              <ListItemAvatar>
+                <Avatar className={classes.amberIcon}>
+                  <Smartphone />
+                </Avatar>
+              </ListItemAvatar>
+              <ListItemText primary={dataContact.getIn([itemSelected, 'secondaryPhone'])} secondary="Secondary Phone" />
+            </ListItem>
+            <Divider variant="inset" />
+            <ListItem>
+              <ListItemAvatar>
+                <Avatar className={classes.tealIcon}>
+                  <Email />
+                </Avatar>
+              </ListItemAvatar>
+              <ListItemText primary={dataContact.getIn([itemSelected, 'personalEmail'])} secondary="Personal Email" />
+            </ListItem>
+            <Divider variant="inset" />
+            <ListItem>
+              <ListItemAvatar>
+                <Avatar className={classes.brownIcon}>
+                  <Work />
+                </Avatar>
+              </ListItemAvatar>
+              <ListItemText primary={dataContact.getIn([itemSelected, 'companyEmail'])} secondary="Company Email" />
+            </ListItem>
+            <Divider variant="inset" />
+            <ListItem>
+              <ListItemAvatar>
+                <Avatar className={classes.redIcon}>
+                  <LocationOn />
+                </Avatar>
+              </ListItemAvatar>
+              <ListItemText primary={dataContact.getIn([itemSelected, 'address'])} secondary="Address" />
+            </ListItem>
+            <Divider variant="inset" />
+            <ListItem>
+              <ListItemAvatar>
+                <Avatar className={classes.purpleIcon}>
+                  <Language />
+                </Avatar>
+              </ListItemAvatar>
+              <ListItemText primary={dataContact.getIn([itemSelected, 'website'])} secondary="Website" />
+            </ListItem>
+          </List>
+        </div>
+      </main>
+    );
+  }
+}
+
+ContactDetail.propTypes = {
+  classes: PropTypes.object.isRequired,
+  showMobileDetail: PropTypes.bool.isRequired,
+  dataContact: PropTypes.object.isRequired,
+  itemSelected: PropTypes.number.isRequired,
+  edit: PropTypes.func.isRequired,
+  remove: PropTypes.func.isRequired,
+  favorite: PropTypes.func.isRequired,
+};
+
+export default withStyles(styles)(ContactDetail);
diff --git a/front/odiparpack/app/components/Contact/ContactHeader.js b/front/odiparpack/app/components/Contact/ContactHeader.js
new file mode 100644
index 0000000..f17a1a4
--- /dev/null
+++ b/front/odiparpack/app/components/Contact/ContactHeader.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import ArrowBack from '@material-ui/icons/ArrowBack';
+import PermContactCalendar from '@material-ui/icons/PermContactCalendar';
+import Add from '@material-ui/icons/Add';
+import { AppBar, Toolbar, Typography, Button, IconButton } from '@material-ui/core';
+import styles from './contact-jss';
+
+
+class ContactHeader extends React.Component {
+  render() {
+    const {
+      classes,
+      addContact,
+      total,
+      hideDetail,
+      showMobileDetail
+    } = this.props;
+    return (
+      <AppBar
+        position="absolute"
+        className={classes.appBar}
+      >
+        <Toolbar>
+          {showMobileDetail && (
+            <IconButton
+              color="inherit"
+              aria-label="open drawer"
+              onClick={() => hideDetail()}
+              className={classes.navIconHide}
+            >
+              <ArrowBack />
+            </IconButton>
+          )}
+          <Typography variant="subtitle1" className={classes.title} color="inherit" noWrap>
+            <PermContactCalendar />
+            {' '}
+Contacts (
+            {total}
+)
+          </Typography>
+          <Button onClick={() => addContact()} variant="outlined" color="inherit" className={classes.button}>
+            <Add />
+            {' '}
+Add New
+          </Button>
+        </Toolbar>
+      </AppBar>
+    );
+  }
+}
+
+ContactHeader.propTypes = {
+  classes: PropTypes.object.isRequired,
+  showMobileDetail: PropTypes.bool.isRequired,
+  addContact: PropTypes.func.isRequired,
+  hideDetail: PropTypes.func.isRequired,
+  total: PropTypes.number.isRequired,
+};
+
+export default withStyles(styles)(ContactHeader);
diff --git a/front/odiparpack/app/components/Contact/ContactList.js b/front/odiparpack/app/components/Contact/ContactList.js
new file mode 100644
index 0000000..545687d
--- /dev/null
+++ b/front/odiparpack/app/components/Contact/ContactList.js
@@ -0,0 +1,112 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import SearchIcon from '@material-ui/icons/Search';
+import PermContactCalendar from '@material-ui/icons/PermContactCalendar';
+import Star from '@material-ui/icons/Star';
+import {
+  Drawer,
+  Divider,
+  List,
+  ListItem,
+  ListItemText,
+  ListItemAvatar,
+  Avatar,
+  BottomNavigation,
+  BottomNavigationAction,
+} from '@material-ui/core';
+import styles from './contact-jss';
+
+
+class ContactList extends React.Component {
+  state = {
+    filter: 'all',
+  };
+
+  handleChange = (event, value) => {
+    this.setState({ filter: value });
+  };
+
+  render() {
+    const {
+      classes,
+      dataContact,
+      itemSelected,
+      showDetail,
+      search,
+      keyword,
+      clippedRight
+    } = this.props;
+    const { filter } = this.state;
+    const favoriteData = dataContact.filter(item => item.get('favorited') === true);
+    const getItem = dataArray => dataArray.map(data => {
+      const index = dataContact.indexOf(data);
+      if (data.get('name').toLowerCase().indexOf(keyword) === -1) {
+        return false;
+      }
+      return (
+        <ListItem
+          button
+          key={data.get('id')}
+          className={index === itemSelected ? classes.selected : ''}
+          onClick={() => showDetail(data)}
+        >
+          <ListItemAvatar>
+            <Avatar alt={data.get('name')} src={data.get('avatar')} className={classes.avatar} />
+          </ListItemAvatar>
+          <ListItemText primary={data.get('name')} secondary={data.get('title')} />
+        </ListItem>
+      );
+    });
+    return (
+      <Fragment>
+        <Drawer
+          variant="permanent"
+          anchor="left"
+          open
+          classes={{
+            paper: classes.drawerPaper,
+          }}
+        >
+          <div>
+            <div className={classNames(classes.toolbar, clippedRight && classes.clippedRight)}>
+              <div className={classes.flex}>
+                <div className={classes.searchWrapper}>
+                  <div className={classes.search}>
+                    <SearchIcon />
+                  </div>
+                  <input className={classes.input} onChange={(event) => search(event)} placeholder="Search Contact" />
+                </div>
+              </div>
+            </div>
+            <Divider />
+            <List>
+              {filter === 'all' ? getItem(dataContact) : getItem(favoriteData)}
+            </List>
+          </div>
+        </Drawer>
+        <BottomNavigation value={filter} onChange={this.handleChange} className={classes.bottomFilter}>
+          <BottomNavigationAction label="All" value="all" icon={<PermContactCalendar />} />
+          <BottomNavigationAction label="Favorites" value="favorites" icon={<Star />} />
+        </BottomNavigation>
+      </Fragment>
+    );
+  }
+}
+
+ContactList.propTypes = {
+  classes: PropTypes.object.isRequired,
+  dataContact: PropTypes.object.isRequired,
+  keyword: PropTypes.string.isRequired,
+  itemSelected: PropTypes.number.isRequired,
+  showDetail: PropTypes.func.isRequired,
+  search: PropTypes.func.isRequired,
+  clippedRight: PropTypes.bool,
+};
+
+ContactList.defaultProps = {
+  clippedRight: false
+};
+
+export default withStyles(styles)(ContactList);
diff --git a/front/odiparpack/app/components/Contact/contact-jss.js b/front/odiparpack/app/components/Contact/contact-jss.js
new file mode 100644
index 0000000..6745527
--- /dev/null
+++ b/front/odiparpack/app/components/Contact/contact-jss.js
@@ -0,0 +1,282 @@
+import { amber, blue, deepPurple as purple, teal, brown, red } from '@material-ui/core/colors';
+
+const drawerWidth = 240;
+const drawerHeight = 630;
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+    height: drawerHeight,
+    zIndex: 1,
+    overflow: 'hidden',
+    position: 'relative',
+    [theme.breakpoints.up('sm')]: {
+      display: 'flex',
+    },
+    borderRadius: 2,
+    boxShadow: theme.shadows[2]
+  },
+  addBtn: {
+    position: 'fixed',
+    bottom: 30,
+    right: 30,
+    zIndex: 100
+  },
+  appBar: {
+    zIndex: theme.zIndex.drawer + 1,
+    background: theme.palette.secondary.main,
+    height: 64,
+    display: 'flex',
+    justifyContent: 'center',
+    '& $avatar': {
+      marginRight: 10
+    },
+    '& h2': {
+      flex: 1
+    },
+    '& $button': {
+      color: theme.palette.common.white
+    }
+  },
+  button: {
+    [theme.breakpoints.down('sm')]: {
+      display: 'none'
+    },
+  },
+  online: {
+    background: '#CDDC39'
+  },
+  bussy: {
+    background: '#EF5350'
+  },
+  idle: {
+    background: '#FFC107'
+  },
+  offline: {
+    background: '#9E9E9E'
+  },
+  status: {
+    padding: '2px 6px',
+    '& span': {
+      borderRadius: '50%',
+      display: 'inline-block',
+      marginRight: 2,
+      width: 10,
+      height: 10,
+      border: `1px solid ${theme.palette.common.white}`
+    }
+  },
+  appBarShift: {
+    marginLeft: 0,
+    width: '100%',
+    transition: theme.transitions.create(['width', 'margin'], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    [theme.breakpoints.up('md')]: {
+      marginLeft: drawerWidth,
+      width: `calc(100% - ${drawerWidth}px)`,
+    },
+  },
+  drawerPaper: {
+    [theme.breakpoints.up('sm')]: {
+      width: drawerWidth,
+    },
+    position: 'relative',
+    paddingBottom: 65,
+    height: drawerHeight,
+  },
+  clippedRight: {},
+  toolbar: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 8,
+    position: 'relative',
+    '&$clippedRight': {
+      marginTop: 66
+    }
+  },
+  content: {
+    flexGrow: 1,
+    paddingTop: 64,
+    backgroundColor: theme.palette.background.paper,
+  },
+  detailPopup: {
+    [theme.breakpoints.down('xs')]: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      zIndex: 1200,
+      width: '100%',
+      overflow: 'auto',
+      height: 'calc(100% - 50px)'
+    }
+  },
+  title: {
+    display: 'flex',
+    flex: 1,
+    '& svg': {
+      marginRight: 5
+    }
+  },
+  flex: {
+    flex: 1,
+  },
+  searchWrapper: {
+    fontFamily: theme.typography.fontFamily,
+    position: 'relative',
+    borderRadius: 2,
+    display: 'block',
+    background: theme.palette.grey[100]
+  },
+  search: {
+    width: 'auto',
+    height: '100%',
+    top: 0,
+    left: 20,
+    position: 'absolute',
+    pointerEvents: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    font: 'inherit',
+    padding: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(6)}px`,
+    border: 0,
+    display: 'block',
+    verticalAlign: 'middle',
+    whiteSpace: 'normal',
+    background: 'none',
+    margin: 0, // Reset for Safari
+    color: 'inherit',
+    width: '100%',
+    '&:focus': {
+      outline: 0,
+    },
+  },
+  bottomFilter: {
+    position: 'absolute',
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+      width: 240,
+    },
+    zIndex: 2000,
+    bottom: 0,
+    left: 0,
+    background: theme.palette.grey[100],
+    borderTop: `1px solid ${theme.palette.grey[300]}`,
+    borderRight: `1px solid ${theme.palette.grey[300]}`,
+  },
+  avatar: {},
+  userName: {
+    textAlign: 'left'
+  },
+  cover: {
+    padding: 20,
+    height: 130,
+    position: 'relative',
+    background: theme.palette.primary.light,
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    '& $avatar': {
+      boxShadow: theme.shadows[4],
+      width: 100,
+      height: 100,
+      marginRight: 20
+    },
+  },
+  opt: {
+    position: 'absolute',
+    top: 10,
+    right: 10,
+  },
+  favorite: {
+    color: amber[500]
+  },
+  redIcon: {
+    background: red[50],
+    '& svg': {
+      color: red[500]
+    }
+  },
+  brownIcon: {
+    background: brown[50],
+    '& svg': {
+      color: brown[500]
+    }
+  },
+  tealIcon: {
+    background: teal[50],
+    '& svg': {
+      color: teal[500]
+    }
+  },
+  blueIcon: {
+    background: blue[50],
+    '& svg': {
+      color: blue[500]
+    }
+  },
+  amberIcon: {
+    background: amber[50],
+    '& svg': {
+      color: amber[500]
+    }
+  },
+  purpleIcon: {
+    background: purple[50],
+    '& svg': {
+      color: purple[500]
+    }
+  },
+  field: {
+    width: '100%',
+    marginBottom: 20,
+    '& svg': {
+      color: theme.palette.grey[400],
+      fontSize: 18,
+    }
+  },
+  uploadAvatar: {
+    width: '100%',
+    height: '100%',
+    background: theme.palette.grey[200],
+    boxShadow: theme.shadows[4],
+  },
+  selected: {
+    background: theme.palette.secondary.light,
+    borderLeft: `2px solid ${theme.palette.secondary.main}`,
+    paddingLeft: 22,
+    '& h3': {
+      color: theme.palette.secondary.dark
+    }
+  },
+  hiddenDropzone: {
+    display: 'none'
+  },
+  avatarWrap: {
+    width: 100,
+    height: 100,
+    margin: '10px auto 30px',
+    position: 'relative'
+  },
+  buttonUpload: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)'
+  },
+  navIconHide: {
+    marginRight: theme.spacing(1),
+    [theme.breakpoints.up('sm')]: {
+      display: 'none'
+    }
+  }
+});
+
+export default styles;