change requirements & issues ui in new project setup (#51)

* change requirements & issues ui in new project setup * use icons as buttons in requirements & issues * add color to checked radio label * add theme & alert.js files code * remove css for image radio buttons
buildly-release-management · Jan 10, 2022 · ac3f74b · ac3f74b
1 parent 41602b6
commit ac3f74b
Show file tree

Hide file tree

Showing 4 changed files with 161 additions and 66 deletions.
diff --git a/package.json b/package.json
@@ -13,6 +13,9 @@
     "@date-io/moment": "^1.3.13",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-brands-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.16",
     "@mui/icons-material": "^5.2.5",
     "@mui/lab": "^5.0.0-alpha.61",
     "@mui/material": "^5.2.5",

diff --git a/src/components/Alerts/Alerts.js b/src/components/Alerts/Alerts.js
@@ -1,19 +1,33 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Snackbar } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
-import MuiAlert from '@mui/material/Alert';
+import { IconButton, Slide, Snackbar } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
 import { hideAlert } from '@redux/alert/actions/alert.actions';
 
-const Alert = (props) => <MuiAlert elevation={6} variant="filled" {...props} />;
-
 const useStyles = makeStyles((theme) => ({
   root: {
     width: '100%',
     '& > * + *': {
       marginTop: theme.spacing(2),
     },
   },
+  success: {
+    backgroundColor: '#009900',
+    color: '#000',
+  },
+  info: {
+    backgroundColor: '#0099CC',
+    color: '#000',
+  },
+  warning: {
+    backgroundColor: '#FFCC33',
+    color: '#000',
+  },
+  error: {
+    backgroundColor: '#FF0033',
+    color: '#000',
+  },
 }));
 
 const Alerts = ({ data, dispatch }) => {
@@ -24,20 +38,37 @@ const Alerts = ({ data, dispatch }) => {
     }
     dispatch(hideAlert());
   };
+
   return (
     <div className={classes.root}>
-      <Snackbar
-        open={data ? data.open : false}
-        autoHideDuration={4000}
-        onClose={handleClose}
-        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-      >
-        {data && (
-          <Alert onClose={handleClose} severity={data.type}>
-            {data.message}
-          </Alert>
-        )}
-      </Snackbar>
+      {data && (
+        <Snackbar
+          key={`${data.type}-${data.message}`}
+          open={data.open || false}
+          autoHideDuration={4000}
+          onClose={handleClose}
+          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+          message={data.message}
+          TransitionComponent={(props) => (
+            <Slide {...props} direction="left" />
+          )}
+          classes={{
+            root: classes[data.type],
+          }}
+          action={(
+            <>
+              <IconButton
+                aria-label="close"
+                color="inherit"
+                sx={{ p: 0.5 }}
+                onClick={handleClose}
+              >
+                <CloseIcon />
+              </IconButton>
+            </>
+          )}
+        />
+      )}
     </div>
   );
 };
@@ -47,4 +78,4 @@ const mapStateToProps = (state, ownProps) => ({
   ...state.alertReducer,
 });
 
-export default connect(mapStateToProps)(Alerts);
+export default connect(mapStateToProps)(Alerts);
diff --git a/src/pages/NewProject/components/ProjectSetup.js b/src/pages/NewProject/components/ProjectSetup.js
@@ -14,6 +14,8 @@ import {
   FormControlLabel,
   Radio,
 } from '@mui/material';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faGithub, faTrello, faAtlassian, faJira } from '@fortawesome/free-brands-svg-icons'
 import makeStyles from '@mui/styles/makeStyles';
 import { Autocomplete } from '@mui/material';
 import DatePickerComponent from '@components/DatePicker/DatePicker';
@@ -110,6 +112,12 @@ const useStyles = makeStyles((theme) => ({
       backgroundColor: "#106ba3",
     },
   },
+  radioButton: {
+    margin: theme.spacing(2, 2)
+  },
+  radioLeft: {
+    marginLeft: theme.spacing(2)
+  },
 }));
 
 export let checkIfProjectSetupEdited;
@@ -130,6 +138,21 @@ function StyledRadio(props) {
   );
 }
 
