From b97e41e20bf9fdfa1f0322d54c62d6cf6fefea64 Mon Sep 17 00:00:00 2001 From: "kemal.earth" <606977+kemaldotearth@users.noreply.github.com> Date: Fri, 12 Dec 2025 10:08:48 +0000 Subject: [PATCH] chore(design-system): tidy up mobile styling (#41267) * feat: tidy up header on mobile * fix: graceful searchbar header * fix: header classes and unused elements * feat: trim down logo on header * fix: logos again * chore: remove dead code * fix: classic dark logo header * fix: page padding tidy ups * fix: some font sizing * feat: updated homepage cards * fix: toc layout * fix: toc again * feat: homepage cards all the same size * fix: footer paddings * fix: pager if only 1 directional item * fix: sidebar padding issues * chore: killing all the defaults * fix: import for side nav * fix: sidebar complaining about dialog title * fix: homepage paddings * fix: killing one more default export * feat: update colours icon to francescos * fix: loose repeated copy --- .../app/(app)/docs/[[...slug]]/page.tsx | 14 +- apps/design-system/app/(app)/layout.tsx | 36 +-- apps/design-system/app/(app)/page.tsx | 124 ++++---- apps/design-system/app/Providers.tsx | 5 +- .../design-system/components/command-menu.tsx | 30 +- .../components/mobile-sidebar-sheet.tsx | 20 ++ apps/design-system/components/pager.tsx | 5 +- .../components/side-navigation-item.tsx | 11 +- .../components/side-navigation.tsx | 8 +- apps/design-system/components/site-footer.tsx | 4 +- .../components/theme-switcher-dropdown.tsx | 22 +- .../components/top-navigation.tsx | 47 +-- apps/design-system/config/docs.ts | 278 +++++++++--------- .../context/mobile-sidebar-context.tsx | 34 +++ apps/design-system/eslint.config.cjs | 2 +- .../design-system/hooks/use-mobile-sidebar.ts | 24 ++ .../atoms--classic-dark.svg | 8 + .../img/design-system-marks/atoms--dark.svg | 1 + .../img/design-system-marks/atoms--light.svg | 8 + .../colours--classic-dark.svg | 6 + .../img/design-system-marks/colours--dark.svg | 6 + .../design-system-marks/colours--light.svg | 6 + .../fragments--classic-dark.svg | 8 + .../design-system-marks/fragments--dark.svg | 8 + .../design-system-marks/fragments--light.svg | 8 + .../logo--classic-dark.svg | 26 ++ .../img/design-system-marks/logo--dark.svg | 26 ++ .../img/design-system-marks/logo--light.svg | 26 ++ .../ui-patterns--classic-dark.svg | 8 + .../design-system-marks/ui-patterns--dark.svg | 8 + .../ui-patterns--light.svg | 8 + 31 files changed, 512 insertions(+), 313 deletions(-) create mode 100644 apps/design-system/components/mobile-sidebar-sheet.tsx create mode 100644 apps/design-system/context/mobile-sidebar-context.tsx create mode 100644 apps/design-system/hooks/use-mobile-sidebar.ts create mode 100644 apps/design-system/public/img/design-system-marks/atoms--classic-dark.svg create mode 100644 apps/design-system/public/img/design-system-marks/atoms--dark.svg create mode 100644 apps/design-system/public/img/design-system-marks/atoms--light.svg create mode 100644 apps/design-system/public/img/design-system-marks/colours--classic-dark.svg create mode 100644 apps/design-system/public/img/design-system-marks/colours--dark.svg create mode 100644 apps/design-system/public/img/design-system-marks/colours--light.svg create mode 100644 apps/design-system/public/img/design-system-marks/fragments--classic-dark.svg create mode 100644 apps/design-system/public/img/design-system-marks/fragments--dark.svg create mode 100644 apps/design-system/public/img/design-system-marks/fragments--light.svg create mode 100644 apps/design-system/public/img/design-system-marks/logo--classic-dark.svg create mode 100644 apps/design-system/public/img/design-system-marks/logo--dark.svg create mode 100644 apps/design-system/public/img/design-system-marks/logo--light.svg create mode 100644 apps/design-system/public/img/design-system-marks/ui-patterns--classic-dark.svg create mode 100644 apps/design-system/public/img/design-system-marks/ui-patterns--dark.svg create mode 100644 apps/design-system/public/img/design-system-marks/ui-patterns--light.svg diff --git a/apps/design-system/app/(app)/docs/[[...slug]]/page.tsx b/apps/design-system/app/(app)/docs/[[...slug]]/page.tsx index b6b883b9323..9454a245b8a 100644 --- a/apps/design-system/app/(app)/docs/[[...slug]]/page.tsx +++ b/apps/design-system/app/(app)/docs/[[...slug]]/page.tsx @@ -4,7 +4,7 @@ import { SourcePanel } from '@/components/source-panel' import { DashboardTableOfContents } from '@/components/toc' import { siteConfig } from '@/config/site' import { getTableOfContents } from '@/lib/toc' -import { absoluteUrl, cn } from '@/lib/utils' +import { absoluteUrl } from '@/lib/utils' import '@/styles/code-block-variables.css' import '@/styles/mdx.css' import { allDocs } from 'contentlayer/generated' @@ -83,15 +83,15 @@ export default async function DocPage(props: DocPageProps) { const toc = await getTableOfContents(doc.body.raw) return ( -
-
+
+
Docs
{doc.title}
-

{doc.title}

+

{doc.title}

{doc.description && (

{doc.description} @@ -107,15 +107,15 @@ export default async function DocPage(props: DocPageProps) {

{doc.toc && (
-
+
-
+
)} -
+ ) } diff --git a/apps/design-system/app/(app)/layout.tsx b/apps/design-system/app/(app)/layout.tsx index 49b81a77a8f..775f444ff4f 100644 --- a/apps/design-system/app/(app)/layout.tsx +++ b/apps/design-system/app/(app)/layout.tsx @@ -1,34 +1,28 @@ -import SideNavigation from '@/components/side-navigation' +import { SideNavigation } from '@/components/side-navigation' import { SiteFooter } from '@/components/site-footer' -// import ThemeSettings from '@/components/theme-settings' -import TopNavigation from '@/components/top-navigation' +import { TopNavigation } from '@/components/top-navigation' +import { MobileSidebarSheet } from '@/components/mobile-sidebar-sheet' import { ScrollArea } from 'ui' interface AppLayoutProps { children: React.ReactNode } -export default function AppLayout({ children }: AppLayoutProps) { +export default async function AppLayout({ children }: AppLayoutProps) { return ( <> - {/* main container */} -
- {/* main content */} -
- {/* {children} */} -
-
- - {children} -
-
-
-
+ +
+
+ + {children} +
+
) diff --git a/apps/design-system/app/(app)/page.tsx b/apps/design-system/app/(app)/page.tsx index 38bfce96e77..9540c812a46 100644 --- a/apps/design-system/app/(app)/page.tsx +++ b/apps/design-system/app/(app)/page.tsx @@ -1,85 +1,59 @@ import { HomepageSvgHandler } from '@/components/homepage-svg-handler' import Link from 'next/link' +import { Paintbrush } from 'lucide-react' +import { Realtime, Database, Auth } from 'icons/src/icons' export default function Home() { return ( -
-
-
- {/*
- -
*/} -
-

Supabase Design System

-

- Design resources for building consistent user experiences -

-
+
+
+
+

Supabase Design System

+

+ Design resources for building consistent user experiences +

- {/* Homepage items */} - -
- -
- +
+ +
+
+ +

Atom components

Building blocks of User interfaces

- -
- + +
+
+ +

Fragment components

Components assembled from Atoms

- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
+ +
+
+ +
+
+

UI Patterns components

+

+ Components assembled from Atoms & Fragments +

+
+
+ + +
+
+

Colors

@@ -88,27 +62,33 @@ export default function Home() {
- -
- + +
+
+ +

Theming

-

Components assembled from Atoms

+

Simple extensible theming system

- -
- + +
+
+ + + +

Icons

-

Components assembled from Atoms

+

Custom icons for Supabase

-
+ ) } diff --git a/apps/design-system/app/Providers.tsx b/apps/design-system/app/Providers.tsx index 87bac1f1e2f..d2ace2cd703 100644 --- a/apps/design-system/app/Providers.tsx +++ b/apps/design-system/app/Providers.tsx @@ -5,12 +5,15 @@ import { ThemeProvider as NextThemesProvider } from 'next-themes' import { ThemeProviderProps } from 'next-themes/dist/types' import { TooltipProvider } from 'ui' +import { MobileSidebarProvider } from '@/context/mobile-sidebar-context' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return ( - {children} + + {children} + ) diff --git a/apps/design-system/components/command-menu.tsx b/apps/design-system/components/command-menu.tsx index 1673e8f2ed0..5a2f558b385 100644 --- a/apps/design-system/components/command-menu.tsx +++ b/apps/design-system/components/command-menu.tsx @@ -1,6 +1,6 @@ 'use client' -import { CircleIcon, LaptopIcon, MoonIcon, SunIcon } from 'lucide-react' +import { CircleIcon, LaptopIcon, MoonIcon, SunIcon, Search } from 'lucide-react' import { useTheme } from 'next-themes' import { useRouter } from 'next/navigation' import * as React from 'react' @@ -17,6 +17,7 @@ import { CommandList_Shadcn_, CommandSeparator_Shadcn_, DialogProps, + DialogTitle, } from 'ui' export function CommandMenu({ ...props }: DialogProps) { @@ -55,8 +56,7 @@ export function CommandMenu({ ...props }: DialogProps) { + + /> Theme diff --git a/apps/design-system/components/top-navigation.tsx b/apps/design-system/components/top-navigation.tsx index 4aec103a965..5e9c85dff48 100644 --- a/apps/design-system/components/top-navigation.tsx +++ b/apps/design-system/components/top-navigation.tsx @@ -1,30 +1,37 @@ -// import { docsConfig } from '@/config/docs' +'use client' + import Link from 'next/link' +import { Menu } from 'lucide-react' +import { Button } from 'ui' import { CommandMenu } from './command-menu' import { HomepageSvgHandler } from './homepage-svg-handler' import { ThemeSwitcherDropdown } from './theme-switcher-dropdown' +import { useMobileSidebar } from '@/hooks/use-mobile-sidebar' + +export const TopNavigation = () => { + const { toggle } = useMobileSidebar() -function TopNavigation() { return ( -
-
-