mirror of
https://github.com/fosrl/pangolin.git
synced 2026-06-23 15:51:49 +00:00
many minor visual improvements
This commit is contained in:
miloschwartz
@@ -334,19 +334,15 @@ export function ProxyResourceTargetsForm({
|
||||
{row.original.siteType === "newt" ? (
|
||||
<Button
|
||||
variant="outline"
|
||||
className="flex items-center gap-2 w-full text-left cursor-pointer"
|
||||
className="flex items-center space-x-2 w-full text-left cursor-pointer"
|
||||
onClick={() =>
|
||||
openHealthCheckDialog(row.original)
|
||||
}
|
||||
>
|
||||
<div
|
||||
className={`flex items-center gap-2 ${status === "healthy" ? "text-green-500" : status === "unhealthy" ? "text-destructive" : "text-neutral-500"}`}
|
||||
>
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${status === "healthy" ? "bg-green-500" : status === "unhealthy" ? "bg-destructive" : "bg-neutral-500"}`}
|
||||
></div>
|
||||
{getStatusText(status)}
|
||||
</div>
|
||||
className={`w-2 h-2 rounded-full ${status === "healthy" ? "bg-green-500" : status === "unhealthy" ? "bg-destructive" : "bg-neutral-500"}`}
|
||||
></div>
|
||||
<span>{getStatusText(status)}</span>
|
||||
</Button>
|
||||
) : (
|
||||
<span>-</span>
|
||||
@@ -535,7 +531,7 @@ export function ProxyResourceTargetsForm({
|
||||
accessorKey: "enabled",
|
||||
header: () => <span className="p-3">{t("enabled")}</span>,
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center justify-center w-full">
|
||||
<div className="flex items-center w-full">
|
||||
<Switch
|
||||
defaultChecked={row.original.enabled}
|
||||
onCheckedChange={(val) =>
|
||||
@@ -554,9 +550,8 @@ export function ProxyResourceTargetsForm({
|
||||
|
||||
const actionsColumn: ColumnDef<LocalTarget> = {
|
||||
id: "actions",
|
||||
header: () => <span className="p-3">{t("actions")}</span>,
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center w-full">
|
||||
<div className="flex items-center justify-end w-full">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => removeTarget(row.original.targetId)}
|
||||
|
||||
@@ -7,7 +7,10 @@ import {
|
||||
SettingsSectionDescription,
|
||||
SettingsSectionForm,
|
||||
SettingsSectionHeader,
|
||||
SettingsSectionTitle
|
||||
SettingsSectionTitle,
|
||||
SettingsSubsectionDescription,
|
||||
SettingsSubsectionHeader,
|
||||
SettingsSubsectionTitle
|
||||
} from "@app/components/Settings";
|
||||
import { StrategySelect, StrategyOption } from "@app/components/StrategySelect";
|
||||
import { BrowserGatewayTargetForm } from "@app/components/BrowserGatewayTargetForm";
|
||||
@@ -386,9 +389,9 @@ function SshServerForm({
|
||||
<SettingsSectionBody>
|
||||
<SettingsSectionForm variant="half">
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm font-semibold">
|
||||
<SettingsSubsectionTitle>
|
||||
{t("sshServerMode")}
|
||||
</p>
|
||||
</SettingsSubsectionTitle>
|
||||
<Badge variant="secondary">
|
||||
{sshServerMode == "standard"
|
||||
? t("sshServerModeStandard")
|
||||
@@ -397,9 +400,9 @@ function SshServerForm({
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm font-semibold">
|
||||
<SettingsSubsectionTitle>
|
||||
{t("sshAuthenticationMethod")}
|
||||
</p>
|
||||
</SettingsSubsectionTitle>
|
||||
<StrategySelect<"passthrough" | "push">
|
||||
value={pamMode}
|
||||
options={authMethodOptions}
|
||||
@@ -410,9 +413,9 @@ function SshServerForm({
|
||||
|
||||
{showDaemonLocation && (
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm font-semibold">
|
||||
<SettingsSubsectionTitle>
|
||||
{t("sshAuthDaemonLocation")}
|
||||
</p>
|
||||
</SettingsSubsectionTitle>
|
||||
<StrategySelect<"site" | "remote">
|
||||
value={standardDaemonLocation}
|
||||
options={daemonLocationOptions}
|
||||
@@ -460,14 +463,14 @@ function SshServerForm({
|
||||
)}
|
||||
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h2 className="text-1xl font-semibold tracking-tight flex items-center gap-2">
|
||||
<SettingsSubsectionHeader>
|
||||
<SettingsSubsectionTitle>
|
||||
{t("sshServerDestination")}
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
</SettingsSubsectionTitle>
|
||||
<SettingsSubsectionDescription>
|
||||
{t("sshServerDestinationDescription")}
|
||||
</p>
|
||||
</div>
|
||||
</SettingsSubsectionDescription>
|
||||
</SettingsSubsectionHeader>
|
||||
{isNative ? (
|
||||
<Popover
|
||||
open={nativeSiteOpen}
|
||||
|
||||
@@ -9,7 +9,10 @@ import {
|
||||
SettingsSectionDescription,
|
||||
SettingsSectionForm,
|
||||
SettingsSectionHeader,
|
||||
SettingsSectionTitle
|
||||
SettingsSectionTitle,
|
||||
SettingsSubsectionDescription,
|
||||
SettingsSubsectionHeader,
|
||||
SettingsSubsectionTitle
|
||||
} from "@app/components/Settings";
|
||||
import HeaderTitle from "@app/components/SettingsSectionTitle";
|
||||
import {
|
||||
@@ -711,7 +714,7 @@ export default function Page() {
|
||||
e.preventDefault();
|
||||
}
|
||||
}}
|
||||
className="space-y-4"
|
||||
className="grid gap-4 grid-cols-1 md:grid-cols-2 items-start"
|
||||
id="base-resource-form"
|
||||
>
|
||||
<FormField
|
||||
@@ -794,7 +797,7 @@ export default function Page() {
|
||||
e.preventDefault();
|
||||
}
|
||||
}}
|
||||
className="space-y-4"
|
||||
className="grid gap-4 grid-cols-1 md:grid-cols-2 items-start"
|
||||
id="tcp-udp-settings-form"
|
||||
>
|
||||
<FormField
|
||||
@@ -879,10 +882,10 @@ export default function Page() {
|
||||
<SettingsSectionBody>
|
||||
<SettingsSectionForm variant="half">
|
||||
{/* Mode */}
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm font-semibold">
|
||||
<div className="space-y-2">
|
||||
<SettingsSubsectionTitle>
|
||||
{t("sshServerMode")}
|
||||
</p>
|
||||
</SettingsSubsectionTitle>
|
||||
<StrategySelect<
|
||||
"standard" | "native"
|
||||
>
|
||||
@@ -893,12 +896,12 @@ export default function Page() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm font-semibold">
|
||||
<div className="space-y-2">
|
||||
<SettingsSubsectionTitle>
|
||||
{t(
|
||||
"sshAuthenticationMethod"
|
||||
)}
|
||||
</p>
|
||||
</SettingsSubsectionTitle>
|
||||
<StrategySelect<
|
||||
"passthrough" | "push"
|
||||
>
|
||||
@@ -913,12 +916,12 @@ export default function Page() {
|
||||
|
||||
{/* Daemon Location (standard + push) */}
|
||||
{showDaemonLocation && (
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm font-semibold">
|
||||
<div className="space-y-2">
|
||||
<SettingsSubsectionTitle>
|
||||
{t(
|
||||
"sshAuthDaemonLocation"
|
||||
)}
|
||||
</p>
|
||||
</SettingsSubsectionTitle>
|
||||
<StrategySelect<
|
||||
"site" | "remote"
|
||||
>
|
||||
@@ -953,49 +956,55 @@ export default function Page() {
|
||||
{/* Daemon Port (standard + push + remote) */}
|
||||
{showDaemonPort && (
|
||||
<Form {...sshDaemonPortForm}>
|
||||
<FormField
|
||||
control={
|
||||
sshDaemonPortForm.control
|
||||
}
|
||||
name="authDaemonPort"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t(
|
||||
"sshDaemonPort"
|
||||
)}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
max={
|
||||
65535
|
||||
}
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="w-full md:w-1/2">
|
||||
<FormField
|
||||
control={
|
||||
sshDaemonPortForm.control
|
||||
}
|
||||
name="authDaemonPort"
|
||||
render={({
|
||||
field
|
||||
}) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t(
|
||||
"sshDaemonPort"
|
||||
)}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
min={
|
||||
1
|
||||
}
|
||||
max={
|
||||
65535
|
||||
}
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
|
||||
{/* Server Destination */}
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h2 className="text-sm font-semibold">
|
||||
<SettingsSubsectionHeader>
|
||||
<SettingsSubsectionTitle>
|
||||
{t(
|
||||
"sshServerDestination"
|
||||
)}
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
</SettingsSubsectionTitle>
|
||||
<SettingsSubsectionDescription>
|
||||
{t(
|
||||
"sshServerDestinationDescription"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</SettingsSubsectionDescription>
|
||||
</SettingsSubsectionHeader>
|
||||
{isNative ? (
|
||||
<Popover
|
||||
open={nativeSiteOpen}
|
||||
@@ -1007,7 +1016,7 @@ export default function Page() {
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
className="w-full max-w-xs justify-between font-normal"
|
||||
className="w-full md:w-1/2 justify-between font-normal"
|
||||
>
|
||||
<span className="truncate">
|
||||
{nativeSelectedSite?.name ??
|
||||
|
||||
@@ -256,7 +256,7 @@ export default function GeneralPage() {
|
||||
return (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="">
|
||||
<SwitchInput
|
||||
id="auto-update-enabled"
|
||||
label={t(
|
||||
@@ -285,7 +285,7 @@ export default function GeneralPage() {
|
||||
type="button"
|
||||
variant="link"
|
||||
size="sm"
|
||||
className="h-auto p-0 pb-2 text-xs"
|
||||
className="text-sm text-muted-foreground underline px-0"
|
||||
onClick={() => {
|
||||
form.setValue(
|
||||
"autoUpdateOverrideOrg",
|
||||
|
||||
@@ -243,10 +243,8 @@ export default function Page() {
|
||||
onCheckedChange={(checked) => {
|
||||
form.setValue("autoProvision", checked);
|
||||
}}
|
||||
description={t("idpAutoProvisionConfigureAfterCreate")}
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("idpAutoProvisionConfigureAfterCreate")}
|
||||
</p>
|
||||
</div>
|
||||
</SettingsSectionBody>
|
||||
</SettingsSection>
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
--accent-foreground: oklch(0.21 0.006 285.885);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--destructive-foreground: oklch(0.985 0 0);
|
||||
--border: oklch(0.88 0.004 286.32);
|
||||
--border: oklch(0.92 0.004 286.32);
|
||||
--input: oklch(0.88 0.004 286.32);
|
||||
--ring: oklch(0.705 0.213 47.604);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
@@ -57,7 +57,7 @@
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.5382 0.1949 22.216);
|
||||
--destructive-foreground: oklch(0.985 0 0);
|
||||
--border: oklch(1 0 0 / 15%);
|
||||
--border: oklch(1 0 0 / 8%);
|
||||
--input: oklch(1 0 0 / 18%);
|
||||
--ring: oklch(0.646 0.222 41.116);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
|
||||
Reference in New Issue
Block a user