1 files changed, 282 insertions, 0 deletions
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;