2.0 Overhaul start

src/components/PageComponents/Config/Bluetooth.tsx

@@ -1,9 +1,11 @@
 import type React from "react";
 import { useEffect, useState } from "react";
 
-import { FormField, SelectField, Switch, TextInputField } from "evergreen-ui";
 import { Controller, useForm, useWatch } from "react-hook-form";
 
+import { Input } from "@app/components/form/Input.js";
+import { Select } from "@app/components/form/Select.js";
+import { Toggle } from "@app/components/form/Toggle.js";
 import { BluetoothValidation } from "@app/validation/config/bluetooth.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -54,43 +56,41 @@ export const Bluetooth = (): JSX.Element => {
   });
 
   return (
-    <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
-      <FormField
-        label="Bluetooth Enabled"
-        description="Description"
-        isInvalid={!!errors.enabled?.message}
-        validationMessage={errors.enabled?.message}
-      >
-        <Controller
-          name="enabled"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-
-      <SelectField
+    <Form
+      title="Bluetooth Config"
+      breadcrumbs={["Config", "Bluetooth"]}
+      reset={() => reset(config.bluetooth)}
+      loading={loading}
+      dirty={isDirty}
+      onSubmit={onSubmit}
+    >
+      <Controller
+        name="enabled"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Enabled"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
+      <Select
         label="Pairing mode"
         description="This is a description."
-        isInvalid={!!errors.mode?.message}
-        validationMessage={errors.mode?.message}
         {...register("mode", { valueAsNumber: true })}
       >
         {renderOptions(Protobuf.Config_BluetoothConfig_PairingMode)}
-      </SelectField>
+      </Select>
 
-      <TextInputField
-        display={
+      <Input
+        disabled={
           pairingMode !== Protobuf.Config_BluetoothConfig_PairingMode.FIXED_PIN
-            ? "none"
-            : "block"
         }
         label="Pin"
         description="This is a description."
         type="number"
-        isInvalid={!!errors.fixedPin?.message}
-        validationMessage={errors.fixedPin?.message}
         {...register("fixedPin", {
           valueAsNumber: true,
         })}

src/components/PageComponents/Config/Device.tsx

@@ -1,9 +1,10 @@
 import type React from "react";
 import { useEffect, useState } from "react";
 
-import { FormField, SelectField, Switch, toaster } from "evergreen-ui";
 import { Controller, useForm } from "react-hook-form";
 
+import { Select } from "@app/components/form/Select.js";
+import { Toggle } from "@app/components/form/Toggle.js";
 import { DeviceValidation } from "@app/validation/config/device.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -39,7 +40,7 @@ export const Device = (): JSX.Element => {
         },
       },
       async () => {
-        toaster.success("Successfully updated device config");
+        // toaster.success("Successfully updated device config");
         reset({ ...data });
         setLoading(false);
         await Promise.resolve();
@@ -47,58 +48,45 @@ export const Device = (): JSX.Element => {
     );
   });
   return (
-    <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
-      <SelectField
+    <Form
+      title="Device Config"
+      breadcrumbs={["Config", "Device"]}
+      reset={() => reset(config.device)}
+      loading={loading}
+      dirty={isDirty}
+      onSubmit={onSubmit}
+    >
+      <Select
         label="Role"
         description="This is a description."
-        isInvalid={!!errors.role?.message}
-        validationMessage={errors.role?.message}
         {...register("role", { valueAsNumber: true })}
       >
         {renderOptions(Protobuf.Config_DeviceConfig_Role)}
-      </SelectField>
-      <FormField
-        label="Serial Console Disabled"
-        description="Description"
-        isInvalid={!!errors.serialDisabled?.message}
-        validationMessage={errors.serialDisabled?.message}
-      >
-        <Controller
-          name="serialDisabled"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-      <FormField
-        label="Factory Reset Device"
-        description="Description"
-        isInvalid={!!errors.factoryReset?.message}
-        validationMessage={errors.factoryReset?.message}
-      >
-        <Controller
-          name="factoryReset"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-      <FormField
-        label="Enabled Debug Log"
-        description="Description"
-        isInvalid={!!errors.debugLogEnabled?.message}
-        validationMessage={errors.debugLogEnabled?.message}
-      >
-        <Controller
-          name="debugLogEnabled"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
+      </Select>
+      <Controller
+        name="serialEnabled"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Serial Output Enabled"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
+      <Controller
+        name="debugLogEnabled"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Enabled Debug Log"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
     </Form>
   );
 };

