Merge branch 'main' of github.com:HyperPlay-Gaming/hyperplay-desktop-client into feat/steam_runner

Author: flavioislima

public/locales/en/translation.json

@@ -1052,7 +1052,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/Dialog/index.css

@@ -84,3 +84,7 @@
   justify-content: start;
   margin-top: var(--space-md);
 }
+
+.body {
+  padding-left: var(--space-sm);
+}

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/components/UI/StopInstallationModal/index.tsx

@@ -62,8 +62,8 @@ export default function StopInstallationModal(props: StopInstallProps) {
       </DialogContent>
       <DialogFooter>
         <Button
-          type="tertiary"
-          size="large"
+          type="primary"
+          size="medium"
           onClick={async () => {
             props.onClose()
           }}
@@ -72,7 +72,7 @@ export default function StopInstallationModal(props: StopInstallProps) {
         </Button>
         <Button
           type="secondary"
-          size="large"
+          size="medium"
           onClick={async () => {
             // if user wants to keep downloaded files and cancel download
             if (checkbox.current && checkbox.current.checked) {

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"