diff --git a/index.html b/index.html
index 3c916f2..2a02b4f 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
</head>
<body>
- <div id="root"></div>
+ <div id="root" style="height: 100vh"></div>
<script type="module" src="./src/index.tsx"></script>
</body>
</html>
diff --git a/src/AddTask.tsx b/src/AddTask.tsx
index c6da261..f514345 100644
--- a/src/AddTask.tsx
+++ b/src/AddTask.tsx
@@ -4,7 +4,7 @@ import SwipeableDrawer from "@mui/material/SwipeableDrawer";
import InputBase from "@mui/material/InputBase";
import TrapFocus from "@mui/material/Unstable_TrapFocus";
import Box from "@mui/material/Box";
-import { Button } from "@mui/material";
+import Button from "@mui/material/Button";
export const AddTask: React.FC = () => {
const [open, setOpen] = useState(true);
diff --git a/src/App.tsx b/src/App.tsx
index 1242f46..1592056 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,12 +1,10 @@
-import React, { useMemo } from "react";
-import CssBaseline from "@mui/material/CssBaseline";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
+import React from "react";
import { Layout } from "./Layout";
import { TodoList } from "./TodoList";
import { AppBar } from "./AppBar";
import { TaskItemT } from "./types";
+import { AddTask } from "./AddTask";
const tasks: TaskItemT[] = [
{ text: "test", done: false, id: 0 },
@@ -14,22 +12,14 @@ const tasks: TaskItemT[] = [
];
export const App = () => {
- const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-
- const theme = useMemo(
- () =>
- createTheme({ palette: { mode: prefersDarkMode ? "dark" : "light" } }),
- [prefersDarkMode]
- );
-
return (
- <ThemeProvider theme={theme}>
- <CssBaseline />
+ <>
<Layout
appBar={<AppBar />}
title="My tasks"
content={<TodoList tasks={tasks} />}
/>
- </ThemeProvider>
+ <AddTask />
+ </>
);
};
diff --git a/src/AppBar.tsx b/src/AppBar.tsx
index 454d029..4e490fc 100644
--- a/src/AppBar.tsx
+++ b/src/AppBar.tsx
@@ -1,8 +1,8 @@
-import { Fab, Box } from "@mui/material";
-import Add from "@mui/icons-material/Add";
import React from "react";
-/* TODO: create component for task adding */
+import Box from "@mui/material/Box";
+import Fab from "@mui/material/Fab";
+import Add from "@mui/icons-material/Add";
export const AppBar: React.FC = () => (
<Box sx={{ width: "100%", justifyContent: "center", display: "flex" }}>
diff --git a/src/Layout.tsx b/src/Layout.tsx
index ba15544..f91a965 100644
--- a/src/Layout.tsx
+++ b/src/Layout.tsx
@@ -1,5 +1,13 @@
-import { AppBar, Box, Toolbar, Typography, Checkbox } from "@mui/material";
-import React, { ReactNode } from "react";
+import React, { ReactNode, useMemo } from "react";
+
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Toolbar from "@mui/material/Toolbar";
+import Typography from "@mui/material/Typography";
+import Checkbox from "@mui/material/Checkbox";
+import CssBaseline from "@mui/material/CssBaseline";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
export type LayoutProps = {
appBar: ReactNode;
@@ -7,21 +15,32 @@ export type LayoutProps = {
title: string;
};
-export const Layout: React.FC<LayoutProps> = ({ appBar, content, title }) => (
- <>
- <Box sx={{ padding: (theme) => theme.spacing(2, 2, 10, 2) }}>
- <Typography variant="h4" sx={{ paddingLeft: 2, marginBottom: 2 }}>
- <Checkbox sx={{ visibility: "hidden" }} />
- {title}
- </Typography>
- {content}
- </Box>
- <AppBar
- position="fixed"
- color="transparent"
- sx={{ top: "auto", bottom: 0 }}
- >
- <Toolbar>{appBar}</Toolbar>
- </AppBar>
- </>
-);
+export const Layout: React.FC<LayoutProps> = ({ appBar, content, title }) => {
+ const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+
+ const theme = useMemo(
+ () =>
+ createTheme({ palette: { mode: prefersDarkMode ? "dark" : "light" } }),
+ [prefersDarkMode]
+ );
+
+ return (
+ <ThemeProvider theme={theme}>
+ <CssBaseline />
+ <Box sx={{ padding: (theme) => theme.spacing(2, 2, 10, 2) }}>
+ <Typography variant="h4" sx={{ paddingLeft: 2, marginBottom: 2 }}>
+ <Checkbox sx={{ visibility: "hidden" }} />
+ {title}
+ </Typography>
+ {content}
+ </Box>
+ <AppBar
+ position="fixed"
+ color="transparent"
+ sx={{ top: "auto", bottom: 0 }}
+ >
+ <Toolbar>{appBar}</Toolbar>
+ </AppBar>
+ </ThemeProvider>
+ );
+};
diff --git a/src/TodoItem.tsx b/src/TodoItem.tsx
index 55330bb..20057f8 100644
--- a/src/TodoItem.tsx
+++ b/src/TodoItem.tsx
@@ -1,13 +1,13 @@
-import {
- Checkbox,
- IconButton,
- ListItem,
- ListItemSecondaryAction,
- ListItemText,
- TextField,
-} from "@mui/material";
-import DeleteOutlined from "@mui/icons-material/DeleteOutlined";
import React, { useState } from "react";
+
+import Checkbox from "@mui/material/Checkbox";
+import IconButton from "@mui/material/IconButton";
+import ListItem from "@mui/material/ListItem";
+import ListItemSecondaryAction from "@mui/material/ListItemSecondaryAction";
+import ListItemText from "@mui/material/ListItemText";
+import TextField from "@mui/material/TextField";
+import DeleteOutlined from "@mui/icons-material/DeleteOutlined";
+
import { TaskItemT } from "./types";
export type TodoItemProps = { task: TaskItemT };
@@ -27,7 +27,8 @@ export const TodoItem: React.FC<TodoItemProps> = ({ task }) => {
value={text}
autoFocus={true}
onBlur={() => setEditing(false)}
- ></TextField>
+ multiline
+ />
) : (
<ListItemText onClick={() => setEditing(true)} primary={text} />
)}
diff --git a/src/TodoList.tsx b/src/TodoList.tsx
index 550e0c3..2fa1cc4 100644
--- a/src/TodoList.tsx
+++ b/src/TodoList.tsx
@@ -1,5 +1,8 @@
-import { List, Paper } from "@mui/material";
import React from "react";
+
+import List from "@mui/material/List";
+import Paper from "@mui/material/Paper";
+
import { TodoItem } from "./TodoItem";
import { TaskItemT } from "./types";