src/components/PageComponents/Config/Display.tsx

@@ -1,9 +1,11 @@
 import type React from "react";
 import { useEffect, useState } from "react";
 
-import { FormField, SelectField, Switch, TextInputField } from "evergreen-ui";
 import { Controller, useForm } from "react-hook-form";
 
+import { Input } from "@app/components/form/Input.js";
+import { Select } from "@app/components/form/Select.js";
+import { Toggle } from "@app/components/form/Toggle.js";
 import { DisplayValidation } from "@app/validation/config/display.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -46,42 +48,47 @@ export const Display = (): JSX.Element => {
     );
   });
   return (
-    <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
-      <TextInputField
+    <Form
+      title="Display Config"
+      breadcrumbs={["Config", "Display"]}
+      reset={() => reset(config.display)}
+      loading={loading}
+      dirty={isDirty}
+      onSubmit={onSubmit}
+    >
+      <Input
         label="Screen Timeout"
         description="This is a description."
-        hint="Seconds"
+        suffix="Seconds"
         type="number"
         {...register("screenOnSecs", { valueAsNumber: true })}
       />
-      <TextInputField
+      <Input
         label="Carousel Delay"
         description="This is a description."
-        hint="Seconds"
+        suffix="Seconds"
         type="number"
         {...register("autoScreenCarouselSecs", { valueAsNumber: true })}
       />
-      <SelectField
+      <Select
         label="GPS Display Units"
         description="This is a description."
         {...register("gpsFormat", { valueAsNumber: true })}
       >
         {renderOptions(Protobuf.Config_DisplayConfig_GpsCoordinateFormat)}
-      </SelectField>
-      <FormField
-        label="Compass North Top"
-        description="Description"
-        isInvalid={!!errors.compassNorthTop?.message}
-        validationMessage={errors.compassNorthTop?.message}
-      >
-        <Controller
-          name="compassNorthTop"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
+      </Select>
+      <Controller
+        name="compassNorthTop"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Compass North Top"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
     </Form>
   );
 };

src/components/PageComponents/Config/LoRa.tsx

@@ -1,9 +1,11 @@
 import type React from "react";
 import { useEffect, useState } from "react";
 
-import { FormField, SelectField, Switch, TextInputField } from "evergreen-ui";
-import { Controller, useForm } from "react-hook-form";
+import { Controller, useForm, useWatch } from "react-hook-form";
 
