fix: settings page layout (4-way joystick toggle, profile number) (#518)

fix: FIX: settings page layout (4-way joystick toggle, profile number) Changed number input to dropdown and added containers for toggle
OpenStickCommunity · Sep 15, 2023 · 7a5b5b3 · 7a5b5b3
1 parent e471ff6
commit 7a5b5b3
Showing 1 changed file with 29 additions and 23 deletions.
diff --git a/www/src/Pages/SettingsPage.jsx b/www/src/Pages/SettingsPage.jsx
@@ -397,35 +397,41 @@ export default function SettingsPage() {
 										</Form.Control.Feedback>
 									</div>
 								</Form.Group>
-								<Form.Check
-									label={t('SettingsPage:4-way-joystick-mode-label')}
-									type="switch"
-									id="fourWayMode"
-									isInvalid={false}
-									checked={Boolean(values.fourWayMode)}
-									onChange={(e) => {
-										setFieldValue('fourWayMode', e.target.checked ? 1 : 0);
-									}}
-								/>
+								<div className="row mb-3">
+									<div className="col-sm-3">
+										<Form.Check
+											label={t('SettingsPage:4-way-joystick-mode-label')}
+											type="switch"
+											id="fourWayMode"
+											isInvalid={false}
+											checked={Boolean(values.fourWayMode)}
+											onChange={(e) => {
+												setFieldValue('fourWayMode', e.target.checked ? 1 : 0);
+											}}
+										/>
+									</div>
+								</div>
 								<Form.Group className="row mb-3">
 									<Form.Label>
 										{t('SettingsPage:profile-number-label')}
 									</Form.Label>
 									<div className="col-sm-3">
-										<Form.Control
-											type="number"
-											className="row mb-3"
+										<Form.Select
+											name="profileNumber"
+											className="form-select-sm"
 											value={values.profileNumber}
-											min={1}
-											max={4}
-											isInvalid={false}
-											onChange={(e) => {
-												setFieldValue(
-													'profileNumber',
-													parseInt(e.target.value),
-												);
-											}}
-										></Form.Control>
+											onChange={handleChange}
+											isInvalid={errors.profileNumber}
+										>
+											{[1, 2, 3, 4].map((i) => (
+												<option
+													key={`button-profileNumber-option-${i}`}
+													value={i}
+												>
+													{i}
+												</option>
+											))}
+										</Form.Select>
 									</div>
 								</Form.Group>
 							</Section>