small visual enhancements to icons

This commit is contained in:
Milo Schwartz
2024-11-22 23:06:12 -05:00
parent 5388c5d5b4
commit 45e1bff2e0
28 changed files with 299 additions and 138 deletions

View File

@@ -257,11 +257,11 @@ export default function ResourceAuthenticationPage() {
/>
)}
<div className="space-y-12 lg:max-w-2xl">
<section className="space-y-6">
<div className="space-y-12">
<section className="space-y-8">
<SettingsSectionTitle
title="Users & Roles"
description="Configure who can visit this resource (only applicable if SSO is used)"
description="Configure which users can access this resource (only applicable if SSO enabled)"
size="1xl"
/>
@@ -275,9 +275,7 @@ export default function ResourceAuthenticationPage() {
<Label htmlFor="sso-toggle">Allow SSO</Label>
</div>
<span className="text-muted-foreground text-sm">
Users will be able to access the resource if they're
logged into the dashboard and have access to the
resource. Users will only have to login once for all
Existing users will only have to login once for all
resources that have SSO enabled.
</span>
</div>
@@ -287,7 +285,7 @@ export default function ResourceAuthenticationPage() {
onSubmit={usersRolesForm.handleSubmit(
onSubmitUsersRoles,
)}
className="space-y-6"
className="space-y-8"
>
<FormField
control={usersRolesForm.control}
@@ -336,9 +334,9 @@ export default function ResourceAuthenticationPage() {
/>
</FormControl>
<FormDescription>
Users with these roles will be able
to access this resource. Admins can
always access this resource.
These roles will be able to access
this resource. Admins can always
access this resource.
</FormDescription>
<FormMessage />
</FormItem>
@@ -414,10 +412,10 @@ export default function ResourceAuthenticationPage() {
<Separator />
<section className="space-y-6">
<section className="space-y-8">
<SettingsSectionTitle
title="Authentication Methods"
description="You can also allow users to access the resource via the below methods"
description="You can also anyone to access the resource via the below methods"
size="1xl"
/>

View File

@@ -349,7 +349,7 @@ export default function ReverseProxyTargets(props: {
return (
<>
<div className="space-y-12">
<section className="space-y-6 lg:max-w-2xl">
<section className="space-y-8">
<SettingsSectionTitle
title="SSL"
description="Setup SSL to secure your connections with LetsEncrypt certificates"
@@ -366,23 +366,24 @@ export default function ReverseProxyTargets(props: {
</div>
</section>
<hr className="lg:max-w-2xl" />
<hr />
<section className="space-y-6">
<section className="space-y-8">
<SettingsSectionTitle
title="Targets"
description="Setup targets to route traffic to your services"
size="1xl"
/>
<div className="space-y-6">
<div className="space-y-8">
<Form {...addTargetForm}>
<form
onSubmit={addTargetForm.handleSubmit(
addTarget as any,
)}
className="space-y-8"
>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
<FormField
control={addTargetForm.control}
name="ip"

View File

@@ -118,8 +118,8 @@ export default function GeneralForm() {
return (
<>
<div className="lg:max-w-2xl space-y-12">
<section className="space-y-6">
<div className="space-y-12 lg:max-w-2xl">
<section className="space-y-8">
<SettingsSectionTitle
title="General Settings"
description="Configure the general settings for this resource"
@@ -129,7 +129,7 @@ export default function GeneralForm() {
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-6"
className="space-y-8"
>
<FormField
control={form.control}

View File

@@ -8,13 +8,21 @@ import { AxiosResponse } from "axios";
import { redirect } from "next/navigation";
import { authCookieHeader } from "@app/api/cookies";
import { SidebarSettings } from "@app/components/SidebarSettings";
import Link from "next/link";
import { ArrowLeft, Cloud, Settings, Shield } from "lucide-react";
import { Cloud, Settings, Shield } from "lucide-react";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
import { GetOrgResponse } from "@server/routers/org";
import OrgProvider from "@app/providers/OrgProvider";
import { cache } from "react";
import ResourceInfoBox from "./components/ResourceInfoBox";
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@app/components/ui/breadcrumb";
import Link from "next/link";
interface ResourceLayoutProps {
children: React.ReactNode;
@@ -31,7 +39,7 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
try {
const res = await internal.get<AxiosResponse<GetResourceResponse>>(
`/resource/${params.resourceId}`,
await authCookieHeader()
await authCookieHeader(),
);
resource = res.data.data;
} catch {
@@ -60,8 +68,8 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
const getOrg = cache(async () =>
internal.get<AxiosResponse<GetOrgResponse>>(
`/org/${params.orgId}`,
await authCookieHeader()
)
await authCookieHeader(),
),
);
const res = await getOrg();
org = res.data.data;
@@ -94,15 +102,17 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
return (
<>
<div className="mb-4">
<Link
href="../../"
className="text-muted-foreground hover:underline"
>
<div className="flex flex-row items-center gap-1">
<ArrowLeft className="w-4 h-4" />{" "}
<span>All Resources</span>
</div>
</Link>
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<Link href="../">Resources</Link>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>{resource.name}</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
<SettingsSectionTitle
@@ -112,10 +122,7 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
<OrgProvider org={org}>
<ResourceProvider resource={resource} authInfo={authInfo}>
<SidebarSettings
sidebarNavItems={sidebarNavItems}
limitWidth={false}
>
<SidebarSettings sidebarNavItems={sidebarNavItems}>
<div className="mb-8 lg:max-w-2xl">
<ResourceInfoBox />
</div>