From 28a2f1dda5796eda394f887f4ffa5152926b3f75 Mon Sep 17 00:00:00 2001
From: Hachi-R <drive8hachi@gmail.com>
Date: Tue, 21 Jan 2025 17:41:58 -0300
Subject: [PATCH] refactor: fix some styles in game details modals

---
 .../modals/download-settings-modal.scss       |   3 +-
 .../modals/game-options-modal.scss            |  68 ++++-
 .../modals/game-options-modal.tsx             | 234 +++++++++---------
 3 files changed, 189 insertions(+), 116 deletions(-)

diff --git a/src/renderer/src/pages/game-details/modals/download-settings-modal.scss b/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
index 5aa58197..d98a95ad 100644
--- a/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
+++ b/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
@@ -10,11 +10,12 @@
 
   &__downloads-path-field {
     display: flex;
+    flex-direction: column;
     gap: globals.$spacing-unit;
   }
 
   &__hint-text {
-    font-size: globals.$small-font-size;
+    font-size: 12px;
     color: globals.$body-color;
   }
 
diff --git a/src/renderer/src/pages/game-details/modals/game-options-modal.scss b/src/renderer/src/pages/game-details/modals/game-options-modal.scss
index 0a3c0246..00113260 100644
--- a/src/renderer/src/pages/game-details/modals/game-options-modal.scss
+++ b/src/renderer/src/pages/game-details/modals/game-options-modal.scss
@@ -7,18 +7,80 @@
     flex-direction: column;
   }
 
-  &__header {
+  &__section {
     display: flex;
     flex-direction: column;
     gap: globals.$spacing-unit;
   }
 
-  &__header-description {
-    font-weight: 400;
+  &__header {
+    display: flex;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+
+    &-description {
+      font-weight: 400;
+    }
   }
 
   &__row {
     display: flex;
     gap: globals.$spacing-unit;
   }
+
+  &__executable-field {
+    display: flex;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+
+    &-input {
+      width: 100%;
+    }
+
+    &-buttons {
+      display: flex;
+      gap: globals.$spacing-unit;
+    }
+  }
+
+  &__wine-prefix {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 2);
+
+    &-input {
+      width: 100%;
+    }
+  }
+
+  &__launch-options {
+    display: flex;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+
+    &-input {
+      width: 100%;
+    }
+  }
+
+  &__downloads {
+    display: flex;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+  }
+
+  &__danger-zone {
+    display: flex;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+
+    &-description {
+      font-weight: 400;
+    }
+
+    &-buttons {
+      display: flex;
+      gap: globals.$spacing-unit;
+    }
+  }
 }
diff --git a/src/renderer/src/pages/game-details/modals/game-options-modal.tsx b/src/renderer/src/pages/game-details/modals/game-options-modal.tsx
index 2a826c04..ec6a8b07 100644
--- a/src/renderer/src/pages/game-details/modals/game-options-modal.tsx
+++ b/src/renderer/src/pages/game-details/modals/game-options-modal.tsx
@@ -2,7 +2,6 @@ import { useContext, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Button, Modal, TextField } from "@renderer/components";
 import type { Game } from "@types";
-import * as styles from "./game-options-modal.css";
 import { gameDetailsContext } from "@renderer/context";
 import { DeleteGameModal } from "@renderer/pages/downloads/delete-game-modal";
 import { useDownload, useToast, useUserDetails } from "@renderer/hooks";