+function StyledStart(props) {
+  return (
+    <Radio
+      sx={{
+        opacity: 0,
+        "&.Mui-checked": {
+          "&, & + .MuiFormControlLabel-label": {
+            color: "#137cbd"
+          }
+        }
+      }}
+      {...props}
+    />
+  );
+}
 const ProjectSetup = (props) => {
   const {
     history, loading, dispatch, location, handleNext, handleCancel,
@@ -299,57 +322,87 @@ const ProjectSetup = (props) => {
 
             <Grid item xs={12} sm={6}>
               <Typography variant="h6">Requirements</Typography>
-              <FormControl component="fieldset" required>
-                <RadioGroup
-                  row
-                  aria-label="requirements"
-                  name="requirements-radio-buttons-group"
-                  {...requirements_tool.bind}
-                >
-                  <FormControlLabel
-                    value="trello"
-                    control={<StyledRadio />}
-                    label="Trello"
-                  />
-                  <FormControlLabel
-                    value="atlassian"
-                    control={<StyledRadio />}
-                    label="Atlassian"
-                  />
-                  <FormControlLabel
-                    value="start fresh"
-                    control={<StyledRadio />}
-                    label="Start Fresh"
-                  />
-                </RadioGroup>
-              </FormControl>
+              <Box sx={{ border: '1px solid white', borderRadius: '4px' }}>
+                <Typography variant="subtitle1" align="center" mt={2}>Connect to supported tool</Typography>
+                <FormControl component="fieldset" required>
+                  <RadioGroup
+                    row
+                    aria-label="requirements"
+                    name="requirements-radio-buttons-group"
+                    {...requirements_tool.bind}
+                    className={classes.radioButton}
+                  >
+                    <FormControlLabel
+                      value="trello"
+                      control={<StyledStart />}
+                      label={
+                        <>
+                          <FontAwesomeIcon icon={faTrello} className='fa-4x'></FontAwesomeIcon>
+                          <Typography align="center">Trello</Typography>
+                        </>
+                      }
+                    />
+                    <FormControlLabel
+                      value="atlassian"
+                      control={<StyledStart />}
+                      label={
+                        <>
+                          <FontAwesomeIcon icon={faAtlassian} className='fa-4x'></FontAwesomeIcon>
+                          <Typography align="center">Atlassian</Typography>
+                        </>
+                      }
+                    />
+                    <FormControlLabel
+                      value="start fresh"
+                      className={classes.radioLeft}
+                      control={<StyledRadio />}
+                      label="Start Fresh"
+                    />
+                  </RadioGroup>
+                </FormControl>
+              </Box>
             </Grid>
             <Grid item xs={12} sm={6}>
               <Typography variant="h6">Issues</Typography>
-              <FormControl component="fieldset" required>
-                <RadioGroup
-                  row
-                  aria-label="issues"
-                  name="issues-radio-buttons-group"
-                  {...issues_tool.bind}
-                >
-                  <FormControlLabel
-                    value="github"
-                    control={<StyledRadio />}
-                    label="Github"
-                  />
-                  <FormControlLabel
-                    value="jira"
-                    control={<StyledRadio />}
-                    label="Jira"
-                  />
-                  <FormControlLabel
-                    value="start fresh"
-                    control={<StyledRadio />}
-                    label="Start Fresh"
-                  />
-                </RadioGroup>
-              </FormControl>
+              <Box sx={{ border: '1px solid white', borderRadius: '4px' }}>
+                <Typography variant="subtitle1" align="center" mt={2}>Connect to supported tool</Typography>
+                <FormControl component="fieldset" required>
+                  <RadioGroup
+                    row
+                    aria-label="issues"
+                    name="issues-radio-buttons-group"
+                    {...issues_tool.bind}
+                    className={classes.radioButton}
+                  >
+                    <FormControlLabel
+                      value="github"
+                      control={<StyledStart />}
+                      label={
+                        <>
+                          <FontAwesomeIcon icon={faGithub} className='fa-4x'></FontAwesomeIcon>
+                          <Typography align="center">Github</Typography>
+                        </>
+                      }
+                    />
+                    <FormControlLabel
+                      value="jira"
+                      control={<StyledStart />}
+                      label={
+                        <>
+                          <FontAwesomeIcon icon={faJira} className='fa-4x'></FontAwesomeIcon>
+                          <Typography align="center">Jira</Typography>
+                        </>
+                      }
+                    />
+                    <FormControlLabel
+                      value="start fresh"
+                      className={classes.radioLeft}
+                      control={<StyledRadio />}
+                      label="Start Fresh"
+                    />
+                  </RadioGroup>
+                </FormControl>
+              </Box>
             </Grid>
           </Grid>
         </Box>

diff --git a/src/styles/theme.js b/src/styles/theme.js
@@ -36,7 +36,15 @@ const theme = createTheme(({
         },
       },
     },
+    MuiSnackbarContent: {
+      styleOverrides: {
+        root: {
+          color: '#000',
+          backgroundColor: 'transparent',
+        },
+      },
+    },
   },
 }));
 
-export default responsiveFontSizes(theme);
+export default responsiveFontSizes(theme);