add icon

shiburagi · Jan 14, 2019 · caea636 · caea636
1 parent 08a2e29
commit caea636
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/components/Snackbar/SnackbarContent.jsx b/src/components/Snackbar/SnackbarContent.jsx
@@ -23,6 +23,9 @@ const variantIcon = {
 };
 
 const useStyles = makeStyles(theme => ({
+    root:{
+        display:"flex"
+    },
     success: {
         backgroundColor: green[600],
     },
@@ -55,6 +58,9 @@ const useStyles = makeStyles(theme => ({
         opacity: 0.9,
         marginRight: theme.spacing.unit,
     },
+    snackbarMessage:{
+        flex:1
+    },
     message: {
         display: 'flex',
         alignItems: 'center',
@@ -67,7 +73,12 @@ function MySnackbarContent({ className, message, icon, onClose, variant, ...othe
 
     return (
         <SnackbarContent
-            className={classNames(classes[variant], className)}
+            className={classNames(classes.root,classes[variant], className)}
+            classes={
+                {
+                    message:classes.snackbarMessage
+                }
+            }
             aria-describedby="client-snackbar"
             message={
                 <span id="client-snackbar" className={classes.message}>

diff --git a/src/views/Notification/Notification.jsx b/src/views/Notification/Notification.jsx
@@ -5,6 +5,7 @@ import Snackbar from '@material-ui/core/Snackbar';
 import { makeStyles } from '@material-ui/styles';
 import { Grid } from '../../../node_modules/@material-ui/core';
 import SnackbarContent from "../../components/Snackbar/SnackbarContent";
+import NotificationIcon from "@material-ui/icons/Notifications"
 
 const useStyles2 = makeStyles(theme => ({
     margin: {
@@ -17,7 +18,7 @@ function Notification() {
     const [open, setOpen] = React.useState(false);
     const [variant, setVariant] = React.useState();
 
-    const handleClick=(variant)=>()=> {
+    const handleClick = (variant) => () => {
         setOpen(true);
         setVariant(variant);
     }
@@ -85,6 +86,12 @@ function Notification() {
                         className={classes.margin}
                         message="I love candy. I love cookies. I love cupcakes. I love cheesecake. I love chocolate."
                     />
+                    <SnackbarContent
+                        icon={NotificationIcon}
+                        variant="inverse"
+                        className={classes.margin}
+                        message="I love candy. I love cookies. I love cupcakes. I love cheesecake. I love chocolate."
+                    />
 
                 </Grid>
             </Grid>