From 12da8f9b67aeef309b36ae92201c26a557e43470 Mon Sep 17 00:00:00 2001
From: pswid <78219494+pswid@users.noreply.github.com>
Date: Wed, 22 Mar 2023 13:31:53 +0100
Subject: [PATCH] improve view of app and mqtt settings pages

The appearance of the configuration pages has been unified. Additionally on very narrow screens (e.g. smartphones) only one parameter per row is displayed (on wider screens up to three per row).
---
 .../src/framework/mqtt/MqttSettingsForm.tsx   | 127 ++++++++----------
 interface/src/project/SettingsApplication.tsx |  59 ++++----
 2 files changed, 87 insertions(+), 99 deletions(-)

diff --git a/interface/src/framework/mqtt/MqttSettingsForm.tsx b/interface/src/framework/mqtt/MqttSettingsForm.tsx
index 00d4920c5..c74060e3d 100644
--- a/interface/src/framework/mqtt/MqttSettingsForm.tsx
+++ b/interface/src/framework/mqtt/MqttSettingsForm.tsx
@@ -57,7 +57,7 @@ const MqttSettingsForm: FC = () => {
           label={LL.ENABLE_MQTT()}
         />
         <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
-          <Grid item xs={6}>
+          <Grid item xs={12} sm={6}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="host"
@@ -69,7 +69,7 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={6}>
+          <Grid item xs={12} sm={6}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="port"
@@ -82,9 +82,7 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-        </Grid>
-        <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
-          <Grid item xs={6}>
+          <Grid item xs={12} sm={6}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="base"
@@ -96,7 +94,7 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={6}>
+          <Grid item xs={12} sm={6}>
             <ValidatedTextField
               name="client_id"
               label={LL.ID_OF(LL.CLIENT()) + ' (' + LL.OPTIONAL() + ')'}
@@ -107,9 +105,7 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-        </Grid>
-        <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
-          <Grid item xs={6}>
+          <Grid item xs={12} sm={6}>
             <ValidatedTextField
               name="username"
               label={LL.USERNAME(0)}
@@ -120,7 +116,7 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={6}>
+          <Grid item xs={12} sm={6}>
             <ValidatedPasswordField
               name="password"
               label={LL.PASSWORD()}
@@ -131,9 +127,7 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-        </Grid>
-        <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
-          <Grid item xs={6}>
+          <Grid item xs={12} sm={6}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="keep_alive"
@@ -149,7 +143,7 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={6}>
+          <Grid item xs={12} sm={6}>
             <ValidatedTextField
               name="mqtt_qos"
               label="QoS"
@@ -196,7 +190,7 @@ const MqttSettingsForm: FC = () => {
           label={LL.MQTT_RESPONSE()}
         />
         {!data.ha_enabled && (
-          <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
+          <Grid container rowSpacing={-1} spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
             <Grid item>
               <BlockFormControlLabel
                 control={<Checkbox name="publish_single" checked={data.publish_single} onChange={updateFormValue} />}
@@ -219,58 +213,55 @@ const MqttSettingsForm: FC = () => {
           <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
             <Grid item>
               <BlockFormControlLabel
-                sx={{ pb: 1 }}
                 control={<Checkbox name="ha_enabled" checked={data.ha_enabled} onChange={updateFormValue} />}
                 label={LL.MQTT_PUBLISH_TEXT_3()}
               />
             </Grid>
             {data.ha_enabled && (
-              <>
-                <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
-                  <Grid item>
-                    <ValidatedTextField
-                      name="discovery_type"
-                      label={LL.MQTT_PUBLISH_TEXT_5()}
-                      value={data.discovery_type}
-                      fullWidth
-                      variant="outlined"
-                      onChange={updateFormValue}
-                      margin="normal"
-                      select
-                    >
-                      <MenuItem value={0}>Home Assistant</MenuItem>
-                      <MenuItem value={1}>Domoticz</MenuItem>
-                    </ValidatedTextField>
-                  </Grid>
-                  <Grid item>
-                    <ValidatedTextField
-                      name="discovery_prefix"
-                      label={LL.MQTT_PUBLISH_TEXT_4()}
-                      fullWidth
-                      variant="outlined"
-                      value={data.discovery_prefix}
-                      onChange={updateFormValue}
-                      margin="normal"
-                    />
-                  </Grid>
-                  <Grid item>
-                    <ValidatedTextField
-                      name="entity_format"
-                      label={LL.MQTT_ENTITY_FORMAT()}
-                      value={data.entity_format}
-                      fullWidth
-                      variant="outlined"
-                      onChange={updateFormValue}
-                      margin="normal"
-                      select
-                    >
-                      <MenuItem value={0}>{LL.MQTT_ENTITY_FORMAT_0()}</MenuItem>
-                      <MenuItem value={1}>{LL.MQTT_ENTITY_FORMAT_1()}</MenuItem>
-                      <MenuItem value={2}>{LL.MQTT_ENTITY_FORMAT_2()}</MenuItem>
-                    </ValidatedTextField>
-                  </Grid>
+              <Grid container sx={{ pl: 1 }} spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
+                <Grid item xs={12} sm={6} md={4}>
+                  <ValidatedTextField
+                    name="discovery_type"
+                    label={LL.MQTT_PUBLISH_TEXT_5()}
+                    value={data.discovery_type}
+                    fullWidth
+                    variant="outlined"
+                    onChange={updateFormValue}
+                    margin="normal"
+                    select
+                  >
+                    <MenuItem value={0}>Home Assistant</MenuItem>
+                    <MenuItem value={1}>Domoticz</MenuItem>
+                  </ValidatedTextField>
                 </Grid>
-              </>
+                <Grid item xs={12} sm={6} md={4}>
+                  <ValidatedTextField
+                    name="discovery_prefix"
+                    label={LL.MQTT_PUBLISH_TEXT_4()}
+                    fullWidth
+                    variant="outlined"
+                    value={data.discovery_prefix}
+                    onChange={updateFormValue}
+                    margin="normal"
+                  />
+                </Grid>
+                <Grid item xs={12} sm={6} md={4}>
+                  <ValidatedTextField
+                    name="entity_format"
+                    label={LL.MQTT_ENTITY_FORMAT()}
+                    value={data.entity_format}
+                    fullWidth
+                    variant="outlined"
+                    onChange={updateFormValue}
+                    margin="normal"
+                    select
+                  >
+                    <MenuItem value={0}>{LL.MQTT_ENTITY_FORMAT_0()}</MenuItem>
+                    <MenuItem value={1}>{LL.MQTT_ENTITY_FORMAT_1()}</MenuItem>
+                    <MenuItem value={2}>{LL.MQTT_ENTITY_FORMAT_2()}</MenuItem>
+                  </ValidatedTextField>
+                </Grid>
+              </Grid>
             )}
           </Grid>
         )}
@@ -278,7 +269,7 @@ const MqttSettingsForm: FC = () => {
           {LL.MQTT_PUBLISH_INTERVALS()}&nbsp;(0=auto)
         </Typography>
         <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
-          <Grid item xs={6} sm={4}>
+          <Grid item xs={12} sm={6} md={4}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="publish_time_heartbeat"
@@ -294,7 +285,7 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={6} sm={4}>
+          <Grid item xs={12} sm={6} md={4}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="publish_time_boiler"
@@ -310,7 +301,7 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={6} sm={4}>
+          <Grid item xs={12} sm={6} md={4}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="publish_time_thermostat"
@@ -326,7 +317,7 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={6} sm={4}>
+          <Grid item xs={12} sm={6} md={4}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="publish_time_solar"
@@ -342,7 +333,7 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={6} sm={4}>
+          <Grid item xs={12} sm={6} md={4}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="publish_time_mixer"
@@ -358,7 +349,7 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={6} sm={4}>
+          <Grid item xs={12} sm={6} md={4}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="publish_time_sensor"
@@ -374,7 +365,7 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={6} sm={4}>
+          <Grid item xs={12} sm={6} md={4}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="publish_time_other"
diff --git a/interface/src/project/SettingsApplication.tsx b/interface/src/project/SettingsApplication.tsx
index b62289a8f..ec21fd447 100644
--- a/interface/src/project/SettingsApplication.tsx
+++ b/interface/src/project/SettingsApplication.tsx
@@ -162,7 +162,7 @@ const SettingsApplication: FC = () => {
               justifyContent="flex-start"
               alignItems="flex-start"
             >
-              <Grid item xs={6} sm={4}>
+              <Grid item xs={12} sm={6} md={4}>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
                   name="rx_gpio"
@@ -176,7 +176,7 @@ const SettingsApplication: FC = () => {
                   disabled={saving}
                 />
               </Grid>
-              <Grid item xs={6} sm={4}>
+              <Grid item xs={12} sm={6} md={4}>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
                   name="tx_gpio"
@@ -190,7 +190,7 @@ const SettingsApplication: FC = () => {
                   disabled={saving}
                 />
               </Grid>
-              <Grid item xs={6} sm={4}>
+              <Grid item xs={12} sm={6} md={4}>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
                   name="pbutton_gpio"
@@ -204,7 +204,7 @@ const SettingsApplication: FC = () => {
                   disabled={saving}
                 />
               </Grid>
-              <Grid item xs={6} sm={4}>
+              <Grid item xs={12} sm={6} md={4}>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
                   name="dallas_gpio"
@@ -218,7 +218,7 @@ const SettingsApplication: FC = () => {
                   disabled={saving}
                 />
               </Grid>
-              <Grid item xs={6} sm={4}>
+              <Grid item xs={12} sm={6} md={4}>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
                   name="led_gpio"
@@ -232,7 +232,7 @@ const SettingsApplication: FC = () => {
                   disabled={saving}
                 />
               </Grid>
-              <Grid item xs={6} sm={4}>
+              <Grid item xs={12} sm={6} md={4}>
                 <ValidatedTextField
                   name="phy_type"
                   label={LL.PHY_TYPE()}
@@ -259,7 +259,7 @@ const SettingsApplication: FC = () => {
                 justifyContent="flex-start"
                 alignItems="flex-start"
               >
-                <Grid item xs={6} sm={4}>
+                <Grid item xs={12} sm={6} md={4}>
                   <ValidatedTextField
                     name="eth_power"
                     label={LL.GPIO_OF('PHY Power') + ' (-1=' + LL.DISABLED(1) + ')'}
@@ -272,7 +272,7 @@ const SettingsApplication: FC = () => {
                     disabled={saving}
                   />
                 </Grid>
-                <Grid item xs={6} sm={4}>
+                <Grid item xs={12} sm={6} md={4}>
                   <ValidatedTextField
                     name="eth_phy_addr"
                     label={LL.ADDRESS_OF('PHY I²C')}
@@ -285,7 +285,7 @@ const SettingsApplication: FC = () => {
                     disabled={saving}
                   />
                 </Grid>
-                <Grid item xs={6} sm={4}>
+                <Grid item xs={12} sm={6} md={4}>
                   <ValidatedTextField
                     name="eth_clock_mode"
                     label="PHY Clk"
@@ -311,7 +311,7 @@ const SettingsApplication: FC = () => {
           {LL.SETTINGS_OF(LL.EMS_BUS(0))}
         </Typography>
         <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
-          <Grid item xs={6}>
+          <Grid item xs={12} sm={6}>
             <ValidatedTextField
               name="tx_mode"
               label={LL.TX_MODE()}
@@ -329,7 +329,7 @@ const SettingsApplication: FC = () => {
               <MenuItem value={4}>{LL.HARDWARE()}</MenuItem>
             </ValidatedTextField>
           </Grid>
-          <Grid item xs={6}>
+          <Grid item xs={12} sm={6}>
             <ValidatedTextField
               name="ems_bus_id"
               label={LL.ID_OF(LL.EMS_BUS(1))}
@@ -358,20 +358,16 @@ const SettingsApplication: FC = () => {
         <Typography sx={{ pt: 2 }} variant="h6" color="primary">
           {LL.GENERAL_OPTIONS()}
         </Typography>
-        <Box
-          sx={{
-            '& .MuiTextField-root': { width: '25ch' }
-          }}
-        >
+        <Grid item>
           <ValidatedTextField
             name="locale"
             label={LL.LANGUAGE_ENTITIES()}
             disabled={saving}
             value={data.locale}
+            fullWidth
             variant="outlined"
             onChange={updateFormValue}
             margin="normal"
-            size="small"
             select
           >
             <MenuItem value="en">English (EN)</MenuItem>
@@ -384,7 +380,7 @@ const SettingsApplication: FC = () => {
             <MenuItem value="sv">Svenska (SV)</MenuItem>
             <MenuItem value="tr">Türk (TR)</MenuItem>
           </ValidatedTextField>
-        </Box>
+        </Grid>
         {data.led_gpio !== 0 && (
           <BlockFormControlLabel
             control={<Checkbox checked={data.hide_led} onChange={updateFormValue} name="hide_led" />}
@@ -429,14 +425,15 @@ const SettingsApplication: FC = () => {
             disabled={saving}
           />
           <BlockFormControlLabel
-            sx={{ pb: 2 }}
             control={<Checkbox checked={data.shower_alert} onChange={updateFormValue} name="shower_alert" />}
             label={LL.ENABLE_SHOWER_ALERT()}
             disabled={!data.shower_timer}
           />
+          </Grid>
+          <Grid container sx={{ pt: 2 }} rowSpacing={3} spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
           {data.shower_alert && (
             <>
-              <Grid item sx={{ pr: 1, pb: 2 }}>
+              <Grid item xs={12} sm={6}>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
                   name="shower_alert_trigger"
@@ -446,13 +443,13 @@ const SettingsApplication: FC = () => {
                   }}
                   variant="outlined"
                   value={numberValue(data.shower_alert_trigger)}
+                  fullWidth
                   type="number"
                   onChange={updateFormValue}
-                  size="small"
                   disabled={!data.shower_timer}
                 />
               </Grid>
-              <Grid item sx={{ pb: 3 }}>
+              <Grid item xs={12} sm={6}>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
                   name="shower_alert_coldshot"
@@ -462,20 +459,20 @@ const SettingsApplication: FC = () => {
                   }}
                   variant="outlined"
                   value={numberValue(data.shower_alert_coldshot)}
+                  fullWidth
                   type="number"
                   onChange={updateFormValue}
-                  size="small"
                   disabled={!data.shower_timer}
                 />
               </Grid>
             </>
           )}
         </Grid>
-        <Typography variant="h6" color="primary">
+        <Typography sx={{ pt: 3 }} variant="h6" color="primary">
           {LL.FORMATTING_OPTIONS()}
         </Typography>
         <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
-          <Grid item xs={6} sm={4}>
+          <Grid item xs={12} sm={6} md={4}>
             <ValidatedTextField
               name="bool_dashboard"
               label={LL.BOOLEAN_FORMAT_DASHBOARD()}
@@ -492,7 +489,7 @@ const SettingsApplication: FC = () => {
               <MenuItem value={5}>1/0</MenuItem>
             </ValidatedTextField>
           </Grid>
-          <Grid item xs={6} sm={4}>
+          <Grid item xs={12} sm={6} md={4}>
             <ValidatedTextField
               name="bool_format"
               label={LL.BOOLEAN_FORMAT_API()}
@@ -511,7 +508,7 @@ const SettingsApplication: FC = () => {
               <MenuItem value={6}>1/0</MenuItem>
             </ValidatedTextField>
           </Grid>
-          <Grid item xs={6} sm={4}>
+          <Grid item xs={12} sm={6} md={4}>
             <ValidatedTextField
               name="enum_format"
               label={LL.ENUM_FORMAT()}
@@ -560,7 +557,7 @@ const SettingsApplication: FC = () => {
         />
         {data.syslog_enabled && (
           <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
-            <Grid item xs={4}>
+            <Grid item xs={12} sm={6}>
               <ValidatedTextField
                 fieldErrors={fieldErrors}
                 name="syslog_host"
@@ -573,7 +570,7 @@ const SettingsApplication: FC = () => {
                 disabled={saving}
               />
             </Grid>
-            <Grid item xs={4}>
+            <Grid item xs={12} sm={6}>
               <ValidatedTextField
                 fieldErrors={fieldErrors}
                 name="syslog_port"
@@ -587,7 +584,7 @@ const SettingsApplication: FC = () => {
                 disabled={saving}
               />
             </Grid>
-            <Grid item xs={4}>
+            <Grid item xs={12} sm={6}>
               <ValidatedTextField
                 name="syslog_level"
                 label={LL.LOG_LEVEL()}
@@ -607,7 +604,7 @@ const SettingsApplication: FC = () => {
                 <MenuItem value={9}>ALL</MenuItem>
               </ValidatedTextField>
             </Grid>
-            <Grid item xs={4}>
+            <Grid item xs={12} sm={6}>
               <ValidatedTextField
                 fieldErrors={fieldErrors}
                 name="syslog_mark_interval"