diff --git a/apps/web/README.md b/apps/web/README.md index 2689727ca..ec3c44234 100644 --- a/apps/web/README.md +++ b/apps/web/README.md @@ -1,3 +1,3 @@ # Your Application -Write here everything about your application. \ No newline at end of file +Write here everything about your application. diff --git a/apps/web/app/(marketing)/_components/site-header-account-section.tsx b/apps/web/app/(marketing)/_components/site-header-account-section.tsx index 81a7a3487..1b2976d21 100644 --- a/apps/web/app/(marketing)/_components/site-header-account-section.tsx +++ b/apps/web/app/(marketing)/_components/site-header-account-section.tsx @@ -5,8 +5,6 @@ import Link from 'next/link'; import type { User } from '@supabase/supabase-js'; -import { ArrowRightIcon } from 'lucide-react'; - import { PersonalAccountDropdown } from '@kit/accounts/personal-account-dropdown'; import { useSignOut } from '@kit/supabase/hooks/use-sign-out'; import { useUser } from '@kit/supabase/hooks/use-user'; @@ -65,30 +63,26 @@ function SuspendedPersonalAccountDropdown(props: { user: User | null }) { function AuthButtons() { return ( -
-
+
+
+
- + +
- -
); } diff --git a/apps/web/app/(marketing)/_components/site-navigation.tsx b/apps/web/app/(marketing)/_components/site-navigation.tsx index 567d0dceb..f4e235cdd 100644 --- a/apps/web/app/(marketing)/_components/site-navigation.tsx +++ b/apps/web/app/(marketing)/_components/site-navigation.tsx @@ -48,8 +48,8 @@ export function SiteNavigation() { return ( <>
- - + + {NavItems} diff --git a/apps/web/app/(marketing)/_components/site-page-header.tsx b/apps/web/app/(marketing)/_components/site-page-header.tsx index f451b0b9c..e2eb8bff1 100644 --- a/apps/web/app/(marketing)/_components/site-page-header.tsx +++ b/apps/web/app/(marketing)/_components/site-page-header.tsx @@ -15,12 +15,10 @@ export function SitePageHeader({ return (
-
+

{title} @@ -28,7 +26,7 @@ export function SitePageHeader({

{subtitle} diff --git a/apps/web/app/(marketing)/blog/_components/html-renderer.module.css b/apps/web/app/(marketing)/blog/_components/html-renderer.module.css deleted file mode 100644 index b31f68626..000000000 --- a/apps/web/app/(marketing)/blog/_components/html-renderer.module.css +++ /dev/null @@ -1,126 +0,0 @@ -.HTML { - @apply text-secondary-foreground; -} - -.HTML h1 { - @apply mt-14 text-4xl font-semibold font-heading tracking-tight; -} - -.HTML h2 { - @apply mb-6 mt-12 font-semibold text-2xl font-heading tracking-tight; -} - -.HTML h3 { - @apply mt-12 text-xl font-semibold font-heading tracking-tight; -} - -.HTML h4 { - @apply mt-8 text-lg font-medium tracking-tight; -} - -.HTML h5 { - @apply mt-6 text-base font-medium tracking-tight; -} - -.HTML h6 { - @apply mt-2 text-sm font-normal tracking-tight; -} - -/** -Tailwind "dark" variants do not work with CSS Modules -We work it around using :global(.dark) -For more info: https://github.com/tailwindlabs/tailwindcss/issues/3258#issuecomment-770215347 -*/ -:global(.dark) .HTML h1, -:global(.dark) .HTML h2, -:global(.dark) .HTML h3, -:global(.dark) .HTML h4, -:global(.dark) .HTML h5, -:global(.dark) .HTML h6 { - @apply text-white; -} - -.HTML p { - @apply mb-6 mt-4 text-base leading-7 text-muted-foreground; -} - -.HTML li { - @apply relative my-1.5 text-base leading-7 text-muted-foreground; -} - -.HTML ul > li:before { - content: '-'; - - @apply mr-2; -} - -.HTML ol > li:before { - @apply inline-flex font-medium text-muted-foreground; - - content: counters(counts, '.') '. '; - font-feature-settings: 'tnum'; -} - -.HTML b, -.HTML strong { - @apply font-semibold text-secondary-foreground; -} - -:global(.dark) .HTML b, -:global(.dark) .HTML strong { - @apply text-white; -} - -.HTML img, -.HTML video { - @apply rounded-md; -} - -.HTML ul, -.HTML ol { - @apply pl-1; -} - -.HTML ol > li { - counter-increment: counts; -} - -.HTML ol > li:before { - @apply mr-2 inline-flex font-semibold; - - content: counters(counts, '.') '. '; - font-feature-settings: 'tnum'; -} - -.HTML p > code, .HTML li > code { - @apply p-0.5 text-sm font-semibold bg-muted/50 border font-mono text-secondary-foreground; -} - -.HTML blockquote { - @apply my-4 border-l-8 border border-primary px-6 py-4 text-lg font-medium text-muted-foreground; -} - -.HTML a { - @apply border-b-black border-b hover:border-b-2 pb-0.5 text-secondary-foreground font-semibold; -} - -:global(.dark) .HTML a { - @apply border-yellow-300; -} - -.HTML hr { - @apply mt-8 mb-6 border-border; -} - -.HTML [role='alert'] { - @apply py-4 m-0 my-8; -} - -.HTML [role='alert'] * { - color: inherit; - @apply m-0 p-0 text-sm; -} - -.HTML [role='alert'] h5 { - color: inherit; -} \ No newline at end of file diff --git a/apps/web/app/(marketing)/blog/_components/post-preview.tsx b/apps/web/app/(marketing)/blog/_components/post-preview.tsx index b7b0343f7..e86709de4 100644 --- a/apps/web/app/(marketing)/blog/_components/post-preview.tsx +++ b/apps/web/app/(marketing)/blog/_components/post-preview.tsx @@ -25,7 +25,7 @@ export function PostPreview({ const slug = `/blog/${post.slug}`; return ( -
+
{(imageUrl) => (
@@ -42,13 +42,13 @@ export function PostPreview({
-

+

{title}

-
+
@@ -56,7 +56,7 @@ export function PostPreview({

diff --git a/apps/web/app/(marketing)/blog/_components/post.tsx b/apps/web/app/(marketing)/blog/_components/post.tsx index d7e0b251b..3b0f0f783 100644 --- a/apps/web/app/(marketing)/blog/_components/post.tsx +++ b/apps/web/app/(marketing)/blog/_components/post.tsx @@ -1,7 +1,6 @@ import type { Cms } from '@kit/cms'; import { ContentRenderer } from '@kit/cms'; -import styles from './html-renderer.module.css'; import { PostHeader } from './post-header'; export function Post({ @@ -16,7 +15,7 @@ export function Post({
-
+
diff --git a/apps/web/app/(marketing)/docs/[...slug]/page.tsx b/apps/web/app/(marketing)/docs/[...slug]/page.tsx index f29a3b7dd..4a83526e1 100644 --- a/apps/web/app/(marketing)/docs/[...slug]/page.tsx +++ b/apps/web/app/(marketing)/docs/[...slug]/page.tsx @@ -9,8 +9,6 @@ import { cn } from '@kit/ui/utils'; import { withI18n } from '~/lib/i18n/with-i18n'; -// styles -import styles from '../../blog/_components/html-renderer.module.css'; // local imports import { DocsCards } from '../_components/docs-cards'; import { DocsTableOfContents } from '../_components/docs-table-of-contents'; @@ -61,20 +59,18 @@ async function DocumentationPage({ params }: DocumentationPageProps) { ); return ( -
+
-
-
-

{page.title}

+
+
+

{page.title}

-

- {description} -

+

{description}

- +
+ +
diff --git a/apps/web/app/(marketing)/docs/_components/docs-card.tsx b/apps/web/app/(marketing)/docs/_components/docs-card.tsx index 3d6548837..7047b7be9 100644 --- a/apps/web/app/(marketing)/docs/_components/docs-card.tsx +++ b/apps/web/app/(marketing)/docs/_components/docs-card.tsx @@ -17,14 +17,14 @@ export function DocsCard({ return (

{title}

{subtitle && ( -
+

)} @@ -33,17 +33,19 @@ export function DocsCard({
{link && ( -
- - +
+ + {link.label ?? } - + - +
)}
diff --git a/apps/web/app/(marketing)/docs/_components/docs-nav-link.tsx b/apps/web/app/(marketing)/docs/_components/docs-nav-link.tsx index 012971fbd..c9a96bc3c 100644 --- a/apps/web/app/(marketing)/docs/_components/docs-nav-link.tsx +++ b/apps/web/app/(marketing)/docs/_components/docs-nav-link.tsx @@ -22,8 +22,8 @@ export function DocsNavLink({ diff --git a/apps/web/app/(marketing)/docs/_components/docs-navigation.tsx b/apps/web/app/(marketing)/docs/_components/docs-navigation.tsx index 9dd170efb..10d2d0824 100644 --- a/apps/web/app/(marketing)/docs/_components/docs-navigation.tsx +++ b/apps/web/app/(marketing)/docs/_components/docs-navigation.tsx @@ -116,7 +116,7 @@ export function DocsNavigation({ <> diff --git a/apps/web/app/(marketing)/docs/_components/docs-table-of-contents.tsx b/apps/web/app/(marketing)/docs/_components/docs-table-of-contents.tsx index 3ad29b5f4..ba8984d7c 100644 --- a/apps/web/app/(marketing)/docs/_components/docs-table-of-contents.tsx +++ b/apps/web/app/(marketing)/docs/_components/docs-table-of-contents.tsx @@ -13,7 +13,7 @@ export function DocsTableOfContents(props: { data: NavItem[] }) { const navData = props.data; return ( -
+
    {item.text} @@ -35,7 +35,7 @@ export function DocsTableOfContents(props: { data: NavItem[] }) { > {child.text} diff --git a/apps/web/app/(marketing)/docs/layout.tsx b/apps/web/app/(marketing)/docs/layout.tsx index 1ad7cd137..bba657dfb 100644 --- a/apps/web/app/(marketing)/docs/layout.tsx +++ b/apps/web/app/(marketing)/docs/layout.tsx @@ -14,7 +14,7 @@ async function DocsLayout({ children }: React.PropsWithChildren) { return ( diff --git a/apps/web/app/(marketing)/docs/page.tsx b/apps/web/app/(marketing)/docs/page.tsx index f8ded523a..7a7389d45 100644 --- a/apps/web/app/(marketing)/docs/page.tsx +++ b/apps/web/app/(marketing)/docs/page.tsx @@ -21,7 +21,7 @@ async function DocsPage() { const cards = items.filter((item) => !item.parentId); return ( -
    +
    -
    +
    diff --git a/apps/web/app/(marketing)/layout.tsx b/apps/web/app/(marketing)/layout.tsx index dda93b0a9..d7295d1ef 100644 --- a/apps/web/app/(marketing)/layout.tsx +++ b/apps/web/app/(marketing)/layout.tsx @@ -2,7 +2,6 @@ import { getSupabaseServerClient } from '@kit/supabase/server-client'; import { SiteFooter } from '~/(marketing)/_components/site-footer'; import { SiteHeader } from '~/(marketing)/_components/site-header'; -import { BackgroundHue } from '~/components/background-hue'; import { withI18n } from '~/lib/i18n/with-i18n'; async function SiteLayout(props: React.PropsWithChildren) { @@ -18,7 +17,6 @@ async function SiteLayout(props: React.PropsWithChildren) { {props.children} -
    ); diff --git a/apps/web/app/(marketing)/page.tsx b/apps/web/app/(marketing)/page.tsx index e79f56aa0..34ed16e6c 100644 --- a/apps/web/app/(marketing)/page.tsx +++ b/apps/web/app/(marketing)/page.tsx @@ -12,6 +12,7 @@ import { FeatureShowcaseIconContainer, Hero, Pill, + PillActionButton, SecondaryHero, } from '@kit/ui/marketing'; import { Trans } from '@kit/ui/trans'; @@ -27,7 +28,12 @@ function Home() { - The leading SaaS Starter Kit for ambitious developers + The SaaS Starter Kit for ambitious developers + + + + + } title={ @@ -47,7 +53,7 @@ function Home() { - + The ultimate SaaS Starter Kit .{' '} - + Unleash your creativity and build your SaaS faster than ever with Makerkit. @@ -84,64 +90,36 @@ function Home() { > - {'Dashboard - + > - {'Sign - + > - {'Multi - + /> - {'Billing'} - + /> + +
    @@ -188,8 +166,8 @@ function MainCallToActionButton() { diff --git a/apps/web/app/auth/layout.tsx b/apps/web/app/auth/layout.tsx index 341bda461..ff7b33bc3 100644 --- a/apps/web/app/auth/layout.tsx +++ b/apps/web/app/auth/layout.tsx @@ -1,16 +1,9 @@ import { AuthLayoutShell } from '@kit/auth/shared'; import { AppLogo } from '~/components/app-logo'; -import { BackgroundHue } from '~/components/background-hue'; function AuthLayout({ children }: React.PropsWithChildren) { - return ( - - {children} - - - - ); + return {children}; } export default AuthLayout; diff --git a/apps/web/app/auth/password-reset/page.tsx b/apps/web/app/auth/password-reset/page.tsx index 48ee7ac6e..14473732b 100644 --- a/apps/web/app/auth/password-reset/page.tsx +++ b/apps/web/app/auth/password-reset/page.tsx @@ -23,9 +23,15 @@ const redirectPath = `${callback}?next=${passwordUpdate}`; function PasswordResetPage() { return ( <> - - - +
    + + + + +

    + +

    +
    diff --git a/apps/web/app/auth/sign-in/page.tsx b/apps/web/app/auth/sign-in/page.tsx index c16b4d50f..f2cbad471 100644 --- a/apps/web/app/auth/sign-in/page.tsx +++ b/apps/web/app/auth/sign-in/page.tsx @@ -39,9 +39,15 @@ async function SignInPage({ searchParams }: SignInPageProps) { return ( <> - - - +
    + + + + +

    + +

    +
    - - - +
    + + + + +

    + +

    +
    -
    +
    diff --git a/apps/web/app/home/[account]/_components/team-account-layout-mobile-navigation.tsx b/apps/web/app/home/[account]/_components/team-account-layout-mobile-navigation.tsx index ac644fb1f..6717c0884 100644 --- a/apps/web/app/home/[account]/_components/team-account-layout-mobile-navigation.tsx +++ b/apps/web/app/home/[account]/_components/team-account-layout-mobile-navigation.tsx @@ -98,7 +98,7 @@ function DropdownLink( {props.Icon} diff --git a/apps/web/components/background-hue.tsx b/apps/web/components/background-hue.tsx deleted file mode 100644 index 6c8e0f40b..000000000 --- a/apps/web/components/background-hue.tsx +++ /dev/null @@ -1,52 +0,0 @@ -const DEFAULT_COLORS_SCALE = { - 0: 'hsl(var(--primary))', - 1: 'hsl(var(--primary))', - 2: 'hsl(var(--primary))', -}; - -export function BackgroundHue({ - className, - opacity = 0.03, - colorsScale = DEFAULT_COLORS_SCALE, -}: { - className?: string; - opacity?: number; - colorsScale?: Record; -}) { - const colors = Object.values(colorsScale).map((color, index, array) => { - const offset = array.length > 1 ? index / (array.length - 1) : 0; - const stopOpacity = 1 - index / (array.length - 1); - - return ( - - ); - }); - - return ( - - ); -} diff --git a/apps/web/lib/fonts.ts b/apps/web/lib/fonts.ts index df6aefd10..bdf7195d0 100644 --- a/apps/web/lib/fonts.ts +++ b/apps/web/lib/fonts.ts @@ -42,7 +42,7 @@ export function getFontsClassName(theme?: string) { [], ); - return cn('min-h-screen bg-background antialiased', ...font, { + return cn('bg-background min-h-screen antialiased', ...font, { dark, light, }); diff --git a/apps/web/middleware.ts b/apps/web/middleware.ts index 1b133ae70..fe1ebf677 100644 --- a/apps/web/middleware.ts +++ b/apps/web/middleware.ts @@ -153,8 +153,11 @@ function getPatterns() { // If user is logged in and does not need to verify MFA, // redirect to home page. if (!isVerifyMfa) { + const nextPath = + req.nextUrl.searchParams.get('next') ?? pathsConfig.app.home; + return NextResponse.redirect( - new URL(pathsConfig.app.home, req.nextUrl.origin).href, + new URL(nextPath, req.nextUrl.origin).href, ); } }, diff --git a/apps/web/package.json b/apps/web/package.json index ab7f0d770..d153c1a42 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -91,7 +91,8 @@ "prettier": "^3.4.2", "require-in-the-middle": "7.5.0", "supabase": "^2.9.6", - "tailwindcss": "3.4.17", + "tailwindcss": "4.0.0", + "tailwindcss-animate": "^1.0.7", "typescript": "^5.7.3" }, "eslintConfig": { diff --git a/apps/web/public/images/dashboard.webp b/apps/web/public/images/dashboard.webp index 337b0d4c3..1dafa8ba3 100644 Binary files a/apps/web/public/images/dashboard.webp and b/apps/web/public/images/dashboard.webp differ diff --git a/apps/web/public/locales/en/auth.json b/apps/web/public/locales/en/auth.json index 6327f66de..d10947ee8 100644 --- a/apps/web/public/locales/en/auth.json +++ b/apps/web/public/locales/en/auth.json @@ -1,7 +1,9 @@ { "signUpHeading": "Create an account", "signUp": "Sign Up", + "signUpSubheading": "Fill the form below to create an account.", "signInHeading": "Sign in to your account", + "signInSubheading": "Welcome back! Please enter your details", "signIn": "Sign In", "getStarted": "Get started", "updatePassword": "Update Password", @@ -65,6 +67,7 @@ "acceptTermsAndConditions": "I accept the and ", "termsOfService": "Terms of Service", "privacyPolicy": "Privacy Policy", + "orContinueWith": "Or continue with", "errors": { "Invalid login credentials": "The credentials entered are invalid", "User already registered": "This credential is already in use. Please try with another one.", diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css index f36f66c00..3fc010039 100644 --- a/apps/web/styles/globals.css +++ b/apps/web/styles/globals.css @@ -1,127 +1,211 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +/* +* global.css +* +* Global styles for the entire application + */ -@layer base { - :root { - --background: 0 0% 100%; - --foreground: 224 71.4% 4.1%; - --card: 0 0% 100%; - --card-foreground: 224 71.4% 4.1%; - --popover: 0 0% 100%; - --popover-foreground: 224 71.4% 4.1%; - --primary: 220.9 39.3% 11%; - --primary-foreground: 210 20% 98%; - --secondary: 220 14.3% 95.9%; - --secondary-foreground: 220.9 39.3% 11%; - --muted: 220 14.3% 95.9%; - --muted-foreground: 220 8.9% 46.1%; - --accent: 220 14.3% 95.9%; - --accent-foreground: 220.9 39.3% 11%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 210 20% 98%; - --border: 214.3 31.8% 94.4%; - --input: 214.3 31.8% 91.4%; - --ring: 224 71.4% 4.1%; - --radius: 0.5rem; +/* Tailwind CSS */ +@import 'tailwindcss'; - --chart-1: 12 76% 61%; - --chart-2: 173 58% 39%; - --chart-3: 197 37% 24%; - --chart-4: 43 74% 66%; - --chart-5: 27 87% 67%; +/* local styles - update the below if you add a new style */ +@import './theme.css'; +@import './theme.utilities.css'; +@import './shadcn-ui.css'; +@import './markdoc.css'; +@import './makerkit.css'; - --sidebar-background: 0 0% 98%; - --sidebar-foreground: 240 5.3% 26.1%; - --sidebar-primary: 240 5.9% 10%; - --sidebar-primary-foreground: 0 0% 98%; - --sidebar-accent: 240 4.8% 95.9%; - --sidebar-accent-foreground: 240 5.9% 10%; - --sidebar-border: 220 13% 91%; - --sidebar-ring: 217.2 91.2% 59.8%; +/* plugins - update the below if you add a new plugin */ +@plugin "tailwindcss-animate"; + +/* content sources - update the below if you add a new path */ +@source "../../../packages/*/src/**/*.{ts,tsx}"; +@source "../../../packages/features/*/src/**/*.{ts,tsx}"; +@source "../../../packages/billing/*/src/**/*.{ts,tsx}"; +@source "../../../packages/plugins/*/src/**/*.{ts,tsx}"; +@source "../../../packages/cms/*/src/**/*.{ts,tsx}"; +@source "../{app,components,config,lib}/**/*.{ts,tsx}"; + +@theme { + --font-cal: var(--font-cal); + --font-sans: -apple-system, var(--font-sans); + --font-heading: var(--font-heading); + + --animate-fade-up: fade-up 0.5s; + --animate-fade-down: fade-down 0.5s; + --animate-accordion-down: accordion-down 0.2s ease-out; + --animate-accordion-up: accordion-up 0.2s ease-out; + + @keyframes fade-up { + 0% { + opacity: 0; + transform: translateY(10px); + } + 80% { + opacity: 0.6; + } + 100% { + opacity: 1; + transform: translateY(0px); + } } - - .dark { - --background: 224 71.4% 4.1%; - --foreground: 210 20% 98%; - --card: 224 71.4% 4.1%; - --card-foreground: 210 20% 98%; - --popover: 224 71.4% 4.1%; - --popover-foreground: 210 20% 98%; - --primary: 210 20% 98%; - --primary-foreground: 220.9 39.3% 11%; - --secondary: 215 27.9% 13%; - --secondary-foreground: 210 20% 98%; - --muted: 215 27.9% 13%; - --muted-foreground: 217.9 10.6% 64.9%; - --accent: 215 27.9% 13%; - --accent-foreground: 210 20% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 210 20% 98%; - --border: 215 27.9% 13%; - --input: 215 27.9% 13%; - --ring: 216 12.2% 83.9%; - - --chart-1: 220 70% 50%; - --chart-2: 160 60% 45%; - --chart-3: 30 80% 55%; - --chart-4: 280 65% 60%; - --chart-5: 340 75% 55%; - - --sidebar-background: 224 71.4% 4.1%; - --sidebar-foreground: 240 4.8% 95.9%; - --sidebar-primary: 224.3 76.3% 48%; - --sidebar-primary-foreground: 0 0% 100%; - --sidebar-accent: 215 27.9% 13%; - --sidebar-accent-foreground: 240 4.8% 95.9%; - --sidebar-border: 240 3.7% 15.9%; - --sidebar-ring: 217.2 91.2% 59.8%; + @keyframes fade-down { + 0% { + opacity: 0; + transform: translateY(-10px); + } + 80% { + opacity: 0.6; + } + 100% { + opacity: 1; + transform: translateY(0px); + } + } + @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; + } } } +@theme { + --font-cal: var(--font-cal); + --font-sans: -apple-system, var(--font-sans); + --font-heading: var(--font-heading); + + --animate-fade-up: fade-up 0.5s; + --animate-fade-down: fade-down 0.5s; + --animate-accordion-down: accordion-down 0.2s ease-out; + --animate-accordion-up: accordion-up 0.2s ease-out; + + @keyframes fade-up { + 0% { + opacity: 0; + transform: translateY(10px); + } + 80% { + opacity: 0.6; + } + 100% { + opacity: 1; + transform: translateY(0px); + } + } + @keyframes fade-down { + 0% { + opacity: 0; + transform: translateY(-10px); + } + 80% { + opacity: 0.6; + } + 100% { + opacity: 1; + transform: translateY(0px); + } + } + @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); + } +} + +/* + 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); + } +} + +/* + 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); + } +} + +/* variants - update the below if you add a new variant */ +@variant dark (&:where(.dark, .dark *)); + @layer base { body { @apply bg-background text-foreground; font-feature-settings: "rlig" 1, "calt" 1; } - .container { - @apply max-sm:px-4; + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + border-color: var(--border, currentColor); } -} -/* -Optimize dropdowns for mobile - */ -[data-radix-popper-content-wrapper] { - @apply w-full md:w-auto; -} - -[data-radix-menu-content] { - @apply rounded-none md:rounded-lg w-full md:w-auto; -} - -[data-radix-menu-content] [role="menuitem"] { - @apply md:min-h-0 min-h-12; -} - -.site-header > .container:before, -.site-footer > .container:before { - background: radial-gradient(62.87% 100% at 50% 100%, theme('colors.gray.200') 0%, rgba(255, 255, 255, 0) 100%); - - bottom: 0; - content: ""; - height: 1px; - left: 0; - position: absolute; - width: 100%; -} - -.dark .site-header > .container:before, -.dark .site-footer > .container:before { - background: radial-gradient(62.87% 100% at 50% 100%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 100%); -} - -.site-footer > .container:before { - top: 0; + input::placeholder, + textarea::placeholder { + color: theme(--color-muted-foreground); + } } \ No newline at end of file diff --git a/apps/web/styles/makerkit.css b/apps/web/styles/makerkit.css new file mode 100644 index 000000000..360d417c5 --- /dev/null +++ b/apps/web/styles/makerkit.css @@ -0,0 +1,42 @@ +/* +* makerkit.css +* +* Makerkit-specific global styles +* Use this file to add any global styles that are specific to Makerkit's components + */ + +/* +Optimize dropdowns for mobile + */ +[data-radix-popper-content-wrapper] { + @apply w-full md:w-auto; +} + +[data-radix-menu-content] { + @apply rounded-none md:rounded-lg w-full md:w-auto; +} + +[data-radix-menu-content] [role="menuitem"] { + @apply md:min-h-0 min-h-12; +} + +.site-header > .container:before, +.site-footer > .container:before { + background: radial-gradient(62.87% 100% at 50% 100%, var(--color-gray-200) 0%, rgba(255, 255, 255, 0) 100%); + + bottom: 0; + content: ""; + height: 1px; + left: 0; + position: absolute; + width: 100%; +} + +.dark .site-header > .container:before, +.dark .site-footer > .container:before { + background: radial-gradient(62.87% 100% at 50% 100%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 100%); +} + +.site-footer > .container:before { + top: 0; +} \ No newline at end of file diff --git a/apps/web/styles/markdoc.css b/apps/web/styles/markdoc.css new file mode 100644 index 000000000..7a55dcd88 --- /dev/null +++ b/apps/web/styles/markdoc.css @@ -0,0 +1,114 @@ +/* +* markdoc.css +* +* Styles for Markdoc Markdown files. Update this to customize the stylesheet for Markdoc content, such as +* the blog post, documentation, etc. + */ + +.markdoc { + @apply text-foreground; +} + +.markdoc h1 { + @apply mt-14 text-4xl font-semibold font-heading tracking-tight dark:text-white text-foreground; +} + +.markdoc h2 { + @apply mb-6 mt-12 font-semibold text-2xl font-heading tracking-tight dark:text-white text-foreground; +} + +.markdoc h3 { + @apply mt-12 text-xl font-semibold font-heading tracking-tight dark:text-white text-foreground; +} + +.markdoc h4 { + @apply mt-8 text-lg font-medium tracking-tight dark:text-white text-foreground; +} + +.markdoc h5 { + @apply mt-6 text-base font-medium tracking-tight dark:text-white text-foreground; +} + +.markdoc h6 { + @apply mt-2 text-sm font-normal tracking-tight dark:text-white text-foreground; +} + +.markdoc p { + @apply mb-6 mt-4 text-base leading-7 text-muted-foreground; +} + +.markdoc li { + @apply relative my-1.5 text-base leading-7 text-muted-foreground; +} + +.markdoc ul > li:before { + content: '-'; + + @apply mr-2; +} + +.markdoc ol > li:before { + @apply inline-flex font-medium text-muted-foreground; + + content: counters(counts, '.') '. '; + font-feature-settings: 'tnum'; +} + +.markdoc b, +.markdoc strong { + @apply font-semibold text-secondary-foreground dark:text-white; +} + +.markdoc img, +.markdoc video { + @apply rounded-md; +} + +.markdoc ul, +.markdoc ol { + @apply pl-1; +} + +.markdoc ol > li { + counter-increment: counts; +} + +.markdoc ol > li:before { + @apply mr-2 inline-flex font-semibold; + + content: counters(counts, '.') '. '; + font-feature-settings: 'tnum'; +} + +.markdoc p > code, .markdoc li > code { + @apply p-0.5 text-sm font-semibold bg-muted/50 border font-mono text-secondary-foreground; +} + +.markdoc pre { + @apply overflow-x-auto bg-muted/50 rounded-md border border-border p-4 text-sm font-mono text-foreground; +} + +.markdoc blockquote { + @apply my-4 border-l-8 border border-primary px-6 py-4 text-lg font-medium text-muted-foreground; +} + +.markdoc a { + @apply border-b-black border-b hover:border-b-2 pb-0.5 text-secondary-foreground font-semibold dark:border-yellow-300; +} + +.markdoc hr { + @apply mt-8 mb-6 border-border; +} + +.markdoc [role='alert'] { + @apply py-4 m-0 my-8; +} + +.markdoc [role='alert'] * { + color: inherit; + @apply m-0 p-0 text-sm; +} + +.markdoc [role='alert'] h5 { + color: inherit; +} \ No newline at end of file diff --git a/apps/web/styles/shadcn-ui.css b/apps/web/styles/shadcn-ui.css new file mode 100644 index 000000000..731f38860 --- /dev/null +++ b/apps/web/styles/shadcn-ui.css @@ -0,0 +1,104 @@ +/* +* shadcn-ui.css +* +* Update the below to customize your Shadcn UI CSS Colors. +* Refer to https://ui.shadcn.com/themes for applying new colors. +* NB: apply the hsl function to the colors copied from the theme. + */ + +@layer base { + :root { + --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + --font-heading: var(--font-sans); + + --background: var(--color-white); + --foreground: var(--color-neutral-950); + + --card: var(--color-white); + --card-foreground: var(--color-neutral-950); + + --popover: var(--color-white); + --popover-foreground: var(--color-neutral-950); + + --primary: var(--color-neutral-950); + --primary-foreground: var(--color-white); + + --secondary: oklch(96.76% 0.0013 286.38); + --secondary-foreground: oklch(21.03% 0.0318 264.65); + + --muted: oklch(96.71% 0.0029 264.54); + --muted-foreground: oklch(55.13% 0.0233 264.36); + + --accent: oklch(96.76% 0.0013 286.38); + --accent-foreground: oklch(21.03% 0.0318 264.65); + + --destructive: var(--color-red-500); + --destructive-foreground: var(--color-white); + + --border: var(--color-gray-100); + --input: var(--color-gray-200); + --ring: var(--color-neutral-800); + + --radius: 0.5rem; + + --chart-1: var(--color-orange-400); + --chart-2: var(--color-teal-600); + --chart-3: var(--color-green-800); + --chart-4: var(--color-yellow-200); + --chart-5: var(--color-orange-200); + + --sidebar-background: var(--color-neutral-50); + --sidebar-foreground: oklch(37.05% 0.012 285.8); + --sidebar-primary: var(--color-neutral-950); + --sidebar-primary-foreground: var(--color-white); + --sidebar-accent: var(--color-neutral-100); + --sidebar-accent-foreground: var(--color-neutral-950); + --sidebar-border: var(--border); + --sidebar-ring: var(--color-blue-500); + } + + .dark { + --background: var(--color-neutral-900); + --foreground: var(--color-white); + + --card: var(--color-neutral-900); + --card-foreground: var(--color-white); + + --popover: var(--color-neutral-900); + --popover-foreground: var(--color-white); + + --primary: var(--color-white); + --primary-foreground: var(--color-neutral-900); + + --secondary: var(--color-neutral-800); + --secondary-foreground: oklch(98.43% 0.0017 247.84); + + --muted: var(--color-neutral-800); + --muted-foreground: oklch(71.19% 0.0129 286.07); + + --accent: var(--color-neutral-800); + --accent-foreground: oklch(98.48% 0 0); + + --destructive: var(--color-red-700); + --destructive-foreground: var(--color-white); + + --border: var(--color-neutral-800); + --input: var(--color-neutral-700); + --ring: oklch(87.09% 0.0055 286.29); + + --chart-1: var(--color-blue-600); + --chart-2: var(--color-emerald-400); + --chart-3: var(--color-orange-400); + --chart-4: var(--color-purple-500); + --chart-5: var(--color-pink-500); + + --sidebar-background: var(--color-neutral-900); + --sidebar-foreground: var(--color-white); + --sidebar-primary: var(--color-blue-500); + --sidebar-primary-foreground: var(--color-white); + --sidebar-accent: var(--color-neutral-800); + --sidebar-accent-foreground: var(--color-white); + --sidebar-border: var(--border); + --sidebar-ring: var(--color-blue-500); + } +} \ No newline at end of file diff --git a/apps/web/styles/theme.css b/apps/web/styles/theme.css new file mode 100644 index 000000000..45e03ca89 --- /dev/null +++ b/apps/web/styles/theme.css @@ -0,0 +1,133 @@ +/* +* theme.css +* +* Shadcn UI theme +* Use this file to add any custom styles or override existing Shadcn UI styles + */ + +/* container utility */ + +/* Shadcn UI theme */ +@theme { + --color-background: var(--background); + --color-foreground: var(--foreground); + + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + + --color-destructive: var(--destructive); + --color-destructive-foreground: var(--destructive-foreground); + + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + + --color-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); + + --radius-radius: var(--radius); + + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + + --font-heading: var(--font-sans); + + --color-sidebar: var(--sidebar-background); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-ring: var(--sidebar-ring); + + --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; + } + } + + --animate-fade-up: fade-up 0.5s; + --animate-fade-down: fade-down 0.5s; + --animate-accordion-down: accordion-down 0.2s ease-out; + --animate-accordion-up: accordion-up 0.2s ease-out; + + @keyframes fade-up { + 0% { + opacity: 0; + transform: translateY(10px); + } + 80% { + opacity: 0.6; + } + 100% { + opacity: 1; + transform: translateY(0px); + } + } + @keyframes fade-down { + 0% { + opacity: 0; + transform: translateY(-10px); + } + 80% { + opacity: 0.6; + } + 100% { + opacity: 1; + transform: translateY(0px); + } + } + @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; + } + } +} \ No newline at end of file diff --git a/apps/web/styles/theme.utilities.css b/apps/web/styles/theme.utilities.css new file mode 100644 index 000000000..344b62741 --- /dev/null +++ b/apps/web/styles/theme.utilities.css @@ -0,0 +1,5 @@ +@utility container { + margin-inline: auto; + + @apply xl:max-w-[80rem] px-8; +} diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts deleted file mode 100644 index 55e434dc6..000000000 --- a/apps/web/tailwind.config.ts +++ /dev/null @@ -1,10 +0,0 @@ -import type { Config } from 'tailwindcss'; - -import baseConfig from '@kit/tailwind-config'; - -export default { - // We need to append the path to the UI package to the content array so that - // those classes are included correctly. - content: [...baseConfig.content, './components/**/*.tsx', './app/**/*.tsx', './lib/fonts.ts'], - presets: [baseConfig], -} satisfies Config; diff --git a/package.json b/package.json index a5dddf0d2..2af798164 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "next-supabase-saas-kit-turbo", - "version": "1.0.0", + "version": "2.0.0", "private": true, "sideEffects": false, "engines": { diff --git a/packages/billing/gateway/src/components/current-lifetime-order-card.tsx b/packages/billing/gateway/src/components/current-lifetime-order-card.tsx index 31d21c4f9..80012262d 100644 --- a/packages/billing/gateway/src/components/current-lifetime-order-card.tsx +++ b/packages/billing/gateway/src/components/current-lifetime-order-card.tsx @@ -61,9 +61,9 @@ export function CurrentLifetimeOrderCard({ - +
    -
    +
    -
    +
    diff --git a/packages/billing/gateway/src/components/current-subscription-card.tsx b/packages/billing/gateway/src/components/current-subscription-card.tsx index 079e06fbc..bf608e1af 100644 --- a/packages/billing/gateway/src/components/current-subscription-card.tsx +++ b/packages/billing/gateway/src/components/current-subscription-card.tsx @@ -67,7 +67,7 @@ export function CurrentSubscriptionCard({
    -
    +
    -
    +
    @@ -132,7 +132,7 @@ export function CurrentSubscriptionCard({ -
    +
    diff --git a/packages/billing/gateway/src/components/line-item-details.tsx b/packages/billing/gateway/src/components/line-item-details.tsx index 7326ce676..e8fb2589c 100644 --- a/packages/billing/gateway/src/components/line-item-details.tsx +++ b/packages/billing/gateway/src/components/line-item-details.tsx @@ -110,7 +110,7 @@ export function LineItemDetails( - + - diff --git a/packages/billing/gateway/src/components/plan-picker.tsx b/packages/billing/gateway/src/components/plan-picker.tsx index c35206084..6c06e3302 100644 --- a/packages/billing/gateway/src/components/plan-picker.tsx +++ b/packages/billing/gateway/src/components/plan-picker.tsx @@ -113,12 +113,10 @@ export function PlanPicker( return (
    @@ -131,7 +129,7 @@ export function PlanPicker( name={'interval'} render={({ field }) => { return ( - + @@ -147,10 +145,11 @@ export function PlanPicker( htmlFor={interval} key={interval} className={cn( - 'flex items-center space-x-2 rounded-md border border-transparent px-4 py-2 transition-colors', + 'focus-within:border-primary flex items-center gap-x-2.5 rounded-md border px-2.5 py-2 transition-colors', { - ['border-primary']: selected, - ['hover:border-primary']: !selected, + ['bg-muted border-input']: selected, + ['hover:border-input border-transparent']: + !selected, }, )} > @@ -207,7 +206,7 @@ export function PlanPicker( ( - + @@ -259,7 +258,9 @@ export function PlanPicker( primaryLineItem.tiers[0], ); - const tierTranslationKey = isMultiTier ? 'billing:startingAtPriceUnit' : 'billing:priceUnit'; + const tierTranslationKey = isMultiTier + ? 'billing:startingAtPriceUnit' + : 'billing:priceUnit'; return (