fix broken styling and improve settings layout

This commit is contained in:
Matt Hill
2026-03-28 22:54:12 -06:00
parent 591e3bec1a
commit 104567e457
2 changed files with 26 additions and 39 deletions

View File

@@ -50,45 +50,32 @@ import { CHANGE_PASSWORD } from './change-password'
</button>
}
</div>
<div tuiCell>
<span tuiTitle>
<strong>Change password</strong>
</span>
<button tuiButton size="s" (click)="onChangePassword()">Change</button>
</div>
<div tuiCell>
<span tuiTitle>
<strong>Restart</strong>
<span tuiSubtitle>Restart the VPS</span>
</span>
<button
tuiButton
size="s"
appearance="secondary"
iconStart="@tui.rotate-cw"
[loading]="restarting()"
(click)="onRestart()"
>
Restart
</button>
</div>
<div tuiCell>
<span tuiTitle>
<strong>Logout</strong>
</span>
<button
tuiButton
size="s"
appearance="secondary-destructive"
iconStart="@tui.log-out"
(click)="onLogout()"
>
Logout
</button>
</div>
</div>
<div tuiCardLarge [style.align-items]="'start'">
<button tuiButton size="s" (click)="onChangePassword()">
Change password
</button>
<button
tuiButton
size="s"
iconStart="@tui.rotate-cw"
[loading]="restarting()"
(click)="onRestart()"
>
Reboot VPS
</button>
<button tuiButton size="s" iconStart="@tui.log-out" (click)="onLogout()">
Logout
</button>
</div>
`,
styles: `
:host {
display: flex;
flex-direction: column;
gap: 1rem;
}
[tuiCardLarge] {
background: var(--tui-background-neutral-1);
@@ -148,9 +135,9 @@ export default class Settings {
await this.api.restart()
this.dialogs
.open(
'The VPS is restarting. Please wait 1\u20132 minutes, then refresh the page.',
'The VPS is rebooting. Please wait 1\u20132 minutes, then refresh the page.',
{
label: 'Restarting',
label: 'Rebooting',
},
)
.subscribe()

View File

@@ -14,7 +14,7 @@ body {
isolation: isolate;
overflow-x: hidden;
background:
conic-gradient(var(--tui-background-base)),
linear-gradient(var(--tui-background-base, #171717), var(--tui-background-base, #171717)),
radial-gradient(circle at top right, #5240a8, transparent 40%),
radial-gradient(circle at bottom right, #9236c9, transparent),
radial-gradient(circle at 25% 100%, #5b65d5, transparent 30%),