adjust theme

This commit is contained in:
miloschwartz
2026-04-20 18:00:22 -07:00
parent 47be3dbdf9
commit 335de04a4e
9 changed files with 180 additions and 166 deletions

View File

@@ -2469,7 +2469,7 @@
"connectionLogs": "Network Logs", "connectionLogs": "Network Logs",
"connectionLogsDescription": "View network session logs handled by sites in this organization", "connectionLogsDescription": "View network session logs handled by sites in this organization",
"sidebarLogsConnection": "Network Logs", "sidebarLogsConnection": "Network Logs",
"sidebarLogsStreaming": "Streaming", "sidebarLogsStreaming": "Event Streaming",
"sourceAddress": "Source Address", "sourceAddress": "Source Address",
"destinationAddress": "Destination Address", "destinationAddress": "Destination Address",
"duration": "Duration", "duration": "Duration",

View File

@@ -776,9 +776,15 @@ export default function Page() {
pathMatchType: row.original.pathMatchType pathMatchType: row.original.pathMatchType
}} }}
onChange={(config) => onChange={(config) =>
updateTarget(row.original.targetId, updateTarget(
config.path === null && config.pathMatchType === null row.original.targetId,
? { ...config, rewritePath: null, rewritePathType: null } config.path === null &&
config.pathMatchType === null
? {
...config,
rewritePath: null,
rewritePathType: null
}
: config : config
) )
} }
@@ -804,9 +810,15 @@ export default function Page() {
pathMatchType: row.original.pathMatchType pathMatchType: row.original.pathMatchType
}} }}
onChange={(config) => onChange={(config) =>
updateTarget(row.original.targetId, updateTarget(
config.path === null && config.pathMatchType === null row.original.targetId,
? { ...config, rewritePath: null, rewritePathType: null } config.path === null &&
config.pathMatchType === null
? {
...config,
rewritePath: null,
rewritePathType: null
}
: config : config
) )
} }
@@ -1061,7 +1073,7 @@ export default function Page() {
: null : null
); );
}} }}
cols={2} cols={3}
/> />
</> </>
)} )}
@@ -1118,6 +1130,7 @@ export default function Page() {
</SettingsSectionDescription> </SettingsSectionDescription>
</SettingsSectionHeader> </SettingsSectionHeader>
<SettingsSectionBody> <SettingsSectionBody>
<SettingsSectionForm>
<DomainPicker <DomainPicker
orgId={orgId as string} orgId={orgId as string}
warnOnProvidedDomain={ warnOnProvidedDomain={
@@ -1140,6 +1153,7 @@ export default function Page() {
); );
}} }}
/> />
</SettingsSectionForm>
</SettingsSectionBody> </SettingsSectionBody>
</SettingsSection> </SettingsSection>
) : ( ) : (
@@ -1155,6 +1169,7 @@ export default function Page() {
</SettingsSectionDescription> </SettingsSectionDescription>
</SettingsSectionHeader> </SettingsSectionHeader>
<SettingsSectionBody> <SettingsSectionBody>
<SettingsSectionForm>
<Form {...tcpUdpForm}> <Form {...tcpUdpForm}>
<form <form
onKeyDown={(e) => { onKeyDown={(e) => {
@@ -1166,12 +1181,16 @@ export default function Page() {
id="tcp-udp-settings-form" id="tcp-udp-settings-form"
> >
<Controller <Controller
control={tcpUdpForm.control} control={
tcpUdpForm.control
}
name="protocol" name="protocol"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel> <FormLabel>
{t("protocol")} {t(
"protocol"
)}
</FormLabel> </FormLabel>
<Select <Select
onValueChange={ onValueChange={
@@ -1203,7 +1222,9 @@ export default function Page() {
/> />
<FormField <FormField
control={tcpUdpForm.control} control={
tcpUdpForm.control
}
name="proxyPort" name="proxyPort"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
@@ -1237,16 +1258,12 @@ export default function Page() {
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
<FormDescription>
{t(
"resourcePortNumberDescription"
)}
</FormDescription>
</FormItem> </FormItem>
)} )}
/> />
</form> </form>
</Form> </Form>
</SettingsSectionForm>
</SettingsSectionBody> </SettingsSectionBody>
</SettingsSection> </SettingsSection>
)} )}

View File

@@ -6,7 +6,7 @@
:root { :root {
--radius: 0.75rem; --radius: 0.75rem;
--background: oklch(0.985 0 0); --background: oklch(1 0 0);
--foreground: oklch(0.141 0.005 285.823); --foreground: oklch(0.141 0.005 285.823);
--card: oklch(1 0 0); --card: oklch(1 0 0);
--card-foreground: oklch(0.141 0.005 285.823); --card-foreground: oklch(0.141 0.005 285.823);
@@ -22,30 +22,30 @@
--accent-foreground: oklch(0.21 0.006 285.885); --accent-foreground: oklch(0.21 0.006 285.885);
--destructive: oklch(0.577 0.245 27.325); --destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.985 0 0); --destructive-foreground: oklch(0.985 0 0);
--border: oklch(0.91 0.004 286.32); --border: oklch(0.88 0.004 286.32);
--input: oklch(0.92 0.004 286.32); --input: oklch(0.88 0.004 286.32);
--ring: oklch(0.705 0.213 47.604); --ring: oklch(0.705 0.213 47.604);
--chart-1: oklch(0.646 0.222 41.116); --chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704); --chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392); --chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429); --chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08); --chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0 0); --sidebar: #fafafa;
--sidebar-foreground: oklch(0.141 0.005 285.823); --sidebar-foreground: oklch(0.141 0.005 285.823);
--sidebar-primary: oklch(0.705 0.213 47.604); --sidebar-primary: oklch(0.705 0.213 47.604);
--sidebar-primary-foreground: oklch(0.98 0.016 73.684); --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
--sidebar-accent: oklch(0.967 0.001 286.375); --sidebar-accent: #eaeaea;
--sidebar-accent-foreground: oklch(0.21 0.006 285.885); --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
--sidebar-border: oklch(0.92 0.004 286.32); --sidebar-border: oklch(0.92 0.004 286.32);
--sidebar-ring: oklch(0.705 0.213 47.604); --sidebar-ring: oklch(0.705 0.213 47.604);
} }
.dark { .dark {
--background: oklch(0.19 0.006 285.885); --background: #0d0d0f;
--foreground: oklch(0.985 0 0); --foreground: oklch(0.985 0 0);
--card: oklch(0.21 0.006 285.885); --card: #0d0d0f;
--card-foreground: oklch(0.985 0 0); --card-foreground: oklch(0.985 0 0);
--popover: oklch(0.21 0.006 285.885); --popover: #0d0d0f;
--popover-foreground: oklch(0.985 0 0); --popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.6717 0.1946 41.93); --primary: oklch(0.6717 0.1946 41.93);
--primary-foreground: oklch(0.98 0.016 73.684); --primary-foreground: oklch(0.98 0.016 73.684);
@@ -57,7 +57,7 @@
--accent-foreground: oklch(0.985 0 0); --accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.5382 0.1949 22.216); --destructive: oklch(0.5382 0.1949 22.216);
--destructive-foreground: oklch(0.985 0 0); --destructive-foreground: oklch(0.985 0 0);
--border: oklch(1 0 0 / 13%); --border: oklch(1 0 0 / 18%);
--input: oklch(1 0 0 / 18%); --input: oklch(1 0 0 / 18%);
--ring: oklch(0.646 0.222 41.116); --ring: oklch(0.646 0.222 41.116);
--chart-1: oklch(0.488 0.243 264.376); --chart-1: oklch(0.488 0.243 264.376);
@@ -65,11 +65,11 @@
--chart-3: oklch(0.769 0.188 70.08); --chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9); --chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439); --chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.21 0.006 285.885); --sidebar: #040404;
--sidebar-foreground: oklch(0.985 0 0); --sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.646 0.222 41.116); --sidebar-primary: oklch(0.646 0.222 41.116);
--sidebar-primary-foreground: oklch(0.98 0.016 73.684); --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
--sidebar-accent: oklch(0.274 0.006 286.033); --sidebar-accent: #131317;
--sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%); --sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.646 0.222 41.116); --sidebar-ring: oklch(0.646 0.222 41.116);
@@ -110,6 +110,15 @@
--color-chart-4: var(--chart-4); --color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5); --color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--radius-lg: var(--radius); --radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px); --radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px); --radius-sm: calc(var(--radius) - 4px);
@@ -166,7 +175,9 @@ p {
} }
@keyframes dot-pulse { @keyframes dot-pulse {
0%, 80%, 100% { 0%,
80%,
100% {
opacity: 0.3; opacity: 0.3;
transform: scale(0.8); transform: scale(0.8);
} }
@@ -189,7 +200,10 @@ p {
/* Only apply custom viewport height on mobile */ /* Only apply custom viewport height on mobile */
@media (max-width: 767px) { @media (max-width: 767px) {
.h-screen-safe { .h-screen-safe {
height: var(--vh, 100vh); /* Use CSS variable set by ViewportHeightFix on mobile */ height: var(
--vh,
100vh
); /* Use CSS variable set by ViewportHeightFix on mobile */
} }
} }
} }

View File

@@ -1176,7 +1176,7 @@ export function InternalResourceForm({
</span> </span>
) )
)} )}
<span className="pl-1"> <span className="pl-1 font-normal">
{t( {t(
"accessClientSelect" "accessClientSelect"
)} )}

