From 5abbbac2b62b6beb849e89c11b4451b2dcf4777e Mon Sep 17 00:00:00 2001
From: Roman <mail@romanh.de>
Date: Thu, 2 May 2024 14:45:24 +0200
Subject: [PATCH] minor improvements

---
 react/admin-panel/src/elements/sidebar.js     |  3 ++-
 .../src/views/access-control-list.js          | 24 +++++++++----------
 .../admin-panel/src/views/group/group-edit.js | 14 +++++------
 react/admin-panel/src/views/overview.js       | 14 +++++------
 .../src/views/profile/edit-picture.js         |  6 ++---
 .../admin-panel/src/views/profile/gpg-box.js  |  4 ++--
 .../admin-panel/src/views/profile/mfa-box.js  |  2 +-
 .../admin-panel/src/views/profile/mfa-totp.js |  4 ++--
 .../admin-panel/src/views/route/route-form.js |  4 ++--
 .../admin-panel/src/views/route/route-list.js |  8 +++----
 .../src/views/settings/settings.js            |  4 ++--
 11 files changed, 44 insertions(+), 43 deletions(-)

diff --git a/react/admin-panel/src/elements/sidebar.js b/react/admin-panel/src/elements/sidebar.js
index 644364e..e7e5763 100644
--- a/react/admin-panel/src/elements/sidebar.js
+++ b/react/admin-panel/src/elements/sidebar.js
@@ -5,7 +5,7 @@ import {
     Box, CssBaseline, Divider,
     IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText,
     Select, Drawer,
-    styled, MenuItem, Menu,
+    styled, MenuItem, Menu, useTheme,
 } from "@mui/material";
 import { Dropdown } from '@mui/base/Dropdown';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
@@ -100,6 +100,7 @@ export default function Sidebar(props) {
     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();
 
diff --git a/react/admin-panel/src/views/access-control-list.js b/react/admin-panel/src/views/access-control-list.js
index 2d59427..84acd80 100644
--- a/react/admin-panel/src/views/access-control-list.js
+++ b/react/admin-panel/src/views/access-control-list.js
@@ -159,9 +159,9 @@ export default function AccessControlList(props) {
             rows.push(
                 <TableRow key={"perm-" + index}>
                     <TableCell>
-                        <div style={{display: "grid", gridTemplateColumns: "60px auto"}}>
-                            <div style={{alignSelf: "center"}}>
-                                <IconButton style={{padding: 0}} size={"small"} color={"primary"}
+                        <Grid container>
+                            <Grid item xs={1} alignContent={"center"}>
+                                <IconButton size={"small"} color={"primary"}
                                             disabled={isRestricted(permission.method)}
                                             onClick={() => setDialogData({
                                                 open: true,
@@ -172,25 +172,25 @@ export default function AccessControlList(props) {
                                                     { type: "label", value: L("permissions.description") + ":" },
                                                     { type: "text", name: "description", value: permission.description, maxLength: 128 }
                                                 ],
-                                                onOption: (option, inputData) => option === 0 ? onUpdatePermission(inputData, permission.groups) : true                                            })} >
+                                                onOption: (option, inputData) => option === 1 ? onUpdatePermission(inputData, permission.groups) : true                                            })} >
                                     <Edit />
                                 </IconButton>
-                                <IconButton style={{padding: 0}} size={"small"} color={"secondary"}
+                                <IconButton size={"small"} color={"error"}
                                             disabled={isRestricted(permission.method)}
                                             onClick={() => setDialogData({
                                                 open: true,
                                                 title: L("permissions.delete_permission_confirm"),
                                                 message: L("permissions.method") + ": " + permission.method,
-                                                onOption: (option) => option === 0 ? onDeletePermission(permission.method) : true
+                                                onOption: (option) => option === 1 ? onDeletePermission(permission.method) : true
                                             })} >
                                     <Delete />
                                 </IconButton>
-                            </div>
-                            <div>
+                            </Grid>
+                            <Grid item>
                                 <b>{permission.method}</b><br />
                                 <i>{permission.description}</i>
-                            </div>
-                        </div>
+                            </Grid>
+                        </Grid>
                     </TableCell>
                     <BorderedColumn key={"perm-" + index + "-everyone"} align={"center"}>
                         <Checkbox checked={!permission.groups.length}
@@ -250,7 +250,7 @@ export default function AccessControlList(props) {
                                         placeholder: L("permissions.description")
                                     }
                                 ],
