[UI/UX] Settings UI adjustments (#1304)

* feat: render tittle on toggleSwitch * fix: prime render naming * feat: ui improvements on settings * fix: disk space info message * other: add css variable for titles * chore: use header for titles * fix: folder icon and position * feat: improve select style * fix: settings scrolling * fix: installdialog header * fix: set theme error on empty string * fix: pr comments * chore: updated electron to v18.2.3 * fix: dropdown on accessibility screen
Heroic-Games-Launcher · May 14, 2022 · 421ae61 · 421ae61
1 parent 690f390
commit 421ae61
Show file tree

Hide file tree

Showing 27 changed files with 164 additions and 148 deletions.
diff --git a/package.json b/package.json
@@ -212,7 +212,7 @@
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^5.20.0",
     "@typescript-eslint/parser": "^5.20.0",
-    "electron": "^18.1.0",
+    "electron": "^18.2.3",
     "electron-builder": "^23.0.3",
     "electron-devtools-installer": "^3.2.0",
     "eslint": "^8.13.0",

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -286,7 +286,7 @@
         "maxworkers": "Maximum Number of Workers when downloading",
         "minimize-on-launch": "Minimize Heroic After Game Launch",
         "offlinemode": "Run Game Offline",
-        "primerun": "Enable Nvidia Prime Render",
+        "primerun": "Use Dedicated Graphics Card",
         "resizableBar": "Enable Resizable BAR (NVIDIA RTX 30xx only)",
         "runexe": {
             "message": "Drag and Drop Files here",

diff --git a/public/locales/hr/translation.json b/public/locales/hr/translation.json
@@ -286,7 +286,7 @@
         "maxworkers": "",
         "minimize-on-launch": "Minimize Heroic After Game Launch",
         "offlinemode": "",
-        "primerun": "Enable Nvidia Prime Render",
+        "primerun": "Use Dedicated Graphics Card",
         "resizableBar": "Enable Resizable BAR (NVIDIA RTX only)",
         "runexe": {
             "message": "",

diff --git a/src/App.css b/src/App.css
@@ -186,8 +186,8 @@ html,
 
 .material-icons.settings.folder {
   position: relative;
-  right: 42px;
-  top: 5px;
+  right: 50px;
+  top: 2px;
   cursor: pointer;
   color: var(--text-default);
 }

diff --git a/src/components/UI/Dialog/components/DialogHeader.tsx b/src/components/UI/Dialog/components/DialogHeader.tsx
@@ -13,7 +13,7 @@ export const DialogHeader: React.FC<DialogHeaderProps> = ({
 }) => {
   return (
     <div className="Dialog__header">
-      <div className="Dialog__headerTitle">{children}</div>
+      <h1 className="Dialog__headerTitle">{children}</h1>
       <div className="Dialog__headerClose">
         <button className="Dialog__headerCloseButton" onClick={onClose}>
           <FontAwesomeIcon className="Dialog__headerCloseIcon" icon={faXmark} />

diff --git a/src/components/UI/Dialog/index.css b/src/components/UI/Dialog/index.css
@@ -39,6 +39,7 @@
   flex: 100% 1 1;
   padding: var(--dialog-margin-vertical) 16px 0 var(--dialog-margin-horizontal);
   font-size: 24px;
+  margin: 0;
 }
 
 .Dialog__headerClose {

diff --git a/src/components/UI/Header/index.css b/src/components/UI/Header/index.css
@@ -54,7 +54,6 @@
   display: flex;
   align-content: center;
   justify-content: center;
-  padding-left: 6px;
 }
 
 .refreshIcon:hover,

diff --git a/src/components/UI/ThemeSelector/index.tsx b/src/components/UI/ThemeSelector/index.tsx
@@ -21,7 +21,7 @@ export const ThemeSelector = () => {
         value={theme}
         className="settingSelect is-drop-down"
       >
-        <option value="">Default</option>
+        <option value="default">Default</option>
         <option value="classic">Classic</option>
         <option value="old-school">Old School Heroic</option>
         <option value="dracula">Dracula</option>

diff --git a/src/components/UI/ToggleSwitch/index.css b/src/components/UI/ToggleSwitch/index.css
@@ -22,7 +22,7 @@
 
 .toggleWrapper:hover span {
   transition: 350ms;
-  color: var(--accent-overlay);
+  color: var(--accent);
 }
 
 .switch:hover .checkmark,
@@ -75,3 +75,8 @@
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
 }
+
+.title.checked {
+  font-weight: 700;
+  color: var(--accent);
+}
diff --git a/src/components/UI/ToggleSwitch/index.tsx b/src/components/UI/ToggleSwitch/index.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import React, { ChangeEventHandler } from 'react'
 import './index.css'
 
@@ -24,17 +25,20 @@ export default function ToggleSwitch(props: Props) {
     datatestid: dataTestId
   }
   return (
-    <div className="switch" aria-label={title}>
-      <input
-        data-testid={dataTestId}
-        disabled={disabled}
-        checked={value}
-        type="checkbox"
-        onChange={handleChange}
-        aria-label={title}
-      />
+    <>
+      <div className="switch" aria-label={title}>
+        <input
+          data-testid={dataTestId}
+          disabled={disabled}
+          checked={value}
+          type="checkbox"
+          onChange={handleChange}
+          aria-label={title}
+        />
 
-      <span {...checkmarkProps} className="checkmark" />
-    </div>
+        <span {...checkmarkProps} className="checkmark" />
+      </div>
+      <span className={classNames('title', { checked: value })}>{title}</span>
+    </>
   )
 }
diff --git a/src/index.css b/src/index.css
@@ -18,7 +18,7 @@ html {
   --current-background: var(--body-background);
   --modal-background: #13172a;
   --modal-border: #1f253f;
-  --modal-backdrop: #00000048;
+  --modal-backdrop: #00000074;
   --text-hover: #59d0ea;
   --primary: #07c5ef;
   --primary-hover: #4cdafa;
@@ -63,7 +63,7 @@ html {
   --text-default: #eae8e5;
   --text-secondary: #b1b1b1;
   --text-pause-cancel: #97f4e9;
-  --text-stop: #97f4e9;
+  --text-title: #97f4e9;
   --text-tertiary: #101111; /* This is not defined in figma */
   --text-quartenary: #5a5e5f; /* this is meant to be a background colour */
   --text-danger: #d22121;
@@ -149,3 +149,9 @@ code {
   left: 0px;
   right: 0px;
 }
+
+h1,
+h2,
+h3 {
+  color: var(--text-title);
+}
diff --git a/src/index.tsx b/src/index.tsx
@@ -73,8 +73,8 @@ i18next
     ]
   })
 
-const themeClass = (configStore.get('theme') as string) || ''
-document.body.classList.add(themeClass)
+const themeClass = (configStore.get('theme') as string) || 'default'
+document.body.className = themeClass
 
 ReactDOM.render(
   <React.StrictMode>

diff --git a/src/screens/Accessibility/index.css b/src/screens/Accessibility/index.css
@@ -3,6 +3,11 @@ input[type='range'] {
   max-width: 513px;
 }
 
+.Accessibility > .settingsWrapper > .setting > .is-drop-down {
+  background-position: calc(100% - 20px) calc(1em + -4px),
+    calc(100% - 15px) calc(1em + -4px), calc(101% - 2.5em) calc(0.5em + -8px);
+}
+
 .zoomHint {
   display: flex;
   justify-content: space-between;

diff --git a/src/screens/Game/GamePage/index.css b/src/screens/Game/GamePage/index.css
@@ -60,8 +60,8 @@
 }
 
 .backButton > .MuiSvgIcon-root {
-  width: 32px;
-  height: 32px;
+  width: 40px;
+  height: 40px;
   transition: 300ms;
 }
 
@@ -80,8 +80,8 @@
 }
 
 .gameInfo .title {
-  color: var(--text-default);
   font-weight: 700;
+  margin-bottom: 0;
 }
 
 .gameInfo > .settingSelect {

diff --git a/src/screens/Game/GamePage/index.tsx b/src/screens/Game/GamePage/index.tsx
@@ -252,7 +252,7 @@ export default function GamePage(): JSX.Element | null {
                   </nav>
 
                   <div className="gameInfo">
-                    <div className="title">{title}</div>
+                    <h1 className="title">{title}</h1>
                     <div className="infoWrapper">
                       <div className="developer">{developer}</div>
                       {!is_game && (

diff --git a/src/screens/Library/components/InstallModal/index.css b/src/screens/Library/components/InstallModal/index.css
@@ -91,3 +91,14 @@
   margin: 16px calc(16px + 8px + 13px);
   color: var(--text-default);
 }
+
+.diskSpaceInfo {
+  font-size: 14px;
+  align-self: flex-start;
+  padding: 4px 0 4px 8px;
+  color: var(--text-secondary);
+}
+
+.diskSpaceInfo::before {
+  content: '- ';
+}
diff --git a/src/screens/Library/components/InstallModal/index.tsx b/src/screens/Library/components/InstallModal/index.tsx
@@ -20,7 +20,7 @@ import React, {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { SmallInfo, UpdateComponent } from 'src/components/UI'
+import { UpdateComponent } from 'src/components/UI'
 import {
   getAppSettings,
   getGameInfo,
@@ -493,12 +493,15 @@ export default function InstallModal({
                       onChange={(event) => setInstallPath(event.target.value)}
                     />
                   </FormControl>
-                  <SmallInfo
-                    title={`${t(
-                      'install.disk-space-left',
-                      'Space Left on the Device'
-                    )}: ${spaceLeft}`}
-                  />
+                  <span className="diskSpaceInfo">
+                    <span>
+                      {t('install.disk-space-left', 'Space Left on the Device')}
+                      :
+                    </span>
+                    <span>
+                      <strong>{` ${spaceLeft}`}</strong>
+                    </span>
+                  </span>
                 </div>
               </div>
               {hasWine && (

diff --git a/src/screens/Settings/components/AdvancedSettings/index.tsx b/src/screens/Settings/components/AdvancedSettings/index.tsx
@@ -1,5 +1,4 @@
 import {
-  CreateNewFolder,
   Backspace,
   CleaningServicesOutlined,
   ContentCopyOutlined,
@@ -13,6 +12,7 @@ import { SvgButton } from 'src/components/UI'
 import ContextProvider from 'src/state/ContextProvider'
 import { AppSettings, Path } from 'src/types'
 import { configStore } from 'src/helpers/electronStores'
+import FolderOpenOutlinedIcon from '@mui/icons-material/FolderOpenOutlined'
 
 interface ElectronProps {
   ipcRenderer: IpcRenderer
@@ -128,6 +128,7 @@ export const AdvancedSettings = ({
 
   return (
     <div>
+      <h3 className="settingSubheader">{t('settings.navbar.advanced')}</h3>
       <span className="setting">
         <span className={classNames('settingText', { isRTL: isRTL })}>
           {t(
@@ -152,7 +153,7 @@ export const AdvancedSettings = ({
               onClick={async () => handleLegendaryBinary()}
               className="material-icons settings folder"
             >
-              <CreateNewFolder
+              <FolderOpenOutlinedIcon
                 data-testid="setLegendaryBinaryButton"
                 style={{
                   color: altLegendaryBin.length ? 'transparent' : 'currentColor'
@@ -200,7 +201,7 @@ export const AdvancedSettings = ({
               onClick={async () => handleGogdlBinary()}
               className="material-icons settings folder"
             >
-              <CreateNewFolder
+              <FolderOpenOutlinedIcon
                 data-testid="setGogdlBinaryButton"
                 style={{
                   color: altGogdlBin.length ? 'transparent' : 'currentColor'

diff --git a/src/screens/Settings/components/GeneralSettings/index.tsx b/src/screens/Settings/components/GeneralSettings/index.tsx
@@ -10,7 +10,7 @@ import classNames from 'classnames'
 
 import { IpcRenderer } from 'electron'
 import Backspace from '@mui/icons-material/Backspace'
-import CreateNewFolder from '@mui/icons-material/CreateNewFolder'
+import FolderOpenOutlinedIcon from '@mui/icons-material/FolderOpenOutlined'
 import { toggleControllerIsDisabled } from 'src/helpers/gamepad'
 import { ThemeSelector } from 'src/components/UI/ThemeSelector'
 
@@ -156,6 +156,7 @@ export default function GeneralSettings({
 
   return (
     <>
+      <h3 className="settingSubheader">{t('settings.navbar.general')}</h3>
       <span className="setting" data-testid="generalSettings">
         <span className={classNames('settingText', { isRTL: isRTL })}>
           {t('setting.language')}
@@ -199,7 +200,7 @@ export default function GeneralSettings({
             }
             className="material-icons settings folder"
           >
-            <CreateNewFolder data-testid="setinstallpathbutton" />
+            <FolderOpenOutlinedIcon data-testid="setinstallpathbutton" />
           </SvgButton>
         </span>
       </span>
@@ -223,7 +224,7 @@ export default function GeneralSettings({
                 onClick={() => handleEgsFolder()}
                 className="material-icons settings folder"
               >
-                <CreateNewFolder
+                <FolderOpenOutlinedIcon
                   data-testid="setEpicSyncPathButton"
                   style={{ color: isLinked ? 'transparent' : 'currentColor' }}
                 />
@@ -275,7 +276,6 @@ export default function GeneralSettings({
               handleChange={handleSync}
               title={t('setting.egs-sync')}
             />
-            <span>{t('setting.egs-sync')}</span>
           </label>
         </span>
       )}
@@ -287,7 +287,6 @@ export default function GeneralSettings({
             handleChange={toggleTray}
             title={t('setting.exit-to-tray')}
           />
-          <span>{t('setting.exit-to-tray')}</span>
         </label>
       </span>
       {exitToTray && (
@@ -299,7 +298,6 @@ export default function GeneralSettings({
               handleChange={toggleStartInTray}
               title={t('setting.start-in-tray', 'Start Minimized')}
             />
-            <span>{t('setting.start-in-tray', 'Start Minimized')}</span>
           </label>
         </span>
       )}
@@ -314,12 +312,6 @@ export default function GeneralSettings({
               'Minimize Heroic After Game Launch'
             )}
           />
-          <span>
-            {t(
-              'setting.minimize-on-launch',
-              'Minimize Heroic After Game Launch'
-            )}
-          </span>
         </label>
       </span>
       <span className="setting">
@@ -332,12 +324,6 @@ export default function GeneralSettings({
               'Show Unreal Marketplace (needs restart)'
             )}
           />
-          <span>
-            {t(
-              'setting.showUnrealMarket',
-              'Show Unreal Marketplace (needs restart)'
-            )}
-          </span>
         </label>
       </span>
       <span className="setting">
@@ -350,7 +336,6 @@ export default function GeneralSettings({
             }}
             title={t('setting.darktray', 'Use Dark Tray Icon (needs restart)')}
           />
-          <span>{t('setting.darktray', 'Use Dark Tray Icon')}</span>
         </label>
       </span>
       <span className="setting">
@@ -366,12 +351,6 @@ export default function GeneralSettings({
               'Disable Heroic navigation using controller'
             )}
           />
-          <span>
-            {t(
-              'setting.disable_controller',
-              'Disable Heroic navigation using controller'
-            )}
-          </span>
         </label>
       </span>