more improvements (coloring, themes)

react/admin-panel/src/AdminDashboard.jsx

@@ -8,7 +8,7 @@ import {LocaleContext} from "shared/locale";
 
 // views
 import View404 from "./views/404";
-import clsx from "clsx";
+import {createTheme, CssBaseline, ThemeProvider} from "@mui/material";
 const Overview = lazy(() => import('./views/overview'));
 const UserListView = lazy(() => import('./views/user/user-list'));
 const UserEditView = lazy(() => import('./views/user/user-edit'));
@@ -58,8 +58,25 @@ export default function AdminDashboard(props) {
         hideDialog: hideDialog
     };
 
+    const lightTheme = createTheme({
+        palette: {
+            mode: 'light',
+        },
+    });
+
+    const darkTheme = createTheme({
+        palette: {
+            mode: 'dark',
+            background: {
+                paper: '#343a40',
+            },
+        },
+    });
+
     return <BrowserRouter>
-        <Sidebar {...controlObj}>
+        <Sidebar theme={darkTheme} {...controlObj}>
+            <ThemeProvider theme={lightTheme}>
+                <CssBaseline />
                 <Suspense fallback={<div>{L("general.loading")}... </div>}>
                     <Routes>
                         <Route path={"/admin"} element={<Navigate to={"/admin/dashboard"} />}/>
@@ -77,6 +94,7 @@ export default function AdminDashboard(props) {
                         <Route path={"*"} element={<View404 />} />
                     </Routes>
                 </Suspense>
+            </ThemeProvider>
             <Footer info={info} />
         </Sidebar>
         <Dialog {...dialog}/>

react/admin-panel/src/App.jsx

@@ -62,37 +62,6 @@ export default function App() {
         onInit();
     }, []);
 
