feat: troubleshooting component (#204)

* feat: troubleshooting component and general layout improvements

* style: background color, links and button

* chore: disable ripples and rounded corners on buttons

* fix: spacing on the troubleshooting card
This commit is contained in:
Vojtech Simetka
2021-09-13 12:25:01 +02:00
committed by GitHub
parent cda1d4bbb1
commit c4c1573263
7 changed files with 230 additions and 158 deletions
+50 -52
View File
@@ -1,5 +1,5 @@
import React, { ReactElement, useState, useContext } from 'react'
import { Paper, Container, TextField, Typography, Button } from '@material-ui/core'
import { ReactElement, useState, useContext } from 'react'
import { Paper, TextField, Typography, Button } from '@material-ui/core'
import { Context as SettingsContext } from '../../providers/Settings'
export default function Settings(): ReactElement {
@@ -16,55 +16,53 @@ export default function Settings(): ReactElement {
const touched = host !== apiUrl || debugHost !== apiDebugUrl
return (
<div>
<Container>
<Typography variant="h4" gutterBottom>
Settings
</Typography>
<Paper>
<TextField
label="API Endpoint"
style={{ margin: 0 }}
placeholder="ex: 127.0.0.0.1:1633"
helperText="Enter node host override / port"
fullWidth
defaultValue={apiUrl}
margin="normal"
InputLabelProps={{
shrink: true,
}}
onChange={e => {
setHost(e.target.value)
}}
variant="filled"
/>
</Paper>
<Paper style={{ marginTop: '20px' }}>
<TextField
label="Debug API Endpoint"
style={{ margin: 0 }}
placeholder="ex: 127.0.0.0.1:1635"
helperText="Enter node debug host override / port"
fullWidth
defaultValue={apiDebugUrl}
onChange={e => {
setDebugHost(e.target.value)
}}
margin="normal"
InputLabelProps={{
shrink: true,
}}
variant="filled"
/>
</Paper>
{touched ? (
<div style={{ marginTop: '20px' }}>
<Button variant="outlined" color="primary" onClick={submit}>
Save
</Button>
</div>
) : null}
</Container>
</div>
<>
<Typography variant="h4" gutterBottom>
Settings
</Typography>
<Paper>
<TextField
label="API Endpoint"
style={{ margin: 0 }}
placeholder="ex: 127.0.0.0.1:1633"
helperText="Enter node host override / port"
fullWidth
defaultValue={apiUrl}
margin="normal"
InputLabelProps={{
shrink: true,
}}
onChange={e => {
setHost(e.target.value)
}}
variant="filled"
/>
</Paper>
<Paper style={{ marginTop: '20px' }}>
<TextField
label="Debug API Endpoint"
style={{ margin: 0 }}
placeholder="ex: 127.0.0.0.1:1635"
helperText="Enter node debug host override / port"
fullWidth
defaultValue={apiDebugUrl}
onChange={e => {
setDebugHost(e.target.value)
}}
margin="normal"
InputLabelProps={{
shrink: true,
}}
variant="filled"
/>
</Paper>
{touched ? (
<div style={{ marginTop: '20px' }}>
<Button variant="outlined" color="primary" onClick={submit}>
Save
</Button>
</div>
) : null}
</>
)
}