feat: adding installation instructions

src/locales/en/translation.json

@@ -17,7 +17,10 @@
     "downloading": "{{title}} ({{percentage}} - Downloading…)",
     "filter": "Filter library",
     "follow_us": "Follow us",
-    "home": "Home"
+    "home": "Home",
+    "discord": "Join our Discord",
+    "x": "Follow on X",
+    "github": "Contribute on GitHub"
   },
   "header": {
     "search": "Search",
@@ -82,8 +85,16 @@
     "repacks_modal_description": "Choose the repack you want to download",
     "downloads_path": "Downloads path",
     "select_folder_hint": "To change the default folder, access the",
-    "settings": "Hydra settings",
-    "download_now": "Download now"
+    "settings": "Settings",
+    "download_now": "Download now",
+    "installation_instructions": "Installation Instructions",
+    "installation_instructions_description": "Additional steps are required to install this game",
+    "online_fix_instruction": "OnlineFix games requires a password to be extracted. When required, use the following password:",
+    "dodi_installation_instruction": "When you open DODI installer, press your keyboard up key <0 /> to start the installation process:",
+    "dont_show_it_again": "Don't show it again",
+    "copy_to_clipboard": "Copy",
+    "copied_to_clipboard": "Copied",
+    "got_it": "Got it"
   },
   "activation": {
     "title": "Activate Hydra",
@@ -143,5 +154,8 @@
     "title": "Programs not installed",
     "description": "Wine or Lutris executables were not found on your system",
     "instructions": "Check the correct way to install any of them on your Linux distro so that the game can run normally"
+  },
+  "modal": {
+    "close": "Close button"
   }
 }

src/locales/pt/translation.json

@@ -17,7 +17,10 @@
     "downloading": "{{title}} ({{percentage}} - Baixando…)",
     "filter": "Filtrar biblioteca",
     "home": "Início",
-    "follow_us": "Acompanhe-nos"
+    "follow_us": "Acompanhe-nos",
+    "discord": "Entre no nosso Discord",
+    "x": "Siga-nos no X",
+    "github": "Contribua no GitHub"
   },
   "header": {
     "search": "Buscar",
@@ -79,7 +82,15 @@
     "downloads_path": "Diretório do download",
     "select_folder_hint": "Para trocar a pasta padrão, acesse as ",
     "settings": "Configurações do Hydra",
-    "download_now": "Baixe agora"
+    "download_now": "Baixe agora",
+    "installation_instructions": "Instruções de Instalação",
+    "installation_instructions_description": "Passos adicionais são necessários para instalar esse jogos",
+    "online_fix_instruction": "Jogos OnlineFix precisam de uma senha para serem extraídos. Quando solicitado, utilize a seguinte senha:",
+    "dodi_installation_instruction": "Quando o instalador do DODI for aberto, pressione a seta para cima <0 /> do teclado para iniciar o processo de instalação:",
+    "dont_show_it_again": "Não mostrar novamente",
+    "copy_to_clipboard": "Copiar",
+    "copied_to_clipboard": "Copiado",
+    "got_it": "Entendi"
   },
   "activation": {
     "title": "Ativação",
@@ -143,5 +154,8 @@
   "catalogue": {
     "next_page": "Próxima página",
     "previous_page": "Página anterior"
+  },
+  "modal": {
+    "close": "Botão de fechar"
   }
 }

src/main/constants.ts

@@ -1,5 +1,4 @@
 import { app } from "electron";
