feat: clear local games on signout

feat: signout modal text

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

@@ -22,14 +22,17 @@ export const UserSignOutModal = ({
         title={t("sign_out_modal_title")}
         onClose={onClose}
       >
-        <div className={styles.signOutModalButtonsContainer}>
-          <Button onClick={onConfirm} theme="outline">
-            {t("signout")}
-          </Button>
+        <div className={styles.signOutModalContent}>
+          <p style={{ fontFamily: "Fira Sans" }}>{t("sign_out_modal_text")}</p>
+          <div className={styles.signOutModalButtonsContainer}>
+            <Button onClick={onConfirm} theme="danger">
+              {t("sign_out")}
+            </Button>
 
-          <Button onClick={onClose} theme="primary">
-            {t("cancel")}
-          </Button>
+            <Button onClick={onClose} theme="primary">
+              {t("cancel")}
+            </Button>
+          </div>
         </div>
       </Modal>
     </>

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

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