fix: standardize header width

This commit is contained in:
vilm3r
2022-06-23 11:08:34 -05:00
parent 6136599cac
commit f17c4b8a1d

View File

@@ -37,63 +37,65 @@ export default function Settings() {
/> />
</Head> </Head>
<div className="bg-custom-green-dark min-h-screen"> <div className="bg-custom-green-dark min-h-screen">
<div className="p-5 max-w-[80rem] m-auto"> <div className="p-5">
<Header /> <div className="max-w-[80rem] mx-auto">
<main className="max-w-[64rem] m-auto"> <Header />
<Card> <main className="max-w-[64rem] m-auto">
<div className="max-w-[30rem] m-auto p-10"> <Card>
<h2 className="text-2xl pb-5">Relays</h2> <div className="max-w-[30rem] m-auto p-10">
<ul> <h2 className="text-2xl pb-5">Relays</h2>
{settings.relays.map((relay) => ( <ul>
<li key={relay.url}> {settings.relays.map((relay) => (
<div className="m-auto flex items-center pb-3"> <li key={relay.url}>
<Toggle <div className="m-auto flex items-center pb-3">
checked={relay.enabled} <Toggle
onChange={() => { checked={relay.enabled}
toggleRelay(relay.url) onChange={() => {
setSettings({ toggleRelay(relay.url)
...settings, setSettings({
relays: getRelays(), ...settings,
}) relays: getRelays(),
}} })
/> }}
<label className="lg:text-lg flex-grow text-center p-2 truncate"> />
{relay.url} <label className="lg:text-lg flex-grow text-center p-2 truncate">
</label> {relay.url}
<button </label>
onClick={() => { <button
removeRelay(relay.url) onClick={() => {
setSettings({ removeRelay(relay.url)
...settings, setSettings({
relays: getRelays(), ...settings,
}) relays: getRelays(),
}} })
> }}
<MdDelete className="text-2xl" /> >
</button> <MdDelete className="text-2xl" />
</div> </button>
</li> </div>
))} </li>
</ul> ))}
<Input className="pt-5" ref={newPool} placeholder="Relay url" /> </ul>
<Button <Input className="pt-5" ref={newPool} placeholder="Relay url" />
className="pt-5" <Button
onClick={() => { className="pt-5"
addRelay({ onClick={() => {
url: newPool?.current?.value || "", addRelay({
enabled: true, url: newPool?.current?.value || "",
}) enabled: true,
setSettings({ })
...settings, setSettings({
relays: getRelays(), ...settings,
}) relays: getRelays(),
}} })
> }}
Add Relay >
</Button> Add Relay
</div> </Button>
</Card> </div>
</main> </Card>
</main>
</div>
</div> </div>
</div> </div>
</> </>