(fix) Notifications' visual inconsistencies (#492)

* (fix) notifications' visual inconsistencies

* (fix) check svg icon

* (fix) notifications variants

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

@@ -1,6 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="22" height="18" viewBox="0 0 22 18">
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20">
     <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="#FFC05F" d="M1.734 19h18.532a1 1 0 0 0 .865-1.501L11.865 1.495a1 1 0 0 0-1.73 0L.869 17.499A1 1 0 0 0 1.734 19z"/>
-        <path fill="#FFF" d="M12 12h-2V6h2zM12 15h-2v-2h2z"/>
+        <path fill="#FFF" d="M12 13h-2V7h2zM12 16h-2v-2h2z"/>
     </g>
 </svg>

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

@@ -1,6 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+<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="#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="#F02525" fill-rule="nonzero" d="M11 0C5.48 0 1 4.48 1 10s4.48 10 10 10 10-4.48 10-10S16.52 0 11 0z"/>
-        <path fill="#FFF" d="M11 15H9v-2h2zM11 11H9V5h2z"/>
+        <path fill="#FFF" d="M12 15h-2v-2h2zM12 11h-2V5h2z"/>
     </g>
 </svg>

src/components/layout/PageFrame/index.jsx

@@ -1,60 +1,35 @@
 // @flow
 import * as React from 'react'
-import { connect } from 'react-redux'
 import { SnackbarProvider } from 'notistack'
+import { connect } from 'react-redux'
 import { withStyles } from '@material-ui/core/styles'
-import { getNetwork } from '~/config'
-import { ETHEREUM_NETWORK } from '~/logic/wallets/getWeb3'
-import SidebarProvider from '~/components/Sidebar'
-import Header from '~/components/Header'
 import Backdrop from '~/components/layout/Backdrop'
+import CookiesBanner from '~/components/CookiesBanner'
+import Header from '~/components/Header'
 import Img from '~/components/layout/Img'
 import Notifier from '~/components/Notifier'
+import SidebarProvider from '~/components/Sidebar'
+import { ETHEREUM_NETWORK } from '~/logic/wallets/getWeb3'
+import { getNetwork } from '~/config'
 import { networkSelector } from '~/logic/wallets/store/selectors'
 import AlertIcon from './assets/alert.svg'
 import CheckIcon from './assets/check.svg'
 import ErrorIcon from './assets/error.svg'
 import InfoIcon from './assets/info.svg'
-import CookiesBanner from '~/components/CookiesBanner'
 import styles from './index.scss'
-import { fontColor } from '~/theme/variables'
 
 const notificationStyles = {
   success: {
-    background: '#ffffff',
+    background: '#fff',
-    fontFamily: 'Averta',
-    fontSize: '14px',
-    lineHeight: 1.43,
-    color: fontColor,
-    minHeight: '58px',
-    boxShadow: '0 0 10px 0 rgba(212, 212, 211, 0.59)',
   },
   error: {
     background: '#ffe6ea',
-    fontFamily: 'Averta',
-    fontSize: '14px',
-    lineHeight: 1.43,
-    color: fontColor,
-    minHeight: '58px',
-    boxShadow: '0 0 10px 0 rgba(212, 212, 211, 0.59)',
   },
   warning: {
     background: '#fff3e2',
-    fontFamily: 'Averta',
-    fontSize: '14px',
-    lineHeight: 1.43,
-    color: fontColor,
-    minHeight: '58px',
-    boxShadow: '0 0 10px 0 rgba(212, 212, 211, 0.59)',
   },
   info: {
-    background: '#ffffff',
+    background: '#fff',
-    fontFamily: 'Averta',
-    fontSize: '14px',
-    lineHeight: 1.43,
-    color: fontColor,
-    minHeight: '58px',
-    boxShadow: '0 0 10px 0 rgba(212, 212, 211, 0.59)',
   },
 }
 
@@ -82,10 +57,10 @@ const PageFrame = ({ children, classes, currentNetwork }: Props) => {
           variantInfo: classes.info,
         }}
         iconVariant={{
-          success: <Img src={CheckIcon} alt="Success" />,
           error: <Img src={ErrorIcon} alt="Error" />,
-          warning: <Img src={AlertIcon} alt="Warning" />,
           info: <Img src={InfoIcon} alt="Info" />,
+          success: <Img src={CheckIcon} alt="Success" />,
+          warning: <Img src={AlertIcon} alt="Warning" />,
         }}
       >
         <Notifier />

src/theme/mui.js

@@ -8,6 +8,7 @@ import {
   disabled,
   error,
   extraSmallFontSize,
+  fontColor,
   largeFontSize,
   lg,
   mainFontFamily,
@@ -193,7 +194,7 @@ const theme = createMuiTheme({
         },
       },
       formControl: {
-        marginTop: '0px !important',
+        marginTop: '0 !important',
       },
     },
     MuiStepLabel: {
@@ -212,18 +213,41 @@ const theme = createMuiTheme({
     },
     MuiSnackbar: {
       root: {
-        width: '280px',
+        maxWidth: '100%',
+        width: '340px',
       },
     },
     MuiSnackbarContent: {
+      root: {
+        borderRadius: '8px !important',
+        boxShadow: '0 0 10px 0 rgba(212, 212, 211, 0.59)',
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'nowrap',
+        padding: '20px',
+        width: '100%',
+      },
       message: {
-        maxWidth: '260px',
+        color: fontColor,
-        '& img': {
+        flexGrow: '1',
-          marginRight: '5px',
+        fontFamily: 'Averta',
+        fontSize: '14px',
+        lineHeight: '1.43',
+        padding: '0 10px 0 0',
+        '& > span': {
+          display: 'flex',
+          flexDirection: 'row',
+          '& > img': {
+            display: 'block',
+            marginRight: '13px',
+          },
         },
       },
       action: {
         paddingLeft: 0,
+        '& > button': {
+          color: secondaryText,
+        },
       },
     },
     MuiTab: {