@@ -179,14 +178,12 @@ export function GameOptionsModal({
         onClose={() => setShowDeleteModal(false)}
         deleteGame={handleDeleteGame}
       />
-
       <RemoveGameFromLibraryModal
         visible={showRemoveGameModal}
         onClose={() => setShowRemoveGameModal(false)}
         removeGameFromLibrary={handleRemoveGameFromLibrary}
         game={game}
       />
-
       <ResetAchievementsModal
         visible={showResetAchievementsModal}
         onClose={() => setShowResetAchievementsModal(false)}
@@ -201,58 +198,65 @@ export function GameOptionsModal({
         large={true}
       >
         <div className="game-options-modal__container">
-          <div className="game-options-modal__header">
-            <h2>{t("executable_section_title")}</h2>
-            <h4 className="game-options-modal__header-description">
-              {t("executable_section_description")}
-            </h4>
+          <div className="game-options-modal__section">
+            <div className="game-options-modal__header">
+              <h2>{t("executable_section_title")}</h2>
+              <h4 className="game-options-modal__header-description">
+                {t("executable_section_description")}
+              </h4>
+            </div>
+
+            <div className="game-options-modal__executable-field">
+              <TextField
+                value={game.executablePath || ""}
+                readOnly
+                theme="dark"
+                disabled
+                placeholder={t("no_executable_selected")}
+                rightContent={
+                  <>
+                    <Button
+                      type="button"
+                      theme="outline"
+                      onClick={handleChangeExecutableLocation}
+                    >
+                      <FileIcon />
+                      {t("select_executable")}
+                    </Button>
+                    {game.executablePath && (
+                      <Button
+                        onClick={handleClearExecutablePath}
+                        theme="outline"
+                      >
+                        {t("clear")}
+                      </Button>
+                    )}
+                  </>
+                }
+              />
+
+              {game.executablePath && (
+                <div className="game-options-modal__executable-field-buttons">
+                  <Button
+                    type="button"
+                    theme="outline"
+                    onClick={handleOpenGameExecutablePath}
+                  >
+                    {t("open_folder")}
+                  </Button>
+                  <Button onClick={handleCreateShortcut} theme="outline">
+                    {t("create_shortcut")}
+                  </Button>
+                </div>
+              )}
+            </div>
           </div>
 
-          <TextField
-            value={game.executablePath || ""}
-            readOnly
-            theme="dark"
-            disabled
-            placeholder={t("no_executable_selected")}
-            rightContent={
-              <>
-                <Button
-                  type="button"
-                  theme="outline"
-                  onClick={handleChangeExecutableLocation}
-                >
-                  <FileIcon />
-                  {t("select_executable")}
-                </Button>
-                {game.executablePath && (
-                  <Button onClick={handleClearExecutablePath} theme="outline">
-                    {t("clear")}
-                  </Button>
-                )}
-              </>
-            }
-          />
-
-          {game.executablePath && (
-            <div className={styles.gameOptionRow}>
-              <Button
-                type="button"
-                theme="outline"
-                onClick={handleOpenGameExecutablePath}
-              >
-                {t("open_folder")}
-              </Button>
-              <Button onClick={handleCreateShortcut} theme="outline">
-                {t("create_shortcut")}
-              </Button>
-            </div>
-          )}
-
           {shouldShowWinePrefixConfiguration && (
-            <div className={styles.optionsContainer}>
-              <div className={styles.gameOptionHeader}>
+            <div className="game-options-modal__wine-prefix">
+              <div className="game-options-modal__header">
                 <h2>{t("wine_prefix")}</h2>
-                <h4 className={styles.gameOptionHeaderDescription}>
+                <h4 className="game-options-modal__header-description">
                   {t("wine_prefix_description")}
                 </h4>
               </div>
@@ -287,11 +291,13 @@ export function GameOptionsModal({
           )}
 
           {shouldShowLaunchOptionsConfiguration && (
-            <div className={styles.gameOptionHeader}>
-              <h2>{t("launch_options")}</h2>
-              <h4 className={styles.gameOptionHeaderDescription}>
-                {t("launch_options_description")}
-              </h4>
+            <div className="game-options-modal__launch-options">
+              <div className="game-options-modal__header">
+                <h2>{t("launch_options")}</h2>
+                <h4 className="game-options-modal__header-description">
+                  {t("launch_options_description")}
+                </h4>
+              </div>
               <TextField
                 value={launchOptions}
                 theme="dark"
@@ -308,70 +314,74 @@ export function GameOptionsModal({
             </div>
           )}
 
-          <div className={styles.gameOptionHeader}>
-            <h2>{t("downloads_secion_title")}</h2>
-            <h4 className={styles.gameOptionHeaderDescription}>
-              {t("downloads_section_description")}
-            </h4>
+          <div className="game-options-modal__downloads">
+            <div className="game-options-modal__header">
+              <h2>{t("downloads_secion_title")}</h2>
+              <h4 className="game-options-modal__header-description">
+                {t("downloads_section_description")}
+              </h4>
+            </div>
+
+            <div className="game-options-modal__row">
+              <Button
+                onClick={() => setShowRepacksModal(true)}
+                theme="outline"
+                disabled={deleting || isGameDownloading || !repacks.length}
+              >
+                {t("open_download_options")}
+              </Button>
+              {game.downloadPath && (
+                <Button
+                  onClick={handleOpenDownloadFolder}
+                  theme="outline"
+                  disabled={deleting}
+                >
+                  {t("open_download_location")}
+                </Button>
+              )}
+            </div>
           </div>
 
-          <div className={styles.gameOptionRow}>
-            <Button
-              onClick={() => setShowRepacksModal(true)}
-              theme="outline"
-              disabled={deleting || isGameDownloading || !repacks.length}
-            >
-              {t("open_download_options")}
-            </Button>
-            {game.downloadPath && (
+          <div className="game-options-modal__danger-zone">
+            <div className="game-options-modal__header">
+              <h2>{t("danger_zone_section_title")}</h2>
+              <h4 className="game-options-modal__danger-zone-description">
+                {t("danger_zone_section_description")}
+              </h4>
+            </div>
+
+            <div className="game-options-modal__danger-zone-buttons">
               <Button
-                onClick={handleOpenDownloadFolder}
-                theme="outline"
+                onClick={() => setShowRemoveGameModal(true)}
+                theme="danger"
                 disabled={deleting}
               >
-                {t("open_download_location")}
+                {t("remove_from_library")}
               </Button>
-            )}
-          </div>
 
-          <div className={styles.gameOptionHeader}>
-            <h2>{t("danger_zone_section_title")}</h2>
-            <h4 className={styles.gameOptionHeaderDescription}>
-              {t("danger_zone_section_description")}
-            </h4>
-          </div>
+              <Button
+                onClick={() => setShowResetAchievementsModal(true)}
+                theme="danger"
+                disabled={
+                  deleting ||
+                  isDeletingAchievements ||
+                  !hasAchievements ||
+                  !userDetails
+                }
+              >
+                {t("reset_achievements")}
+              </Button>
 
-          <div className={styles.gameOptionRow}>
-            <Button
-              onClick={() => setShowRemoveGameModal(true)}
-              theme="danger"
-              disabled={deleting}
-            >
-              {t("remove_from_library")}
-            </Button>
-
-            <Button
-              onClick={() => setShowResetAchievementsModal(true)}
-              theme="danger"
-              disabled={
-                deleting ||
-                isDeletingAchievements ||
-                !hasAchievements ||
-                !userDetails
-              }
-            >
-              {t("reset_achievements")}
-            </Button>
-
-            <Button
-              onClick={() => {
-                setShowDeleteModal(true);
-              }}
-              theme="danger"
-              disabled={isGameDownloading || deleting || !game.downloadPath}
-            >
-              {t("remove_files")}
-            </Button>
+              <Button
+                onClick={() => {
+                  setShowDeleteModal(true);
+                }}
+                theme="danger"
+                disabled={isGameDownloading || deleting || !game.downloadPath}
+              >
+                {t("remove_files")}
+              </Button>
+            </div>
           </div>
         </div>
       </Modal>