- createStyles({
- root: {
- display: "flex",
- width: "100%",
- },
- appBar: {
- zIndex: theme.zIndex.drawer + 1,
- transition: theme.transitions.create(["width", "margin"], {
- easing: theme.transitions.easing.sharp,
- duration: theme.transitions.duration.leavingScreen,
- }),
- },
- appBarShift: {
- marginLeft: drawerWidth,
- width: `calc(100% - ${drawerWidth}px)`,
- transition: theme.transitions.create(["width", "margin"], {
- easing: theme.transitions.easing.sharp,
- duration: theme.transitions.duration.enteringScreen,
- }),
- },
- menuButton: {
- marginRight: 28,
- },
- hide: {
- display: "none",
- },
- drawer: {
- width: drawerWidth,
- flexShrink: 0,
- whiteSpace: "nowrap",
- },
- drawerOpen: {
- width: drawerWidth,
- transition: theme.transitions.create("width", {
- easing: theme.transitions.easing.sharp,
- duration: theme.transitions.duration.enteringScreen,
- }),
- },
- drawerClose: {
- transition: theme.transitions.create("width", {
- easing: theme.transitions.easing.sharp,
- duration: theme.transitions.duration.leavingScreen,
- }),
- overflowX: "hidden",
- width: theme.spacing(7) + 1,
- [theme.breakpoints.up("sm")]: {
- width: theme.spacing(7) + 8,
+const openedMixin = (theme: Theme): CSSObject => ({
+ width: drawerWidth,
+ transition: theme.transitions.create("width", {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ overflowX: "hidden",
+});
+
+const closedMixin = (theme: Theme): CSSObject => ({
+ transition: theme.transitions.create("width", {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ overflowX: "hidden",
+ width: 56,
+});
+
+const DrawerHeader = styled("div")(({ theme }) => ({
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "flex-start",
+ padding: theme.spacing(0, 1),
+ // necessary for content to be below app bar
+ ...theme.mixins.toolbar,
+}));
+
+interface AppBarProps extends MuiAppBarProps {
+ open?: boolean;
+}
+
+const AppBar = styled(MuiAppBar, {
+ shouldForwardProp: (prop) => prop !== "open",
+})(({ theme, open }) => ({
+ backgroundColor: theme.palette.secondary.dark,
+ zIndex: theme.zIndex.drawer + 1,
+ transition: theme.transitions.create(["width", "margin"], {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ ...(open && {
+ marginLeft: drawerWidth,
+ width: `calc(100% - ${drawerWidth}px)`,
+ transition: theme.transitions.create(["width", "margin"], {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ }),
+}));
+
+const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== "open" })(({ theme, open }) => ({
+ width: drawerWidth,
+ flexShrink: 0,
+ whiteSpace: "nowrap",
+ boxSizing: "border-box",
+ ...(open && {
+ ...openedMixin(theme),
+ "& .MuiDrawer-paper": openedMixin(theme),
+ }),
+ ...(!open && {
+ ...closedMixin(theme),
+ "& .MuiDrawer-paper": closedMixin(theme),
+ }),
+}));
+
+const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
+ [theme.breakpoints.up("sm")]: {
+ px: 1,
+ },
+ "&.MuiListItemButton-root": {
+ "&.Mui-selected": {
+ backgroundColor: theme.palette.primary.main,
+ "& .MuiListItemIcon-root": {
+ color: theme.palette.secondary.dark,
+ },
+ "& .MuiListItemText-root": {
+ color: theme.palette.secondary.dark,
},
},
- toolbar: {
- display: "flex",
- alignItems: "center",
- justifyContent: "flex-end",
- padding: theme.spacing(0, 1),
- // necessary for content to be below app bar
- ...theme.mixins.toolbar,
- },
- content: {
- flexGrow: 1,
- padding: theme.spacing(3),
- },
- listItem: {
- paddingLeft: 16,
- paddingRight: 16,
- [theme.breakpoints.up("sm")]: {
- paddingLeft: 20,
- paddingRight: 20,
- },
- },
- listItemIcon: {
- minWidth: 42,
- },
- titleHighlight: {
- color: theme.palette.secondary.main,
- marginRight: 4,
- },
- })
-);
+ },
+}));
+
+const ListItemIcon = styled(MuiListItemIcon)(() => ({
+ minWidth: 42,
+}));
interface Props {
children: React.ReactNode;
@@ -126,7 +132,6 @@ interface Props {
}
export function Layout({ title, page, children }: Props): JSX.Element {
- const classes = useStyles();
const theme = useTheme();
const [open, setOpen] = React.useState(false);
@@ -138,145 +143,109 @@ export function Layout({ title, page, children }: Props): JSX.Element {
setOpen(false);
};
+ const SiteTitle = styled("span")({
+ ...(title !== "" && {
+ color: theme.palette.primary.main,
+ marginRight: 4,
+ }),
+ });
+
return (
-
-
+
+
-
-
- Hetty://
-
- {title}
-
+
+
+ Hetty://
+ {title}
+
+ v{process.env.NEXT_PUBLIC_VERSION || "0.0"}
+
-
-
+
+
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
+ {theme.direction === "rtl" ? : }
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
-
+
+
{children}
-
-
)}
{projData?.projects.length === 0 && (
-
- There are no projects. Create one to get started.
-
+
There are no projects. Create one to get started.
)}
);
diff --git a/admin/src/components/reqlog/ConfirmationDialog.tsx b/admin/src/components/reqlog/ConfirmationDialog.tsx
index 0c65398..ad31179 100644
--- a/admin/src/components/reqlog/ConfirmationDialog.tsx
+++ b/admin/src/components/reqlog/ConfirmationDialog.tsx
@@ -1,10 +1,10 @@
import React, { useState } from "react";
-import Button from "@material-ui/core/Button";
-import Dialog from "@material-ui/core/Dialog";
-import DialogActions from "@material-ui/core/DialogActions";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogContentText from "@material-ui/core/DialogContentText";
-import DialogTitle from "@material-ui/core/DialogTitle";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
export function useConfirmationDialog() {
const [isOpen, setIsOpen] = useState(false);
@@ -38,12 +38,10 @@ export function ConfirmationDialog(props: ConfirmationDialog) {
>