+import { Input } from "@app/components/form/Input.js";
+import { Select } from "@app/components/form/Select.js";
+import { Toggle } from "@app/components/form/Toggle.js";
 import { LoRaValidation } from "@app/validation/config/lora.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -14,7 +16,6 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
 export const LoRa = (): JSX.Element => {
   const { config, connection } = useDevice();
   const [loading, setLoading] = useState(false);
-  const [usePreset, setUsePreset] = useState(true);
 
   const {
     register,
@@ -27,6 +28,12 @@ export const LoRa = (): JSX.Element => {
     resolver: classValidatorResolver(LoRaValidation),
   });
 
+  const usePreset = useWatch({
+    control,
+    name: "usePreset",
+    defaultValue: true,
+  });
+
   useEffect(() => {
     reset(config.lora);
   }, [reset, config.lora]);
@@ -49,115 +56,109 @@ export const LoRa = (): JSX.Element => {
   });
 
   return (
-    <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
-      <FormField
-        label="Use Preset"
-        description="Description"
-        isInvalid={!!errors.txDisabled?.message}
-        validationMessage={errors.txDisabled?.message}
-      >
-        <Switch
-          height={24}
-          marginLeft="auto"
-          checked={usePreset}
-          onChange={(e) => setUsePreset(e.target.checked)}
-        />
-      </FormField>
-      <SelectField
-        display={usePreset ? "block" : "none"}
+    <Form
+      title="LoRa Config"
+      breadcrumbs={["Config", "LoRa"]}
+      reset={() => reset(config.lora)}
+      loading={loading}
+      dirty={isDirty}
+      onSubmit={onSubmit}
+    >
+      <Controller
+        name="usePreset"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Use Preset"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
+      <Select
         label="Preset"
         description="This is a description."
-        isInvalid={!!errors.modemPreset?.message}
-        validationMessage={errors.modemPreset?.message}
+        disabled={!usePreset}
         {...register("modemPreset", { valueAsNumber: true })}
       >
         {renderOptions(Protobuf.Config_LoRaConfig_ModemPreset)}
-      </SelectField>
+      </Select>
 
-      <TextInputField
-        display={usePreset ? "none" : "block"}
+      <Input
         label="Bandwidth"
         description="Max transmit power in dBm"
         type="number"
-        hint="MHz"
-        isInvalid={!!errors.bandwidth?.message}
-        validationMessage={errors.bandwidth?.message}
+        suffix="MHz"
+        error={errors.bandwidth?.message}
         {...register("bandwidth", {
           valueAsNumber: true,
         })}
+        disabled={usePreset}
       />
-      <TextInputField
-        display={usePreset ? "none" : "block"}
+      <Input
         label="Spread Factor"
         description="Max transmit power in dBm"
         type="number"
-        hint="CPS"
-        isInvalid={!!errors.spreadFactor?.message}
-        validationMessage={errors.spreadFactor?.message}
+        suffix="CPS"
+        error={errors.spreadFactor?.message}
         {...register("spreadFactor", {
           valueAsNumber: true,
         })}
+        disabled={usePreset}
       />
-      <TextInputField
-        display={usePreset ? "none" : "block"}
+      <Input
         label="Coding Rate"
         description="Max transmit power in dBm"
         type="number"
-        isInvalid={!!errors.codingRate?.message}
-        validationMessage={errors.codingRate?.message}
+        error={errors.codingRate?.message}
         {...register("codingRate", {
           valueAsNumber: true,
         })}
+        disabled={usePreset}
       />
-      <TextInputField
-        label="Transmit Power"
-        description="Max transmit power in dBm"
-        type="number"
-        isInvalid={!!errors.txPower?.message}
-        validationMessage={errors.txPower?.message}
-        {...register("txPower", { valueAsNumber: true })}
-      />
-      <TextInputField
-        label="Hop Limit"
-        description="This is a description."
-        hint="Hops"
-        type="number"
-        isInvalid={!!errors.hopLimit?.message}
-        validationMessage={errors.hopLimit?.message}
-        {...register("hopLimit", { valueAsNumber: true })}
-      />
-      <FormField
-        label="Transmit Disabled"
-        description="Description"
-        isInvalid={!!errors.txDisabled?.message}
-        validationMessage={errors.txDisabled?.message}
-      >
-        <Controller
-          name="txDisabled"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-      <TextInputField
+      <Input
         label="Frequency Offset"
         description="This is a description."
-        hint="Hz"
+        suffix="Hz"
         type="number"
-        isInvalid={!!errors.frequencyOffset?.message}
-        validationMessage={errors.frequencyOffset?.message}
+        error={errors.frequencyOffset?.message}
         {...register("frequencyOffset", { valueAsNumber: true })}
       />
-      <SelectField
+      <Select
         label="Region"
         description="This is a description."
-        isInvalid={!!errors.region?.message}
-        validationMessage={errors.region?.message}
         {...register("region", { valueAsNumber: true })}
       >
         {renderOptions(Protobuf.Config_LoRaConfig_RegionCode)}
-      </SelectField>
+      </Select>
+      <Input
+        label="Hop Limit"
+        description="This is a description."
+        suffix="Hops"
+        type="number"
+        error={errors.hopLimit?.message}
+        {...register("hopLimit", { valueAsNumber: true })}
+      />
+      <Controller
+        name="txEnabled"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Transmit Enabled"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
+      <Input
+        label="Transmit Power"
+        description="Max transmit power in dBm"
+        type="number"
+        error={errors.txPower?.message}
+        {...register("txPower", { valueAsNumber: true })}
+      />
     </Form>
   );
 };

src/components/PageComponents/Config/Network.tsx

@@ -1,15 +1,11 @@
 import type React from "react";
 import { useEffect, useState } from "react";
 
-import {
-  FormField,
-  SelectField,
-  Switch,
-  TextInputField,
-  toaster,
-} from "evergreen-ui";
 import { Controller, useForm, useWatch } from "react-hook-form";
 
+import { Input } from "@app/components/form/Input.js";
+import { Select } from "@app/components/form/Select.js";
+import { Toggle } from "@app/components/form/Toggle.js";
 import { renderOptions } from "@app/core/utils/selectEnumOptions.js";
 import { NetworkValidation } from "@app/validation/config/network.js";
 import { Form } from "@components/form/Form";
