Design Updates: Breadcrumbs, Empty State, new Charts and new colors

Design Updates: Breadcrumbs, Empty State, new Charts and new colors * Add Breadcrumb component to UI package * Add AppBreadcrumbs for improved navigation: Replaced static text descriptions with the new AppBreadcrumbs component across multiple pages to enhance navigation. Addressed an issue with Supabase client warnings by temporarily suppressing getSession warnings. Also made minor UI adjustments, including adjustments to heading styles and layout features. * Enhance UI styling and configuration settings: Updated various UI components and global styles to improve styling consistency and responsiveness. * Update global styles and adjust padding: Updated several CSS variables for improved color accuracy and appearance. Added padding to admin account page body for better layout consistency. * Refactor UI components and adjust styling: Replaced Heading tags in Plan Picker with span for consistency. Added active and hover states to buttons in the sidebar. Refined background, layout styling, and color schemes across various components. Removed sidebar case in Page component switch statement. * Add Chart Components and Integrate into Dashboard: Introduced `recharts` library and created `Chart` components. Updated dashboard to use the new components and enhanced UI/UX with descriptions and restructured cards. * Enhance dashboard demo UI layout: Refactor the layout by adjusting flex properties and spacing classes to improve component alignment. Update dummy data generation and Figure font size for better visual consistency. * Update localization keys for navigation labels: Changed localization keys for tab labels to use 'routes' prefix for consistency. Adjusted corresponding component references and added missing keys for routes. This ensures better organization and uniformity in the code. * Add EmptyState component and enhance account handling: Introduced a new EmptyState component for UI consistency and updated JSON locales with 'account' route. Modified HomeAddAccountButton to accept className prop and refactored HomeAccountsListEmptyState to use the new EmptyState component. Updated navigation config to align labels in locales. * Add locale support and enhance currency formatting: This commit introduces locale-based currency formatting across billing components by utilizing the `useTranslation` hook to fetch the current language. It also refactors the `formatCurrency` function to accept an object parameter for better readability and reusability. * Fix typo in devDependencies section of template generator: Corrected a syntax error in `package.json.hbs` template affecting the `@kit/tsconfig` entry. The change ensures that the dependency is properly defined and prevents potential issues during package management. * Update heading levels and add tracking-tight class in auth shell: Changed Heading components from level 4 to level 5 and added the 'tracking-tight' class in multiple auth-related pages. This improves visual consistency and better aligns the typography across the application.
2024-08-04 23:25:28 +08:00
parent 23154c366d
commit e696f1aed0
53 changed files with 1795 additions and 515 deletions
--- a/apps/web/app/(marketing)/_components/site-page-header.tsx
+++ b/apps/web/app/(marketing)/_components/site-page-header.tsx
@@ -1,19 +1,27 @@
 import { cn } from '@kit/ui/utils';

