quivr/frontend/app/user/components/LogoutModal/LogoutModal.tsx
Antoine Dewez 8f49a724ce
feat(frontend): design changes on user profile (#2140)
# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):
2024-02-03 17:45:05 -08:00

57 lines
1.5 KiB
TypeScript

import { useTranslation } from "react-i18next";
import Button from "@/lib/components/ui/Button";
import { Modal } from "@/lib/components/ui/Modal";
import TextButton from "@/lib/components/ui/TextButton/TextButton";
import { useLogoutModal } from "./hooks/useLogoutModal";
export const LogoutModal = (): JSX.Element => {
const { t } = useTranslation(["translation", "logout"]);
const {
handleLogout,
isLoggingOut,
isLogoutModalOpened,
setIsLogoutModalOpened,
} = useLogoutModal();
return (
<Modal
Trigger={
<div onClick={() => void 0}>
<TextButton
iconName="logout"
color="dangerous"
label={t("logoutButton")}
/>
</div>
}
isOpen={isLogoutModalOpened}
setOpen={setIsLogoutModalOpened}
CloseTrigger={<div />}
>
<div className="text-center flex flex-col items-center gap-5">
<h2 className="text-lg font-medium mb-5">
{t("areYouSure", { ns: "logout" })}
</h2>
<div className="flex gap-5 items-center justify-center">
<Button
onClick={() => setIsLogoutModalOpened(false)}
variant={"primary"}
>
{t("cancel", { ns: "logout" })}
</Button>
<Button
isLoading={isLoggingOut}
variant={"danger"}
onClick={() => void handleLogout()}
data-testid="logout-button"
>
{t("logoutButton")}
</Button>
</div>
</div>
</Modal>
);
};