diff --git a/app/dashboard/account/layout.tsx b/app/dashboard/account/layout.tsx index c4905e900..52a622a2d 100644 --- a/app/dashboard/account/layout.tsx +++ b/app/dashboard/account/layout.tsx @@ -22,7 +22,7 @@ export default async function AccountLayout({ children }: AccountLayoutProps) { -
+
{children}
diff --git a/app/dashboard/organization/layout.tsx b/app/dashboard/organization/layout.tsx index e19150591..944271893 100644 --- a/app/dashboard/organization/layout.tsx +++ b/app/dashboard/organization/layout.tsx @@ -81,7 +81,7 @@ export default async function AccountLayout({ children }: AccountLayoutProps) { -
+
{children}
diff --git a/app/dashboard/organization/security-policies/mfa-policy-form.tsx b/app/dashboard/organization/security-policies/mfa-policy-form.tsx index 38cf2ed0e..83747c26a 100644 --- a/app/dashboard/organization/security-policies/mfa-policy-form.tsx +++ b/app/dashboard/organization/security-policies/mfa-policy-form.tsx @@ -51,7 +51,7 @@ export function MfaPolicyForm({ organization }: Props) { -
+
diff --git a/app/dashboard/organization/sso/components/sso-nav-link.tsx b/app/dashboard/organization/sso/components/sso-nav-link.tsx index af942e60d..2888cf032 100644 --- a/app/dashboard/organization/sso/components/sso-nav-link.tsx +++ b/app/dashboard/organization/sso/components/sso-nav-link.tsx @@ -21,7 +21,7 @@ export default function SsoNavLink({ href={`/dashboard/organization/sso/oidc/edit/${connectionId}/${slug}`} className={cn( isActive - ? "font-semibold text-primary underline underline-offset-[12px]" + ? "font-semibold text-primary underline underline-offset-12" : "font-normal text-muted-foreground transition-colors hover:text-foreground" )} > diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx index 63ffe33bb..079bb3fce 100644 --- a/app/dashboard/page.tsx +++ b/app/dashboard/page.tsx @@ -5,8 +5,8 @@ import { Button } from "@/components/ui/button" export default async function DashboardHome() { return ( -
-
+
+

Explore the SaaS Starter diff --git a/app/globals.css b/app/globals.css index e82908f23..f2c613b0b 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,6 +1,97 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +@import 'tailwindcss'; + +@custom-variant dark (&:is(.dark *)); + +@utility container { + margin-inline: auto; + padding-inline: 2rem; + @media (width >= --theme(--breakpoint-sm)) { + max-width: none; + } + @media (width >= 1400px) { + max-width: 1400px; + } +} + +@theme { + --font-sans: + var(--font-inter-sans), ui-sans-serif, system-ui, sans-serif, + 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + --font-mono: + ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', + 'Courier New', monospace; + + --color-field: hsl(var(--field)); + --color-hover: hsl(var(--hover)); + --color-border: hsl(var(--border)); + --color-input: hsl(var(--input)); + --color-ring: hsl(var(--ring)); + --color-background: hsl(var(--background)); + --color-foreground: hsl(var(--foreground)); + + --color-primary: hsl(var(--primary)); + --color-primary-foreground: hsl(var(--primary-foreground)); + + --color-secondary: hsl(var(--secondary)); + --color-secondary-foreground: hsl(var(--secondary-foreground)); + + --color-destructive: hsl(var(--destructive)); + --color-destructive-foreground: hsl(var(--destructive-foreground)); + + --color-muted: hsl(var(--muted)); + --color-muted-foreground: hsl(var(--muted-foreground)); + + --color-accent: hsl(var(--accent)); + --color-accent-foreground: hsl(var(--accent-foreground)); + + --color-popover: hsl(var(--popover)); + --color-popover-foreground: hsl(var(--popover-foreground)); + + --color-card: hsl(var(--card)); + --color-card-foreground: hsl(var(--card-foreground)); + + --radius-lg: var(--radius); + --radius-md: calc(var(--radius) - 2px); + --radius-sm: calc(var(--radius) - 4px); + + --animate-accordion-down: accordion-down 0.2s ease-out; + --animate-accordion-up: accordion-up 0.2s ease-out; + + @keyframes accordion-down { + from { + height: 0; + } + to { + height: var(--radix-accordion-content-height); + } + } + @keyframes accordion-up { + from { + height: var(--radix-accordion-content-height); + } + to { + height: 0; + } + } +} + +/* + The default border color has changed to `currentcolor` in Tailwind CSS v4, + so we've added these compatibility styles to make sure everything still + looks the same as it did with Tailwind CSS v3. + + If we ever want to remove these styles, we need to add an explicit border + color utility to any element that depends on these defaults. +*/ +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + border-color: var(--color-gray-200, currentcolor); + } +} @layer base { :root { diff --git a/components/organization-switcher.tsx b/components/organization-switcher.tsx index f238a9125..320d10e51 100644 --- a/components/organization-switcher.tsx +++ b/components/organization-switcher.tsx @@ -47,6 +47,8 @@ export function OrganizationSwitcher({ const organization = organizations.find((org) => org.id === currentOrgId)! + const { logoUrl, displayName = 'Organization', slug } = organization || {}; + return ( @@ -56,26 +58,26 @@ export function OrganizationSwitcher({ aria-expanded={open} aria-label="Select an organization" className={cn( - "flex h-12 w-full min-w-[240px] justify-between rounded-xl border border-border bg-field p-2", + "flex h-12 w-full min-w-60 justify-between rounded-xl border border-border bg-field p-2", "hover:border-accent hover:bg-accent/15" )} > - {organization.displayName[0].toUpperCase()} + {displayName[0].toUpperCase()} - {organization.displayName} + {displayName} - + @@ -94,16 +96,16 @@ export function OrganizationSwitcher({ className="text-sm" > - + - {org.displayName[0].toUpperCase()} + {org?.displayName[0].toUpperCase()} - {org.displayName} + {org?.displayName} { return ( - + {children} @@ -46,7 +46,7 @@ const CommandInput = React.forwardRef< {children} - + Close diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx index 530447b6b..3191a49d3 100644 --- a/components/ui/dropdown-menu.tsx +++ b/components/ui/dropdown-menu.tsx @@ -31,7 +31,7 @@ const DropdownMenuSubTrigger = React.forwardRef< ( span]:line-clamp-1", + "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-field px-3 py-2 text-sm shadow-xs ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className )} {...props} @@ -80,7 +80,7 @@ const SelectContent = React.forwardRef< {children} @@ -123,7 +123,7 @@ const SelectItem = React.forwardRef< (({ className, ...props }, ref) => ( tr]:last:border-b-0", + "border-t bg-muted/50 font-medium last:[&>tr]:border-b-0", className )} {...props} @@ -73,7 +73,7 @@ const TableHead = React.forwardRef< [role=checkbox]]:translate-y-[2px]", + "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]", className )} {...props} @@ -88,7 +88,7 @@ const TableCell = React.forwardRef< [role=checkbox]]:translate-y-[2px]", + "p-2 align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]", className )} {...props} diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx index 477a8fd2f..4c8aea614 100644 --- a/components/ui/textarea.tsx +++ b/components/ui/textarea.tsx @@ -10,7 +10,7 @@ const Textarea = React.forwardRef( return (