-                                onOption: (option, inputData) => option === 0 ? onUpdatePermission(inputData, []) : true
+                                onOption: (option, inputData) => option === 1 ? onUpdatePermission(inputData, []) : true
                             })}>
                         {L("general.add")}
                     </Button>
@@ -279,6 +279,6 @@ export default function AccessControlList(props) {
                 message={dialogData.message}
                 onOption={dialogData.onOption}
                 inputs={dialogData.inputs}
-                options={[L("general.ok"), L("general.cancel")]}/>
+                options={[L("general.cancel"), L("general.ok")]}/>
     </ViewContent>
 }
\ No newline at end of file
diff --git a/react/admin-panel/src/views/group/group-edit.js b/react/admin-panel/src/views/group/group-edit.js
index 1f05321..e3ebcd0 100644
--- a/react/admin-panel/src/views/group/group-edit.js
+++ b/react/admin-panel/src/views/group/group-edit.js
@@ -159,9 +159,9 @@ export default function EditGroupView(props) {
                 }
             ],
             onOption: (option) => {
-                if(option === 0) {
+                if(option === 1) {
                     onAddMember()
-                    } else {
+                } else {
                     selectedUserRef.current = null
                 }
             }
@@ -227,12 +227,12 @@ export default function EditGroupView(props) {
                 </Button>
                 { !isNewGroup &&
                     <Button startIcon={<Delete/>} disabled={!api.hasPermission("groups/delete")}
-                            variant={"outlined"} color={"secondary"}
+                            variant={"outlined"} color={"error"}
                             onClick={() => setDialogData({
                                 open: true,
                                 title: L("account.delete_group_title"),
                                 message: L("account.delete_group_text"),
-                                onOption: option => option === 0 ? onDeleteGroup() : true
+                                onOption: option => option === 1 ? onDeleteGroup() : true
                             })}>
                         {L("general.delete")}
                     </Button>
@@ -262,12 +262,12 @@ export default function EditGroupView(props) {
                                     label: L("general.remove"),
                                     element: Delete,
                                     disabled: !api.hasPermission("groups/removeMember"),
-                                    color: "secondary",
+                                    color: "error",
                                     onClick: (entry) => setDialogData({
                                         open: true,
                                         title: L("account.remove_group_member_title"),
                                         message: sprintf(L("account.remove_group_member_text"), entry.fullName || entry.name),
-                                        onOption: (option) => option === 0 ? onRemoveMember(entry.id) : true
+                                        onOption: (option) => option === 1 ? onRemoveMember(entry.id) : true
                                     })
                                 }
                             ]),
@@ -293,6 +293,6 @@ export default function EditGroupView(props) {
                 message={dialogData.message}
                 onOption={dialogData.onOption}
                 inputs={dialogData.inputs}
-                options={[L("general.ok"), L("general.cancel")]} />
+                options={[L("general.cancel"), L("general.ok")]} />
      </>
 }
\ No newline at end of file
diff --git a/react/admin-panel/src/views/overview.js b/react/admin-panel/src/views/overview.js
index 5d54ab4..dd6c9c1 100644
--- a/react/admin-panel/src/views/overview.js
+++ b/react/admin-panel/src/views/overview.js
@@ -76,12 +76,12 @@ const StatBox = (props) => <StyledStatBox variant={"filled"} icon={false}
 const StatusLine = (props) => {
     const {enabled, text, ...other} = props;
     if (enabled) {
-        return <Box display="grid" gridTemplateColumns={"30px auto"}>
+        return <Box display="grid" gridTemplateColumns={"30px auto"} alignItems={"center"}>
             <CheckCircle color={"primary"} title={text} /> {text}
         </Box>
     } else {
-        return <Box display="grid" gridTemplateColumns={"30px auto"}>
-            <HighlightOff color={"secondary"} title={text} /> {text}
+        return <Box display="grid" gridTemplateColumns={"30px auto"} alignItems={"center"}>
+            <HighlightOff color={"error"} title={text} /> {text}
         </Box>
     }
 }
@@ -127,25 +127,25 @@ export default function Overview(props) {
         <Link key={"home"} to={"/admin/dashboard"}>Home</Link>
     ]}>
         <Grid container spacing={2}>
-            <Grid item xs={3}>
+            <Grid item xs={6} lg={3}>
                 <StatBox color={"info"} count={stats?.userCount}
                          text={L("admin.users_registered")}
                          icon={<People/>}
                          link={"/admin/users"}/>
             </Grid>
-            <Grid item xs={3}>
+            <Grid item xs={6} lg={3}>
                 <StatBox color={"success"} count={stats?.groupCount}
                          text={L("admin.available_groups")}
                          icon={<Groups/>}
                          link={"/admin/groups"}/>
             </Grid>
