100 |
101 | {details.title}
109 |
110 | {details.subtitle.map((text, key) => (
111 |
112 | {text}
113 |
114 | ))}
115 |
120 |
121 |
124 |
125 |
126 |
102 |
108 |
76 |
77 | {steps.map(label => (
78 |
79 | {label}
80 |
81 | ))}
82 |
83 |
84 |
151 |
166 |
152 |
153 |
155 |
156 |
158 |
159 |
161 |
162 |
163 |
165 |
219 |
221 |
239 |
241 |
259 |
261 | 84 |
125 |
127 |
80 | Search Inventory
81 |
93 |
113 | {attributes.map(option => (
114 |
117 | ))}
118 |
119 |
120 |
121 |
124 |
127 |
128 |
129 |
130 | );
131 | }
--------------------------------------------------------------------------------
/src/Inventory/UpdateProduct.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Button from '@material-ui/core/Button';
3 | import { makeStyles } from '@material-ui/core/styles';
4 | import Icon from '@material-ui/core/Icon';
5 | import Edit from '@material-ui/icons/Edit';
6 | import BlueGrey from '@material-ui/core/colors/blueGrey';
7 |
8 | const useStyles = makeStyles(theme => ({
9 | button: {
10 | fontFamily: 'ApercuMedium',
11 | },
12 | rightIcon: {
13 | marginLeft: theme.spacing(1),
14 | },
15 | iconSmall: {
16 | fontSize: 20,
17 | },
18 | }));
19 |
20 | export default function UpdateProduct() {
21 | const classes = useStyles();
22 |
23 | return (
24 |
28 | )
29 | }
--------------------------------------------------------------------------------
/src/Inventory/UpdateProductStock.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Button from '@material-ui/core/Button';
3 | import { makeStyles } from '@material-ui/core/styles';
4 | import Icon from '@material-ui/core/Icon';
5 | import UnarchiveIcon from '@material-ui/icons/Unarchive';
6 | import BlueGrey from '@material-ui/core/colors/blueGrey';
7 |
8 | const useStyles = makeStyles(theme => ({
9 | button: {
10 | fontFamily: 'ApercuMedium',
11 | },
12 | rightIcon: {
13 | marginLeft: theme.spacing(1),
14 | },
15 | iconSmall: {
16 | fontSize: 20,
17 | },
18 | }));
19 |
20 | export default function UpdateProductStock() {
21 | const classes = useStyles();
22 |
23 | return (
24 |
28 | )
29 | }
--------------------------------------------------------------------------------
/src/Login/ErrorMessage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import clsx from 'clsx';
4 | import Button from '@material-ui/core/Button';
5 | import CheckCircleIcon from '@material-ui/icons/CheckCircle';
6 | import ErrorIcon from '@material-ui/icons/Error';
7 | import InfoIcon from '@material-ui/icons/Info';
8 | import CloseIcon from '@material-ui/icons/Close';
9 | import { amber, green } from '@material-ui/core/colors';
10 | import IconButton from '@material-ui/core/IconButton';
11 | import Snackbar from '@material-ui/core/Snackbar';
12 | import SnackbarContent from '@material-ui/core/SnackbarContent';
13 | import WarningIcon from '@material-ui/icons/Warning';
14 | import { makeStyles } from '@material-ui/core/styles';
15 |
16 | const variantIcon = {
17 | success: CheckCircleIcon,
18 | warning: WarningIcon,
19 | error: ErrorIcon,
20 | info: InfoIcon,
21 | };
22 |
23 | const useStyles1 = makeStyles(theme => ({
24 | success: {
25 | backgroundColor: green[600],
26 | },
27 | error: {
28 | color: '#b71c1c',
29 | backgroundColor: '#ffcdd2'
30 | },
31 | info: {
32 | backgroundColor: theme.palette.primary.main,
33 | },
34 | warning: {
35 | backgroundColor: amber[700],
36 | },
37 | icon: {
38 | fontSize: 20,
39 | },
40 | iconVariant: {
41 | opacity: 0.9,
42 | marginRight: theme.spacing(1),
43 | },
44 | message: {
45 | display: 'flex',
46 | alignItems: 'center',
47 | },
48 | }));
49 |
50 | function MySnackbarContentWrapper(props) {
51 | const classes = useStyles1();
52 | const { className, message, onClose, variant, ...other } = props;
53 | const Icon = variantIcon[variant];
54 |
55 | return (
56 |
118 |
119 | 
124 |
125 |
126 | Welcome back!
127 |
128 |
138 |
164 |
180 |
181 |
185 | Remember Me
186 |
187 | }
188 | />
189 |
190 |
191 |
201 |
202 |
203 |
204 |
222 |
226 |
227 |
223 | {props.errorMessage.message ?
225 |
112 | {activeStep === steps.length ? (
113 |
123 |
114 |
115 | All steps completed
116 |
117 |
118 |
119 | ) : (
120 | {getStepContent(activeStep)}
121 | )}
122 |
99 | {/* {inventorySignoff && (
100 | manager.name)}
103 | renderInput={(params) => (
104 | manager.name)}
120 | renderInput={(params) => (
121 |
134 |
23 |
24 |
25 | Active Orders
26 |
27 |
28 | Unfulfilled
29 |
30 |
31 |
32 | );
33 | }
--------------------------------------------------------------------------------
/src/Orders/OrdersTable.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import clsx from "clsx";
3 |
4 | import { makeStyles } from "@material-ui/core/styles";
5 | import Table from "@material-ui/core/Table";
6 | import TableBody from "@material-ui/core/TableBody";
7 | import TableCell from "@material-ui/core/TableCell";
8 | import TableHead from "@material-ui/core/TableHead";
9 | import TableRow from "@material-ui/core/TableRow";
10 | import Paper from "@material-ui/core/Paper";
11 | import Chip from "@material-ui/core/Chip";
12 | import blue from "@material-ui/core/colors/blue";
13 | import grey from "@material-ui/core/colors/grey";
14 |
15 | import { getThemeProps } from "@material-ui/styles";
16 | import DoneIcon from "@material-ui/icons/Done";
17 | import ErrorIcon from "@material-ui/icons/Error";
18 | import CachedIcon from "@material-ui/icons/Cached";
19 | import ConfirmedIcon from "@material-ui/icons/AssignmentLate";
20 | import ShippingIcon from "@material-ui/icons/LocalShipping";
21 | import PackingIcon from "@material-ui/icons/MoveToInbox";
22 | import UnfoldMoreIcon from "@material-ui/icons/UnfoldMore";
23 | import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight";
24 |
25 | import { Typography, Box, IconButton } from "@material-ui/core";
26 | import { Pagination } from "@material-ui/lab";
27 |
28 | const useStyles = makeStyles((theme) => ({
29 | root: {
30 | boxShadow: "0 0 11px #eaf0f6",
31 | borderRadius: "4px",
32 | overflow: "hidden",
33 | border: "1px solid #eaf0f6",
34 | },
35 | table: {
36 | minWidth: 650,
37 | },
38 | tableHead: {
39 | fontFamily: "ApercuMedium",
40 | fontSize: "0.875rem",
41 | color: "#525f7f",
42 | paddingLeft: theme.spacing(2),
43 | paddingTop: theme.spacing(2),
44 | paddingBottom: theme.spacing(2),
45 | },
46 | tableHeadCell: {
47 | padding: theme.spacing(1),
48 | },
49 | tableHeadRow: {
50 | backgroundColor: "#fff",
51 | borderColor: "#fff",
52 | borderStyle: "solid",
53 | borderLeftWidth: "3px",
54 | },
55 | tableFoot: {
56 | fontFamily: "ApercuMedium",
57 | fontSize: "0.875rem",
58 | color: "#525f7f",
59 | },
60 | button: {
61 | margin: theme.spacing(1),
62 | },
63 | primaryButton: {
64 | backgroundColor: "#2196f3",
65 | },
66 | input: {
67 | display: "none",
68 | },
69 | tableRow: {
70 | borderColor: "#fff",
71 | borderStyle: "solid",
72 | borderLeftWidth: "3px",
73 | borderBottomWidth: "0px",
74 | borderTopWidth: "0px",
75 | borderRightWidth: "3px",
76 | "&:hover": {
77 | borderColor: theme.palette.primary.light,
78 | borderStyle: "solid",
79 | borderLeftWidth: "3px",
80 | backgroundColor: blue[50],
81 | borderRightColor: blue[50],
82 | cursor: "pointer",
83 | },
84 | },
85 | paidChip: {
86 | backgroundColor: "#66BB6A",
87 | color: "#fff",
88 | },
89 | unfulfilledChip: {
90 | backgroundColor: "#F44336",
91 | color: "#fff",
92 | },
93 | active: {
94 | color: theme.palette.primary.main,
95 | },
96 | even: {
97 | backgroundColor: "#fff",
98 | },
99 | }));
100 |
101 | export default function SimpleTable(props) {
102 | const classes = useStyles();
103 |
104 | const [lastUpdatedTime, setLastUpdatedTime] = React.useState("N/A");
105 | React.useEffect(() => {
106 | // props.dispatch(fetchProducts());
107 | setLastUpdatedTime(`${new Date().toLocaleString()}`);
108 | }, []);
109 |
110 | const [data, setData] = React.useState(props.orders);
111 |
112 | /* -1: unsorted/unused
113 | 0: is NOT ascending
114 | 1: is ascending
115 | */
116 | const [sortData, setSortData] = React.useState({
117 | id: -1,
118 | });
119 |
120 | const sortById = () => {
121 | const dataset = [...data];
122 |
123 | if (sortData.id < 1) {
124 | console.log("Unsorted. Sorting By Ascending");
125 | dataset.sort(function (a, b) {
126 | return a.orderId - b.orderId;
127 | });
128 | setSortData({
129 | ...sortData,
130 | id: 1,
131 | });
132 | } else {
133 | console.log("Sorted. Sorting By Descending");
134 | dataset.reverse();
135 | setSortData({
136 | ...sortData,
137 | id: 0,
138 | });
139 | }
140 | setData(dataset);
141 | };
142 |
143 | // Placeholder hooks for pagination.
144 | const [page, setPage] = React.useState(1);
145 | const handleChange = (event, value) => {
146 | setPage(value);
147 | };
148 |
149 | function StatusChip(props) {
150 | if (props.status === "Paid") {
151 | return
329 |
330 |
331 | {/*
332 | 1-{data.length} of {Math.floor(Math.random() * 100)} results
333 | */}
334 |
336 |
337 |
338 | Orders up to date. Last retrieved at {lastUpdatedTime}
339 |
340 |
341 |
342 |
343 |
69 |
86 | {attributes.map(option => (
87 |
90 | ))}
91 |
92 |
102 |
106 |
107 |
108 |
109 | );
110 | }
--------------------------------------------------------------------------------
/src/Orders/Sidebar.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { makeStyles, useTheme } from '@material-ui/core/styles';
3 | import Drawer from '@material-ui/core/Drawer';
4 | import List from '@material-ui/core/List';
5 | import Divider from '@material-ui/core/Divider';
6 | import ListItem from '@material-ui/core/ListItem';
7 | import ListItemIcon from '@material-ui/core/ListItemIcon';
8 | import ListItemText from '@material-ui/core/ListItemText';
9 | import InboxIcon from '@material-ui/icons/MoveToInbox';
10 | import MailIcon from '@material-ui/icons/Mail';
11 | import EditIcon from '@material-ui/icons/Edit';
12 | import SearchIcon from '@material-ui/icons/Search';
13 | import RefreshIcon from '@material-ui/icons/Refresh';
14 | import Typography from '@material-ui/core/Typography';
15 | import Modal from '@material-ui/core/Modal';
16 | import Backdrop from '@material-ui/core/Backdrop';
17 | import Fade from '@material-ui/core/Fade';
18 | import blue from "@material-ui/core/colors/blue";
19 |
20 | import Search from './Search';
21 |
22 | const drawerWidth = 120;
23 |
24 | const useStyles = makeStyles(theme => ({
25 | root: {
26 | display: 'flex',
27 | zIndex: 0,
28 | backgroundColor: blue[500],
29 | },
30 | appBarShift: {
31 | marginLeft: drawerWidth,
32 | width: `calc(100% - ${drawerWidth}px)`,
33 | transition: theme.transitions.create(['width', 'margin'], {
34 | easing: theme.transitions.easing.sharp,
35 | duration: theme.transitions.duration.enteringScreen,
36 | }),
37 | },
38 | menuButton: {
39 | marginRight: 36,
40 | },
41 | hide: {
42 | display: 'none',
43 | },
44 | drawer: {
45 | width: drawerWidth,
46 | flexShrink: 0,
47 | whiteSpace: 'nowrap',
48 | },
49 | toolbar: {
50 | display: 'flex',
51 | alignItems: 'center',
52 | justifyContent: 'flex-end',
53 | // padding: theme.spacing(0, 1),
54 | ...theme.mixins.toolbar,
55 | },
56 | content: {
57 | flexGrow: 1,
58 | padding: theme.spacing(3),
59 | },
60 | icon: {
61 | minWidth: 35
62 | },
63 | text: {
64 | color: 'rgba(0, 0, 0, 0.54)',
65 | },
66 | modal: {
67 | display: 'flex',
68 | alignItems: 'center',
69 | justifyContent: 'center',
70 | },
71 | paper: {
72 | padding: theme.spacing(2, 4, 3),
73 | backgroundColor: '#fff'
74 | },
75 | }));
76 |
77 | export default function MiniDrawer() {
78 | const classes = useStyles();
79 |
80 | const [open, setOpen] = React.useState(false);
81 |
82 | const handleOpen = () => {
83 | setOpen(true);
84 | };
85 |
86 | const handleClose = () => {
87 | setOpen(false);
88 | };
89 |
90 | return (
91 | Query Orders
70 |
92 |
93 |
94 |
144 |
145 |
157 |
158 |
162 |
163 |
164 |
165 | );
166 | }
--------------------------------------------------------------------------------
/src/Settings/SettingTabs.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { makeStyles } from '@material-ui/core/styles';
4 | import Tabs from '@material-ui/core/Tabs';
5 | import Tab from '@material-ui/core/Tab';
6 | import Typography from '@material-ui/core/Typography';
7 | import Box from '@material-ui/core/Box';
8 |
9 |
10 | import TabButton from './TabButton';
11 | import Account from './Views/Account';
12 | import Password from './Views/Password';
13 | import Notifications from './Views/Notifications';
14 | import UserGroups from './Views/UserGroups';
15 |
16 | function TabPanel(props) {
17 | const { children, value, index, ...other } = props;
18 |
19 | return (
20 | -
95 |
-
125 |
159 |
161 |
74 |
84 |
90 |
91 |
93 |
94 |
96 |
97 |
99 |
100 |
102 |
103 | Help
104 |
105 |
106 | );
107 | }
--------------------------------------------------------------------------------
/src/Settings/Settings.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { makeStyles } from '@material-ui/core/styles';
3 | import Container from '@material-ui/core/Container';
4 | import Typography from '@material-ui/core/Typography';
5 | import Paper from '@material-ui/core/Paper';
6 |
7 | import SettingTabs from './SettingTabs';
8 | import PageTitle from './../Common/PageTitle';
9 |
10 | const useStyles = makeStyles(theme => ({
11 | paper: {
12 | // boxShadow: '0 0 1px 0 rgba(0,0,0,.22)',
13 | boxShadow: '0 0 11px #eaf0f6',
14 | borderRadius: '4px',
15 | overflow: 'hidden',
16 | marginTop: theme.spacing(4),
17 | },
18 | title: {
19 | fontFamily: 'ApercuMedium',
20 | marginTop: theme.spacing(4),
21 | }
22 | }));
23 |
24 | export default function Settings() {
25 |
26 | const classes = useStyles();
27 |
28 | return (
29 |
110 |
112 |
121 | {loading ? (
122 |
127 | )
128 | }
--------------------------------------------------------------------------------
/src/Settings/Views/Notifications.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import { makeStyles } from '@material-ui/core/styles';
4 | import Grid from '@material-ui/core/Grid';
5 | import Paper from '@material-ui/core/Paper';
6 | import Typography from '@material-ui/core/Typography';
7 | import Edit from '@material-ui/icons/KeyboardArrowRight';
8 | import TextField from '@material-ui/core/TextField';
9 | import Divider from '@material-ui/core/Divider';
10 | import Checkbox from '@material-ui/core/Checkbox';
11 |
12 | const useStyles = makeStyles(theme => ({
13 | root: {
14 | flexGrow: 1,
15 | },
16 | paper: {
17 | padding: theme.spacing(2),
18 | textAlign: 'center',
19 | color: theme.palette.text.secondary,
20 | },
21 | rightIcon: {
22 | fontSize: '1em',
23 | },
24 | textField: {
25 | marginLeft: theme.spacing(1),
26 | marginRight: theme.spacing(1),
27 | },
28 | label: {
29 | letterSpacing: '.07272727em',
30 | fontSize: '.6875rem',
31 | fontWeight: 500,
32 | lineHeight: '1rem',
33 | textTransform: 'uppercase',
34 | color: '#5f6368',
35 | marginLeft: '10px',
36 | },
37 | row: {
38 | // margin: theme.spacing(1),
39 | paddingTop: theme.spacing(1),
40 | '&:hover': {
41 | backgroundColor: '#f5f5f5',
42 | cursor: 'pointer'
43 | }
44 | },
45 | checkbox: {
46 | marginLeft: theme.spacing(1),
47 | marginBottom: theme.spacing(1)
48 | }
49 | }));
50 |
51 | function a() {
52 | return alert('hi');
53 | }
54 |
55 | export default function Notifications() {
56 | const classes = useStyles();
57 |
58 | const [state, setState] = React.useState({
59 | newProductEmail: true,
60 | newProductMobile: false,
61 | });
62 |
63 | const handleChange = name => event => {
64 | setState({ ...state, [name]: event.target.checked });
65 | };
66 |
67 | return (
68 |
69 |
70 | Notifications
71 |
72 |
73 |
130 | )
131 | }
--------------------------------------------------------------------------------
/src/Settings/Views/Password.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import { makeStyles } from '@material-ui/core/styles';
4 | import Grid from '@material-ui/core/Grid';
5 | import Paper from '@material-ui/core/Paper';
6 | import Typography from '@material-ui/core/Typography';
7 | import Edit from '@material-ui/icons/KeyboardArrowRight';
8 | import TextField from '@material-ui/core/TextField';
9 | import Divider from '@material-ui/core/Divider';
10 |
11 | const useStyles = makeStyles(theme => ({
12 | root: {
13 | flexGrow: 1,
14 | },
15 | paper: {
16 | padding: theme.spacing(2),
17 | textAlign: 'center',
18 | color: theme.palette.text.secondary,
19 | },
20 | rightIcon: {
21 | fontSize: '1em',
22 | },
23 | textField: {
24 | marginLeft: theme.spacing(1),
25 | marginRight: theme.spacing(1),
26 | },
27 | label: {
28 | letterSpacing: '.07272727em',
29 | fontSize: '.6875rem',
30 | fontWeight: 500,
31 | lineHeight: '1rem',
32 | textTransform: 'uppercase',
33 | color: '#5f6368',
34 | marginLeft: '10px',
35 | },
36 | row: {
37 | // margin: theme.spacing(1),
38 | paddingTop: theme.spacing(1),
39 | '&:hover': {
40 | backgroundColor: '#f5f5f5',
41 | cursor: 'pointer'
42 | }
43 | }
44 | }));
45 |
46 | function a() {
47 | return alert('hi');
48 | }
49 |
50 | export default function Password() {
51 | const classes = useStyles();
52 |
53 | const date = new Date().toLocaleString('en-US');
54 |
55 | return (
56 |
74 |
75 |
76 |
77 |
78 |
79 | Email
80 |
81 |
82 |
83 |
84 | Mobile
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 | New Product Is Created
97 |
98 |
99 |
100 |
111 |
112 |
123 |
124 |
125 |
126 |
128 |
129 |
57 |
58 | Password
59 |
60 |
61 |
105 | )
106 | }
--------------------------------------------------------------------------------
/src/Settings/Views/UserGroups.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { makeStyles } from '@material-ui/core/styles';
3 | import Grid from '@material-ui/core/Grid';
4 | import Typography from '@material-ui/core/Typography';
5 | import Edit from '@material-ui/icons/KeyboardArrowRight';
6 | import Divider from '@material-ui/core/Divider';
7 | import Table from '@material-ui/core/Table';
8 | import TableBody from '@material-ui/core/TableBody';
9 | import TableCell from '@material-ui/core/TableCell';
10 | import TableHead from '@material-ui/core/TableHead';
11 | import TableRow from '@material-ui/core/TableRow';
12 | import Paper from '@material-ui/core/Paper';
13 | import Button from '@material-ui/core/Button';
14 | import AddIcon from '@material-ui/icons/Add';
15 | import Container from '@material-ui/core/Container';
16 |
17 | const useStyles = makeStyles(theme => ({
18 | root: {
19 | flexGrow: 1,
20 | },
21 | paper: {
22 | padding: theme.spacing(2),
23 | textAlign: 'center',
24 | color: theme.palette.text.secondary,
25 | },
26 | rightIcon: {
27 | fontSize: '1em',
28 | },
29 | textField: {
30 | marginLeft: theme.spacing(1),
31 | marginRight: theme.spacing(1),
32 | },
33 | label: {
34 | letterSpacing: '.07272727em',
35 | fontSize: '.6875rem',
36 | fontWeight: 500,
37 | lineHeight: '1rem',
38 | textTransform: 'uppercase',
39 | color: '#5f6368',
40 | },
41 | row: {
42 | // margin: theme.spacing(1),
43 | paddingTop: theme.spacing(1),
44 | '&:hover': {
45 | backgroundColor: '#f5f5f5',
46 | cursor: 'pointer'
47 | }
48 | },
49 | paper: {
50 | width: '100%',
51 | marginTop: theme.spacing(2),
52 | overflowX: 'auto',
53 | boxShadow: '0 0 1px 0 rgba(0,0,0,.22)',
54 | },
55 | rightIcon: {
56 | marginLeft: theme.spacing(1),
57 | },
58 | iconSmall: {
59 | fontSize: 20,
60 | },
61 | button: {
62 | boxShadow: 'none',
63 | fontFamily: 'ApercuMedium',
64 | marginTop: theme.spacing(4),
65 | },
66 | }));
67 |
68 | function a() {
69 | return alert('hi');
70 | }
71 |
72 | export default function Password() {
73 | const classes = useStyles();
74 |
75 | const date = new Date().toLocaleString('en-US');
76 |
77 | return (
78 |
62 |
63 |
64 |
65 | Password
66 |
67 |
68 |
69 |
70 | •••••••••
71 |
72 |
73 |
74 |
75 | Last changed {date}
76 |
77 |
78 |
79 |
81 |
82 |
84 |
85 |
86 |
87 |
88 |
89 | 2-Step Verification
90 |
91 |
92 |
93 |
94 | Disabled
95 |
96 |
97 |
98 |
100 |
101 |
103 |
104 |
79 |
80 | User Groups
81 |
82 |
83 |
84 |
85 |
131 |
132 |
133 |
137 |
138 |
139 | )
140 | }
--------------------------------------------------------------------------------
/src/Team/Member.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { makeStyles, withStyles } from "@material-ui/core/styles";
3 | import clsx from "clsx";
4 | import Card from "@material-ui/core/Card";
5 | import CardHeader from "@material-ui/core/CardHeader";
6 | import CardMedia from "@material-ui/core/CardMedia";
7 | import CardContent from "@material-ui/core/CardContent";
8 | import CardActions from "@material-ui/core/CardActions";
9 | import Button from "@material-ui/core/Button";
10 | import Avatar from "@material-ui/core/Avatar";
11 | import IconButton from "@material-ui/core/IconButton";
12 | import Typography from "@material-ui/core/Typography";
13 | import CommentIcon from "@material-ui/icons/Comment";
14 | import ThumbUpIcon from "@material-ui/icons/ThumbUp";
15 | import ExpandMoreIcon from "@material-ui/icons/MoreHoriz";
16 | import Divider from "@material-ui/core/Divider";
17 | import Badge from "@material-ui/core/Badge";
18 | import Box from "@material-ui/core/Box";
19 |
20 | import getAvatar from "../Common/AnimalAvatars";
21 |
22 | const useStyles = makeStyles((theme) => ({
23 | outerCard: {
24 | boxShadow: "0 0 11px #eaf0f6",
25 | border: "1px solid #eaf0f6",
26 | "&:hover": {},
27 | },
28 | card: {
29 | borderColor: "#fff",
30 | borderStyle: "solid",
31 | borderBottomWidth: "3px",
32 | borderLeftWidth: "0px",
33 | borderTopWidth: "0px",
34 | borderRightWidth: "0px",
35 | "&:hover": {
36 | borderColor: theme.palette.primary.light,
37 | borderStyle: "solid",
38 | borderBottomWidth: "3px",
39 | },
40 | },
41 | media: {
42 | height: 0,
43 | paddingTop: "56.25%", // 16:9
44 | },
45 | expand: {
46 | marginLeft: "auto",
47 | },
48 | expandOpen: {
49 | transform: "rotate(180deg)",
50 | },
51 | avatar: {
52 | width: theme.spacing(7),
53 | height: theme.spacing(7),
54 | },
55 | rightIcon: {
56 | marginLeft: theme.spacing(1),
57 | },
58 | button: {
59 | marginLeft: "auto",
60 | },
61 | name: {
62 | fontFamily: "ApercuMedium",
63 | },
64 | subtitle: {
65 | color: theme.palette.action.active,
66 | },
67 | }));
68 |
69 | export default function Member(props) {
70 | const classes = useStyles();
71 |
72 | const handleClick = () => {
73 | if (props.openModal) {
74 | props.openModal(props.member);
75 | }
76 | };
77 |
78 | return (
79 |
452 |
454 |