-export function SitePageHeader(props: {
+export function SitePageHeader({
+  title,
+  subtitle,
+  container = true,
+  className = ''
+}: {
  title: string;
  subtitle: string;
+  container?: boolean;
  className?: string;
 }) {
+  const containerClass = container ? 'container' : '';
+
  return (
-    <div className={cn('border-b py-8 xl:py-10 2xl:py-12', props.className)}>
-      <div className={'container flex flex-col space-y-2 lg:space-y-4'}>
+    <div className={cn('border-b py-8 xl:py-10 2xl:py-12', className)}>
+      <div className={cn('flex flex-col space-y-2 lg:space-y-4', containerClass)}>
        <h1
          className={
            'font-heading text-3xl font-medium tracking-tighter dark:text-white xl:text-5xl'
          }
        >
-          {props.title}
+          {title}
        </h1>

        <h2
@@ -21,7 +29,7 @@ export function SitePageHeader(props: {
            'text-lg tracking-tight text-muted-foreground 2xl:text-2xl'
          }
        >
-          {props.subtitle}
+          {subtitle}
        </h2>
      </div>
    </div>
--- a/apps/web/app/(marketing)/blog/_components/html-renderer.module.css
+++ b/apps/web/app/(marketing)/blog/_components/html-renderer.module.css
@@ -37,11 +37,11 @@ For more info: https://github.com/tailwindlabs/tailwindcss/issues/3258#issuecomm
 }

 .HTML p {
-  @apply mb-4 mt-2 text-base leading-7;
+  @apply mb-4 mt-2 text-base leading-7 text-muted-foreground;
 }

 .HTML li {
-  @apply relative my-1.5 text-base leading-7;
+  @apply relative my-1.5 text-base leading-7 text-muted-foreground;
 }

 .HTML ul > li:before {
--- a/apps/web/app/(marketing)/docs/[...slug]/page.tsx
+++ b/apps/web/app/(marketing)/docs/[...slug]/page.tsx
@@ -52,9 +52,14 @@ async function DocumentationPage({ params }: PageParams) {

  return (
    <div className={'flex flex-1 flex-col'}>
-      <SitePageHeader title={page.title} subtitle={description} />
+      <SitePageHeader
+        className={'lg:px-8'}
+        container={false}
+        title={page.title}
+        subtitle={description}
+      />

-      <div className={'container flex max-w-5xl flex-col space-y-4 py-6'}>
+      <div className={'flex flex-col space-y-4 py-6 lg:px-8'}>
        <article className={styles.HTML}>
          <ContentRenderer content={page.content} />
        </article>
--- a/apps/web/app/(marketing)/docs/page.tsx
+++ b/apps/web/app/(marketing)/docs/page.tsx
@@ -1,5 +1,3 @@
-import { PageBody } from '@kit/ui/page';
-
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';

@@ -23,20 +21,18 @@ async function DocsPage() {
  const cards = items.filter((item) => !item.parentId);

  return (
-    <PageBody>
-      <div className={'flex flex-col space-y-8 xl:space-y-16'}>
-        <SitePageHeader
-          title={t('marketing:documentation')}
-          subtitle={t('marketing:documentationSubtitle')}
-        />
+    <div className={'flex flex-col space-y-6 xl:space-y-10'}>
+      <SitePageHeader
+        title={t('marketing:documentation')}
+        subtitle={t('marketing:documentationSubtitle')}
+      />

-        <div className={'flex flex-col items-center'}>
-          <div className={'container mx-auto max-w-5xl'}>
-            <DocsCards cards={cards} />
-          </div>
+      <div className={'flex flex-col items-center'}>
+        <div className={'container mx-auto max-w-5xl'}>
+          <DocsCards cards={cards} />
        </div>
      </div>
-    </PageBody>
+    </div>
  );
 }

--- a/apps/web/app/auth/password-reset/page.tsx
+++ b/apps/web/app/auth/password-reset/page.tsx
@@ -23,7 +23,7 @@ const redirectPath = `${callback}?next=${passwordUpdate}`;
 function PasswordResetPage() {
  return (
    <>
-      <Heading level={4}>
+      <Heading level={5} className={'tracking-tight'}>
        <Trans i18nKey={'auth:passwordResetLabel'} />
      </Heading>

--- a/apps/web/app/auth/sign-in/page.tsx
+++ b/apps/web/app/auth/sign-in/page.tsx
@@ -39,7 +39,7 @@ function SignInPage({ searchParams }: SignInPageProps) {

  return (
    <>
-      <Heading level={4}>
+      <Heading level={5} className={'tracking-tight'}>
        <Trans i18nKey={'auth:signInHeading'} />
      </Heading>

--- a/apps/web/app/auth/sign-up/page.tsx
+++ b/apps/web/app/auth/sign-up/page.tsx
@@ -38,7 +38,7 @@ function SignUpPage({ searchParams }: Props) {

  return (
    <>
-      <Heading level={4}>
+      <Heading level={5} className={'tracking-tight'}>
        <Trans i18nKey={'auth:signUpHeading'} />
      </Heading>

--- a/apps/web/app/home/(user)/_components/home-accounts-list.tsx
+++ b/apps/web/app/home/(user)/_components/home-accounts-list.tsx
@@ -7,7 +7,12 @@ import {
  CardButtonHeader,
  CardButtonTitle,
 } from '@kit/ui/card-button';
-import { Heading } from '@kit/ui/heading';
+import {
+  EmptyState,
+  EmptyStateButton,
+  EmptyStateHeading,
+  EmptyStateText,
+} from '@kit/ui/empty-state';
 import { Trans } from '@kit/ui/trans';

 import { loadUserWorkspace } from '../_lib/server/load-user-workspace';
@@ -39,21 +44,18 @@ export function HomeAccountsList() {

 function HomeAccountsListEmptyState() {
  return (
-    <div className="flex flex-col items-center justify-center space-y-8 py-24">
-      <div className="flex flex-col items-center space-y-1">
-        <Heading level={2}>
+    <div className={'flex flex-1'}>
+      <EmptyState>
+        <EmptyStateButton asChild>
+          <HomeAddAccountButton className={'mt-4'} />
+        </EmptyStateButton>
+        <EmptyStateHeading>
          <Trans i18nKey={'account:noTeamsYet'} />
-        </Heading>
-
-        <Heading
-          className="font-sans font-medium text-muted-foreground"
-          level={4}
-        >
+        </EmptyStateHeading>
+        <EmptyStateText>
          <Trans i18nKey={'account:createTeam'} />
-        </Heading>
-      </div>
-
-      <HomeAddAccountButton />
+        </EmptyStateText>
+      </EmptyState>
    </div>
  );
 }
--- a/apps/web/app/home/(user)/_components/home-add-account-button.tsx
+++ b/apps/web/app/home/(user)/_components/home-add-account-button.tsx
@@ -6,12 +6,15 @@ import { CreateTeamAccountDialog } from '@kit/team-accounts/components';
 import { Button } from '@kit/ui/button';
 import { Trans } from '@kit/ui/trans';

-export function HomeAddAccountButton() {
+export function HomeAddAccountButton(props: { className?: string }) {
  const [isAddingAccount, setIsAddingAccount] = useState(false);

  return (
    <>
-      <Button size="sm" onClick={() => setIsAddingAccount(true)}>
+      <Button
+        className={props.className}
+        onClick={() => setIsAddingAccount(true)}
+      >
        <Trans i18nKey={'account:createTeamButtonLabel'} />
      </Button>

--- a/apps/web/app/home/(user)/billing/page.tsx
+++ b/apps/web/app/home/(user)/billing/page.tsx
@@ -7,6 +7,7 @@ import { If } from '@kit/ui/if';
 import { PageBody } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';

+import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
 import billingConfig from '~/config/billing.config';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
@@ -35,8 +36,8 @@ async function PersonalAccountBillingPage() {
  return (
    <>
      <HomeLayoutPageHeader
-        title={<Trans i18nKey={'common:billingTabLabel'} />}
-        description={<Trans i18nKey={'common:billingTabDescription'} />}
+        title={<Trans i18nKey={'common:routes.billing'} />}
+        description={<AppBreadcrumbs />}
      />

      <PageBody>
--- a/apps/web/app/home/(user)/page.tsx
+++ b/apps/web/app/home/(user)/page.tsx
@@ -20,7 +20,7 @@ function UserHomePage() {
  return (
    <>
      <HomeLayoutPageHeader
-        title={<Trans i18nKey={'common:homeTabLabel'} />}
+        title={<Trans i18nKey={'common:routes.home'} />}
        description={<Trans i18nKey={'common:homeTabDescription'} />}
      />

--- a/apps/web/app/home/(user)/settings/layout.tsx
+++ b/apps/web/app/home/(user)/settings/layout.tsx
@@ -1,5 +1,6 @@
 import { Trans } from '@kit/ui/trans';

+import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
 import { withI18n } from '~/lib/i18n/with-i18n';

 // local imports
@@ -9,8 +10,8 @@ function UserSettingsLayout(props: React.PropsWithChildren) {
  return (
    <>
      <HomeLayoutPageHeader
-        title={<Trans i18nKey={'account:accountTabLabel'} />}
-        description={<Trans i18nKey={'account:accountTabDescription'} />}
+        title={<Trans i18nKey={'account:routes.settings'} />}
+        description={<AppBreadcrumbs />}
      />

      {props.children}
--- a/apps/web/app/home/[account]/_components/dashboard-demo.tsx
+++ b/apps/web/app/home/[account]/_components/dashboard-demo.tsx
--- a/apps/web/app/home/[account]/billing/error.tsx
+++ b/apps/web/app/home/[account]/billing/error.tsx
@@ -4,6 +4,7 @@ import { ExclamationTriangleIcon } from '@radix-ui/react-icons';

 import { useCaptureException } from '@kit/monitoring/hooks';
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
 import { Button } from '@kit/ui/button';
 import { PageBody, PageHeader } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';
@@ -20,8 +21,8 @@ export default function BillingErrorPage({
  return (
    <>
      <PageHeader
-        title={<Trans i18nKey={'common:billingTabLabel'} />}
-        description={<Trans i18nKey={'common:billingTabDescription'} />}
+        title={<Trans i18nKey={'common:routes.billing'} />}
+        description={<AppBreadcrumbs />}
      />

      <PageBody>
--- a/apps/web/app/home/[account]/billing/page.tsx
+++ b/apps/web/app/home/[account]/billing/page.tsx
@@ -6,11 +6,13 @@ import {
  CurrentSubscriptionCard,
 } from '@kit/billing-gateway/components';
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+
 import { If } from '@kit/ui/if';
 import { PageBody } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';

+import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
 import billingConfig from '~/config/billing.config';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
@@ -75,8 +77,8 @@ async function TeamAccountBillingPage({ params }: Params) {
    <>
      <TeamAccountLayoutPageHeader
        account={params.account}
-        title={<Trans i18nKey={'common:billingTabLabel'} />}
-        description={<Trans i18nKey={'common:billingTabDescription'} />}
+        title={<Trans i18nKey={'common:routes.billing'} />}
+        description={<AppBreadcrumbs />}
      />

      <PageBody>
--- a/apps/web/app/home/[account]/members/page.tsx
+++ b/apps/web/app/home/[account]/members/page.tsx
@@ -18,6 +18,7 @@ import { If } from '@kit/ui/if';
 import { PageBody } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';

+import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';

@@ -55,18 +56,18 @@ async function TeamAccountMembersPage({ params }: Params) {
  return (
    <>
      <TeamAccountLayoutPageHeader
-        title={<Trans i18nKey={'common:membersTabLabel'} />}
-        description={<Trans i18nKey={'common:membersTabDescription'} />}
+        title={<Trans i18nKey={'common:routes.members'} />}
+        description={<AppBreadcrumbs />}
        account={account.slug}
      />

      <PageBody>
-        <div className={'flex w-full max-w-4xl flex-col space-y-6 pb-32'}>
+        <div className={'flex w-full max-w-4xl flex-col space-y-4 pb-32'}>
          <Card>
            <CardHeader className={'flex flex-row justify-between'}>
              <div className={'flex flex-col space-y-1.5'}>
                <CardTitle>
-                  <Trans i18nKey={'common:membersTabLabel'} />
+                  <Trans i18nKey={'common:accountMembers'} />
                </CardTitle>

                <CardDescription>
--- a/apps/web/app/home/[account]/page.tsx
+++ b/apps/web/app/home/[account]/page.tsx
@@ -1,10 +1,8 @@
 import loadDynamic from 'next/dynamic';

-import { PlusCircle } from 'lucide-react';
-
-import { Button } from '@kit/ui/button';
+import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
+import { LoadingOverlay } from '@kit/ui/loading-overlay';
 import { PageBody } from '@kit/ui/page';
-import { Spinner } from '@kit/ui/spinner';
 import { Trans } from '@kit/ui/trans';

 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
@@ -21,18 +19,11 @@ const DashboardDemo = loadDynamic(
  {
    ssr: false,
    loading: () => (
-      <div
-        className={
-          'flex h-full flex-1 flex-col items-center justify-center space-y-4' +
-          ' py-24'
-        }
-      >
-        <Spinner />
-
-        <div>
+      <LoadingOverlay>
+        <span className={'text-muted-foreground'}>
          <Trans i18nKey={'common:loading'} />
-        </div>
-      </div>
+        </span>
+      </LoadingOverlay>
    ),
  },
 );
@@ -51,14 +42,9 @@ function TeamAccountHomePage({ params }: { params: Params }) {
    <>
      <TeamAccountLayoutPageHeader
        account={params.account}
-        title={<Trans i18nKey={'common:dashboardTabLabel'} />}
-        description={<Trans i18nKey={'common:dashboardTabDescription'} />}
-      >
-        <Button>
-          <PlusCircle className={'mr-1 h-4'} />
-          <span>Add Widget</span>
-        </Button>
-      </TeamAccountLayoutPageHeader>
+        title={<Trans i18nKey={'common:routes.dashboard'} />}
+        description={<AppBreadcrumbs />}
+      />

      <PageBody>
        <DashboardDemo />
--- a/apps/web/app/home/[account]/settings/page.tsx
+++ b/apps/web/app/home/[account]/settings/page.tsx
@@ -4,6 +4,7 @@ import { TeamAccountSettingsContainer } from '@kit/team-accounts/components';
 import { PageBody } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';

+import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
 import featuresFlagConfig from '~/config/feature-flags.config';
 import pathsConfig from '~/config/paths.config';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
@@ -51,7 +52,7 @@ async function TeamAccountSettingsPage(props: Props) {
      <TeamAccountLayoutPageHeader
        account={account.slug}
        title={<Trans i18nKey={'teams:settings.pageTitle'} />}
-        description={<Trans i18nKey={'teams:settings.pageDescription'} />}
+        description={<AppBreadcrumbs />}
      />

      <PageBody>