-import os from "node:os";
 import path from "node:path";
 
 export const repackersOn1337x = [

src/main/events/helpers/search-games.ts

@@ -8,7 +8,7 @@ import { stateManager } from "@main/state-manager";
 
 const { Index } = flexSearch;
 const repacksIndex = new Index();
-const steamGamesIndex = new Index({ tokenize: "reverse" });
+const steamGamesIndex = new Index();
 
 const repacks = stateManager.getValue("repacks");
 const steamGames = stateManager.getValue("steamGames");

src/renderer/index.html

@@ -6,10 +6,10 @@
     <title>Hydra</title>
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://steamcdn-a.akamaihd.net https://cdn.cloudflare.steamstatic.com https://cdn2.steamgriddb.com https://cdn.akamai.steamstatic.com;"
+      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://steamcdn-a.akamaihd.net https://cdn.cloudflare.steamstatic.com https://cdn2.steamgriddb.com https://cdn.akamai.steamstatic.com; media-src 'self' data: https://cdn2.steamgriddb.com;"
     />
   </head>
-  <body style="background-color: #1c1c1">
+  <body style="background-color: #1c1c1c">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

src/renderer/src/app.css.ts

@@ -26,6 +26,7 @@ globalStyle("body", {
   overflow: "hidden",
   userSelect: "none",
   fontFamily: "'Fira Mono', monospace",
+  fontSize: vars.size.bodyFontSize,
   background: vars.color.background,
   color: vars.color.bodyText,
   margin: "0",
@@ -36,13 +37,16 @@ globalStyle("button", {
   backgroundColor: "transparent",
   border: "none",
   fontFamily: "inherit",
-  fontSize: vars.size.bodyFontSize,
 });
 
 globalStyle("h1, h2, h3, h4, h5, h6, p", {
   margin: 0,
 });
 
+globalStyle("p", {
+  lineHeight: "20px",
+});
+
 globalStyle("#root, main", {
   display: "flex",
 });
@@ -103,5 +107,5 @@ export const titleBar = style({
   padding: `0 ${SPACING_UNIT * 2}px`,
   WebkitAppRegion: "drag",
   zIndex: "2",
-  borderBottom: `1px solid ${vars.color.borderColor}`,
+  borderBottom: `1px solid ${vars.color.border}`,
 } as ComplexStyleRule);

src/renderer/src/app.tsx

@@ -18,11 +18,16 @@ import {
   clearSearch,
   setUserPreferences,
   setRepackersFriendlyNames,
+  toggleDraggingDisabled,
 } from "@renderer/features";
 
 document.body.classList.add(themeClass);
 
-export function App({ children }: any) {
+export interface AppProps {
+  children: React.ReactNode;
+}
+
+export function App({ children }: AppProps) {
   const contentRef = useRef<HTMLDivElement>(null);
   const { updateLibrary } = useLibrary();
 
@@ -34,6 +39,9 @@ export function App({ children }: any) {
   const location = useLocation();
 
   const search = useAppSelector((state) => state.search.value);
+  const draggingDisabled = useAppSelector(
+    (state) => state.window.draggingDisabled
+  );
 
   useEffect(() => {
     Promise.all([
@@ -93,6 +101,17 @@ export function App({ children }: any) {
     if (contentRef.current) contentRef.current.scrollTop = 0;
   }, [location.pathname, location.search]);
 
+  useEffect(() => {
+    new MutationObserver(() => {
+      const modal = document.body.querySelector("[role=modal]");
+
+      dispatch(toggleDraggingDisabled(Boolean(modal)));
+    }).observe(document.body, {
+      attributes: false,
+      childList: true,
+    });
+  }, [dispatch, draggingDisabled]);
+
   return (
     <>
       {window.electron.platform === "win32" && (

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

@@ -3,13 +3,12 @@ import { SPACING_UNIT, vars } from "../../theme.css";
 
 export const bottomPanel = style({
   width: "100%",
-  borderTop: `solid 1px ${vars.color.borderColor}`,
+  borderTop: `solid 1px ${vars.color.border}`,
   padding: `${SPACING_UNIT / 2}px ${SPACING_UNIT * 2}px`,
   display: "flex",
   alignItems: "center",
   transition: "all ease 0.2s",
   justifyContent: "space-between",
-  fontSize: vars.size.bodyFontSize,
   zIndex: "1",
 });
 

src/renderer/src/components/button/button.css.ts

@@ -3,7 +3,7 @@ import { SPACING_UNIT, vars } from "../../theme.css";
 
 const base = style({
   padding: `${SPACING_UNIT}px ${SPACING_UNIT * 2}px`,
-  backgroundColor: "#c0c1c7",
+  backgroundColor: vars.color.muted,
   borderRadius: "8px",
   border: "solid 1px transparent",
   transition: "all ease 0.2s",
@@ -35,8 +35,8 @@ export const button = styleVariants({
     base,
     {
       backgroundColor: "transparent",
-      border: "solid 1px #c0c1c7",
-      color: "#c0c1c7",
+      border: `solid 1px ${vars.color.border}`,
+      color: vars.color.muted,
       ":hover": {
         backgroundColor: "rgba(255, 255, 255, 0.1)",
       },

src/renderer/src/components/checkbox-field/checkbox-field.css.ts

@@ -19,7 +19,7 @@ export const checkbox = style({
   alignItems: "center",
   position: "relative",
   transition: "all ease 0.2s",
-  border: `solid 1px ${vars.color.borderColor}`,
+  border: `solid 1px ${vars.color.border}`,
   ":hover": {
     borderColor: "rgba(255, 255, 255, 0.5)",
   },

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

@@ -10,7 +10,7 @@ export const card = recipe({
     overflow: "hidden",
     borderRadius: "4px",
     transition: "all ease 0.2s",
-    border: `solid 1px ${vars.color.borderColor}`,
+    border: `solid 1px ${vars.color.border}`,
     cursor: "pointer",
     zIndex: "1",
     ":active": {
@@ -103,7 +103,7 @@ export const specifics = style({
 export const specificsItem = style({
   gap: `${SPACING_UNIT}px`,
   display: "flex",
-  color: "#c0c1c7",
+  color: vars.color.muted,
   fontSize: "12px",
   alignItems: "flex-end",
 });
@@ -112,7 +112,7 @@ export const titleContainer = style({
   display: "flex",
   alignItems: "center",
   gap: `${SPACING_UNIT}px`,
-  color: "#c0c1c7",
+  color: vars.color.muted,
 });
 
 export const shopIcon = style({

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

@@ -29,8 +29,8 @@ export const header = recipe({
     WebkitAppRegion: "drag",
     width: "100%",
     padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 3}px`,
-    color: "#c0c1c7",
-    borderBottom: `solid 1px ${vars.color.borderColor}`,
+    color: vars.color.muted,
+    borderBottom: `solid 1px ${vars.color.border}`,
     backgroundColor: vars.color.darkBackground,
   } as ComplexStyleRule,
   variants: {
@@ -55,7 +55,7 @@ export const search = recipe({
     width: "200px",
     alignItems: "center",
     borderRadius: "8px",
-    border: `solid 1px ${vars.color.borderColor}`,
+    border: `solid 1px ${vars.color.border}`,
     height: "40px",
     WebkitAppRegion: "no-drag",
   } as ComplexStyleRule,
@@ -83,7 +83,6 @@ export const searchInput = style({
   color: "#DADBE1",
   cursor: "default",
   fontFamily: "inherit",
-  fontSize: vars.size.bodyFontSize,
   textOverflow: "ellipsis",
   ":focus": {
     cursor: "text",

src/renderer/src/components/hero/hero.css.ts

@@ -11,7 +11,7 @@ export const hero = style({
   overflow: "hidden",
   boxShadow: "0px 0px 15px 0px #000000",
   cursor: "pointer",
-  border: `solid 1px ${vars.color.borderColor}`,
+  border: `solid 1px ${vars.color.border}`,
   zIndex: "1",
 });
 
@@ -33,16 +33,15 @@ export const heroMedia = style({
 export const backdrop = style({
   width: "100%",
   height: "100%",
-  background: "linear-gradient(0deg, rgba(0, 0, 0, 0.6) 25%, transparent 100%)",
+  background: "linear-gradient(0deg, rgba(0, 0, 0, 0.8) 25%, transparent 100%)",
   position: "relative",
   display: "flex",
   overflow: "hidden",
 });
 
 export const description = style({
   maxWidth: "700px",
-  fontSize: vars.size.bodyFontSize,
-  color: "#c0c1c7",
+  color: vars.color.muted,
   textAlign: "left",
   fontFamily: "'Fira Sans', sans-serif",
   lineHeight: "20px",

src/renderer/src/components/hero/hero.tsx

@@ -6,7 +6,7 @@ import { ShopDetails } from "@types";
 import { getSteamLanguage, steamUrlBuilder } from "@renderer/helpers";
 import { useTranslation } from "react-i18next";
 
-const FEATURED_GAME_ID = "253230";
+const FEATURED_GAME_ID = "2420110";
 
 export function Hero() {
   const [featuredGameDetails, setFeaturedGameDetails] =
@@ -36,7 +36,7 @@ export function Hero() {
     >
       <div className={styles.backdrop}>
         <AsyncImage
-          src="https://cdn2.steamgriddb.com/hero/a6115ed32394915aac1e5502382eaaea.jpg"
+          src="https://cdn2.steamgriddb.com/hero/4ef10445b952a8b3c93a9379d581146a.jpg"
           alt={featuredGameDetails?.name}
           className={styles.heroMedia}
         />

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

@@ -25,7 +25,7 @@ export const modal = recipe({
     maxWidth: "600px",
     color: vars.color.bodyText,
     maxHeight: "100%",
-    border: `solid 1px ${vars.color.borderColor}`,
+    border: `solid 1px ${vars.color.border}`,
     overflow: "hidden",
     display: "flex",
     flexDirection: "column",
@@ -50,13 +50,18 @@ export const modalHeader = style({
   display: "flex",
   gap: `${SPACING_UNIT}px`,
   padding: `${SPACING_UNIT * 2}px`,
-  borderBottom: `solid 1px ${vars.color.borderColor}`,
+  borderBottom: `solid 1px ${vars.color.border}`,
   justifyContent: "space-between",
-  alignItems: "flex-start",
+  alignItems: "center",
 });
 
 export const closeModalButton = style({
   cursor: "pointer",
+  transition: "all ease 0.2s",
+  alignSelf: "flex-start",
+  ":hover": {
+    opacity: "0.75",
+  },
 });
 
 export const closeModalButtonIcon = style({