Merge pull request #124 from mathiazom/move-logout-button

feat(logout): move to profile to avoid misclicks
mathiazom · Mar 15, 2024 · 0ee8f99 · 0ee8f99
2 parents 44dd3a6 + f91aa5a
commit 0ee8f99
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/src/components/configuration/ConfigBar.tsx b/src/components/configuration/ConfigBar.tsx
@@ -3,7 +3,6 @@ import { CalendarMonth, CalendarToday, PauseCircleRounded, People } from "@mui/i
 import CloudOffRoundedIcon from "@mui/icons-material/CloudOffRounded";
 import ErrorRoundedIcon from "@mui/icons-material/ErrorRounded";
 import LoginIcon from "@mui/icons-material/Login";
-import LogoutRoundedIcon from "@mui/icons-material/LogoutRounded";
 import SettingsRoundedIcon from "@mui/icons-material/SettingsRounded";
 import { Badge, Box, Tooltip, useTheme } from "@mui/material";
 import Button from "@mui/material/Button";
@@ -73,6 +72,7 @@ function ConfigBar({
                             display: "flex",
                             alignItems: "center",
                             gap: { xs: 1, md: 1.5 },
+                            marginRight: 1,
                         }}
                     >
                         {isConfigError ? (
@@ -169,11 +169,6 @@ function ConfigBar({
                                 </Box>
                             </Tooltip>
                         )}
-                        <Tooltip title={"Logg ut"}>
-                            <IconButton href={"/api/auth/logout"}>
-                                <LogoutRoundedIcon />
-                            </IconButton>
-                        </Tooltip>
                     </Box>
                 )}
             </>

diff --git a/src/components/modals/Profile/Profile.tsx b/src/components/modals/Profile/Profile.tsx
@@ -1,6 +1,8 @@
 import { useUser } from "@auth0/nextjs-auth0/client";
 import { PersonRounded } from "@mui/icons-material";
-import { Box, Typography, useTheme } from "@mui/material";
+import LogoutRoundedIcon from "@mui/icons-material/LogoutRounded";
+import { Box, Stack, Typography, useTheme } from "@mui/material";
+import Button from "@mui/material/Button";
 import React, { useState } from "react";
 import Dropzone from "react-dropzone";
 
@@ -241,6 +243,16 @@ function Profile({
                                 pointerEvents: "none",
                             }}
                         />
+                        <Stack alignItems={"center"} mt={2}>
+                            <Button
+                                variant={"outlined"}
+                                color={"error"}
+                                startIcon={<LogoutRoundedIcon />}
+                                href={"/api/auth/logout"}
+                            >
+                                Logg ut
+                            </Button>
+                        </Stack>
                     </Box>
                     <EditAvatarDialog
                         open={editAvatarDialogOpen}