docs: visually separate DOCS suffix from Supabase wordmark in header

This commit is contained in:
Alan Daniel committed 2026-05-12 11:42:29 -04:00
1 parent c44c6fc6c8
commit a8cef6497b
2 files changed
+8 -5

No files matched your search

@@ -1,3 +1,5 @@
import { getCustomContent } from '~/lib/custom-content/getCustomContent'
import { useIsLoggedIn, useIsUserLoading } from 'common'
import { AnimatePresence, domAnimation, LazyMotion, m } from 'framer-motion'
import { X } from 'lucide-react'
import Image from 'next/image'
@@ -5,12 +7,9 @@ import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Dispatch, Fragment, SetStateAction, useEffect } from 'react'
import { useKey } from 'react-use'
import { useIsLoggedIn, useIsUserLoading } from 'common'
import { Accordion, Button, cn } from 'ui'
import { ThemeToggle } from 'ui-patterns/ThemeToggle'
import { getCustomContent } from '~/lib/custom-content/getCustomContent'
import type { DropdownMenuItem } from '../Navigation.types'
import { MenuItem, useActiveMenuLabel } from './GlobalNavigationMenu'
import { GLOBAL_MENU_ITEMS } from './NavigationMenu.constants'
@@ -146,7 +145,9 @@ const GlobalMobileMenu = ({ open, setOpen }: Props) => {
height={24}
alt="Supabase Logo"
/>
<span className="font-mono text-sm font-medium text-brand-link mb-px">DOCS</span>
<span className="font-mono text-sm font-medium text-brand-link mb-px ml-2 pl-2 border-l border-default">
DOCS
</span>
</Link>
<div className="flex gap-4 items-center">
<ThemeToggle contentClassName="bg-surface-200" />
@@ -121,7 +121,9 @@ const HeaderLogo = memo(() => {
height={navigationLogo?.height ?? 18}
alt="Supabase wordmark"
/>
<span className="font-mono text-sm font-medium text-brand-link mb-px">DOCS</span>
<span className="font-mono text-sm font-medium text-brand-link mb-px ml-2 pl-2 border-l border-default">
DOCS
</span>
</Link>
)
})