mirror/fosrl.pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-08-17 07:51:22 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

spacing improvements to config layout

Browse source
This commit is contained in:
Milo Schwartz 2024-10-13 23:05:22 -04:00
parent 408f42daad
commit 7f6070a1b2
No known key found for this signature in database
3 changed files with 66 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/app/[orgId]/components/Header.tsx
View file

@ -10,9 +10,9 @@ import {
DropdownMenuItem, DropdownMenuItem,
DropdownMenuLabel, DropdownMenuLabel,
DropdownMenuSeparator, DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@app/components/ui/dropdown-menu"; } from "@app/components/ui/dropdown-menu";
import { Separator } from "@app/components/ui/separator";
import Link from "next/link"; import Link from "next/link";
type HeaderProps = { type HeaderProps = {
@ -33,13 +33,32 @@ export default function Header({ email, orgName, name }: HeaderProps) {
return ( return (
<> <>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Badge variant="outline" className="text-md font-bold"> <div className="flex items-center">
<Badge variant="secondary" className="text-md font-bold">
{orgName} {orgName}
</Badge> </Badge>
<div className="flex items-center"> <div className="hidden md:block">
<div className="flex items-center gap-4 ml-6">
<Link
href="/docs"
className="text-stone-400 hover:text-stone-600"
>
Documentation
</Link>
<Link
href="/support"
className="text-stone-400 hover:text-stone-600"
>
Support
</Link>
</div>
</div>
</div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span className="text-lg font-medium"> {/* Make the text truncate on smaller screens */}
<span className="text-lg font-medium truncate max-w-[150px] md:max-w-none">
{name || email} {name || email}
</span> </span>
<DropdownMenu> <DropdownMenu>
@ -63,11 +82,11 @@ export default function Header({ email, orgName, name }: HeaderProps) {
<DropdownMenuLabel className="font-normal"> <DropdownMenuLabel className="font-normal">
<div className="flex flex-col space-y-1"> <div className="flex flex-col space-y-1">
{name && ( {name && (
<p className="text-sm font-medium leading-none"> <p className="text-sm font-medium leading-none truncate">
{name} {name}
</p> </p>
)} )}
<p className="text-xs leading-none text-muted-foreground"> <p className="text-xs leading-none text-muted-foreground truncate">
{email} {email}
</p> </p>
</div> </div>
@ -81,7 +100,6 @@ export default function Header({ email, orgName, name }: HeaderProps) {
</DropdownMenu> </DropdownMenu>
</div> </div>
</div> </div>
</div>
</> </>
); );
} }

2
src/app/[orgId]/components/TopbarNav.tsx
View file

@ -39,7 +39,7 @@ export function TopbarNav({
href={item.href.replace("{orgId}", orgId)} href={item.href.replace("{orgId}", orgId)}
className={cn( className={cn(
"px-2 py-3 text-md", "px-2 py-3 text-md",
pathname === item.href.replace("{orgId}", orgId) pathname.startsWith(item.href.replace("{orgId}", orgId))
? "border-b-2 border-stone-600 text-stone-600" ? "border-b-2 border-stone-600 text-stone-600"
: "hover:text-gray-600 text-stone-400", : "hover:text-gray-600 text-stone-400",
"whitespace-nowrap", "whitespace-nowrap",

4
src/app/[orgId]/layout.tsx
View file

@ -50,8 +50,8 @@ export default async function ConfigurationLaytout({
return ( return (
<> <>
<div className="w-full bg-stone-200 border-b border-stone-300 mb-5 select-none sm:px-0 px-3"> <div className="w-full bg-stone-200 border-b border-stone-300 mb-6 select-none sm:px-0 px-3">
<div className="container mx-auto flex flex-col content-between gap-3 pt-2"> <div className="container mx-auto flex flex-col content-between gap-4 pt-2">
<Header <Header
email={user.email} email={user.email}
orgName={params.orgId} orgName={params.orgId}