frontend startup

client/public/manifest.json

@@ -1,23 +1,7 @@
 {
-  "short_name": "React App",
+  "short_name": "Todo App",
-  "name": "Create React App Sample",
+  "name": "Todo App",
-  "icons": [
+  "icons": [],
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",

client/src/components/DrawerContent/DrawerContent.js

@@ -22,13 +22,13 @@ const useStyles = makeStyles((theme) => ({
 const Drawer = () => {
   const classes = useStyles()
   const [selectedIndex, setSelectedIndex] = React.useState(0)
-  const [isListOpen, setListOpen] = React.useState(false)
+  const [isListOpen, setIsListOpen] = React.useState(false)
 
   const listItemSelectedHandler = (e, index) => {
     setSelectedIndex(index)
-    if (index === 1) setListOpen(!isListOpen)
+    if (index === 1) setIsListOpen(!isListOpen)
   }
-
+  
   return (
     <>
     <div className={classes.toolbar} />

client/src/components/Header/Header.js

@@ -39,11 +39,9 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const Header = (props) => {
+const Header = ({ window }) => {
-  const { window } = props;
   const classes = useStyles();
   const theme = useTheme();
-
   const [mobileOpen, setMobileOpen] = React.useState(false);
 
   const handleDrawerToggle = () => {
@@ -66,7 +64,7 @@ const Header = (props) => {
             <MenuIcon />
           </IconButton>
           <Typography variant="h1" noWrap>
-            Todo app
+            Список дел
           </Typography>
         </Toolbar>
       </AppBar>

client/src/components/Main/Main.js

@@ -2,16 +2,37 @@ import React from 'react';
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
-import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography'
-import { makeStyles } from '@material-ui/core/styles'
 import Grid from '@material-ui/core/Grid'
 import Fab from '@material-ui/core/Fab';
 import AddIcon from '@material-ui/icons/Add';
+import DeleteIcon from '@material-ui/icons/Delete'
+import IconButton from '@material-ui/core/IconButton'
+import AlarmIcon from '@material-ui/icons/Alarm';
+import EditIcon from '@material-ui/icons/Edit';
+import { makeStyles } from '@material-ui/core/styles'
 
 const useStyles = makeStyles((theme) => ({
+  alarmIcon: {
+    marginRight: 10
+  },
   card: {
-    margin: 10
+    margin: 10,
+  },
+  cardActions: {
+    justifyContent: 'flex-end'
+  },
+  cardHeading: {
+    marginBottom: 10
+  },
+  cardCategoryHeading: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    fontSize: 14
+  },
+  cardAlarm: {
+    display: 'flex',
+    alignItems: 'center'
   },
   fab: {
     position: 'fixed',
@@ -29,9 +50,6 @@ const useStyles = makeStyles((theme) => ({
     margin: '0 2px',
     transform: 'scale(0.8)',
   },
-  title: {
-    fontSize: 14,
-  },
   pos: {
     marginBottom: 12,
   },
@@ -39,103 +57,37 @@ const useStyles = makeStyles((theme) => ({
 
 const Main = () => {
   const classes = useStyles()
-  const bull = <span className={classes.bullet}>•</span>;
   return (
     <main className={classes.content}>
       <div className={classes.toolbar} />
       <Fab className={classes.fab} color="secondary" size='large' aria-label="add">
-          <AddIcon />
+        <AddIcon />
-        </Fab> 
+      </Fab> 
       <Grid container>     
         <Grid item xs={12} md={4}>
           <Card className={classes.card}>
             <CardContent>
-              <Typography className={classes.title} color="textSecondary" gutterBottom>
+              <Typography className={classes.cardCategoryHeading} color="textSecondary" gutterBottom>
-                Word of the Day
+                Категория 1
+                <span className={classes.cardAlarm}>
+                  <AlarmIcon className={classes.alarmIcon} color='action' />
+                  18:00
+                </span>
               </Typography>
-              <Typography variant="h5" component="h2">
+              <Typography className={classes.cardHeading} variant="h5" component="h2">
-                be{bull}nev{bull}o{bull}lent
+                Todo 1
-              </Typography>
-              <Typography className={classes.pos} color="textSecondary">
-                adjective
               </Typography>
               <Typography variant="body2" component="p">
-                well meaning and kindly.
+                But I must explain to you how all this mistaken idea of denouncing pleasure and praising.
-                <br />
-                {'"a benevolent smile"'}
               </Typography>
             </CardContent>
-            <CardActions>
+            <CardActions className={classes.cardActions}>
-              <Button size="small">Learn More</Button>
+              <IconButton aria-label="delete">
-            </CardActions>
+                <EditIcon />
-          </Card> 
+              </IconButton>
-        </Grid>
+              <IconButton aria-label="delete" color='secondary'>
-        <Grid item xs={12} md={4}>
+                <DeleteIcon />
-          <Card className={classes.card}>
+              </IconButton>
-            <CardContent>
-              <Typography className={classes.title} color="textSecondary" gutterBottom>
-                Word of the Day
-              </Typography>
-              <Typography variant="h5" component="h2">
-                be{bull}nev{bull}o{bull}lent
-              </Typography>
-              <Typography className={classes.pos} color="textSecondary">
-                adjective
-              </Typography>
-              <Typography variant="body2" component="p">
-                well meaning and kindly.
-                <br />
-                {'"a benevolent smile"'}
-              </Typography>
-            </CardContent>
-            <CardActions>
-              <Button size="small">Learn More</Button>
-            </CardActions>
-          </Card> 
-        </Grid>
-        <Grid item xs={12} md={4}>
-          <Card className={classes.card}>
-            <CardContent>
-              <Typography className={classes.title} color="textSecondary" gutterBottom>
-                Word of the Day
-              </Typography>
-              <Typography variant="h5" component="h2">
-                be{bull}nev{bull}o{bull}lent
-              </Typography>
-              <Typography className={classes.pos} color="textSecondary">
-                adjective
-              </Typography>
-              <Typography variant="body2" component="p">
-                well meaning and kindly.
-                <br />
-                {'"a benevolent smile"'}
-              </Typography>
-            </CardContent>
-            <CardActions>
-              <Button size="small">Learn More</Button>
-            </CardActions>
-          </Card> 
-        </Grid>
-        <Grid item xs={12} md={4}>
-          <Card className={classes.card}>
-            <CardContent>
-              <Typography className={classes.title} color="textSecondary" gutterBottom>
-                Word of the Day
-              </Typography>
-              <Typography variant="h5" component="h2">
-                be{bull}nev{bull}o{bull}lent
-              </Typography>
-              <Typography className={classes.pos} color="textSecondary">
-                adjective
-              </Typography>
-              <Typography variant="body2" component="p">
-                well meaning and kindly.
-                <br />
-                {'"a benevolent smile"'}
-              </Typography>
-            </CardContent>
-            <CardActions>
-              <Button size="small">Learn More</Button>
             </CardActions>
           </Card> 
         </Grid>

client/src/index.js

@@ -6,11 +6,9 @@ import theme from './theme';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
-  <React.StrictMode>
     <ThemeProvider theme={theme}>
       <App />
-    </ThemeProvider>
+    </ThemeProvider>,
-  </React.StrictMode>,
   document.getElementById('root')
 );
 

client/src/theme.js

@@ -17,6 +17,9 @@ const theme = createMuiTheme({
     h2: {
       fontSize: 30
     },
+    body1: {
+      fontSize: 14
+    }
   },
 });