feat: add sign out confirm modal

src/locales/en/translation.json

@@ -240,6 +240,9 @@
     "save": "Save",
     "edit_profile": "Edit Profile",
     "saved_successfully": "Saved successfully",
-    "try_again": "Please, try again"
+    "try_again": "Please, try again",
+    "signout_modal_title": "Are you sure?",
+    "cancel": "Cancel",
+    "signout": "Sign Out"
   }
 }

src/locales/pt/translation.json

@@ -240,6 +240,9 @@
     "save": "Salvar",
     "edit_profile": "Editar Perfil",
     "saved_successfully": "Salvo com sucesso",
-    "try_again": "Por favor, tente novamente"
+    "try_again": "Por favor, tente novamente",
+    "cancel": "Cancelar",
+    "signout": "Sair da conta",
+    "signout_modal_title": "Tem certeza?"
   }
 }

src/renderer/src/pages/user/user-content.tsx

@@ -12,6 +12,7 @@ import { buildGameDetailsPath } from "@renderer/helpers";
 import { PersonIcon, TelescopeIcon } from "@primer/octicons-react";
 import { Button } from "@renderer/components";
 import { UserEditProfileModal } from "./user-edit-modal";
+import { UserSignOutModal } from "./user-signout-modal";
 
 const MAX_MINUTES_TO_SHOW_IN_PLAYTIME = 120;
 
@@ -29,6 +30,7 @@ export function UserContent({
   const { userDetails, profileBackground, signOut } = useUserDetails();
 
   const [showEditProfileModal, setShowEditProfileModal] = useState(false);
+  const [showSignOutModal, setShowSignOutModal] = useState(false);
 
   const navigate = useNavigate();
 
@@ -65,7 +67,7 @@ export function UserContent({
     setShowEditProfileModal(true);
   };
 
-  const handleSignout = async () => {
+  const handleConfirmSignout = async () => {
     signOut();
     navigate("/");
   };
@@ -87,6 +89,12 @@ export function UserContent({
         userProfile={userProfile}
       />
 
+      <UserSignOutModal
+        visible={showSignOutModal}
+        onClose={() => setShowSignOutModal(false)}
+        onConfirm={handleConfirmSignout}
+      />
+
       <section
         className={styles.profileContentBox}
         style={{
@@ -124,7 +132,10 @@ export function UserContent({
                   Editar perfil
                 </Button>
 
-                <Button theme="danger" onClick={handleSignout}>
+                <Button
+                  theme="danger"
+                  onClick={() => setShowSignOutModal(true)}
+                >
                   {t("sign_out")}
                 </Button>
               </>

src/renderer/src/pages/user/user-signout-modal.tsx

@@ -0,0 +1,37 @@
+import { Button, Modal } from "@renderer/components";
+import * as styles from "./user.css";
+import { useTranslation } from "react-i18next";
+
+export interface UserEditProfileModalProps {
+  visible: boolean;
+  onConfirm: () => void;
+  onClose: () => void;
+}
+
+export const UserSignOutModal = ({
+  visible,
+  onConfirm,
+  onClose,
+}: UserEditProfileModalProps) => {
+  const { t } = useTranslation("user_profile");
+
+  return (
+    <>
+      <Modal
+        visible={visible}
+        title={t("signout_modal_title")}
+        onClose={onClose}
+      >
+        <div className={styles.signOutModalButtonsContainer}>
+          <Button onClick={onConfirm} theme="outline">
+            {t("signout")}
+          </Button>
+
+          <Button onClick={onClose} theme="primary">
+            {t("cancel")}
+          </Button>
+        </div>
+      </Modal>
+    </>
+  );
+};

src/renderer/src/pages/user/user.css.ts

@@ -191,3 +191,11 @@ export const noDownloads = style({
   flexDirection: "column",
   gap: `${SPACING_UNIT}px`,
 });
+
+export const signOutModalButtonsContainer = style({
+  display: "flex",
+  width: "100%",
+  justifyContent: "end",
+  alignItems: "center",
+  gap: `${SPACING_UNIT}px`,
+});