better settings menu

src/game/settings/auto-dust.tsx

@@ -3,6 +3,7 @@ import React, { useState } from "react";
 import Grid from "@mui/material/Grid";
 import TextField from "@mui/material/TextField";
 import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
 
 import { useHero } from "src/hooks/use-hero";
 import { useChangeAutoDustMutation, Hero } from "src/generated/graphql";
@@ -30,17 +31,26 @@ export function AutoDustSetting({ hero }: { hero: Hero }): JSX.Element {
 
   return (
     <React.Fragment>
-      <Grid item xs={2}>
-        Auto dust equipment at or below this level:
-      </Grid>
-      <Grid item xs={2}>
-        <TextField
-          value={autoDust}
-          onChange={(e) => handleValueChange(e.target.value)}
-        />
-      </Grid>
-      <Grid item xs={2}>
-        <Button onClick={handleChangeAutoDust}>Save</Button>
+      <Grid container columns={6}>
+        <Grid item xs={6}>
+          <Typography variant="h5">Autodust</Typography>
+        </Grid>
+        <Grid item xs={6}>
+          <Typography variant="subtitle2">
+            Automatically destroy enchanted items as they drop off monsters if
+            they are at or below the following level.
+          </Typography>
+        </Grid>
+        <Grid item xs={6}>
+          <TextField
+            label="Gear Level"
+            value={autoDust}
+            onChange={(e) => handleValueChange(e.target.value)}
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <Button onClick={handleChangeAutoDust}>Save</Button>
+        </Grid>
       </Grid>
     </React.Fragment>
   );

src/game/settings/index.tsx

@@ -31,7 +31,7 @@ function MaximumStatField({
     | "luck";
 }): JSX.Element {
   const [statValue, setStatValue] = useState<number>(
-    hero.settings.minimumStats[stat] ?? 10
+    hero.settings.minimumStats[stat] ?? 10,
   );
   const [changeMinimumStatMutation] = useChangeMinimumStatMutation();
 
@@ -55,17 +55,19 @@ function MaximumStatField({
 
   return (
     <React.Fragment>
-      <Grid item xs={2}>
+      <Grid item md={1} xs={2}>
         {`${stat.substr(0, 1).toUpperCase()}${stat.substr(1)}`}:
       </Grid>
-      <Grid item xs={2}>
+      <Grid item xs={1} sm={2}>
         <TextField
+          fullWidth
+          label={`Minimum ${stat}`}
           value={statValue}
           onChange={(e) => handleValueChange(e.target.value)}
         />
       </Grid>
-      <Grid item xs={2}>
-        <Button onClick={handleChangeMinimumStat}>Save</Button>
+      <Grid item md={3} sm={2} xs={3}>
+        <Button onClick={handleChangeMinimumStat}>Set minimum {stat}</Button>
       </Grid>
     </React.Fragment>
   );
@@ -89,7 +91,7 @@ export function Settings(): JSX.Element {
       <Typography variant="subtitle2">
         Prevents transfering from lowering your stats below these values...
       </Typography>
-      <Grid container columns={6}>
+      <Grid container columns={6} spacing={2}>
         <MaximumStatField hero={hero} stat="strength" />
         <MaximumStatField hero={hero} stat="dexterity" />
         <MaximumStatField hero={hero} stat="constitution" />