feat: updating real-debrid translations

src/renderer/src/app.css.ts

@@ -26,9 +26,9 @@ globalStyle("body", {
   overflow: "hidden",
   userSelect: "none",
   fontFamily: "'Fira Mono', monospace",
-  fontSize: vars.size.bodyFontSize,
+  fontSize: vars.size.body,
   background: vars.color.background,
-  color: vars.color.bodyText,
+  color: vars.color.body,
   margin: "0",
 });
 
@@ -68,7 +68,7 @@ globalStyle(
 );
 
 globalStyle("label", {
-  fontSize: vars.size.bodyFontSize,
+  fontSize: vars.size.body,
 });
 
 globalStyle("input[type=number]", {

src/renderer/src/app.tsx

@@ -134,17 +134,18 @@ export function App() {
 
           <section ref={contentRef} className={styles.content}>
             <Outlet />
-
-            <Toast
-              visible={toast.visible}
-              message={toast.message}
-              type={toast.type}
-              onClose={handleToastClose}
-            />
           </section>
         </article>
       </main>
+
       <BottomPanel />
+
+      <Toast
+        visible={toast.visible}
+        message={toast.message}
+        type={toast.type}
+        onClose={handleToastClose}
+      />
     </>
   );
 }

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

@@ -4,6 +4,7 @@ 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",
@@ -14,10 +15,10 @@ export const bottomPanel = style({
 });
 
 export const downloadsButton = style({
-  color: vars.color.bodyText,
+  color: vars.color.body,
   borderBottom: "1px solid transparent",
   ":hover": {
-    borderBottom: `1px solid ${vars.color.bodyText}`,
+    borderBottom: `1px solid ${vars.color.body}`,
     cursor: "pointer",
   },
 });

src/renderer/src/components/game-card/game-card.css.ts

@@ -109,6 +109,6 @@ export const shopIcon = style({
 });
 
 export const noDownloadsLabel = style({
-  color: vars.color.bodyText,
+  color: vars.color.body,
   fontWeight: "bold",
 });

src/renderer/src/components/header/header.css.ts

@@ -108,7 +108,7 @@ export const section = style({
 
 export const backButton = recipe({
   base: {
-    color: vars.color.bodyText,
+    color: vars.color.body,
     cursor: "pointer",
     WebkitAppRegion: "no-drag",
     position: "absolute",

src/renderer/src/components/modal/modal.css.ts

@@ -23,7 +23,7 @@ export const modal = recipe({
     backgroundColor: vars.color.background,
     borderRadius: "5px",
     maxWidth: "600px",
-    color: vars.color.bodyText,
+    color: vars.color.body,
     maxHeight: "100%",
     border: `solid 1px ${vars.color.border}`,
     overflow: "hidden",
@@ -65,5 +65,5 @@ export const closeModalButton = style({
 });
 
 export const closeModalButtonIcon = style({
-  color: vars.color.bodyText,
+  color: vars.color.body,
 });

src/renderer/src/components/toast/toast.css.ts

@@ -25,12 +25,13 @@ export const toast = recipe({
     borderRadius: "4px",
     border: `solid 1px ${vars.color.border}`,
     left: "50%",
-    /* Bottom panel height + spacing */
+    /* Bottom panel height + 16px */
     bottom: `${26 + SPACING_UNIT * 2}px`,
     overflow: "hidden",
     display: "flex",
     flexDirection: "column",
     justifyContent: "space-between",
+    zIndex: "0",
   },
   variants: {
     closing: {
@@ -66,7 +67,7 @@ export const progress = style({
 });
 
 export const closeButton = style({
-  color: vars.color.bodyText,
+  color: vars.color.body,
   cursor: "pointer",
   padding: "0",
   margin: "0",

src/renderer/src/declaration.d.ts

@@ -22,7 +22,7 @@ declare global {
 
   interface Electron {
     /* Torrenting */
-    startGameDownload: (payload: StartGameDownloadPayload) => Promise<Game>;
+    startGameDownload: (payload: StartGameDownloadPayload) => Promise<void>;
     cancelGameDownload: (gameId: number) => Promise<void>;
     pauseGameDownload: (gameId: number) => Promise<void>;
     resumeGameDownload: (gameId: number) => Promise<void>;

src/renderer/src/features/toast-slice.ts

@@ -19,7 +19,6 @@ export const toastSlice = createSlice({
   initialState,
   reducers: {
     showToast: (state, action: PayloadAction<Omit<ToastState, "visible">>) => {
-      console.log(action.payload);
       state.message = action.payload.message;
       state.visible = true;
     },

src/renderer/src/pages/downloads/downloads.css.ts

@@ -12,7 +12,7 @@ export const downloadTitleWrapper = style({
 export const downloadTitle = style({
   fontWeight: "bold",
   cursor: "pointer",
-  color: vars.color.bodyText,
+  color: vars.color.body,
   textAlign: "left",
   fontSize: "16px",
   display: "block",

src/renderer/src/pages/game-details/game-details.css.ts

@@ -174,5 +174,5 @@ globalStyle(`${description} img`, {
 });
 
 globalStyle(`${description} a`, {
-  color: vars.color.bodyText,
+  color: vars.color.body,
 });

src/renderer/src/pages/game-details/modals/repacks-modal.css.ts

@@ -13,6 +13,6 @@ export const repackButton = style({
   flexDirection: "column",
   alignItems: "flex-start",
   gap: `${SPACING_UNIT}px`,
-  color: vars.color.bodyText,
+  color: vars.color.body,
   padding: `${SPACING_UNIT * 2}px`,
 });

src/renderer/src/pages/game-details/modals/select-folder-modal.css.tsx

@@ -15,7 +15,7 @@ export const downloadsPathField = style({
 
 export const hintText = style({
   fontSize: "12px",
-  color: vars.color.bodyText,
+  color: vars.color.body,
 });
 
 export const downloaders = style({

src/renderer/src/pages/game-details/modals/select-folder-modal.tsx

@@ -125,7 +125,7 @@ export function SelectFolderModal({
               {selectedDownloader === Downloader.RealDebrid && (
                 <CheckCircleFillIcon />
               )}
-              Real Debrid
+              Real-Debrid
             </Button>
           </div>
         </div>

src/renderer/src/pages/game-details/sidebar/sidebar.css.ts

@@ -88,5 +88,5 @@ export const howLongToBeatCategorySkeleton = style({
 
 globalStyle(`${requirementsDetails} a`, {
   display: "flex",
-  color: vars.color.bodyText,
+  color: vars.color.body,
 });

src/renderer/src/pages/settings/settings-real-debrid.css.ts

@@ -7,3 +7,8 @@ export const form = style({
   flexDirection: "column",
   gap: `${SPACING_UNIT}px`,
 });
+
+export const description = style({
+  fontFamily: "'Fira Sans', sans-serif",
+  marginBottom: `${SPACING_UNIT}px`,
+});

src/renderer/src/pages/settings/settings-real-debrid.tsx

@@ -52,8 +52,6 @@ export function SettingsRealDebrid({
         form.realDebridApiToken!
       );
 
-      console.log(user);
-
       if (user.type === "premium") {
         dispatch(
           showToast({
@@ -61,18 +59,22 @@ export function SettingsRealDebrid({
             type: "success",
           })
         );
+
+        updateUserPreferences({
+          realDebridApiToken: form.useRealDebrid
+            ? form.realDebridApiToken
+            : null,
+        });
       }
     }
-
-    // updateUserPreferences({
-    //   realDebridApiToken: form.useRealDebrid ? form.realDebridApiToken : null,
-    // });
   };
 
   const isButtonDisabled = form.useRealDebrid && !form.realDebridApiToken;
 
   return (
     <form className={styles.form} onSubmit={handleFormSubmit}>
+      <p className={styles.description}>{t("real_debrid_description")}</p>
+
       <CheckboxField
         label={t("enable_real_debrid")}
         checked={form.useRealDebrid}
@@ -86,7 +88,7 @@ export function SettingsRealDebrid({
 
       {form.useRealDebrid && (
         <TextField
-          label={t("real_debrid_api_token_label")}
+          label="API Private Token"
           value={form.realDebridApiToken ?? ""}
           type="password"
           onChange={(event) =>

src/renderer/src/theme.css.ts

@@ -7,7 +7,7 @@ export const [themeClass, vars] = createTheme({
     background: "#1c1c1c",
     darkBackground: "#151515",
     muted: "#c0c1c7",
-    bodyText: "#8e919b",
+    body: "#8e919b",
     border: "#424244",
     success: "#1c9749",
     danger: "#e11d48",
@@ -17,6 +17,6 @@ export const [themeClass, vars] = createTheme({
     active: "0.7",
   },
   size: {
-    bodyFontSize: "14px",
+    body: "14px",
   },
 });