@@ -51,7 +47,7 @@ export const Network = (): JSX.Element => {
         },
       },
       async () => {
-        toaster.success("Successfully updated Network config");
+        // toaster.success("Successfully updated Network config");
         reset({ ...data });
         setLoading(false);
         await Promise.resolve();
@@ -59,48 +55,53 @@ export const Network = (): JSX.Element => {
     );
   });
   return (
-    <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
-      <FormField
-        label="WiFi Enabled"
-        description="Description"
-        isInvalid={!!errors.wifiEnabled?.message}
-        validationMessage={errors.wifiEnabled?.message}
-      >
-        <Controller
-          name="wifiEnabled"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-      <SelectField
+    <Form
+      title="Network Config"
+      breadcrumbs={["Config", "Network"]}
+      reset={() => reset(config.network)}
+      loading={loading}
+      dirty={isDirty}
+      onSubmit={onSubmit}
+    >
+      <Controller
+        name="wifiEnabled"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="WiFi Enabled"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
+      <Select
         label="WiFi Mode"
         description="This is a description."
+        disabled={!wifiEnabled}
         {...register("wifiMode", { valueAsNumber: true })}
       >
         {renderOptions(Protobuf.Config_NetworkConfig_WiFiMode)}
-      </SelectField>
-      <TextInputField
+      </Select>
+      <Input
         label="SSID"
         description="This is a description."
-        isInvalid={!!errors.wifiSsid?.message}
-        validationMessage={errors.wifiSsid?.message}
+        error={errors.wifiSsid?.message}
+        disabled={!wifiEnabled}
         {...register("wifiSsid")}
       />
-      <TextInputField
+      <Input
         label="PSK"
         type="password"
         description="This is a description."
-        isInvalid={!!errors.wifiPsk?.message}
-        validationMessage={errors.wifiPsk?.message}
+        error={errors.wifiPsk?.message}
+        disabled={!wifiEnabled}
         {...register("wifiPsk")}
       />
-      <TextInputField
+      <Input
         label="NTP Server"
         description="This is a description."
-        isInvalid={!!errors.ntpServer?.message}
-        validationMessage={errors.ntpServer?.message}
+        error={errors.ntpServer?.message}
         {...register("ntpServer")}
       />
     </Form>

src/components/PageComponents/Config/Position.tsx

@@ -1,21 +1,14 @@
 import type React from "react";
 import { useEffect, useState } from "react";
 
-import {
-  Button,
-  FormField,
-  SelectMenu,
-  Switch,
-  TextInputField,
-} from "evergreen-ui";
 import { Controller, useForm } from "react-hook-form";
 
+import { Input } from "@app/components/form/Input.js";
+import { Toggle } from "@app/components/form/Toggle.js";
 import { PositionValidation } from "@app/validation/config/position.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
-import { bitwiseDecode } from "@core/utils/bitwise";
 import { classValidatorResolver } from "@hookform/resolvers/class-validator";
-import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export const Position = (): JSX.Element => {
   const { config, connection } = useDevice();
@@ -29,15 +22,6 @@ export const Position = (): JSX.Element => {
   } = useForm<PositionValidation>({
     defaultValues: config.position,
     resolver: classValidatorResolver(PositionValidation),
-    // defaultValues: {
-    //   ...preferences,
-    //   positionBroadcastSecs:
-    //     preferences.positionBroadcastSecs === 0
-    //       ? preferences.role === Protobuf.Role.Router
-    //         ? 43200
-    //         : 900
-    //       : preferences.positionBroadcastSecs,
-    // },
   });
 
   useEffect(() => {
@@ -62,76 +46,74 @@ export const Position = (): JSX.Element => {
   });
 
   return (
-    <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
-      <TextInputField
-        hint="Seconds"
+    <Form
+      title="Position Config"
+      breadcrumbs={["Config", "Position"]}
+      reset={() => reset(config.position)}
+      loading={loading}
+      dirty={isDirty}
+      onSubmit={onSubmit}
+    >
+      <Input
+        suffix="Seconds"
         label="Broadcast Interval"
         description="This is a description."
         type="number"
-        isInvalid={!!errors.positionBroadcastSecs?.message}
-        validationMessage={errors.positionBroadcastSecs?.message}
+        error={errors.positionBroadcastSecs?.message}
         {...register("positionBroadcastSecs", { valueAsNumber: true })}
       />
-      <FormField
-        label="Disable Smart Position"
-        description="Description"
-        isInvalid={!!errors.positionBroadcastSmartDisabled?.message}
-        validationMessage={errors.positionBroadcastSmartDisabled?.message}
-      >
-        <Controller
-          name="positionBroadcastSmartDisabled"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-      <FormField
-        label="Use Fixed Position"
-        description="Description"
-        isInvalid={!!errors.fixedPosition?.message}
-        validationMessage={errors.fixedPosition?.message}
-      >
-        <Controller
-          name="fixedPosition"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-      <FormField
-        label="Disable GPS"
-        description="Description"
-        isInvalid={!!errors.gpsDisabled?.message}
-        validationMessage={errors.gpsDisabled?.message}
-      >
-        <Controller
-          name="gpsDisabled"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-      <TextInputField
-        hint="Seconds"
+      <Controller
+        name="positionBroadcastSmartEnabled"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Enable Smart Position"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
+      <Controller
+        name="fixedPosition"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Use Fixed Position"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
+      <Controller
+        name="gpsEnabled"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="GPS Enabled"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
+      <Input
+        suffix="Seconds"
         label="GPS Update Interval"
         description="This is a description."
         type="number"
-        isInvalid={!!errors.gpsUpdateInterval?.message}
-        validationMessage={errors.gpsUpdateInterval?.message}
+        error={errors.gpsUpdateInterval?.message}
         {...register("gpsUpdateInterval", { valueAsNumber: true })}
       />
-      <TextInputField
+      <Input
         label="Last GPS Attempt"
         description="This is a description."
         type="number"
-        isInvalid={!!errors.gpsAttemptTime?.message}
-        validationMessage={errors.gpsAttemptTime?.message}
+        error={errors.gpsAttemptTime?.message}
         {...register("gpsAttemptTime", { valueAsNumber: true })}
       />
-      <Controller
+      {/* <Controller
         name="positionFlags"
         control={control}
         render={({ field, fieldState }): JSX.Element => {
@@ -218,7 +200,7 @@ export const Position = (): JSX.Element => {
             </FormField>
           );
         }}
-      />
+      /> */}
     </Form>
   );
 };

src/components/PageComponents/Config/Power.tsx

@@ -1,9 +1,10 @@
 import type React from "react";
 import { useEffect, useState } from "react";
 
-import { FormField, Switch, TextInputField } from "evergreen-ui";
 import { Controller, useForm } from "react-hook-form";
 
+import { Input } from "@app/components/form/Input.js";
+import { Toggle } from "@app/components/form/Toggle.js";
 import { PowerValidation } from "@app/validation/config/power.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -44,81 +45,79 @@ export const Power = (): JSX.Element => {
     );
   });
   return (
-    <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
-      <TextInputField
+    <Form
+      title="Power Config"
+      breadcrumbs={["Config", "Power"]}
+      reset={() => reset(config.power)}
+      loading={loading}
+      dirty={isDirty}
+      onSubmit={onSubmit}
+    >
+      <Input
         label="Shutdown on battery delay"
         description="This is a description."
-        hint="Seconds"
+        suffix="Seconds"
         type="number"
-        isInvalid={!!errors.onBatteryShutdownAfterSecs?.message}
-        validationMessage={errors.onBatteryShutdownAfterSecs?.message}
+        error={errors.onBatteryShutdownAfterSecs?.message}
         {...register("onBatteryShutdownAfterSecs", { valueAsNumber: true })}
       />
-      <FormField
-        label="Power Saving"
-        description="Description"
-        isInvalid={!!errors.isPowerSaving?.message}
-        validationMessage={errors.isPowerSaving?.message}
-      >
-        <Controller
-          name="isPowerSaving"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-      <TextInputField
+      <Controller
+        name="isPowerSaving"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Power Saving"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
+      <Input
         label="ADC Multiplier Override ratio"
         description="This is a description."
         type="number"
-        isInvalid={!!errors.adcMultiplierOverride?.message}
-        validationMessage={errors.adcMultiplierOverride?.message}
+        error={errors.adcMultiplierOverride?.message}
         {...register("adcMultiplierOverride", { valueAsNumber: true })}
       />
-      <TextInputField
+      <Input
         label="Minimum Wake Time"
         description="This is a description."
-        hint="Seconds"
+        suffix="Seconds"
         type="number"
-        isInvalid={!!errors.minWakeSecs?.message}
-        validationMessage={errors.minWakeSecs?.message}
+        error={errors.minWakeSecs?.message}
         {...register("minWakeSecs", { valueAsNumber: true })}
       />
-      <TextInputField
+      <Input
         label="Mesh SDS Timeout"
         description="This is a description."
-        hint="Seconds"
+        suffix="Seconds"
         type="number"
-        isInvalid={!!errors.meshSdsTimeoutSecs?.message}
-        validationMessage={errors.meshSdsTimeoutSecs?.message}
+        error={errors.meshSdsTimeoutSecs?.message}
         {...register("meshSdsTimeoutSecs", { valueAsNumber: true })}
       />
-      <TextInputField
+      <Input
         label="SDS"
         description="This is a description."
-        hint="Seconds"
+        suffix="Seconds"
         type="number"
-        isInvalid={!!errors.sdsSecs?.message}
-        validationMessage={errors.sdsSecs?.message}
+        error={errors.sdsSecs?.message}
         {...register("sdsSecs", { valueAsNumber: true })}
       />
-      <TextInputField
+      <Input
         label="LS"
         description="This is a description."
-        hint="Seconds"
+        suffix="Seconds"
         type="number"
-        isInvalid={!!errors.lsSecs?.message}
-        validationMessage={errors.lsSecs?.message}
+        error={errors.lsSecs?.message}
         {...register("lsSecs", { valueAsNumber: true })}
       />
-      <TextInputField
+      <Input
         label="Wait Bluetooth"
         description="This is a description."
-        hint="Seconds"
+        suffix="Seconds"
         type="number"
-        isInvalid={!!errors.waitBluetoothSecs?.message}
-        validationMessage={errors.waitBluetoothSecs?.message}
+        error={errors.waitBluetoothSecs?.message}
         {...register("waitBluetoothSecs", { valueAsNumber: true })}
       />
     </Form>

src/components/PageComponents/Config/User.tsx

@@ -1,10 +1,12 @@
 import type React from "react";
 import { useEffect, useState } from "react";
 
-import { FormField, SelectField, Switch, TextInputField } from "evergreen-ui";
 import { Controller, useForm } from "react-hook-form";
 import { base16 } from "rfc4648";
 
+import { Input } from "@app/components/form/Input.js";
+import { Select } from "@app/components/form/Select.js";
+import { Toggle } from "@app/components/form/Toggle.js";
 import { UserValidation } from "@app/validation/config/user.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -50,27 +52,39 @@ export const User = (): JSX.Element => {
   });
 
   return (
-    <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
-      <TextInputField
+    <Form
+      title="User Config"
+      breadcrumbs={["Config", "User"]}
+      reset={() => {
+        reset({
+          longName: myNode?.data.user?.longName,
+          shortName: myNode?.data.user?.shortName,
+          isLicensed: myNode?.data.user?.isLicensed,
+        });
+      }}
+      loading={loading}
+      dirty={isDirty}
+      onSubmit={onSubmit}
+    >
+      <Input
         label="Device ID"
         description="Preset unique identifier for this device."
-        isInvalid={!!errors.id?.message}
-        validationMessage={errors.id?.message}
+        error={errors.id?.message}
         {...register("id")}
         readOnly
       />
-      <TextInputField
+      <Input
         label="Device Name"
         description="Personalised name for this device."
         {...register("longName")}
       />
-      <TextInputField
+      <Input
         label="Short Name"
         description="This is a description."
         maxLength={3}
         {...register("shortName")}
       />
-      <TextInputField
+      <Input
         label="Mac Address"
         description="This is a description."
         disabled
@@ -81,28 +95,26 @@ export const User = (): JSX.Element => {
             ?.join(":") ?? ""
         }
       />
-      <SelectField
+      <Select
         label="Hardware"
         description="This is a description."
         disabled
         value={myNode?.data.user?.hwModel}
       >
         {renderOptions(Protobuf.HardwareModel)}
-      </SelectField>
-      <FormField
-        label="Licenced Operator?"
-        description="Description"
-        isInvalid={!!errors.isLicensed?.message}
-        validationMessage={errors.isLicensed?.message}
-      >
-        <Controller
-          name="isLicensed"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
+      </Select>
+      <Controller
+        name="isLicensed"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Licenced Operator?"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
     </Form>
   );
 };