feat: make banner for warnings, info and errors

closes #98
graasp · Jun 14, 2019 · e04951a · e04951a
1 parent 3778518
commit e04951a
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 29 deletions.
diff --git a/src/App.js b/src/App.js
@@ -4,7 +4,6 @@ import { connect } from 'react-redux';
 import ReduxToastr from 'react-redux-toastr';
 import { HashRouter as Router, Route, Switch } from 'react-router-dom';
 import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
-import red from '@material-ui/core/colors/red';
 import { withTranslation } from 'react-i18next';
 import Home from './Home';
 import VisitSpace from './components/VisitSpace';
@@ -39,12 +38,6 @@ const theme = createMuiTheme({
     primary: { light: '#5050d2', main: '#5050d2', dark: '#5050d2' },
     secondary: { light: '#00b904', main: '#00b904', dark: '#00b904' },
   },
-  status: {
-    danger: {
-      background: red,
-      color: '#fff',
-    },
-  },
 });
 
 export class App extends Component {

diff --git a/src/Styles.js b/src/Styles.js
@@ -65,11 +65,6 @@ const Styles = theme => ({
   screenTitle: {
     marginBottom: theme.spacing(2),
   },
-  alert: {
-    backgroundColor: theme.status.danger.background[500],
-    color: theme.status.danger.color,
-    textAlign: 'center',
-  },
   spaceDescription: {
     marginBottom: theme.spacing(3),
   },

diff --git a/src/components/common/Banner.js b/src/components/common/Banner.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import Grid from '@material-ui/core/Grid';
 import Paper from '@material-ui/core/Paper';
-import Avatar from '@material-ui/core/Avatar';
 import Divider from '@material-ui/core/Divider';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import WarningIcon from '@material-ui/icons/Warning';
+import ErrorIcon from '@material-ui/icons/Error';
+import InfoIcon from '@material-ui/icons/Info';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import Box from '@material-ui/core/Box';
@@ -15,6 +16,9 @@ const styles = theme => ({
   banner: {
     marginBottom: theme.spacing(2),
   },
+  paper: {
+    padding: theme.spacing(2),
+  },
 });
 
 const renderButton = buttonText => (
@@ -25,20 +29,26 @@ const renderButton = buttonText => (
   </Grid>
 );
 
-const Banner = ({ text, buttonText, classes }) => {
+const renderIcon = type => {
+  switch (type) {
+    case 'warning':
+      return <WarningIcon color="error" fontSize="large" />;
+    case 'error':
+      return <ErrorIcon color="error" fontSize="large" />;
+    case 'info':
+    default:
+      return <InfoIcon color="primary" fontSize="large" />;
+  }
+};
+
+const Banner = ({ text, buttonText, classes, type }) => {
   return (
     <div className={classes.banner}>
       <CssBaseline />
-      <Paper elevation={0}>
+      <Paper elevation={0} className={classes.paper}>
         <Box pt={2} pr={1} pb={1} pl={2}>
           <Grid container spacing={6} alignItems="center" wrap="nowrap">
-            <Grid item>
-              <Box bgcolor="primary.main" clone>
-                <Avatar>
-                  <WarningIcon />
-                </Avatar>
-              </Box>
-            </Grid>
+            <Grid item>{renderIcon(type)}</Grid>
             <Grid item>
               <Typography>{text}</Typography>
             </Grid>
@@ -52,12 +62,14 @@ const Banner = ({ text, buttonText, classes }) => {
 };
 
 Banner.propTypes = {
+  type: PropTypes.oneOf(['warning', 'error', 'info']),
   text: PropTypes.string,
   buttonText: PropTypes.string,
   classes: PropTypes.shape({ banner: PropTypes.string.isRequired }).isRequired,
 };
 
 Banner.defaultProps = {
+  type: 'info',
   text: null,
   buttonText: null,
 };

diff --git a/src/components/common/DeveloperSwitch.js b/src/components/common/DeveloperSwitch.js
@@ -11,7 +11,7 @@ import Loader from './Loader';
 
 const styles = theme => ({
   formControl: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(),
     minWidth: 120,
   },
 });

diff --git a/src/components/common/LanguageSelect.js b/src/components/common/LanguageSelect.js
@@ -13,7 +13,7 @@ import Loader from './Loader';
 
 const styles = theme => ({
   formControl: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(),
     minWidth: 120,
   },
 });

diff --git a/src/components/common/MediaCard.js b/src/components/common/MediaCard.js
@@ -16,7 +16,7 @@ const styles = theme => ({
     height: 300,
   },
   leftIcon: {
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(),
   },
 });
 

diff --git a/src/components/developer/DeveloperScreen.js b/src/components/developer/DeveloperScreen.js
@@ -17,6 +17,7 @@ import PropTypes from 'prop-types';
 import MainMenu from '../common/MainMenu';
 import DatabaseEditor from './DatabaseEditor';
 import Styles from '../../Styles';
+import Banner from '../common/Banner';
 
 class DeveloperScreen extends Component {
   state = {
@@ -98,12 +99,12 @@ class DeveloperScreen extends Component {
             {t('Developer')}
           </Typography>
           <br />
-          <Typography variant="h6" className={classes.alert}>
-            {t(
+          <Banner
+            text={t(
               'Danger Zone! Proceed with caution as changes to this section might lead to data loss.'
             )}
-          </Typography>
-          <br />
+            type="error"
+          />
           <DatabaseEditor />
         </main>
       </div>

diff --git a/src/components/space/SpaceDescription.js b/src/components/space/SpaceDescription.js
@@ -11,6 +11,7 @@ import Banner from '../common/Banner';
 const renderPreviewWarning = t => {
   return (
     <Banner
+      type="warning"
       text={t(
         'Warning: You are previewing this space. Any input or changes will not be saved.'
       )}