Merge branch 'gabshr' into dayana

9 files changed, 887 insertions, 0 deletions

diff --git a/front/odiparpack/app/components/CardPaper/GeneralCard.js b/front/odiparpack/app/components/CardPaper/GeneralCard.js
new file mode 100644
index 0000000..85f7787
--- /dev/null
+++ b/front/odiparpack/app/components/CardPaper/GeneralCard.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import ShareIcon from '@material-ui/icons/Share';
+import Comment from '@material-ui/icons/Comment';
+import { Card, CardActions, CardContent, IconButton } from '@material-ui/core';
+import styles from './cardStyle-jss';
+
+
+class GeneralCard extends React.Component {
+  render() {
+    const {
+      classes,
+      children,
+      liked,
+      shared,
+      commented
+    } = this.props;
+    return (
+      <Card className={classes.card}>
+        <CardContent>
+          {children}
+        </CardContent>
+        <CardActions className={classes.actions}>
+          <IconButton aria-label="Add to favorites" className={classes.button}>
+            <FavoriteIcon className={liked > 0 && classes.liked} />
+            <span className={classes.num}>{liked}</span>
+          </IconButton>
+          <IconButton aria-label="Share" className={classes.button}>
+            <ShareIcon className={shared > 0 && classes.shared} />
+            <span className={classes.num}>{shared}</span>
+          </IconButton>
+          <IconButton aria-label="Comment" className={classes.rightIcon}>
+            <Comment />
+            <span className={classes.num}>{commented}</span>
+          </IconButton>
+        </CardActions>
+      </Card>
+    );
+  }
+}
+
+GeneralCard.propTypes = {
+  classes: PropTypes.object.isRequired,
+  children: PropTypes.node.isRequired,
+  liked: PropTypes.number.isRequired,
+  shared: PropTypes.number.isRequired,
+  commented: PropTypes.number.isRequired,
+};
+
+export default withStyles(styles)(GeneralCard);
diff --git a/front/odiparpack/app/components/CardPaper/IdentityCard.js b/front/odiparpack/app/components/CardPaper/IdentityCard.js
new file mode 100644
index 0000000..4f4bd6c
--- /dev/null
+++ b/front/odiparpack/app/components/CardPaper/IdentityCard.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import LocalPhone from '@material-ui/icons/LocalPhone';
+import LocationOn from '@material-ui/icons/LocationOn';
+import {
+  Card, Typography, CardContent,
+  ListItem, ListItemText, ListItemAvatar,
+  Avatar, Divider
+} from '@material-ui/core';
+import styles from './cardStyle-jss';
+
+
+class IdentityCard extends React.Component {
+  render() {
+    const {
+      classes,
+      title,
+      name,
+      avatar,
+      phone,
+      address,
+    } = this.props;
+    return (
+      <Card className={classes.card}>
+        <CardContent>
+          <Typography variant="subtitle1">{title}</Typography>
+          <Divider className={classes.divider} />
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar
+                alt={name}
+                src={avatar}
+                className={classes.avatar}
+              />
+            </ListItemAvatar>
+            <ListItemText primary="Name" secondary={name} />
+          </ListItem>
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar>
+                <LocalPhone />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary="Phone" secondary={phone} />
+          </ListItem>
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar>
+                <LocationOn />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary="Address" secondary={address} />
+          </ListItem>
+        </CardContent>
+      </Card>
+    );
+  }
+}
+
+IdentityCard.propTypes = {
+  classes: PropTypes.object.isRequired,
+  title: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  avatar: PropTypes.string.isRequired,
+  phone: PropTypes.string.isRequired,
+  address: PropTypes.string.isRequired,
+};
+
+export default withStyles(styles)(IdentityCard);
diff --git a/front/odiparpack/app/components/CardPaper/NewsCard.js b/front/odiparpack/app/components/CardPaper/NewsCard.js
new file mode 100644
index 0000000..f9994d8
--- /dev/null
+++ b/front/odiparpack/app/components/CardPaper/NewsCard.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Card, CardMedia, CardActions, CardContent, Button } from '@material-ui/core';
+import styles from './cardStyle-jss';
+
+
+class NewsCard extends React.Component {
+  render() {
+    const {
+      classes,
+      children,
+      title,
+      image,
+    } = this.props;
+    return (
+      <Card className={classes.cardMedia}>
+        <CardMedia
+          className={classes.media}
+          image={image}
+          title={title}
+        />
+        <CardContent>
+          {children}
+        </CardContent>
+        <CardActions>
+          <Button size="small" color="primary">
+            Share
+          </Button>
+          <Button size="small" color="primary">
+            Learn More
+          </Button>
+        </CardActions>
+      </Card>
+    );
+  }
+}
+
+NewsCard.propTypes = {
+  classes: PropTypes.object.isRequired,
+  children: PropTypes.node.isRequired,
+  title: PropTypes.string.isRequired,
+  image: PropTypes.string.isRequired,
+};
+
+export default withStyles(styles)(NewsCard);
diff --git a/front/odiparpack/app/components/CardPaper/PlayerCard.js b/front/odiparpack/app/components/CardPaper/PlayerCard.js
new file mode 100644
index 0000000..eabbb3a
--- /dev/null
+++ b/front/odiparpack/app/components/CardPaper/PlayerCard.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import SkipPreviousIcon from '@material-ui/icons/SkipPrevious';
+import PlayArrowIcon from '@material-ui/icons/PlayArrow';
+import SkipNextIcon from '@material-ui/icons/SkipNext';
+import { Typography, Card, CardMedia, CardContent, IconButton } from '@material-ui/core';
+import styles from './cardStyle-jss';
+
+
+class PlayerCard extends React.Component {
+  state = { expanded: false };
+
+  handleExpandClick = () => {
+    this.setState({ expanded: !this.state.expanded });
+  };
+
+  render() {
+    const {
+      classes,
+      theme,
+      title,
+      artist,
+      cover,
+    } = this.props;
+
+    return (
+      <Card className={classes.cardPlayer}>
+        <div className={classes.details}>
+          <CardContent className={classes.content}>
+            <Typography variant="h5">{title}</Typography>
+            <Typography variant="subtitle1" color="textSecondary">
+              {artist}
+            </Typography>
+          </CardContent>
+          <div className={classes.controls}>
+            <IconButton aria-label="Previous">
+              {theme.direction === 'rtl' ? <SkipNextIcon /> : <SkipPreviousIcon />}
+            </IconButton>
+            <IconButton aria-label="Play/pause">
+              <PlayArrowIcon className={classes.playIcon} />
+            </IconButton>
+            <IconButton aria-label="Next">
+              {theme.direction === 'rtl' ? <SkipPreviousIcon /> : <SkipNextIcon />}
+            </IconButton>
+          </div>
+        </div>
+        <CardMedia
+          className={classes.cover}
+          image={cover}
+          title={title}
+        />
+      </Card>
+    );
+  }
+}
+
+PlayerCard.propTypes = {
+  classes: PropTypes.object.isRequired,
+  theme: PropTypes.object.isRequired,
+  title: PropTypes.string.isRequired,
+  artist: PropTypes.string.isRequired,
+  cover: PropTypes.string.isRequired,
+};
+
+export default withStyles(styles, { withTheme: true })(PlayerCard);
diff --git a/front/odiparpack/app/components/CardPaper/PostCard.js b/front/odiparpack/app/components/CardPaper/PostCard.js
new file mode 100644
index 0000000..9c8f05b
--- /dev/null
+++ b/front/odiparpack/app/components/CardPaper/PostCard.js
@@ -0,0 +1,142 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import ShareIcon from '@material-ui/icons/Share';
+import Comment from '@material-ui/icons/Comment';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import {
+  Typography,
+  Card,
+  Menu,
+  MenuItem,
+  CardHeader,
+  CardMedia,
+  CardContent,
+  CardActions,
+  IconButton,
+  Avatar,
+} from '@material-ui/core';
+import styles from './cardStyle-jss';
+
+
+const optionsOpt = [
+  'Report this post',
+  'Hide this post',
+  'Copy link',
+];
+
+const ITEM_HEIGHT = 48;
+
+class PostCard extends React.Component {
+  state = { anchorElOpt: null };
+
+  handleClickOpt = event => {
+    this.setState({ anchorElOpt: event.currentTarget });
+  };
+
+  handleCloseOpt = () => {
+    this.setState({ anchorElOpt: null });
+  };
+
+  render() {
+    const {
+      classes,
+      avatar,
+      name,
+      date,
+      image,
+      content,
+      liked,
+      shared,
+      commented
+    } = this.props;
+    const { anchorElOpt } = this.state;
+    return (
+      <Card className={classes.cardSocmed}>
+        <CardHeader
+          avatar={
+            <Avatar alt="avatar" src={avatar} className={classes.avatar} />
+          }
+          action={(
+            <IconButton
+              aria-label="More"
+              aria-owns={anchorElOpt ? 'long-menu' : null}
+              aria-haspopup="true"
+              className={classes.button}
+              onClick={this.handleClickOpt}
+            >
+              <MoreVertIcon />
+            </IconButton>
+          )}
+          title={name}
+          subheader={date}
+        />
+        <Menu
+          id="long-menu"
+          anchorEl={anchorElOpt}
+          open={Boolean(anchorElOpt)}
+          onClose={this.handleCloseOpt}
+          PaperProps={{
+            style: {
+              maxHeight: ITEM_HEIGHT * 4.5,
+              width: 200,
+            },
+          }}
+        >
+          {optionsOpt.map(option => (
+            <MenuItem key={option} selected={option === 'Edit Profile'} onClick={this.handleCloseOpt}>
+              {option}
+            </MenuItem>
+          ))}
+        </Menu>
+        { image !== ''
+          && (
+            <CardMedia
+              className={classes.media}
+              image={image}
+              title="Contemplative Reptile"
+            />
+          )
+        }
+        <CardContent>
+          <Typography component="p">
+            {content}
+          </Typography>
+        </CardContent>
+        <CardActions className={classes.actions}>
+          <IconButton aria-label="Add to favorites" className={classes.button}>
+            <FavoriteIcon className={liked > 0 && classes.liked} />
+            <span className={classes.num}>{liked}</span>
+          </IconButton>
+          <IconButton aria-label="Share" className={classes.button}>
+            <ShareIcon className={shared > 0 && classes.shared} />
+            <span className={classes.num}>{shared}</span>
+          </IconButton>
+          <IconButton aria-label="Comment" className={classes.rightIcon}>
+            <Comment />
+            <span className={classes.num}>{commented}</span>
+          </IconButton>
+        </CardActions>
+      </Card>
+    );
+  }
+}
+
+PostCard.propTypes = {
+  classes: PropTypes.object.isRequired,
+  avatar: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  date: PropTypes.string.isRequired,
+  image: PropTypes.string,
+  content: PropTypes.string.isRequired,
+  liked: PropTypes.number.isRequired,
+  shared: PropTypes.number.isRequired,
+  commented: PropTypes.number.isRequired,
+};
+
+PostCard.defaultProps = {
+  image: ''
+};
+
+export default withStyles(styles)(PostCard);
diff --git a/front/odiparpack/app/components/CardPaper/ProductCard.js b/front/odiparpack/app/components/CardPaper/ProductCard.js
new file mode 100644
index 0000000..967e2fd
--- /dev/null
+++ b/front/odiparpack/app/components/CardPaper/ProductCard.js
@@ -0,0 +1,134 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { isWidthUp } from '@material-ui/core/withWidth';
+import classNames from 'classnames';
+import AddShoppingCart from '@material-ui/icons/AddShoppingCart';
+import Type from 'ba-styles/Typography.scss';
+import {
+  Typography,
+  withWidth,
+  Card,
+  IconButton,
+  Tooltip,
+  CardMedia,
+  CardActions,
+  CardContent,
+  Chip,
+  Fab,
+  Button,
+} from '@material-ui/core';
+import Rating from '../Rating/Rating';
+import styles from './cardStyle-jss';
+
+
+class ProductCard extends React.Component {
+  render() {
+    const {
+      classes,
+      discount,
+      soldout,
+      thumbnail,
+      name,
+      desc,
+      ratting,
+      price,
+      prevPrice,
+      list,
+      detailOpen,
+      addToCart,
+      width,
+    } = this.props;
+    return (
+      <Card className={classNames(classes.cardProduct, isWidthUp('sm', width) && list ? classes.cardList : '')}>
+        <div className={classes.status}>
+          {discount !== '' && (
+            <Chip label={'Discount ' + discount} className={classes.chipDiscount} />
+          )}
+          {soldout && (
+            <Chip label="Sold Out" className={classes.chipSold} />
+          )}
+        </div>
+        <CardMedia
+          className={classes.mediaProduct}
+          image={thumbnail}
+          title={name}
+        />
+        <CardContent className={classes.floatingButtonWrap}>
+          {!soldout && (
+            <Tooltip title="Add to cart" placement="top">
+              <Fab onClick={addToCart} size="small" color="secondary" aria-label="add" className={classes.buttonAdd}>
+                <AddShoppingCart />
+              </Fab>
+            </Tooltip>
+          )}
+          <Typography noWrap gutterBottom variant="h5" className={classes.title} component="h2">
+            {name}
+          </Typography>
+          <Typography component="p" className={classes.desc}>
+            {desc}
+          </Typography>
+          <div className={classes.ratting}>
+            <Rating value={ratting} max={5} readOnly />
+          </div>
+        </CardContent>
+        <CardActions className={classes.price}>
+          <Typography variant="h5">
+            <span>
+$
+              {price}
+            </span>
+          </Typography>
+          {prevPrice > 0 && (
+            <Typography variant="caption" component="h5">
+              <span className={Type.lineThrought}>
+$
+                {prevPrice}
+              </span>
+            </Typography>
+          )}
+          <div className={classes.rightAction}>
+            <Button size="small" variant="outlined" color="secondary" onClick={detailOpen}>
+              See Detail
+            </Button>
+            {!soldout && (
+              <Tooltip title="Add to cart" placement="top">
+                <IconButton color="secondary" onClick={addToCart} className={classes.buttonAddList}>
+                  <AddShoppingCart />
+                </IconButton>
+              </Tooltip>
+            )}
+          </div>
+        </CardActions>
+      </Card>
+    );
+  }
+}
+
+ProductCard.propTypes = {
+  classes: PropTypes.object.isRequired,
+  discount: PropTypes.string,
+  width: PropTypes.string.isRequired,
+  soldout: PropTypes.bool,
+  thumbnail: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  desc: PropTypes.string.isRequired,
+  ratting: PropTypes.number.isRequired,
+  price: PropTypes.number.isRequired,
+  prevPrice: PropTypes.number,
+  list: PropTypes.bool,
+  detailOpen: PropTypes.func,
+  addToCart: PropTypes.func,
+};
+
+ProductCard.defaultProps = {
+  discount: '',
+  soldout: false,
+  prevPrice: 0,
+  list: false,
+  detailOpen: () => (false),
+  addToCart: () => (false),
+};
+
+const ProductCardResponsive = withWidth()(ProductCard);
+export default withStyles(styles)(ProductCardResponsive);
diff --git a/front/odiparpack/app/components/CardPaper/ProfileCard.js b/front/odiparpack/app/components/CardPaper/ProfileCard.js
new file mode 100644
index 0000000..7827941
--- /dev/null
+++ b/front/odiparpack/app/components/CardPaper/ProfileCard.js
@@ -0,0 +1,99 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Type from 'ba-styles/Typography.scss';
+import VerifiedUser from '@material-ui/icons/VerifiedUser';
+import SupervisorAccount from '@material-ui/icons/SupervisorAccount';
+import Favorite from '@material-ui/icons/Favorite';
+import PhotoLibrary from '@material-ui/icons/PhotoLibrary';
+import {
+  Typography,
+  Card,
+  CardMedia,
+  CardContent,
+  CardActions,
+  Button,
+  Avatar,
+  BottomNavigation,
+  BottomNavigationAction,
+  Divider,
+} from '@material-ui/core';
+import styles from './cardStyle-jss';
+
+
+class ProfileCard extends React.Component {
+  state = { expanded: false };
+
+  handleExpandClick = () => {
+    this.setState({ expanded: !this.state.expanded });
+  };
+
+  render() {
+    const {
+      classes,
+      cover,
+      avatar,
+      name,
+      title,
+      connection,
+      isVerified,
+      btnText
+    } = this.props;
+
+    return (
+      <Card className={classes.cardSocmed}>
+        <CardMedia
+          className={classes.mediaProfile}
+          image={cover}
+          title="cover"
+        />
+        <CardContent className={classes.contentProfile}>
+          <Avatar alt="avatar" src={avatar} className={classes.avatarBig} />
+          <Typography variant="h6" className={classes.name} gutterBottom>
+            {name}
+            {isVerified && <VerifiedUser className={classes.verified} />}
+          </Typography>
+          <Typography className={classes.subheading} gutterBottom>
+            <span className={Type.regular}>{title}</span>
+          </Typography>
+          <Typography variant="caption" component="p">
+            {connection}
+            {' '}
+connection
+          </Typography>
+          <Button className={classes.buttonProfile} size="large" variant="outlined" color="secondary">
+            {btnText}
+          </Button>
+        </CardContent>
+        <Divider />
+        <CardActions>
+          <BottomNavigation
+            showLabels
+            className={classes.bottomLink}
+          >
+            <BottomNavigationAction label="20 Connection" icon={<SupervisorAccount />} />
+            <BottomNavigationAction label="10 Favorites" icon={<Favorite />} />
+            <BottomNavigationAction label="5 Albums" icon={<PhotoLibrary />} />
+          </BottomNavigation>
+        </CardActions>
+      </Card>
+    );
+  }
+}
+
+ProfileCard.propTypes = {
+  classes: PropTypes.object.isRequired,
+  cover: PropTypes.string.isRequired,
+  avatar: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  connection: PropTypes.number.isRequired,
+  btnText: PropTypes.string.isRequired,
+  isVerified: PropTypes.bool
+};
+
+ProfileCard.defaultProps = {
+  isVerified: false
+};
+
+export default withStyles(styles)(ProfileCard);
diff --git a/front/odiparpack/app/components/CardPaper/VideoCard.js b/front/odiparpack/app/components/CardPaper/VideoCard.js
new file mode 100644
index 0000000..69aa60c
--- /dev/null
+++ b/front/odiparpack/app/components/CardPaper/VideoCard.js
@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import PlayArrowIcon from '@material-ui/icons/PlayArrow';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import { red } from '@material-ui/core/colors';
+
+import { Card, CardHeader, CardMedia, IconButton, Avatar } from '@material-ui/core';
+
+const styles = theme => ({
+  playIcon: {
+    height: 38,
+    width: 38,
+  },
+  cardSocmed: {
+    maxWidth: 400,
+  },
+  media: {
+    height: 0,
+    paddingTop: '56.25%', // 16:9
+    position: 'relative',
+  },
+  avatar: {
+    backgroundColor: red[500],
+  },
+  playBtn: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    width: 64,
+    height: 64,
+    transform: 'translate(-50%, -50%)',
+    '& svg': {
+      color: theme.palette.common.white,
+      fontSize: 64
+    }
+  }
+});
+
+class VideoCard extends React.Component {
+  state = { expanded: false };
+
+  handleExpandClick = () => {
+    this.setState({ expanded: !this.state.expanded });
+  };
+
+  render() {
+    const {
+      classes,
+      title,
+      cover,
+      date
+    } = this.props;
+
+    return (
+      <Card className={classes.cardSocmed}>
+        <CardMedia
+          className={classes.media}
+          image={cover}
+          title={title}
+        >
+          <IconButton className={classes.playBtn}><PlayArrowIcon /></IconButton>
+        </CardMedia>
+        <CardHeader
+          avatar={(
+            <Avatar aria-label="Recipe" className={classes.avatar}>
+              R
+            </Avatar>
+          )}
+          action={(
+            <IconButton>
+              <MoreVertIcon />
+            </IconButton>
+          )}
+          title={title}
+          subheader={date}
+        />
+      </Card>
+    );
+  }
+}
+
+VideoCard.propTypes = {
+  classes: PropTypes.object.isRequired,
+  title: PropTypes.string.isRequired,
+  cover: PropTypes.string.isRequired,
+  date: PropTypes.string.isRequired,
+};
+
+export default withStyles(styles)(VideoCard);
diff --git a/front/odiparpack/app/components/CardPaper/cardStyle-jss.js b/front/odiparpack/app/components/CardPaper/cardStyle-jss.js
new file mode 100644
index 0000000..df367a0
--- /dev/null
+++ b/front/odiparpack/app/components/CardPaper/cardStyle-jss.js
@@ -0,0 +1,188 @@
+import { pink, lightGreen, blueGrey as dark } from '@material-ui/core/colors';
+
+const styles = theme => ({
+  divider: {
+    margin: `${theme.spacing(3)}px 0`
+  },
+  card: {
+    minWidth: 275,
+  },
+  liked: {
+    color: pink[500]
+  },
+  shared: {
+    color: lightGreen[500]
+  },
+  num: {
+    fontSize: 14,
+    marginLeft: 5
+  },
+  rightIcon: {
+    marginLeft: 'auto',
+    display: 'flex',
+    alignItems: 'center'
+  },
+  button: {
+    marginRight: theme.spacing(1)
+  },
+  media: {
+    height: 0,
+    paddingTop: '56.25%', // 16:9
+  },
+  cardPlayer: {
+    display: 'flex',
+    justifyContent: 'space-between'
+  },
+  details: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  content: {
+    flex: '1 0 auto',
+  },
+  cover: {
+    width: 150,
+    height: 150,
+  },
+  controls: {
+    display: 'flex',
+    alignItems: 'center',
+    paddingLeft: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+  },
+  playIcon: {
+    height: 38,
+    width: 38,
+  },
+  cardSocmed: {
+    minWidth: 275,
+  },
+  cardProduct: {
+    position: 'relative'
+  },
+  mediaProduct: {
+    height: 0,
+    paddingTop: '60.25%', // 16:9
+  },
+  rightAction: {
+    '&:not(:first-child)': {
+      marginLeft: 'auto',
+      display: 'flex',
+      alignItems: 'center'
+    }
+  },
+  floatingButtonWrap: {
+    position: 'relative',
+    paddingTop: 50
+  },
+  buttonAdd: {
+    position: 'absolute',
+    right: 20,
+    top: -20,
+  },
+  buttonAddList: {
+    display: 'none',
+    marginLeft: 10
+  },
+  title: {
+    fontSize: 20,
+    height: 30,
+  },
+  ratting: {
+    margin: '10px 0',
+    '& button': {
+      width: 24,
+      height: 24
+    }
+  },
+  status: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    padding: 10,
+    '& > *': {
+      margin: 5
+    }
+  },
+  desc: {
+    height: 45,
+    overflow: 'hidden'
+  },
+  chipDiscount: {
+    background: theme.palette.primary.light,
+    color: theme.palette.primary.dark,
+  },
+  chipSold: {
+    background: dark[500],
+    color: theme.palette.getContrastText(dark[500]),
+  },
+  contentProfle: {
+    flex: '1 0 auto',
+    textAlign: 'center'
+  },
+  mediaProfile: {
+    height: 0,
+    paddingTop: '36.25%', // 16:9
+  },
+  actions: {
+    display: 'flex',
+  },
+  avatarBig: {
+    width: 80,
+    height: 80,
+    margin: '-56px auto 10px',
+    background: theme.palette.secondary.dark
+  },
+  name: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  buttonProfile: {
+    margin: 20
+  },
+  bottomLink: {
+    width: '100%',
+  },
+  price: {
+    padding: theme.spacing(2),
+    paddingBottom: 20
+  },
+  contentProfile: {
+    textAlign: 'center'
+  },
+  verified: {
+    fontSize: 16,
+    color: theme.palette.primary.main
+  },
+  cardList: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    '& $buttonAddList': {
+      display: 'inline-block'
+    },
+    '& $floatingButtonWrap': {
+      flex: 1,
+    },
+    '& $buttonAdd': {
+      display: 'none'
+    },
+    '& $status': {
+      right: 'auto',
+      left: 0,
+    },
+    '& $mediaProduct': {
+      width: 300,
+      paddingTop: '21.25%'
+    },
+    '& $price': {
+      flexDirection: 'column',
+      justifyContent: 'center',
+      '& button': {
+        marginTop: 20
+      }
+    }
+  },
+});
+
+export default styles;