-            <Grid item xs={3}>
+            <Grid item xs={6} lg={3}>
                 <StatBox color={"warning"} count={stats?.pageCount}
                          text={L("admin.routes_defined")}
                          icon={<LibraryBooks/>}
                          link={"/admin/routes"}/>
             </Grid>
-            <Grid item xs={3}>
+            <Grid item xs={6} lg={3}>
                 <StatBox color={"error"} count={stats?.errorCount}
                          text={L("admin.error_count")}
                          icon={<BugReport />}
diff --git a/react/admin-panel/src/views/profile/edit-picture.js b/react/admin-panel/src/views/profile/edit-picture.js
index 06f302d..add3b3c 100644
--- a/react/admin-panel/src/views/profile/edit-picture.js
+++ b/react/admin-panel/src/views/profile/edit-picture.js
@@ -76,7 +76,7 @@ export default function EditProfilePicture(props) {
                 },
             ],
             onOption: (option) => {
-                if (option === 0 && file) {
+                if (option === 1 && file) {
                     onUploadPicture(file)
                 }
 
@@ -115,13 +115,13 @@ export default function EditProfilePicture(props) {
             </Button>
             {profile.profilePicture &&
                 <Button variant="outlined" size="small"
-                    startIcon={<Delete />} color="secondary"
+                    startIcon={<Delete />} color={"error"}
                     onClick={() => setDialogData({
                         show: true,
                         title: L("account.picture_remove_title"),
                         message: L("account.picture_remove_text"),
                         options: [L("general.confirm"), L("general.cancel")],
-                        onOption: (option) => option === 0 ? onRemoveImage() : true
+                        onOption: (option) => option === 1 ? onRemoveImage() : true
                     })}>
                     {L("account.remove_picture")}
                 </Button>
diff --git a/react/admin-panel/src/views/profile/gpg-box.js b/react/admin-panel/src/views/profile/gpg-box.js
index fda0369..9a3462c 100644
--- a/react/admin-panel/src/views/profile/gpg-box.js
+++ b/react/admin-panel/src/views/profile/gpg-box.js
@@ -106,7 +106,7 @@ export default function GpgBox(props) {
                     <GpgFingerprintBox mb={2}>
                         { profile.gpgKey.confirmed ?
                             <CheckCircle color="info" title={L("account.gpg_key_confirmed")} /> :
-                            <ErrorOutline color="secondary" title={L("account.gpg_key_pending")}  />
+                            <ErrorOutline color="error" title={L("account.gpg_key_pending")}  />
                         }
                         GPG-Fingerprint: <code title={L("general.click_to_copy")}
                                                onClick={() => navigator.clipboard.writeText(profile.gpgKey.fingerprint)}>
@@ -124,7 +124,7 @@ export default function GpgBox(props) {
                         </FormControl>
                     </SpacedFormGroup>
                     <Button startIcon={isGpgKeyRemoving ? <CircularProgress size={12} /> : <Remove />}
-                            color="secondary" onClick={onRemoveGpgKey}
+                            color="error" onClick={onRemoveGpgKey}
                             variant="outlined" size="small"
                             disabled={isGpgKeyRemoving || !api.hasPermission("gpgKey/remove")}>
                         {isGpgKeyRemoving ? L("general.removing") + "…" : L("general.remove")}
diff --git a/react/admin-panel/src/views/profile/mfa-box.js b/react/admin-panel/src/views/profile/mfa-box.js
index 5b6ea2a..aa3947d 100644
--- a/react/admin-panel/src/views/profile/mfa-box.js
+++ b/react/admin-panel/src/views/profile/mfa-box.js
@@ -82,7 +82,7 @@ export default function MultiFactorBox(props) {
                     </FormControl>
                 </SpacedFormGroup>
                 <Button startIcon={is2FARemoving ? <CircularProgress size={12} /> : <Remove />}
-                        color="secondary" onClick={onRemove2FA}
+                        color="danger" onClick={onRemove2FA}
                         variant="outlined" size="small"
                         disabled={is2FARemoving || !api.hasPermission("tfa/remove")}>
                     {is2FARemoving ? L("general.removing") + "…" : L("general.remove")}
diff --git a/react/admin-panel/src/views/profile/mfa-totp.js b/react/admin-panel/src/views/profile/mfa-totp.js
index 0bc7861..a51c3c4 100644
--- a/react/admin-panel/src/views/profile/mfa-totp.js
+++ b/react/admin-panel/src/views/profile/mfa-totp.js
@@ -37,8 +37,8 @@ export default function MfaTotp(props) {
                         sx: { "& input": { textAlign: "center", fontFamily: "monospace" } },
                     }
                 ],
-                options: [L("general.ok"), L("general.cancel")],
-                onOption: (option, data) => option === 0 ? onConfirmTOTP(data.code) : true
+                options: [L("general.cancel"), L("general.ok")],
+                onOption: (option, data) => option === 1 ? onConfirmTOTP(data.code) : true
             })
         }
     }, [api, onConfirmTOTP]);
diff --git a/react/admin-panel/src/views/route/route-form.js b/react/admin-panel/src/views/route/route-form.js
index 8e96dae..11898ce 100644
--- a/react/admin-panel/src/views/route/route-form.js
+++ b/react/admin-panel/src/views/route/route-form.js
@@ -104,9 +104,9 @@ export default function RouteForm(props) {
                               onChange={e => setRoute({...route, extra: minifyJson(e.target.value)})}/>
                     <Box mt={1} fontStyle={"italic"} display={"grid"} gridTemplateColumns={"30px auto"}>{
                         extraArgs === null ?
-                            <><ErrorRounded color={"secondary"}/><span>{L("routes.json_err")}</span></> :
+                            <><ErrorRounded color={"error"}/><span>{L("routes.json_err")}</span></> :
                                 (type !== "object" ?
-                                    <><ErrorRounded color={"secondary"}/><span>{L("routes.json_not_object")}</span></> :
+                                    <><ErrorRounded color={"error"}/><span>{L("routes.json_not_object")}</span></> :
                                     <><CheckCircle color={"primary"} /><span>{L("routes.json_ok")}</span></>)
                     }</Box>
                 </RouteFormControl>
diff --git a/react/admin-panel/src/views/route/route-list.js b/react/admin-panel/src/views/route/route-list.js
index 4e79f04..b9fb4b0 100644
--- a/react/admin-panel/src/views/route/route-list.js
+++ b/react/admin-panel/src/views/route/route-list.js
@@ -178,7 +178,7 @@ export default function RouteListView(props) {
                                     </IconButton>
                                     <IconButton size={"small"} title={L("general.delete")}
                                                 disabled={!api.hasPermission("routes/remove")}
-                                                color={"secondary"}
+                                                color={"error"}
                                                 onClick={() => setDialogData({
                                                     open: true,
                                                     title: L("routes.delete_route_title"),
@@ -186,8 +186,8 @@ export default function RouteListView(props) {
                                                     inputs: [
                                                         { type: "text", name: "pattern", value: route.pattern, disabled: true}
                                                     ],
-                                                    options: [L("general.ok"), L("general.cancel")],
-                                                    onOption: btn => btn === 0 ? onDeleteRoute(route.id) : true
+                                                    options: [L("general.cancel"), L("general.ok")],
+                                                    onOption: btn => btn === 1 ? onDeleteRoute(route.id) : true
                                                 })}>
                                         <Delete />
                                     </IconButton>
@@ -207,6 +207,6 @@ export default function RouteListView(props) {
                 message={dialogData.message}
                 onOption={dialogData.onOption}
                 inputs={dialogData.inputs}
-                options={[L("general.ok"), L("general.cancel")]} />
+                options={[L("general.cancel"), L("general.ok")]} />
     </>
 }
\ No newline at end of file
diff --git a/react/admin-panel/src/views/settings/settings.js b/react/admin-panel/src/views/settings/settings.js
index baa3c96..3cf5054 100644
--- a/react/admin-panel/src/views/settings/settings.js
+++ b/react/admin-panel/src/views/settings/settings.js
@@ -341,7 +341,7 @@ export default function SettingsView(props) {
                                 </TableCell>
                                 <TableCell align={"center"}>
                                     <IconButton onClick={() => onDeleteKey(key)}
-                                        color={"secondary"}>
+                                        color={"error"}>
                                         <Delete />
                                     </IconButton>
                                 </TableCell>
@@ -404,7 +404,7 @@ export default function SettingsView(props) {
                     variant={"outlined"} title={L(hasChanged ? "general.unsaved_changes" : "general.save")}>
                 {isSaving ? L("general.saving") + "…" : (L("general.save") + (hasChanged ? " *" : ""))}
             </Button>
-            <Button color={"secondary"}
+            <Button color={"error"}
                     onClick={onReset}
                     disabled={isSaving}
                     startIcon={<RestartAlt />}