fix: removing sentry

src/renderer/src/components/badge/badge.css.ts

@@ -1,13 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT } from "../../theme.css";
-
-export const badge = style({
-  color: "#c0c1c7",
-  fontSize: "10px",
-  padding: `${SPACING_UNIT / 2}px ${SPACING_UNIT}px`,
-  border: "solid 1px #c0c1c7",
-  borderRadius: "4px",
-  display: "flex",
-  alignItems: "center",
-});

src/renderer/src/components/badge/badge.scss

@@ -0,0 +1,11 @@
+@use "../../scss/globals.scss";
+
+.badge {
+  color: globals.$muted-color;
+  font-size: 10px;
+  padding: calc(globals.$spacing-unit / 2) globals.$spacing-unit;
+  border: solid 1px globals.$border-color;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+}

src/renderer/src/components/badge/badge.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import * as styles from "./badge.css";
+
+import "./badge.scss";
 
 export interface BadgeProps {
   children: React.ReactNode;
@@ -7,7 +8,7 @@ export interface BadgeProps {
 
 export function Badge({ children }: BadgeProps) {
   return (
-    <div className={styles.badge}>
+    <div className="badge">
       <span>{children}</span>
     </div>
   );

src/renderer/src/components/bottom-panel/bottom-panel.css.ts

@@ -1,25 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../theme.css";
-
-export const bottomPanel = style({
-  width: "100%",
-  borderTop: `solid 1px ${vars.color.border}`,
-  backgroundColor: vars.color.background,
-  padding: `${SPACING_UNIT / 2}px ${SPACING_UNIT * 2}px`,
-  display: "flex",
-  alignItems: "center",
-  transition: "all ease 0.2s",
-  justifyContent: "space-between",
-  position: "relative",
-  zIndex: vars.zIndex.bottomPanel,
-});
-
-export const downloadsButton = style({
-  color: vars.color.body,
-  borderBottom: "1px solid transparent",
-  ":hover": {
-    borderBottom: `1px solid ${vars.color.body}`,
-    cursor: "pointer",
-  },
-});

src/renderer/src/components/bottom-panel/bottom-panel.scss

@@ -0,0 +1,24 @@
+@use "../../scss/globals.scss";
+
+.bottom-panel {
+  width: "100%";
+  border-top: solid 1px globals.$border-color;
+  background-color: globals.$background-color;
+  padding: calc(globals.$spacing-unit / 2) calc(globals.$spacing-unit * 2);
+  display: flex;
+  align-items: center;
+  transition: all ease 0.2s;
+  justify-content: space-between;
+  position: relative;
+  z-index: globals.$bottom-panel-z-index;
+
+  &__downloads-button {
+    color: globals.$body-color;
+    border-bottom: solid 1px transparent;
+
+    &:hover {
+      border-bottom: solid 1px globals.$body-color;
+      cursor: pointer;
+    }
+  }
+}

src/renderer/src/components/bottom-panel/bottom-panel.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 
 import { useDownload, useUserDetails } from "@renderer/hooks";
 
-import * as styles from "./bottom-panel.css";
+import "./bottom-panel.scss";
 
 import { useNavigate } from "react-router-dom";
 import { VERSION_CODENAME } from "@renderer/constants";
@@ -72,10 +72,10 @@ export function BottomPanel() {
   ]);
 
   return (
-    <footer className={styles.bottomPanel}>
+    <footer className="bottom-panel">
       <button
         type="button"
-        className={styles.downloadsButton}
+        className="bottom-panel__downloads-button"
         onClick={() => navigate("/downloads")}
       >
         <small>{status}</small>

src/renderer/src/main.tsx

@@ -6,8 +6,6 @@ import { Provider } from "react-redux";
 import LanguageDetector from "i18next-browser-languagedetector";
 import { HashRouter, Route, Routes } from "react-router-dom";
 
-import * as Sentry from "@sentry/electron/renderer";
-
 import "@fontsource/noto-sans/400.css";
 import "@fontsource/noto-sans/500.css";
 import "@fontsource/noto-sans/700.css";
@@ -37,8 +35,6 @@ const Achievements = React.lazy(
   () => import("./pages/achievements/achievements")
 );
 
-Sentry.init({});
-
 i18n
   .use(LanguageDetector)
   .use(initReactI18next)

src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.tsx

@@ -83,8 +83,10 @@ export function CloudSyncModal({ visible, onClose }: CloudSyncModalProps) {
   };
 
   useEffect(() => {
-    getGameBackupPreview();
-  }, [getGameBackupPreview]);
+    if (visible) {
+      getGameBackupPreview();
+    }
+  }, [getGameBackupPreview, visible]);
 
   const backupStateLabel = useMemo(() => {
     if (uploadingBackup) {

src/renderer/src/scss/globals.scss

@@ -13,3 +13,9 @@ $disabled-opacity: 0.5;
 $active-opacity: 0.7;
 
 $spacing-unit: 8px;
+
+$toast-z-index: 5;
+$bottom-panel-z-index: 3;
+$title-bar-z-index: 4;
+$backdrop-z-index: 4;
+$modal-z-index: 5;