View File

@@ -49,7 +49,7 @@ export function LayoutHeader({ showTopBar }: LayoutHeaderProps) {
return ( return (
<div className="absolute top-0 left-0 right-0 z-50 hidden md:block"> <div className="absolute top-0 left-0 right-0 z-50 hidden md:block">
<div className="absolute inset-0 bg-background/83 backdrop-blur-sm" /> <div className="absolute inset-0 bg-background backdrop-blur-sm" />
<div className="relative z-10 px-6 py-2"> <div className="relative z-10 px-6 py-2">
<div className="container mx-auto max-w-12xl"> <div className="container mx-auto max-w-12xl">
<div className="h-16 flex items-center justify-between"> <div className="h-16 flex items-center justify-between">

View File

@@ -125,7 +125,7 @@ export function LayoutSidebar({
return ( return (
<div <div
className={cn( className={cn(
"hidden md:flex border-r bg-card flex-col h-full shrink-0 relative", "hidden md:flex border-r bg-sidebar flex-col h-full shrink-0 relative",
isSidebarCollapsed ? "w-16" : "w-64" isSidebarCollapsed ? "w-16" : "w-64"
)} )}
> >
@@ -154,7 +154,7 @@ export function LayoutSidebar({
<Link <Link
href="/admin" href="/admin"
className={cn( className={cn(
"flex items-center transition-colors text-muted-foreground hover:text-foreground text-sm w-full hover:bg-secondary/80 dark:hover:bg-secondary/50 rounded-md", "flex items-center transition-colors text-muted-foreground hover:text-foreground text-sm w-full hover:bg-sidebar-accent/80 dark:hover:bg-sidebar-accent/50 rounded-md",
isSidebarCollapsed isSidebarCollapsed
? "px-2 py-2 justify-center" ? "px-2 py-2 justify-center"
: "px-3 py-1.5" : "px-3 py-1.5"
@@ -191,7 +191,7 @@ export function LayoutSidebar({
/> />
</div> </div>
{/* Fade gradient at bottom to indicate scrollable content */} {/* Fade gradient at bottom to indicate scrollable content */}
<div className="sticky bottom-0 left-0 right-0 h-8 pointer-events-none bg-gradient-to-t from-card to-transparent" /> <div className="sticky bottom-0 left-0 right-0 h-8 pointer-events-none bg-gradient-to-t from-sidebar to-transparent" />
</div> </div>
{isSidebarCollapsed && ( {isSidebarCollapsed && (
@@ -206,7 +206,7 @@ export function LayoutSidebar({
setHasManualToggle(true); setHasManualToggle(true);
setSidebarStateCookie(false); setSidebarStateCookie(false);
}} }}
className="rounded-md p-2 text-muted-foreground hover:text-foreground hover:bg-secondary/80 dark:hover:bg-secondary/50 transition-colors" className="rounded-md p-2 text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/80 dark:hover:bg-sidebar-accent/50 transition-colors"
aria-label={t("sidebarExpand")} aria-label={t("sidebarExpand")}
> >
<PanelRightOpen className="h-4 w-4" /> <PanelRightOpen className="h-4 w-4" />

View File

@@ -187,23 +187,6 @@ export default function IdpTable({ idps, orgId }: Props) {
}; };
const columns: ExtendedColumnDef<IdpRow>[] = [ const columns: ExtendedColumnDef<IdpRow>[] = [
{
accessorKey: "idpId",
friendlyName: "ID",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(column.getIsSorted() === "asc")
}
>
ID
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
}
},
{ {
accessorKey: "name", accessorKey: "name",
friendlyName: t("name"), friendlyName: t("name"),

View File

@@ -76,8 +76,8 @@ export function OrgSelector({
className={cn( className={cn(
"cursor-pointer transition-colors", "cursor-pointer transition-colors",
isCollapsed isCollapsed
? "w-full h-16 flex items-center justify-center hover:bg-muted" ? "w-full h-16 flex items-center justify-center hover:bg-sidebar-accent/80 dark:hover:bg-sidebar-accent/50"
: "w-full px-5 py-4 hover:bg-muted" : "w-full px-5 py-4 hover:bg-sidebar-accent/80 dark:hover:bg-sidebar-accent/50"
)} )}
> >
{isCollapsed ? ( {isCollapsed ? (
@@ -172,7 +172,7 @@ export function OrgSelector({
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
className="w-full justify-start h-8 font-normal text-muted-foreground hover:text-foreground" className="w-full justify-start h-8 font-normal text-muted-foreground"
onClick={() => { onClick={() => {
setOpen(false); setOpen(false);
router.push("/setup"); router.push("/setup");

View File

@@ -121,8 +121,8 @@ function CollapsibleNavItem({
"flex items-center w-full rounded-md transition-colors", "flex items-center w-full rounded-md transition-colors",
"px-3 py-1.5", "px-3 py-1.5",
isActive isActive
? "bg-secondary font-medium" ? "bg-sidebar-accent font-medium"
: "text-muted-foreground hover:bg-secondary/80 dark:hover:bg-secondary/50 hover:text-foreground", : "text-muted-foreground hover:bg-sidebar-accent/80 dark:hover:bg-sidebar-accent/50 hover:text-foreground",
isDisabled && "cursor-not-allowed opacity-60" isDisabled && "cursor-not-allowed opacity-60"
)} )}
disabled={isDisabled} disabled={isDisabled}
@@ -256,8 +256,8 @@ function CollapsedNavItemWithPopover({
className={cn( className={cn(
"flex items-center rounded-md transition-colors px-2 py-2 justify-center w-full", "flex items-center rounded-md transition-colors px-2 py-2 justify-center w-full",
isActive || isChildActive isActive || isChildActive
? "bg-secondary font-medium" ? "bg-sidebar-accent font-medium"
: "text-muted-foreground hover:bg-secondary/80 dark:hover:bg-secondary/50 hover:text-foreground", : "text-muted-foreground hover:bg-sidebar-accent/80 dark:hover:bg-sidebar-accent/50 hover:text-foreground",
isDisabled && isDisabled &&
"cursor-not-allowed opacity-60" "cursor-not-allowed opacity-60"
)} )}
@@ -308,8 +308,8 @@ function CollapsedNavItemWithPopover({
className={cn( className={cn(
"flex items-center rounded-md transition-colors px-3 py-1.5 text-sm", "flex items-center rounded-md transition-colors px-3 py-1.5 text-sm",
childIsActive childIsActive
? "bg-secondary font-medium" ? "bg-sidebar-accent font-medium"
: "text-muted-foreground hover:bg-secondary/50 hover:text-foreground", : "text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground",
childIsDisabled && childIsDisabled &&
"cursor-not-allowed opacity-60" "cursor-not-allowed opacity-60"
)} )}
@@ -450,8 +450,8 @@ export function SidebarNav({
"flex items-center rounded-md transition-colors relative", "flex items-center rounded-md transition-colors relative",
isCollapsed ? "px-2 py-2 justify-center" : "px-3 py-1.5", isCollapsed ? "px-2 py-2 justify-center" : "px-3 py-1.5",
isActive isActive
? "bg-secondary font-medium" ? "bg-sidebar-accent font-medium"
: "text-muted-foreground hover:bg-secondary/80 dark:hover:bg-secondary/50 hover:text-foreground", : "text-muted-foreground hover:bg-sidebar-accent/80 dark:hover:bg-sidebar-accent/50 hover:text-foreground",
isDisabled && "cursor-not-allowed opacity-60" isDisabled && "cursor-not-allowed opacity-60"
)} )}
onClick={(e) => { onClick={(e) => {