-    /*
-    const onTotp2FA = useCallback((code, callback) => {
-        this.setState({ ...this.state, error: "" });
-        return this.api.verifyTotp2FA(code).then((res) => {
-            if (res.success) {
-                this.api.fetchUser().then(() => {
-                    this.setState({ ...this.state, user: res });
-                    callback(res);
-                })
-            } else {
-                callback(res);
-            }
-        });
-    }, [api]);
-
-    onKey2FA(credentialID, clientDataJson, authData, signature, callback) {
-        this.setState({ ...this.state, error: "" });
-        return this.api.verifyKey2FA(credentialID, clientDataJson, authData, signature).then((res) => {
-            if (res.success) {
-                this.api.fetchUser().then(() => {
-                    this.setState({ ...this.state, user: res });
-                    callback(res);
-                })
-            } else {
-                callback(res);
-            }
-        });
-    }
-
-     */
-
     if (!loaded) {
         if (error) {
             return <Alert severity={"error"} title={L("general.error_occurred")}>

react/admin-panel/src/elements/sidebar.js

@@ -2,10 +2,10 @@ import React, {useCallback, useContext, useEffect, useState} from 'react';
 import {Link, useNavigate} from "react-router-dom";
 import {LocaleContext} from "shared/locale";
 import {
-    Box, CssBaseline, Divider,
+    Box, Divider,
     IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText,
     Select, Drawer,
-    styled, MenuItem, Menu, useTheme,
+    styled, MenuItem, Menu, ThemeProvider, CssBaseline,
 } from "@mui/material";
 import { Dropdown } from '@mui/base/Dropdown';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
@@ -93,14 +93,13 @@ const StyledDrawer = styled(Drawer, { shouldForwardProp: (prop) => prop !== 'ope
 
 export default function Sidebar(props) {
 
-    const api = props.api;
+    const {api, showDialog, theme, children, ...other} = props;
-    const showDialog = props.showDialog;
+
     const {translate: L, currentLocale, setLanguageByCode} = useContext(LocaleContext);
     const [languages, setLanguages] = useState(null);
     const [fetchLanguages, setFetchLanguages] = useState(true);
     const [drawerOpen, setDrawerOpen] = useState(window.screen.width >= 1000);
     const [anchorEl, setAnchorEl] = useState(null);
-    const theme = useTheme();
     const navigate = useNavigate();
     const currentPath = useCurrentPath();
 
@@ -197,8 +196,9 @@ export default function Sidebar(props) {
 
     li.push(<NavbarItem key={"logout"} name={"general.logout"} icon={<ArrowBack />} onClick={onLogout}/>);
 
-    return <Box sx={{ display: 'flex' }}>
+    return <ThemeProvider theme={theme}>
         <CssBaseline />
+        <Box sx={{ display: 'flex' }} {...other}>
             <StyledDrawer variant={"permanent"} open={drawerOpen}>
                 <DrawerHeader>
                     {drawerOpen && <>
@@ -263,7 +263,8 @@ export default function Sidebar(props) {
                 </ListItem>
             </StyledDrawer>
             <Box component="main" sx={{flexGrow: 1, p: 1}}>
-            {props.children}
+                {children}
             </Box>
         </Box>
+    </ThemeProvider>
 }

react/admin-panel/src/views/access-control-list.js

@@ -234,7 +234,7 @@ export default function AccessControlList(props) {
                             startIcon={<Refresh />} onClick={() => onFetchACL(true)}>
                         {L("general.reload")}
                     </Button>
-                    <Button variant={"outlined"} startIcon={<Add/>} size={"small"}
+                    <Button variant={"outlined"} startIcon={<Add />} size={"small"} color={"success"}
                             disabled={!props.api.hasGroup(USER_GROUP_ADMIN)}
                             onClick={() => setDialogData({
                                 open: true,

react/admin-panel/src/views/group/group-edit.js

@@ -274,7 +274,7 @@ export default function EditGroupView(props) {
                         ]}
                         buttons={[{
                             key: "btn-add-member",
-                            color: "primary",
+                            color: "success",
                             startIcon: <Add />,
                             disabled: !api.hasPermission("groups/addMember"),
                             children: L("general.add"),

react/admin-panel/src/views/group/group-list.js

@@ -61,7 +61,7 @@ export default function GroupListView(props) {
             columns={columnDefinitions}
             buttons={[{
                 key: "btn-create-group",
-                color: "primary",
+                color: "success",
                 startIcon: <Add />,
                 onClick: () => navigate("/admin/group/new"),
                 disabled: !api.hasPermission("groups/create"),

react/admin-panel/src/views/route/route-list.js

@@ -129,12 +129,12 @@ export default function RouteListView(props) {
                         startIcon={<Refresh />} onClick={() => onFetchRoutes(true)}>
                     {L("general.reload")}
                 </Button>
-                <Button variant={"outlined"} startIcon={<Add />} size={"small"}
+                <Button variant={"outlined"} color={"success"} startIcon={<Add />} size={"small"}
                         disabled={!props.api.hasPermission("routes/add")}
                         onClick={() => navigate("/admin/routes/new")} >
                     {L("general.add")}
                 </Button>
-                <Button variant={"outlined"} startIcon={<Cached />} size={"small"}
+                <Button variant={"outlined"} color={"info"} startIcon={<Cached />} size={"small"}
                         disabled={!props.api.hasPermission("routes/generateCache") || isGeneratingCache}
                         onClick={onRegenerateCache} >
                     {isGeneratingCache ? L("routes.regenerating_cache") + "…" : L("routes.regenerate_cache")}

react/admin-panel/src/views/user/user-list.js

@@ -83,7 +83,7 @@ export default function UserListView(props) {
             columns={columnDefinitions}
             buttons={[{
                 key: "btn-create",
-                color: "primary",
+                color: "success",
                 startIcon: <Add />,
                 children: L("general.create_new"),
                 disabled: !api.hasPermission("user/create") && !api.hasPermission("user/invite"),