feat: updated the settings page design (#215)

src/components/ExpandableListItemActions.tsx

@@ -6,6 +6,7 @@ const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     action: {
       marginTop: theme.spacing(0.75),
+      marginBottom: theme.spacing(1),
       marginRight: theme.spacing(1),
     },
   }),

src/pages/settings/index.tsx

@@ -1,69 +1,15 @@
-import { ReactElement, useState, useContext } from 'react'
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'
-import { TextField, Typography, Button } from '@material-ui/core'
+import { ReactElement, useContext } from 'react'
 import { Context as SettingsContext } from '../../providers/Settings'
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    item: {
-      margin: 0,
-      marginTop: theme.spacing(4),
-    },
-  }),
-)
+import ExpandableList from '../../components/ExpandableList'
+import ExpandableListItemInput from '../../components/ExpandableListItemInput'
 
 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)
-
-  const submit = () => {
-    if (host !== apiUrl) setApiUrl(host)
-
-    if (debugHost !== apiDebugUrl) setDebugApiUrl(debugHost)
-  }
-
-  const touched = host !== apiUrl || debugHost !== apiDebugUrl
 
   return (
-    <>
-      <Typography variant="h4" gutterBottom>
-        Settings
-      </Typography>
-      <TextField
-        label="API Endpoint"
-        className={classes.item}
-        placeholder="ex: 127.0.0.0.1:1633"
-        fullWidth
-        defaultValue={apiUrl}
-        margin="normal"
-        InputLabelProps={{
-          shrink: true,
-        }}
-        onChange={e => {
-          setHost(e.target.value)
-        }}
-      />
-      <TextField
-        label="Debug API Endpoint"
-        className={classes.item}
-        placeholder="ex: 127.0.0.0.1:1635"
-        fullWidth
-        defaultValue={apiDebugUrl}
-        onChange={e => {
-          setDebugHost(e.target.value)
-        }}
-        margin="normal"
-        InputLabelProps={{
-          shrink: true,
-        }}
-      />
-      {touched && (
-        <Button variant="outlined" color="primary" className={classes.item} onClick={submit}>
-          Save
-        </Button>
-      )}
-    </>
+    <ExpandableList label="API Settings" defaultOpen>
+      <ExpandableListItemInput label="Bee API" value={apiUrl} onConfirm={setApiUrl} />
+      <ExpandableListItemInput label="Bee Debug API" value={apiDebugUrl} onConfirm={setDebugApiUrl} />
+    </ExpandableList>
   )
 }