[REF] Changes in L0S1 after ux frames update, added LO.1, added Switc…

…h component

frontend/src/common/Components/Button/index.js

@@ -3,10 +3,11 @@ import { withStyles } from '@material-ui/styles';
 import MuiButton from '@material-ui/core/Button';
 import Box from '@material-ui/core/Box';
 
-const ButtonSuccess = withStyles(theme => ({
+const ButtonSuccess = withStyles(() => ({
   contained: {
     minWidth: '100%',
-    backgroundColor: theme.palette.success.dark,
+    backgroundColor: '#397F3A',
+    textTransform: 'none',
     color: '#fff'
   }
 }))(MuiButton);
@@ -18,13 +19,15 @@ const ButtonSecondary = withStyles(theme => ({
     color: '#000'
   },
   root: {
-    minWidth: '100%'
+    minWidth: '100%',
+    textTransform: 'none',
   }
 }))(MuiButton);
 
 const ButtonPrimmary = withStyles(() => ({
   contained: {
     minWidth: '100%',
+    textTransform: 'none',
     backgroundColor: '#fff',
     color: '#000'
   }

frontend/src/common/Components/Dialog/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import MuiDialogTitle from '@material-ui/core/DialogTitle';
 import MuiDialogContent from '@material-ui/core/DialogContent';
-import { Dialog, Box, Slide, Typography } from '@material-ui/core';
+import { Dialog, Slide, Grid, Typography } from '@material-ui/core';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 
@@ -24,23 +24,44 @@ const styles = theme => ({
   }
 });
 
-const Transition = React.forwardRef(function Transition(props, ref) {
+export const Transition = React.forwardRef(function Transition(props, ref) {
   // eslint-disable-next-line react/jsx-props-no-spreading
   return <Slide direction="up" ref={ref} {...props} />;
 });
 
 const DialogTitle = withStyles(styles)(props => {
-  const { children, classes, onClose, ...other } = props;
+  const { title, classes, onClose, align, handleClose, handleSave, ...other } = props;
   return (
     <MuiDialogTitle
       disableTypography
       className={classes.root}
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...other}
     >
-      <Box mr={2} ml={2}>
-        <Typography variant="h5">{children}</Typography>
-      </Box>
+      <Grid
+        container
+        direction='row'
+        alignItems='center'
+        alignContent='center'
+        spacing={2}
+
+      >
+        <Grid item>
+          {handleClose && (
+            <IconButton
+              edge="start"
+              color="inherit"
+              onClick={handleClose}
+              aria-label="close"
+            >
+              <CloseIcon />
+            </IconButton>)}
+        </Grid>
+        <Grid item>
+          <Typography align="center" variant="h5">{title}</Typography>
+        </Grid>
+      </Grid>
+
     </MuiDialogTitle>
   );
 });
@@ -52,29 +73,17 @@ const DialogContent = withStyles(theme => ({
   }
 }))(MuiDialogContent);
 
-export default ({ title, children, open, openAction, handleClose }) => {
+export default ({ title, children, open, openAction, fullScreen, handleClose, alignTitle }) => {
   return (
     <>
       {openAction}
       <Dialog
-        fullScreen
+        fullScreen={fullScreen}
         open={open}
         onClose={handleClose}
         TransitionComponent={Transition}
       >
-        <DialogTitle onClose={() => handleClose()}>
-          {handleClose && (
-            <IconButton
-              edge="start"
-              color="inherit"
-              onClick={handleClose}
-              aria-label="close"
-            >
-              <CloseIcon />
-            </IconButton>
-          )}
-          {title}
-        </DialogTitle>
+        {title && <DialogTitle title={title} onClose={() => handleClose()} handleClose={handleClose} align={alignTitle} />}
         <DialogContent>{children}</DialogContent>
       </Dialog>
     </>

frontend/src/common/Components/Switch/index.js

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import { Switch, Box, FormGroup, makeStyles } from '@material-ui/core/';
+
+
+const useStyle = makeStyles({
+    root: {
+        justifyContent: 'space-between'
+    }
+});
+
+export default ({ options, register }) => {
+    const classes = useStyle();
+    const defaultCheked = {};
+    options.map(item => Object.assign(defaultCheked, { [item.name]: true }));
+    const [checked, setChecked] = useState(defaultCheked);
+    const handleChange = event => {
+        setChecked({ ...checked, [event.target.name]: !checked[event.target.name] });
+    };
+
+    return (
+        <FormGroup>
+            {
+                options.map(question => {
+                    const { name, label } = question;
+                    return (<FormControlLabel
+                        className={classes.root}
+                        control={
+                            <Switch
+                                checked={checked[name]}
+                                onChange={handleChange}
+                                name={name}
+                                color="primary"
+                                inputRef={register}
+                            />
+                        }
+                        label={label}
+                        labelPlacement="start"
+                    />);
+                })
+            }
+        </FormGroup>
+    );
+};

frontend/src/common/Layout/AppBarOpenRoute.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/styles';
+import { AppBar, Toolbar } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import DitoLogo from '../../resources/img/dito.png';
+
+const useStyles = makeStyles(theme => ({
+    spacer: {
+        flex: 1
+    },
+    root: {
+        backgroundColor: '#9FC9D9',
+        marginBottom: theme.spacing(4)
+    }
+}));
+
+export default () => {
+    const classes = useStyles();
+    return (
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        <>
+            <AppBar className={classes.root} position="sticky">
+                <Toolbar>
+                    <span className={classes.spacer} />
+                    <Box p={1}>
+                        <img height="50" src={DitoLogo} alt="logo" />
+                    </Box>
+                    <span className={classes.spacer} />
+                </Toolbar>
+            </AppBar>
+        </>
+    );
+};

frontend/src/common/Layout/index.js

@@ -2,9 +2,10 @@ import React from 'react';
 import { ThemeProvider } from '@material-ui/core';
 import CssBaseline from '@material-ui/core/CssBaseline';
 
-const Layout = ({ children, theme }) => {
+const Layout = ({ children, theme, appBar }) => {
   return (
     <ThemeProvider theme={theme}>
+      {appBar}
       <CssBaseline />
       {children}
     </ThemeProvider>

frontend/src/common/Layout/theme.js

@@ -14,6 +14,11 @@ const main = responsiveFontSizes(
         color: 'grey'
       }
     },
+    palette: {
+      background: {
+        default: '#0000'
+      }
+    },
     overrides: {
       MuiInputBase: { root: { backgroundColor: 'transparent' } },
       MuiOutlinedInput: { root: { borderRadius: 8 } },

frontend/src/common/Pages/CheckEmergency/index.js

@@ -5,18 +5,19 @@ import { useTheme } from '@material-ui/core/styles';
 import uniqid from 'uniqid';
 
 import texts from '../../../resources/texts';
-import DitoLogo from '../../../resources/img/dito.png';
 import Button from '../../Components/Button';
 
 const ListItemText = ({ value, desc }) => (
-  <Typography variant="body2" component="div">
-    <Box component="div" display="inline" fontWeight="fontWeightBold">
-      {value}
-    </Box>
-    <Box component="div" display="inline" fontWeight="fontWeightRegular">
-      {desc}
-    </Box>
-  </Typography>
+  <Box m={0.5}>
+    <Typography variant="body2" component="div">
+      <Box component="div" display="inline" fontWeight="fontWeightBold">
+        {value}
+      </Box>
+      <Box component="div" display="inline" fontWeight="fontWeightRegular">
+        {desc}
+      </Box>
+    </Typography>
+  </Box>
 );
 export default ({ history }) => {
   const theme = useTheme();
@@ -31,31 +32,26 @@ export default ({ history }) => {
       justify="space-around"
       alignItems="center"
       style={{ height: '100%' }}
-      spacing={4}
     >
       <Grid item xs={12}>
-        <Box mt={4}>
-          <img
-            {...(matches ? { width: 150 } : { width: 100 })}
-            src={DitoLogo}
-            alt="logo"
-          />
+        <Box {...(matches ? { mt: 6 } : {})} color="warning.main">
+          <Typography align="center" variant="h6" component="h2">
+            <Box fontWeight="fontWeightBold">
+              {texts.EMERGENCY_CHECK_TITLE}{' '}
+            </Box>
+          </Typography>
         </Box>
       </Grid>
+      <Grid item>
+        <Box {...(matches ? { mt: 6 } : { mt: 1 })}>
 
-      <Grid item xs={12}>
-        <Box {...(matches ? { mt: 6 } : {})} color="warning.main">
-          <Typography align="center" variant="h5" component="h2">
-            {texts.EMERGENCY_CHECK_TITLE}{' '}
+          <Typography align="center" variant="h6" component="h3">
+            <Box fontWeight="fontWeightMedium" {...(matches ? { mt: 4 } : {})}>
+              {texts.EMERGENCY_CHECK_SUBTITLE}
+            </Box>
           </Typography>
         </Box>
-        <Typography align="center" variant="h6" component="h3">
-          <Box fontWeight="fontWeightMedium" {...(matches ? { mt: 4 } : {})}>
-            {texts.EMERGENCY_CHECK_SUBTITLE}
-          </Box>
-        </Typography>
-
-        <Box {...(matches ? { pr: 8, pl: 8 } : {})}>
+        <Box {...(matches ? { pr: 8, pl: 8, mt: 6 } : {})}>
           <ul style={{ paddingInlineStart: 15 }}>
             {texts.EMERGENCY_CASES.map(item => (
               <li key={uniqid()}>
@@ -67,7 +63,7 @@ export default ({ history }) => {
       </Grid>
 
       <Grid item xs={12}>
-        <Box {...(matches ? { mt: 8 } : {})}>
+        <Box {...(matches ? { mt: 8 } : { mt: 1 })}>
           <Grid
             container
             direction="column"
@@ -86,13 +82,13 @@ export default ({ history }) => {
               </Button>
             </Grid>
             <Grid item>
-              <Button width={300} type="secondary" onClick={handleCancel}>
+              <Button width={300} color="secondary" onClick={handleCancel}>
                 {texts.BUTTON_CANCEL}
               </Button>
             </Grid>
           </Grid>
         </Box>
       </Grid>
-    </Grid>
+    </Grid >
   );
 };

frontend/src/common/Pages/CreateProfile/CreateProfileForm.js

@@ -28,7 +28,7 @@ export default ({
           container
           direction="column"
           justify="flex-start"
-          alignItems="flex-start"
+          alignItems="center"
         >
           <Grid item>
             <Box pl={1}>

frontend/src/common/Pages/CreateProfile/Step1.js

@@ -62,7 +62,7 @@ export default ({ matches, handleConfirmNhsNo, handleConfirmNoNhsNo }) => {
             <Grid item>
               <Button
                 width={150}
-                onClick={handleConfirmNhsNo}
+                onClick={handleConfirmNoNhsNo}
                 color="secondary"
               >
                 {texts.CREATE_PROFILE_NO_NHS_BUTTON}
@@ -74,7 +74,7 @@ export default ({ matches, handleConfirmNhsNo, handleConfirmNoNhsNo }) => {
                 color="success"
                 variant="contained"
                 disabled={nhsNo.length !== 11}
-                onClick={handleConfirmNoNhsNo}
+                onClick={handleConfirmNhsNo}
               >
                 {texts.BUTTON_CONFIRM}
               </Button>