Fix/game settings UI (#1330)

* fix(games-settings): remove title from games settings section to prevent duplication

* feat(tools): replace button elements with Button component

* fix(settings): update title translation

* fix(infoBox): standardize line-height and align text with variables

Author: biliesilva

public/locales/en/translation.json

@@ -1051,7 +1051,6 @@
         "copyToClipboard": "Copy All Settings to Clipboard",
         "default_alert_message": "Changes in this section only apply as default values when installing games. If you want to change the settings of an already installed game, use the Settings button in the game page.",
         "default_alert_title": "Default Settings",
-        "default_title": "Games Settings",
         "eacRuntime": {
             "gameModeRequired": {
                 "message": "GameMode is required for the EAC runtime to work on Flatpak. Do you want to enable it now?",

src/frontend/components/UI/InfoBox/index.css

@@ -3,19 +3,19 @@
   width: 100%;
   padding: var(--space-sm) var(--space-lg);
   font-size: var(--text-md);
-  line-height: 19px;
+  line-height: var(--space-md);
   background-color: var(--input-background);
   border-radius: 10px;
   text-align: start;
 }
 
 .helpLink {
+  display: flex;
   margin-block-start: var(--space-3xs);
   transition: 500ms;
   color: var(--accent);
   cursor: pointer;
-  display: flex;
-  height: 40px;
+  height: var(--space-2lg);
   position: relative;
   align-items: center;
   min-width: 45px;
@@ -27,11 +27,14 @@
 }
 
 .helpLink > svg {
+  width: var(--space-xs);
   margin-inline-end: var(--space-3xs);
 }
 
 .infoBox > ul {
-  text-align: left;
+  display: flex;
+  text-align: center;
+  align-items: center;
 }
 
 .infoBox > strong {

src/frontend/screens/Settings/components/Tools/index.scss

@@ -1,14 +1,9 @@
 .toolsWrapper {
   display: flex;
   cursor: pointer;
-  justify-content: space-between;
-  width: 430px;
+  justify-content: flex-start;
   max-width: fit-content;
-
-  .button {
-    padding-block: var(--space-lg);
-    margin: 0 var(--space-3xs);
-  }
+  gap: var(--space-md);
 
   .drag {
     font-family: var(--font-secondary-regular);

src/frontend/screens/Settings/components/Tools/index.tsx

@@ -9,6 +9,7 @@ import { getGameInfo } from 'frontend/helpers'
 import { ProgressDialog } from 'frontend/components/UI/ProgressDialog'
 import SettingsContext from '../../SettingsContext'
 import ContextProvider from 'frontend/state/ContextProvider'
+import { Button } from '@hyperplay/ui'
 
 export default function Tools() {
   const { t } = useTranslation()
@@ -112,34 +113,40 @@ export default function Tools() {
           />
         )}
         <div className="toolsWrapper">
-          <button
+          <Button
             data-testid="wineCFG"
-            className={classNames('button outline', { active: winecfgRunning })}
+            className={classNames('buttonOutline', { active: winecfgRunning })}
             onClick={async () => callTools('winecfg')}
+            type="secondary"
+            size="medium"
           >
             <span className="toolTitle">Winecfg</span>
-          </button>
-          <button
+          </Button>
+          <Button
             data-testid="wineTricks"
-            className={classNames('button outline', {
+            className={classNames('buttonOutline', {
               active: winetricksRunning
             })}
             onClick={async () => callTools('winetricks')}
+            type="secondary"
+            size="medium"
           >
             <span className="toolTitle">Winetricks</span>
-          </button>
-          <a
+          </Button>
+          <Button
             onDrop={(ev) => {
               dropHandler(ev)
             }}
             onDragOver={(ev) => dragOverHandler(ev)}
-            className="button outline drag"
+            className="buttonOutlineDrag"
             onClick={handleRunExe}
+            type="tertiary"
+            size="medium"
           >
             {t('setting.runexe.title')}
             <br />
             <span>{t('setting.runexe.message')}</span>
-          </a>
+          </Button>
         </div>
       </div>
     </>

src/frontend/screens/Settings/index.tsx

@@ -113,7 +113,7 @@ function Settings() {
                 </Tabs.Tab>
                 <Tabs.Tab value="gamesSettings">
                   <div className="menu">
-                    {t('settings.gamesSettings', 'Games Settings')}
+                    {t('settings.gamesSettings', 'Game Settings')}
                   </div>
                 </Tabs.Tab>
                 <Tabs.Tab value="advSettings">

src/frontend/screens/Settings/sections/GamesSettings/index.tsx

@@ -72,9 +72,7 @@ export default function GamesSettings() {
 
   return (
     <>
-      <div className={styles.gameSettingsTitle}>
-        {t('settings.default_title', 'Games Settings')}
-      </div>
+      <div className={styles.gameSettingsTitle}></div>
       {isDefault && (
         <AlertCard
           variant="warning"