feat: updated the settings page to be a bit more consistent with the rest of the design (#208)

src/pages/settings/index.tsx

@@ -1,8 +1,19 @@
 import { ReactElement, useState, useContext } from 'react'
-import { Paper, TextField, Typography, Button } from '@material-ui/core'
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'
+import { TextField, Typography, Button } from '@material-ui/core'
 import { Context as SettingsContext } from '../../providers/Settings'
 
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    item: {
+      margin: 0,
+      marginTop: theme.spacing(4),
+    },
+  }),
+)
+
 export default function Settings(): ReactElement {
+  const classes = useStyles()
   const { apiUrl, apiDebugUrl, setApiUrl, setDebugApiUrl } = useContext(SettingsContext)
   const [host, setHost] = useState(apiUrl)
   const [debugHost, setDebugHost] = useState(apiDebugUrl)
@@ -20,49 +31,39 @@ export default function Settings(): ReactElement {
       <Typography variant="h4" gutterBottom>
         Settings
       </Typography>
-      <Paper>
+      <TextField
-        <TextField
+        label="API Endpoint"
-          label="API Endpoint"
+        className={classes.item}
-          style={{ margin: 0 }}
+        placeholder="ex: 127.0.0.0.1:1633"
-          placeholder="ex: 127.0.0.0.1:1633"
+        fullWidth
-          helperText="Enter node host override / port"
+        defaultValue={apiUrl}
-          fullWidth
+        margin="normal"
-          defaultValue={apiUrl}
+        InputLabelProps={{
-          margin="normal"
+          shrink: true,
-          InputLabelProps={{
+        }}
-            shrink: true,
+        onChange={e => {
-          }}
+          setHost(e.target.value)
-          onChange={e => {
+        }}
-            setHost(e.target.value)
+      />
-          }}
+      <TextField
-          variant="filled"
+        label="Debug API Endpoint"
-        />
+        className={classes.item}
-      </Paper>
+        placeholder="ex: 127.0.0.0.1:1635"
-      <Paper style={{ marginTop: '20px' }}>
+        fullWidth
-        <TextField
+        defaultValue={apiDebugUrl}
-          label="Debug API Endpoint"
+        onChange={e => {
-          style={{ margin: 0 }}
+          setDebugHost(e.target.value)
-          placeholder="ex: 127.0.0.0.1:1635"
+        }}
-          helperText="Enter node debug host override / port"
+        margin="normal"
-          fullWidth
+        InputLabelProps={{
-          defaultValue={apiDebugUrl}
+          shrink: true,
-          onChange={e => {
+        }}
-            setDebugHost(e.target.value)
+      />
-          }}
+      {touched && (
-          margin="normal"
+        <Button variant="outlined" color="primary" className={classes.item} onClick={submit}>
-          InputLabelProps={{
+          Save
-            shrink: true,
+        </Button>
-          }}
+      )}
-          variant="filled"
-        />
-      </Paper>
-      {touched ? (
-        <div style={{ marginTop: '20px' }}>
-          <Button variant="outlined" color="primary" onClick={submit}>
-            Save
-          </Button>
-        </div>
-      ) : null}
     </>
   )
 }