diff --git a/src/components/layout/PageFrame/assets/alert.svg b/src/components/layout/PageFrame/assets/alert.svg index 0e20a926..9af2be16 100644 --- a/src/components/layout/PageFrame/assets/alert.svg +++ b/src/components/layout/PageFrame/assets/alert.svg @@ -1,6 +1,6 @@ - + - - + + diff --git a/src/components/layout/PageFrame/assets/error.svg b/src/components/layout/PageFrame/assets/error.svg index b4948e8f..d8fce121 100644 --- a/src/components/layout/PageFrame/assets/error.svg +++ b/src/components/layout/PageFrame/assets/error.svg @@ -1,6 +1,6 @@ - + - - + + diff --git a/src/components/layout/PageFrame/index.jsx b/src/components/layout/PageFrame/index.jsx index d52fa360..c3fdadd2 100644 --- a/src/components/layout/PageFrame/index.jsx +++ b/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', - fontFamily: 'Averta', - fontSize: '14px', - lineHeight: 1.43, - color: fontColor, - minHeight: '58px', - boxShadow: '0 0 10px 0 rgba(212, 212, 211, 0.59)', + background: '#fff', }, 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', - fontFamily: 'Averta', - fontSize: '14px', - lineHeight: 1.43, - color: fontColor, - minHeight: '58px', - boxShadow: '0 0 10px 0 rgba(212, 212, 211, 0.59)', + background: '#fff', }, } @@ -82,10 +57,10 @@ const PageFrame = ({ children, classes, currentNetwork }: Props) => { variantInfo: classes.info, }} iconVariant={{ - success: Success, error: Error, - warning: Warning, info: Info, + success: Success, + warning: Warning, }} > diff --git a/src/theme/mui.js b/src/theme/mui.js index 0babc495..4ed23f1b 100644 --- a/src/theme/mui.js +++ b/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', - '& img': { - marginRight: '5px', + color: fontColor, + flexGrow: '1', + 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: {