tudor.stanciu
/
cdn-frontend
mirror of https://dev.azure.com/tstanciu94/CDN/_git/CDN_Frontend
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

notification components formatting

master
Tudor Stanciu 2021-07-06 19:30:28 +03:00
parent fe812a371c
commit a6941afdf1
5 changed files with 450 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/Notification/Notification.js
View File

@ -13,7 +13,7 @@ import {
Error as DefenceIcon,
AccountBox as CustomerIcon,
Done as ShippedIcon,
Publish as UploadIcon,
Publish as UploadIcon
} from "@material-ui/icons";
import { useTheme } from "@material-ui/styles";
import classnames from "classnames";
@ -38,7 +38,7 @@ const typesIcons = {
defence: <DefenceIcon />,
report: <ReportIcon />,
upload: <UploadIcon />,
disc: <DiscIcon />,
disc: <DiscIcon />
};
export default function Notification({ variant, ...props }) {
@ -48,33 +48,33 @@ export default function Notification({ variant, ...props }) {
const icon = getIconByType(props.type);
const iconWithStyles = React.cloneElement(icon, {
classes: {
root: classes.notificationIcon,
root: classes.notificationIcon
},
style: {
color:
variant !== "contained" &&
theme.palette[props.color] &&
theme.palette[props.color].main,
},
theme.palette[props.color].main
}
});
return (
<div
className={classnames(classes.notificationContainer, props.className, {
[classes.notificationContained]: variant === "contained",
[classes.notificationContainedShadowless]: props.shadowless,
[classes.notificationContainedShadowless]: props.shadowless
})}
style={{
backgroundColor:
variant === "contained" &&
theme.palette[props.color] &&
theme.palette[props.color].main,
theme.palette[props.color].main
}}
>
<div
className={classnames(classes.notificationIconContainer, {
[classes.notificationIconContainerContained]: variant === "contained",
[classes.notificationIconContainerRounded]: variant === "rounded",
[classes.notificationIconContainerRounded]: variant === "rounded"
})}
style={{
backgroundColor:
@ -82,7 +82,7 @@ export default function Notification({ variant, ...props }) {
theme.palette[props.color] &&
tinycolor(theme.palette[props.color].main)
.setAlpha(0.15)
.toRgbString(),
.toRgbString()
}}
>
{iconWithStyles}
@ -90,7 +90,7 @@ export default function Notification({ variant, ...props }) {
<div className={classes.messageContainer}>
<Typography
className={classnames({
[classes.containedTypography]: variant === "contained",
[classes.containedTypography]: variant === "contained"
})}
variant={props.typographyVariant}
size={variant !== "contained" && !props.typographyVariant && "md"}
@ -111,7 +111,6 @@ export default function Notification({ variant, ...props }) {
);
}
// ####################################################################
function getIconByType(type = "offer") {
return typesIcons[type];
}

266
src/pages/notifications/Notifications.js
View File

@ -22,7 +22,7 @@ const positions = [
toast.POSITION.TOP_RIGHT,
toast.POSITION.BOTTOM_LEFT,
toast.POSITION.BOTTOM_CENTER,
toast.POSITION.BOTTOM_RIGHT,
toast.POSITION.BOTTOM_RIGHT
];
export default function NotificationsPage(props) {
@ -45,109 +45,139 @@ export default function NotificationsPage(props) {
progressClassName={classes.notificationProgress}
/>
<Grid item xs={12}>
<Widget disableWidgetMenu>
<Grid container item xs={12}>
<Grid item xs={4}>
<Widget title="Layout Options" noWidgetShadow disableWidgetMenu noBodyPadding noHeaderPadding style={{paddingRight: 15}} headerClass={classes.widgetHeader}>
<Typography>
There are few position options available for notifications. You
can click any of them to change notifications position:
</Typography>
<div className={classes.layoutContainer}>
<div className={classes.layoutButtonsRow}>
<button
onClick={() => changeNotificationPosition(0)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]: notificationsPosition === 0,
})}
/>
<button
onClick={() => changeNotificationPosition(1)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]: notificationsPosition === 1,
})}
/>
<button
onClick={() => changeNotificationPosition(2)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]: notificationsPosition === 2,
})}
/>
</div>
<Typography className={classes.layoutText} size="md">
Click any position
</Typography>
<div className={classes.layoutButtonsRow}>
<button
onClick={() => changeNotificationPosition(3)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]: notificationsPosition === 3,
})}
/>
<button
onClick={() => changeNotificationPosition(4)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]: notificationsPosition === 4,
})}
/>
<button
onClick={() => changeNotificationPosition(5)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]: notificationsPosition === 5,
})}
/>
</div>
</div>
</Widget>
</Grid>
<Grid item xs={4}>
<Widget title="Notifications Types" disableWidgetMenu noBodyPadding noWidgetShadow noHeaderPadding style={{paddingRight: 15}} headerClass={classes.widgetHeader}>
<Typography>
Different types of notifications for lost of use cases. Custom
classes are also supported.
</Typography>
<div className={classes.buttonsContainer}>
<Button
variant="contained"
color="primary"
onClick={() => handleNotificationCall("info")}
className={classnames(classes.notificationCallButton)}
>
Info Message
</Button>
<Button
variant="contained"
color="secondary"
onClick={() => handleNotificationCall("error")}
className={classnames(classes.notificationCallButton)}
>
Error + Retry Message
</Button>
<Button
variant="contained"
color="success"
onClick={() => handleNotificationCall("success")}
className={classnames(classes.notificationCallButton)}
>
Success Message
</Button>
</div>
</Widget>
</Grid>
<Grid item xs={4}>
<Widget title="Usage" disableWidgetMenu noBodyPadding noWidgetShadow noHeaderPadding style={{paddingRight: 15}} headerClass={classes.widgetHeader}>
<Typography>
Notifications are created with the help of{" "}
<a href="https://github.com/fkhadra/react-toastify">
react-toastify
</a>
</Typography>
<div className={classes.codeContainer}>
<SyntaxHighlighter
className={classes.codeComponent}
language="javascript"
style={docco}
>{`
<Widget disableWidgetMenu>
<Grid container item xs={12}>
<Grid item xs={4}>
<Widget
title="Layout Options"
noWidgetShadow
disableWidgetMenu
noBodyPadding
noHeaderPadding
style={{ paddingRight: 15 }}
headerClass={classes.widgetHeader}
>
<Typography>
There are few position options available for notifications.
You can click any of them to change notifications position:
</Typography>
<div className={classes.layoutContainer}>
<div className={classes.layoutButtonsRow}>
<button
onClick={() => changeNotificationPosition(0)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]:
notificationsPosition === 0
})}
/>
<button
onClick={() => changeNotificationPosition(1)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]:
notificationsPosition === 1
})}
/>
<button
onClick={() => changeNotificationPosition(2)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]:
notificationsPosition === 2
})}
/>
</div>
<Typography className={classes.layoutText} size="md">
Click any position
</Typography>
<div className={classes.layoutButtonsRow}>
<button
onClick={() => changeNotificationPosition(3)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]:
notificationsPosition === 3
})}
/>
<button
onClick={() => changeNotificationPosition(4)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]:
notificationsPosition === 4
})}
/>
<button
onClick={() => changeNotificationPosition(5)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]:
notificationsPosition === 5
})}
/>
</div>
</div>
</Widget>
</Grid>
<Grid item xs={4}>
<Widget
title="Notifications Types"
disableWidgetMenu
noBodyPadding
noWidgetShadow
noHeaderPadding
style={{ paddingRight: 15 }}
headerClass={classes.widgetHeader}
>
<Typography>
Different types of notifications for lost of use cases.
Custom classes are also supported.
</Typography>
<div className={classes.buttonsContainer}>
<Button
variant="contained"
color="primary"
onClick={() => handleNotificationCall("info")}
className={classnames(classes.notificationCallButton)}
>
Info Message
</Button>
<Button
variant="contained"
color="secondary"
onClick={() => handleNotificationCall("error")}
className={classnames(classes.notificationCallButton)}
>
Error + Retry Message
</Button>
<Button
variant="contained"
color="success"
onClick={() => handleNotificationCall("success")}
className={classnames(classes.notificationCallButton)}
>
Success Message
</Button>
</div>
</Widget>
</Grid>
<Grid item xs={4}>
<Widget
title="Usage"
disableWidgetMenu
noBodyPadding
noWidgetShadow
noHeaderPadding
style={{ paddingRight: 15 }}
headerClass={classes.widgetHeader}
>
<Typography>
Notifications are created with the help of{" "}
<a href="https://github.com/fkhadra/react-toastify">
react-toastify
</a>
</Typography>
<div className={classes.codeContainer}>
<SyntaxHighlighter
className={classes.codeComponent}
language="javascript"
style={docco}
>{`
// import needed components, functions and styles
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
@ -161,13 +191,14 @@ export default function NotificationsPage(props) {
</div>
};
`}</SyntaxHighlighter>
<Typography variant="caption">
For more API information refer to the library documentation
</Typography>
</div>
</Widget>
<Typography variant="caption">
For more API information refer to the library
documentation
</Typography>
</div>
</Widget>
</Grid>
</Grid>
</Grid>
</Widget>
</Grid>
<Grid item xs={12} md={6} lg={4}>
@ -319,7 +350,7 @@ export default function NotificationsPage(props) {
{...componentProps}
className={classes.notificationComponent}
/>,
options,
options
);
}
@ -328,11 +359,11 @@ export default function NotificationsPage(props) {
type: "message",
message: "Message was sent successfully!",
variant: "contained",
color: "success",
color: "success"
};
toast.update(errorToastId, {
render: <Notification {...componentProps} />,
type: "success",
type: "success"
});
setErrorToastId(null);
}
@ -348,7 +379,7 @@ export default function NotificationsPage(props) {
type: "feedback",
message: "New user feedback received",
variant: "contained",
color: "primary",
color: "primary"
};
break;
case "error":
@ -358,7 +389,7 @@ export default function NotificationsPage(props) {
variant: "contained",
color: "secondary",
extraButton: "Resend",
extraButtonClick: retryErrorNotification,
extraButtonClick: retryErrorNotification
};
break;
default:
@ -366,7 +397,7 @@ export default function NotificationsPage(props) {
type: "shipped",
message: "The item was shipped",
variant: "contained",
color: "success",
color: "success"
};
}
@ -375,7 +406,7 @@ export default function NotificationsPage(props) {
position: positions[notificationsPosition],
progressClassName: classes.progress,
onClose: notificationType === "error" && (() => setErrorToastId(null)),
className: classes.notification,
className: classes.notification
});
if (notificationType === "error") setErrorToastId(toastId);
@ -386,7 +417,6 @@ export default function NotificationsPage(props) {
}
}
// #############################################################
function CloseButton({ closeToast, className }) {
return <CloseIcon className={className} onClick={closeToast} />;
}

12
src/pages/notifications/NotificationsContainer.js
View File

@ -16,7 +16,7 @@ const positions = [
];
export default compose(
withStyles(theme => ({
withStyles((theme) => ({
/*progress: {
visibility: "hidden"
},
@ -34,7 +34,7 @@ export default compose(
withState("notificationsPosition", "setNotificationPosition", 2),
withState("errorToastId", "setErrorToastId", null),
withHandlers({
sendNotification: props => (componentProps, options) => {
sendNotification: (props) => (componentProps, options) => {
return toast(
<Notification
{...componentProps}
@ -45,12 +45,12 @@ export default compose(
}
}),
withHandlers({
retryErrorNotification: props => () => {
retryErrorNotification: (props) => () => {
const componentProps = {
type: "message",
message: "Message was sent successfully!",
variant: "contained",
color: "success",
color: "success"
};
toast.update(props.errorToastId, {
@ -61,7 +61,7 @@ export default compose(
}
}),
withHandlers({
handleNotificationCall: props => notificationType => {
handleNotificationCall: (props) => (notificationType) => {
let componentProps;
if (props.errorToastId && notificationType === "error") return;
@ -105,7 +105,7 @@ export default compose(
if (notificationType === "error") props.setErrorToastId(toastId);
},
changeNotificationPosition: props => positionId => {
changeNotificationPosition: (props) => (positionId) => {
props.setNotificationPosition(positionId);
}
})

350
src/pages/notifications/NotificationsView.js
View File

@ -1,63 +1,141 @@
import React from 'react';
import { Grid, withStyles } from '@material-ui/core';
import { Close as CloseIcon } from '@material-ui/icons';
import classnames from 'classnames';
import { ToastContainer } from 'react-toastify';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
import tinycolor from 'tinycolor2';
import 'react-toastify/dist/ReactToastify.css';
import React from "react";
import { Grid, withStyles } from "@material-ui/core";
import { Close as CloseIcon } from "@material-ui/icons";
import classnames from "classnames";
import { ToastContainer } from "react-toastify";
import SyntaxHighlighter from "react-syntax-highlighter";
import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs";
import tinycolor from "tinycolor2";
import "react-toastify/dist/ReactToastify.css";
import Widget from '../../components/Widget';
import PageTitle from '../../components/PageTitle';
import NotificationCustomComponent from '../../components/Notification';
import { Typography, Button } from '../../components/Wrappers';
import Widget from "../../components/Widget";
import PageTitle from "../../components/PageTitle";
import NotificationCustomComponent from "../../components/Notification";
import { Typography, Button } from "../../components/Wrappers";
const CloseButton = ({ closeToast, className }) => (
<CloseIcon
className={className}
onClick={closeToast}
/>
<CloseIcon className={className} onClick={closeToast} />
);
const NotificationsPage = ({ classes, ...props}) => (
const NotificationsPage = ({ classes, ...props }) => (
<React.Fragment>
<PageTitle title="Notifications" />
<Grid container spacing={32}>
<ToastContainer className={classes.toastsContainer} closeButton={<CloseButton className={classes.notificationCloseButton} />} closeOnClick={false} progressClassName={classes.notificationProgress} />
<ToastContainer
className={classes.toastsContainer}
closeButton={
<CloseButton className={classes.notificationCloseButton} />
}
closeOnClick={false}
progressClassName={classes.notificationProgress}
/>
<Grid item xs={12} md={6} lg={4}>
<Widget title="Layout Options" disableWidgetMenu>
<Typography>There are few position options available for notifications. You can click any of them to change notifications position:</Typography>
<Typography>
There are few position options available for notifications. You can
click any of them to change notifications position:
</Typography>
<div className={classes.layoutContainer}>
<div className={classes.layoutButtonsRow}>
<button onClick={() => props.changeNotificationPosition(0)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 0})} />
<button onClick={() => props.changeNotificationPosition(1)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 1})} />
<button onClick={() => props.changeNotificationPosition(2)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 2})} />
<button
onClick={() => props.changeNotificationPosition(0)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]:
props.notificationsPosition === 0
})}
/>
<button
onClick={() => props.changeNotificationPosition(1)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]:
props.notificationsPosition === 1
})}
/>
<button
onClick={() => props.changeNotificationPosition(2)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]:
props.notificationsPosition === 2
})}
/>
</div>
<Typography className={classes.layoutText} size="md">Click any position</Typography>
<Typography className={classes.layoutText} size="md">
Click any position
</Typography>
<div className={classes.layoutButtonsRow}>
<button onClick={() => props.changeNotificationPosition(3)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 3})} />
<button onClick={() => props.changeNotificationPosition(4)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 4})} />
<button onClick={() => props.changeNotificationPosition(5)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 5})} />
<button
onClick={() => props.changeNotificationPosition(3)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]:
props.notificationsPosition === 3
})}
/>
<button
onClick={() => props.changeNotificationPosition(4)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]:
props.notificationsPosition === 4
})}
/>
<button
onClick={() => props.changeNotificationPosition(5)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]:
props.notificationsPosition === 5
})}
/>
</div>
</div>
</Widget>
</Grid>
<Grid item xs={12} md={6} lg={4}>
<Widget title="Notifications Types" disableWidgetMenu>
<Typography>Different types of notifications for lost of use cases. Custom classes are also supported.</Typography>
<Typography>
Different types of notifications for lost of use cases. Custom
classes are also supported.
</Typography>
<div className={classes.buttonsContainer}>
<Button variant="contained" colortheme="primary" onClick={() => props.handleNotificationCall('info')} className={classnames(classes.notificationCallButton)}>Info Message</Button>
<Button variant="contained" colortheme="warning" onClick={() => props.handleNotificationCall('error')} className={classnames(classes.notificationCallButton)}>Error + Retry Message</Button>
<Button variant="contained" colortheme="success" onClick={() => props.handleNotificationCall('success')} className={classnames(classes.notificationCallButton)}>Success Message</Button>
<Button
variant="contained"
colortheme="primary"
onClick={() => props.handleNotificationCall("info")}
className={classnames(classes.notificationCallButton)}
>
Info Message
</Button>
<Button
variant="contained"
colortheme="warning"
onClick={() => props.handleNotificationCall("error")}
className={classnames(classes.notificationCallButton)}
>
Error + Retry Message
</Button>
<Button
variant="contained"
colortheme="success"
onClick={() => props.handleNotificationCall("success")}
className={classnames(classes.notificationCallButton)}
>
Success Message
</Button>
</div>
</Widget>
</Grid>
<Grid item xs={12} md={6} lg={4}>
<Widget title="Usage" disableWidgetMenu>
<Typography>Notifications are created with the help of <a href="https://github.com/fkhadra/react-toastify">react-toastify</a></Typography>
<Typography>
Notifications are created with the help of{" "}
<a href="https://github.com/fkhadra/react-toastify">
react-toastify
</a>
</Typography>
<div className={classes.codeContainer}>
<SyntaxHighlighter className={classes.codeComponent} language='javascript' style={docco}>{`
<SyntaxHighlighter
className={classes.codeComponent}
language="javascript"
style={docco}
>{`
// import needed components, functions and styles
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
@ -71,38 +149,148 @@ const NotificationsPage = ({ classes, ...props}) => (
</div>
};
`}</SyntaxHighlighter>
<Typography variant="caption">For more API information refer to the library documentation</Typography>
<Typography variant="caption">
For more API information refer to the library documentation
</Typography>
</div>
</Widget>
</Grid>
<Grid item xs={12} md={6} lg={4}>
<Widget title="Notification Types Examples" disableWidgetMenu>
<NotificationCustomComponent className={classes.notificationItem} shadowless type="message" message="Thanks for Checking out Messenger" variant="contained" color="secondary"/>
<NotificationCustomComponent className={classes.notificationItem} shadowless type="feedback" message="New user feedback received" variant="contained" color="primary"/>
<NotificationCustomComponent className={classes.notificationItem} shadowless type="customer" message="New customer is registered" variant="contained" color="success" />
<NotificationCustomComponent className={classes.notificationItem} shadowless type="shipped" message="The order was shipped" variant="contained" color="warning" />
<NotificationCustomComponent className={classes.notificationItem} shadowless type="delivered" message="The order was delivered" variant="contained" color="primary" />
<NotificationCustomComponent className={classes.notificationItem} shadowless type="defence" message="5 Defence alerts" variant="contained" color="info" />
<NotificationCustomComponent
className={classes.notificationItem}
shadowless
type="message"
message="Thanks for Checking out Messenger"
variant="contained"
color="secondary"
/>
<NotificationCustomComponent
className={classes.notificationItem}
shadowless
type="feedback"
message="New user feedback received"
variant="contained"
color="primary"
/>
<NotificationCustomComponent
className={classes.notificationItem}
shadowless
type="customer"
message="New customer is registered"
variant="contained"
color="success"
/>
<NotificationCustomComponent
className={classes.notificationItem}
shadowless
type="shipped"
message="The order was shipped"
variant="contained"
color="warning"
/>
<NotificationCustomComponent
className={classes.notificationItem}
shadowless
type="delivered"
message="The order was delivered"
variant="contained"
color="primary"
/>
<NotificationCustomComponent
className={classes.notificationItem}
shadowless
type="defence"
message="5 Defence alerts"
variant="contained"
color="info"
/>
</Widget>
</Grid>
<Grid item xs={12} md={6} lg={4}>
<Widget title="Notification Types Examples" disableWidgetMenu>
<NotificationCustomComponent className={classes.notificationItem} type="report" message="New report has been received" color="secondary" />
<NotificationCustomComponent className={classes.notificationItem} type="feedback" message="New user feedback received" color="primary" />
<NotificationCustomComponent className={classes.notificationItem} type="shipped" message="The item was shipped" color="success" />
<NotificationCustomComponent className={classes.notificationItem} type="message" message="The new message from user @nahawaii" color="warning" />
<NotificationCustomComponent className={classes.notificationItem} type="upload" message="Your file is ready to upload" color="primary" />
<NotificationCustomComponent className={classes.notificationItem} type="disc" message="The disc is full" color="info" />
<NotificationCustomComponent
className={classes.notificationItem}
type="report"
message="New report has been received"
color="secondary"
/>
<NotificationCustomComponent
className={classes.notificationItem}
type="feedback"
message="New user feedback received"
color="primary"
/>
<NotificationCustomComponent
className={classes.notificationItem}
type="shipped"
message="The item was shipped"
color="success"
/>
<NotificationCustomComponent
className={classes.notificationItem}
type="message"
message="The new message from user @nahawaii"
color="warning"
/>
<NotificationCustomComponent
className={classes.notificationItem}
type="upload"
message="Your file is ready to upload"
color="primary"
/>
<NotificationCustomComponent
className={classes.notificationItem}
type="disc"
message="The disc is full"
color="info"
/>
</Widget>
</Grid>
<Grid item xs={12} md={6} lg={4}>
<Widget title="Notification Types Examples" disableWidgetMenu>
<NotificationCustomComponent className={classes.notificationItem} type="report" message="New report has been received" variant="rounded" color="secondary" />
<NotificationCustomComponent className={classes.notificationItem} type="feedback" message="New user feedback received" variant="rounded" color="primary" />
<NotificationCustomComponent className={classes.notificationItem} type="shipped" message="The item was shipped" variant="rounded" color="success" />
<NotificationCustomComponent className={classes.notificationItem} type="message" message="The new message from user @nahawaii" variant="rounded" color="warning" />
<NotificationCustomComponent className={classes.notificationItem} type="upload" message="Your file is ready to upload" variant="rounded" color="primary" />
<NotificationCustomComponent className={classes.notificationItem} type="disc" message="The disc is full" variant="rounded" color="info" />
<NotificationCustomComponent
className={classes.notificationItem}
type="report"
message="New report has been received"
variant="rounded"
color="secondary"
/>
<NotificationCustomComponent
className={classes.notificationItem}
type="feedback"
message="New user feedback received"
variant="rounded"
color="primary"
/>
<NotificationCustomComponent
className={classes.notificationItem}
type="shipped"
message="The item was shipped"
variant="rounded"
color="success"
/>
<NotificationCustomComponent
className={classes.notificationItem}
type="message"
message="The new message from user @nahawaii"
variant="rounded"
color="warning"
/>
<NotificationCustomComponent
className={classes.notificationItem}
type="upload"
message="Your file is ready to upload"
variant="rounded"
color="primary"
/>
<NotificationCustomComponent
className={classes.notificationItem}
type="disc"
message="The disc is full"
variant="rounded"
color="info"
/>
</Widget>
</Grid>
</Grid>
@ -112,64 +300,66 @@ const NotificationsPage = ({ classes, ...props}) => (
const styles = (theme) => ({
layoutContainer: {
height: 200,
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
alignItems: 'center',
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: "center",
marginTop: theme.spacing.unit * 2,
border: '1px dashed',
border: "1px dashed",
borderColor: theme.palette.primary.main,
position: 'relative',
position: "relative"
},
layoutText: {
color: tinycolor(theme.palette.background.light).darken().toHexString(),
color: tinycolor(theme.palette.background.light).darken().toHexString()
},
layoutButtonsRow: {
width: '100%',
display: 'flex',
justifyContent: 'space-between',
width: "100%",
display: "flex",
justifyContent: "space-between"
},
layoutButton: {
backgroundColor: theme.palette.background.light,
width: 125,
height: 50,
outline: 'none',
border: 'none',
outline: "none",
border: "none"
},
layoutButtonActive: {
backgroundColor: tinycolor(theme.palette.background.light).darken().toHexString(),
backgroundColor: tinycolor(theme.palette.background.light)
.darken()
.toHexString()
},
buttonsContainer: {
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
marginTop: theme.spacing.unit * 2,
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
marginTop: theme.spacing.unit * 2
},
notificationCallButton: {
color: 'white',
color: "white",
marginBottom: theme.spacing.unit,
textTransform: 'none',
textTransform: "none"
},
codeContainer: {
display: 'flex',
flexDirection: 'column',
marginTop: theme.spacing.unit * 2,
display: "flex",
flexDirection: "column",
marginTop: theme.spacing.unit * 2
},
codeComponent: {
flexGrow: 1,
flexGrow: 1
},
notificationItem: {
marginTop: theme.spacing.unit * 2,
marginTop: theme.spacing.unit * 2
},
notificationCloseButton: {
position: 'absolute',
right: theme.spacing.unit * 2,
position: "absolute",
right: theme.spacing.unit * 2
},
toastsContainer: {
width: 400,
marginTop: theme.spacing.unit * 6,
right: 0,
right: 0
}
});
export default withStyles(styles, { withTheme: true})(NotificationsPage);
export default withStyles(styles, { withTheme: true })(NotificationsPage);

34
src/pages/notifications/styles.js
View File

@ -1,7 +1,7 @@
import { makeStyles } from "@material-ui/styles";
import tinycolor from "tinycolor2";
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
layoutContainer: {
height: 200,
display: "flex",
@ -11,73 +11,71 @@ export default makeStyles(theme => ({
marginTop: theme.spacing(2),
border: "1px dashed",
borderColor: theme.palette.primary.main,
position: "relative",
position: "relative"
},
layoutText: {
color: tinycolor(theme.palette.background.light)
.darken()
.toHexString(),
color: tinycolor(theme.palette.background.light).darken().toHexString()
},
layoutButtonsRow: {
width: "100%",
display: "flex",
justifyContent: "space-between",
justifyContent: "space-between"
},
layoutButton: {
backgroundColor: theme.palette.background.light,
width: 125,
height: 50,
outline: "none",
border: "none",
border: "none"
},
layoutButtonActive: {
backgroundColor: tinycolor(theme.palette.background.light)
.darken()
.toHexString(),
.toHexString()
},
buttonsContainer: {
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
marginTop: theme.spacing(2),
marginTop: theme.spacing(2)
},
notificationCallButton: {
color: "white",
marginBottom: theme.spacing(1),
textTransform: "none",
textTransform: "none"
},
codeContainer: {
display: "flex",
flexDirection: "column",
marginTop: theme.spacing(2),
marginTop: theme.spacing(2)
},
codeComponent: {
flexGrow: 1,
flexGrow: 1
},
notificationItem: {
marginTop: theme.spacing(2),
marginTop: theme.spacing(2)
},
notificationCloseButton: {
position: "absolute",
right: theme.spacing(2),
right: theme.spacing(2)
},
toastsContainer: {
width: 400,
marginTop: theme.spacing(6),
right: 0,
right: 0
},
progress: {
visibility: "hidden",
visibility: "hidden"
},
notification: {
display: "flex",
alignItems: "center",
background: "transparent",
boxShadow: "none",
overflow: "visible",
overflow: "visible"
},
notificationComponent: {
paddingRight: theme.spacing(4),
paddingRight: theme.spacing(4)
},
widgetHeader: {
paddingBottom: 8