Make form elements more generic, don't hardcode setting class

src/App.css

@@ -242,15 +242,6 @@ html,
   cursor: pointer;
 }
 
-.settingText {
-  cursor: default;
-  margin-bottom: 14px;
-  font: var(--font-secondary-regular);
-  font-size: 16px;
-  line-height: 19px;
-  color: var(--text-secondary);
-}
-
 .smallMessage {
   font-size: 12px;
   width: 100%;

src/components/UI/LanguageSelector/index.tsx

@@ -1,7 +1,7 @@
 import { IpcRenderer } from 'electron'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { SelectField } from '../SelectField'
+import { SelectField } from '..'
 
 const { ipcRenderer } = window.require('electron') as {
   ipcRenderer: IpcRenderer

src/components/UI/SelectField/index.css

@@ -1,9 +1,9 @@
-.selectWrapper {
+.selectFieldWrapper {
   display: grid;
   grid-template-areas: 'label' 'select';
 }
 
-.selectWrapper select {
+.selectFieldWrapper select {
   grid-area: select;
   width: 100%;
   height: 40px;
@@ -38,37 +38,37 @@
   min-width: 100px;
 }
 
-.selectWrapper label {
+.selectFieldWrapper label {
   justify-self: flex-start;
   grid-area: label;
   align-self: center;
 }
 
-.selectWrapper select:disabled {
+.selectFieldWrapper select:disabled {
   cursor: not-allowed;
 }
 
-.selectWrapper.small select {
+.selectFieldWrapper.small select {
   width: clamp(150px, 10rem, 372px);
 }
 
-.selectWrapper.smaller select {
+.selectFieldWrapper.smaller select {
   width: 66px;
   text-indent: 11px;
 }
 
-.selectWrapper.small,
-.selectWrapper.smaller {
+.selectFieldWrapper.small,
+.selectFieldWrapper.smaller {
   grid-template-areas: 'select label';
   grid-template-columns: min-content 1fr;
 }
 
-.selectWrapper.small label,
-.selectWrapper.smaller label {
+.selectFieldWrapper.small label,
+.selectFieldWrapper.smaller label {
   margin: 0px 1rem;
 }
 
-.selectWrapper select > option {
+.selectFieldWrapper select > option {
   background: var(--navbar-background);
   height: 40px;
   color: var(--text-secondary);
@@ -77,17 +77,17 @@
   border-radius: 10px;
 }
 
-.selectWrapper.rightButtons {
+.selectFieldWrapper.rightButtons {
   grid-template: 'label label' 'select buttons';
   grid-template-columns: auto min-content;
   grid-column-gap: 0.5rem;
 }
 
-.selectWrapper.rightButtons label {
+.selectFieldWrapper.rightButtons label {
   grid-area: label;
 }
 
-.selectWrapper.rightButtons .rightButtons {
+.selectFieldWrapper.rightButtons .rightButtons {
   grid-area: buttons;
   align-self: center;
 }

src/components/UI/SelectField/index.tsx

@@ -15,7 +15,7 @@ interface SelectFieldProps {
   extraClass?: string
 }
 
-export const SelectField = ({
+const SelectField = ({
   htmlId,
   value,
   onChange,
@@ -29,26 +29,19 @@ export const SelectField = ({
   const { isRTL } = useContext(ContextProvider)
 
   return (
-    <div className={`setting selectWrapper ${extraClass}`}>
+    <div className={`selectFieldWrapper ${extraClass}`}>
       {label && (
-        <label
-          className={classNames('settingText', { isRTL: isRTL })}
-          htmlFor={htmlId}
-        >
+        <label className={classNames({ isRTL: isRTL })} htmlFor={htmlId}>
           {label}
         </label>
       )}
-      <select
-        id={htmlId}
-        value={value}
-        onChange={onChange}
-        className="settingSelect is-drop-down"
-        disabled={disabled}
-      >
+      <select id={htmlId} value={value} onChange={onChange} disabled={disabled}>
         {prompt && <option value="">{prompt}</option>}
         {children}
       </select>
       {afterSelect}
     </div>
   )
 }
+
+export default SelectField

src/components/UI/TextInputField/index.css

@@ -1,9 +1,9 @@
-.textInputWrapper {
+.textInputFieldWrapper {
   display: grid;
   grid-template-areas: 'label' 'input';
 }
 
-.textInputWrapper input[type='text'] {
+.textInputFieldWrapper input[type='text'] {
   grid-area: input;
   width: 100%;
   height: 40px;
@@ -25,12 +25,12 @@
   min-width: 100px;
 }
 
-.textInputWrapper label {
+.textInputFieldWrapper label {
   grid-area: label;
   justify-self: flex-start;
 }
 
-.textInputWrapper .inputIcon {
+.textInputFieldWrapper .inputIcon {
   grid-area: input;
   align-self: center;
   justify-self: flex-end;
@@ -47,16 +47,16 @@
   padding: 1px 3px;
 }
 
-.textInputWrapper .inputIcon ~ input {
+.textInputFieldWrapper .inputIcon ~ input {
   padding-right: 50px;
 }
 
-.textInputWrapper.withRightButton {
+.textInputFieldWrapper.withRightButton {
   grid-template-areas: 'label label' 'input button';
   grid-template-columns: auto min-content;
   grid-column-gap: 0.5rem;
 }
 
-.textInputWrapper.withRightButton .rightButton {
+.textInputFieldWrapper.withRightButton .rightButton {
   grid-area: button;
 }

src/components/UI/TextInputField/index.tsx

@@ -15,7 +15,7 @@ interface SelectFieldProps {
   extraClass?: string
 }
 
-export const TextInpuField = ({
+const TextInputField = ({
   htmlId,
   value,
   onChange,
@@ -29,12 +29,9 @@ export const TextInpuField = ({
   const { isRTL } = useContext(ContextProvider)
 
   return (
-    <div className={`setting textInputWrapper ${extraClass}`}>
+    <div className={`textInputFieldWrapper ${extraClass}`}>
       {label && (
-        <label
-          className={classNames('settingText', { isRTL: isRTL })}
-          htmlFor={htmlId}
-        >
+        <label className={classNames({ isRTL: isRTL })} htmlFor={htmlId}>
           {label}
         </label>
       )}
@@ -51,3 +48,5 @@ export const TextInpuField = ({
     </div>
   )
 }
+
+export default TextInputField

src/components/UI/ThemeSelector/index.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import ContextProvider from 'src/state/ContextProvider'
-import { SelectField } from '../SelectField'
+import { SelectField } from '..'
 
 export const ThemeSelector = () => {
   const { theme, setTheme } = useContext(ContextProvider)

src/components/UI/ToggleSwitch/index.tsx

@@ -7,10 +7,11 @@ interface Props {
   handleChange: ChangeEventHandler<HTMLInputElement>
   value: boolean
   title: string
+  extraClass?: string
 }
 
 export default function ToggleSwitch(props: Props) {
-  const { handleChange, value, disabled, title, htmlId } = props
+  const { handleChange, value, disabled, title, htmlId, extraClass } = props
 
   return (
     <>
@@ -24,7 +25,9 @@ export default function ToggleSwitch(props: Props) {
         className="hiddenCheckbox"
       />
       <label
-        className={`setting toggleSwitchWrapper ${value ? 'checked' : ''}`}
+        className={`toggleSwitchWrapper ${extraClass} ${
+          value ? 'checked' : ''
+        }`}
         htmlFor={htmlId}
       >
         {title}

src/components/UI/index.tsx

@@ -2,7 +2,9 @@ export { default as Header } from './Header'
 export { default as InfoBox } from './InfoBox'
 export { default as LanguageSelector } from './LanguageSelector'
 export { default as SearchBar } from './SearchBar'
+export { default as SelectField } from './SelectField'
 export { default as SmallInfo } from './SmallInfo'
+export { default as TextInputField } from './TextInputField'
 export { default as ToggleSwitch } from './ToggleSwitch'
 export { default as UpdateComponent } from './UpdateComponent'
 export { default as SvgButton } from './SvgButton'

src/screens/Accessibility/index.tsx

@@ -9,12 +9,12 @@ import React, {
 import { useTranslation } from 'react-i18next'
 import ContextProvider from 'src/state/ContextProvider'
 import classNames from 'classnames'
+import { SelectField } from 'src/components/UI'
 import { ThemeSelector } from 'src/components/UI/ThemeSelector'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faSyncAlt } from '@fortawesome/free-solid-svg-icons'
 const { ipcRenderer } = window.require('electron')
 import './index.css'
-import { SelectField } from 'src/components/UI/SelectField'
 
 export default function Accessibility() {
   const { t } = useTranslation()
@@ -82,8 +82,8 @@ export default function Accessibility() {
           {t('accessibility.title', 'Accessibility')}
         </h1>
 
-        <span className="setting">
-          <label className={classNames('settingText', { isRTL: isRTL })}>
+        <span className="rangeWrapper">
+          <label className={classNames({ isRTL: isRTL })}>
             {t('accessibility.zoom', 'Zoom')} ({zoomPercent}%)
           </label>
           <input

src/screens/Game/GamePage/index.tsx

@@ -17,7 +17,7 @@ import {
 import { Link, NavLink, useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import ContextProvider from 'src/state/ContextProvider'
-import UpdateComponent from 'src/components/UI/UpdateComponent'
+import { UpdateComponent, SelectField } from 'src/components/UI'
 
 import { updateGame } from 'src/helpers'
 
@@ -35,7 +35,6 @@ import GOGLogo from 'src/assets/gog-logo.svg'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons'
 import { hasProgress } from 'src/hooks/hasProgress'
-import { SelectField } from 'src/components/UI/SelectField'
 
 const { ipcRenderer } = window.require('electron') as {
   ipcRenderer: IpcRenderer

src/screens/Library/components/InstallModal/index.tsx

@@ -20,7 +20,7 @@ import React, {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { UpdateComponent } from 'src/components/UI'
+import { UpdateComponent, SelectField, TextInputField } from 'src/components/UI'
 import {
   getAppSettings,
   getGameInfo,
@@ -52,8 +52,6 @@ import ToggleSwitch from 'src/components/UI/ToggleSwitch'
 import './index.css'
 
 import { SDL_GAMES, SelectiveDownload } from './selective_dl'
-import { SelectField } from 'src/components/UI/SelectField'
-import { TextInpuField } from 'src/components/UI/TextInputField'
 
 const { ipcRenderer } = window.require('electron') as {
   ipcRenderer: IpcRenderer
@@ -442,7 +440,7 @@ export default function InstallModal({
                 </SelectField>
               )}
 
-              <TextInpuField
+              <TextInputField
                 htmlId="setinstallpath"
                 label={t('install.path', 'Select Install Path')}
                 placeholder={defaultPath}
@@ -481,7 +479,7 @@ export default function InstallModal({
 
               {hasWine && (
                 <>
-                  <TextInpuField
+                  <TextInputField
                     label={t('install.wineprefix', 'WinePrefix')}
                     htmlId="setinstallpath"
                     placeholder={winePrefix}

src/screens/Login/index.css

@@ -72,4 +72,5 @@
 
 .loginPage .languageSelector label {
   justify-self: center;
+  margin-bottom: 0.5rem;
 }

src/screens/Settings/components/AdvancedSettings/index.tsx

@@ -8,11 +8,10 @@ import classNames from 'classnames'
 import { IpcRenderer, Clipboard } from 'electron'
 import { useTranslation } from 'react-i18next'
 import React, { useEffect, useState } from 'react'
-import { SvgButton } from 'src/components/UI'
+import { SvgButton, TextInputField } from 'src/components/UI'
 import { AppSettings, Path } from 'src/types'
 import { configStore } from 'src/helpers/electronStores'
 import FolderOpenOutlinedIcon from '@mui/icons-material/FolderOpenOutlined'
-import { TextInpuField } from 'src/components/UI/TextInputField'
 
 interface ElectronProps {
   ipcRenderer: IpcRenderer
@@ -128,7 +127,7 @@ export const AdvancedSettings = ({
     <div>
       <h3 className="settingSubheader">{t('settings.navbar.advanced')}</h3>
 
-      <TextInpuField
+      <TextInputField
         htmlId="setting-alt-legendary"
         label={t(
           'setting.alt-legendary-bin',
@@ -177,7 +176,7 @@ export const AdvancedSettings = ({
         }
       />
 
-      <TextInpuField
+      <TextInputField
         label={t(
           'setting.alt-gogdl-bin',
           'Choose an Alternative GOGDL Binary to use (needs restart)'