Update notifications styles

src/components/layout/PageFrame/assets/alert.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="18" viewBox="0 0 22 18">
+    <g fill="none" fill-rule="nonzero">
+        <path fill="#FFC05F" d="M1.734 18h18.532a1 1 0 0 0 .865-1.501L11.865.495a1 1 0 0 0-1.73 0L.869 16.499A1 1 0 0 0 1.734 18z"/>
+        <path fill="#FFF" d="M12 12h-2V6h2zM12 15h-2v-2h2z"/>
+    </g>
+</svg>

src/components/layout/PageFrame/assets/check.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#008C73" d="M11 0C5.489 0 1 4.489 1 10s4.489 10 10 10 10-4.489 10-10S16.511 0 11 0z"/>
+        <path fill="#FFF" d="M10.124 13.75L6 9.406l1.245-1.312 2.88 3.034 4.63-4.878L16 7.561z"/>
+    </g>
+</svg>

src/components/layout/PageFrame/assets/error.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#F02525" fill-rule="nonzero" d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0z"/>
+        <path fill="#FFF" d="M11 15H9v-2h2zM11 11H9V5h2z"/>
+    </g>
+</svg>

src/components/layout/PageFrame/index.jsx

@@ -2,31 +2,80 @@
 import * as React from 'react'
 import { SnackbarProvider } from 'notistack'
 import SidebarProvider from '~/components/Sidebar'
-import Footer from '~/components/Footer'
+import { withStyles } from '@material-ui/core/styles'
 import Header from '~/components/Header'
+import Img from '~/components/layout/Img'
+import AlertLogo from './assets/alert.svg'
+import CheckLogo from './assets/check.svg'
+import ErrorLogo from './assets/error.svg'
 import styles from './index.scss'
 
+const classes = {
+  success: {
+    background: '#ffffff',
+    fontFamily: 'Averta',
+    fontSize: '14px',
+    lineHeight: 1.43,
+    color: '#001428',
+    minHeight: '58px',
+    boxShadow: '0 0 10px 0 rgba(212, 212, 211, 0.59)',
+  },
+  error: {
+    background: '#ffe6ea',
+    fontFamily: 'Averta',
+    fontSize: '14px',
+    lineHeight: 1.43,
+    color: '#001428',
+    minHeight: '58px',
+    boxShadow: '0 0 10px 0 rgba(212, 212, 211, 0.59)',
+  },
+  warning: {
+    background: '#fff3e2',
+    fontFamily: 'Averta',
+    fontSize: '14px',
+    lineHeight: 1.43,
+    color: '#001428',
+    minHeight: '58px',
+    boxShadow: '0 0 10px 0 rgba(212, 212, 211, 0.59)',
+  },
+  info: {
+    background: '#e8673c',
+    fontFamily: 'Averta',
+    fontSize: '14px',
+    lineHeight: 1.43,
+    color: '#001428',
+    minHeight: '58px',
+    boxShadow: '0 0 10px 0 rgba(212, 212, 211, 0.59)',
+  },
+}
+
 type Props = {
   children: React.Node,
 }
 
-const PageFrame = ({ children }: Props) => (
+const PageFrame = ({ children, classes }: Props) => (
-  <SnackbarProvider
+  <div className={styles.frame}>
-    anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+    <SnackbarProvider
-    classes={{
+      maxSnack={5}
-      variantSuccess: styles.success,
+      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-      variantError: styles.error,
+      classes={{
-      variantWarning: styles.warning,
+        variantSuccess: classes.success,
-      variantInfo: styles.info,
+        variantError: classes.error,
-    }}
+        variantWarning: classes.warning,
-  >
+        variantInfo: classes.info,
-    <div className={styles.frame}>
+      }}
+      iconVariant={{
+        success: <img src={CheckLogo} />,
+        error: <img src={ErrorLogo} />,
+        warning: <img src={AlertLogo} />,
+      }}
+    ><>
       <SidebarProvider>
         <Header />
         {children}
-      </SidebarProvider>
+      </SidebarProvider></>
-    </div>
+    </SnackbarProvider>
-  </SnackbarProvider>
+  </div>
 )
 
-export default PageFrame
+export default withStyles(classes)(PageFrame)

src/components/layout/PageFrame/index.scss

@@ -4,19 +4,3 @@
   flex: 1 1 auto;
   max-width: 100%;
 }
-
-.success {
-  background: 'purple';
-}
-
-.error {
-  background: 'blue';
-}
-
-.warning {
-  background: 'green';
-}
-
-.info {
-  background: 'yellow';
-}

src/theme/mui.js

@@ -204,6 +204,18 @@ export default createMuiTheme({
         color: secondaryText,
       },
     },
+    /* MuiSnackbar: {
+      anchorOriginTopRight: {
+        marginTop: '50px',
+      },
+    }, */
+    MuiSnackbarContent: {
+      message: {
+        '& img': {
+          marginRight: '5px',
+        },
+      },
+    },
     MuiTab: {
       root: {
         fontFamily: 'Averta, monospace',