4 files changed, 312 insertions, 0 deletions
diff --git a/front/odiparpack/app/components/SocialMedia/jss/cover-jss.js b/front/odiparpack/app/components/SocialMedia/jss/cover-jss.js
new file mode 100644
index 0000000..695512d
--- /dev/null
+++ b/front/odiparpack/app/components/SocialMedia/jss/cover-jss.js
@@ -0,0 +1,55 @@
+import { fade } from '@material-ui/core/styles/colorManipulator';
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+  },
+  cover: {
+    '& $name, & $subheading': {
+      color: theme.palette.common.white
+    },
+    position: 'relative',
+    width: '100%',
+    overflow: 'hidden',
+    height: 360,
+    backgroundColor: theme.palette.primary.main,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+    borderRadius: 2,
+    backgroundSize: 'cover',
+    textAlign: 'center',
+    boxShadow: theme.shadows[7]
+  },
+  content: {
+    background: fade(theme.palette.secondary.main, 0.3),
+    height: '100%',
+    width: '100%',
+    padding: `70px ${theme.spacing(3)}px 30px`
+  },
+  name: {},
+  subheading: {},
+  avatar: {
+    margin: '0 auto',
+    width: 120,
+    height: 120,
+    border: '3px solid rgba(255, 255, 255, .5)'
+  },
+  opt: {
+    position: 'absolute',
+    top: 10,
+    right: 10,
+    '& button': {
+      color: theme.palette.common.white
+    }
+  },
+  verified: {
+    margin: theme.spacing(1),
+    top: 10,
+    position: 'relative'
+  },
+  button: {
+    marginTop: theme.spacing(1)
+  }
+});
+
+export default styles;
diff --git a/front/odiparpack/app/components/SocialMedia/jss/socialMedia-jss.js b/front/odiparpack/app/components/SocialMedia/jss/socialMedia-jss.js
new file mode 100644
index 0000000..03f5726
--- /dev/null
+++ b/front/odiparpack/app/components/SocialMedia/jss/socialMedia-jss.js
@@ -0,0 +1,89 @@
+import { deepOrange, deepPurple, pink, green } from '@material-ui/core/colors';
+
+const styles = theme => ({
+  mobileStepper: {
+    margin: `0 auto ${theme.spacing(4)}px`,
+    textAlign: 'center'
+  },
+  avatar: {
+    marginRight: 15,
+  },
+  orangeAvatar: {
+    backgroundColor: deepOrange[500],
+  },
+  purpleAvatar: {
+    backgroundColor: deepPurple[500],
+  },
+  pinkAvatar: {
+    backgroundColor: pink[500],
+  },
+  greenAvatar: {
+    backgroundColor: green[500],
+  },
+  divider: {
+    margin: `${theme.spacing(2)}px 0`,
+    background: 'none'
+  },
+  link: {
+    color: theme.palette.primary.main
+  },
+  noPadding: {
+    padding: '5px',
+    marginLeft: -10
+  },
+  sliderWrap: {
+    height: 310,
+    overflow: 'hidden'
+  },
+  title: {
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    fontSize: 18
+  },
+  profileList: {},
+  trendingList: {
+    '& li': {
+      display: 'block'
+    }
+  },
+  input: {},
+  commentContent: {
+    padding: 10
+  },
+  commentText: {
+    marginTop: 5
+  },
+  buttonClose: {
+    position: 'absolute',
+    top: 20,
+    right: 20
+  },
+  avatarMini: {
+    width: 30,
+    height: 30,
+  },
+  commentAction: {
+    background: theme.palette.grey[100],
+    margin: 0,
+  },
+  commentForm: {
+    display: 'flex',
+    alignItems: 'center',
+    [theme.breakpoints.up('md')]: {
+      minWidth: 600,
+    },
+    width: '100%',
+    padding: '15px 20px',
+    margin: 0,
+    '& $input': {
+      flex: 1,
+      margin: '0 10px'
+    }
+  },
+  commentHead: {
+    display: 'flex'
+  }
+});
+
+export default styles;
diff --git a/front/odiparpack/app/components/SocialMedia/jss/timeline-jss.js b/front/odiparpack/app/components/SocialMedia/jss/timeline-jss.js
new file mode 100644
index 0000000..dcdb018
--- /dev/null
+++ b/front/odiparpack/app/components/SocialMedia/jss/timeline-jss.js
@@ -0,0 +1,95 @@
+import { pink } from '@material-ui/core/colors';
+const styles = theme => ({
+  card: {
+    display: 'flex',
+    justifyContent: 'space-between'
+  },
+  content: {
+    flex: '1 0 auto',
+  },
+  cover: {
+    width: 150,
+    height: 150,
+  },
+  avatar: {
+    width: 40,
+    height: 40
+  },
+  cardSocmed: {
+    [theme.breakpoints.up('md')]: {
+      marginLeft: 90,
+      minWidth: 400,
+    },
+    marginBottom: theme.spacing(3),
+    position: 'relative',
+  },
+  media: {
+    height: 0,
+    paddingTop: '56.25%', // 16:9
+  },
+  actions: {
+    display: 'flex',
+  },
+  expandOpen: {
+    transform: 'rotate(180deg)',
+  },
+  iconBullet: {},
+  icon: {},
+  timeline: {
+    position: 'relative',
+    '&:before': {
+      left: 39,
+      content: '""',
+      top: 40,
+      height: '101%',
+      border: `1px solid ${theme.palette.grey[300]}`,
+      position: 'absolute',
+      [theme.breakpoints.down('sm')]: {
+        display: 'none'
+      },
+    },
+    '& li': {
+      position: 'relative',
+      display: 'block'
+    },
+    '& time': {
+      top: 70,
+      left: 20,
+      position: 'absolute',
+      textAlign: 'center',
+      background: theme.palette.common.white,
+      boxShadow: theme.shadows[3],
+      padding: '4px 40px 4px 15px',
+      borderLeft: `3px solid ${theme.palette.secondary.main}`
+    },
+    '& $iconBullet': {
+      position: 'absolute',
+      borderRadius: '50%',
+      top: 20,
+      width: 40,
+      height: 40,
+      background: theme.palette.secondary.main,
+      boxShadow: theme.shadows[5],
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      left: 20,
+      '& $icon': {
+        color: theme.palette.common.white,
+      },
+      [theme.breakpoints.down('sm')]: {
+        display: 'none'
+      },
+    },
+  },
+  rightIcon: {
+    marginLeft: 'auto',
+    display: 'flex',
+    alignItems: 'center'
+  },
+  liked: {
+    color: pink[500]
+  }
+});
+
+export default styles;
diff --git a/front/odiparpack/app/components/SocialMedia/jss/writePost-jss.js b/front/odiparpack/app/components/SocialMedia/jss/writePost-jss.js
new file mode 100644
index 0000000..cd18422
--- /dev/null
+++ b/front/odiparpack/app/components/SocialMedia/jss/writePost-jss.js
@@ -0,0 +1,73 @@
+const styles = theme => ({
+  statusWrap: {
+    marginBottom: theme.spacing(3),
+    '& > div': {
+      overflow: 'hidden'
+    },
+    '& textarea': {
+      border: 'none',
+      padding: '20px 20px 20px 50px',
+      outline: 'none',
+      width: '100%',
+      resize: 'none',
+      overflow: 'hidden',
+      height: 50,
+      transition: theme.transitions.create(['height'], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+      }),
+      '&:focus': {
+        height: 100,
+        overflow: 'auto',
+      }
+    }
+  },
+  avatarMini: {
+    width: 30,
+    height: 30,
+    position: 'absolute',
+    top: 40,
+    left: 10
+  },
+  control: {
+    padding: '10px 20px 0',
+    display: 'flex'
+  },
+  privacy: {
+    flex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    textAlign: 'right',
+  },
+  button: {
+    margin: theme.spacing(0.5)
+  },
+  sendBtn: {
+    position: 'relative',
+    top: 5
+  },
+  formControl: {
+    margin: '0 20px',
+    width: 150,
+    paddingLeft: 10,
+    textAlign: 'left',
+    '&:before, &:after': {
+      borderBottom: 'none'
+    }
+  },
+  hiddenDropzone: {
+    display: 'none'
+  },
+  preview: {
+    position: 'relative',
+    '& figure': {
+      textAlign: 'center'
+    }
+  },
+  removeBtn: {
+    opacity: 1
+  }
+});
+
+export default styles;