Skip to content

Dark Mode 🌜 #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
heyjorgedev wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Dark Mode 🌜 #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
118 changes: 58 additions & 60 deletions src/app/page.tsx
View file
Open in desktop

Large diffs are not rendered by default.

14 changes: 7 additions & 7 deletions src/components/logo-cloud.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,42 +3,42 @@ import { Icons } from './icons'
export const LogoCloud = () => {
return (
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<h2 className="text-center text-base/7 text-gray-500">Trusted by teams at</h2>
<h2 className="text-center text-base/7 text-gray-500 dark:text-zinc-500">Trusted by teams at</h2>
<div className="mx-auto mt-10 grid grid-cols-1 sm:grid-cols-2 max-w-lg items-center gap-x-8 gap-y-10 sm:max-w-xl sm:gap-x-10 lg:mx-0 lg:max-w-none md:grid-cols-5 grayscale opacity-50">
<img
alt="zerodotemail"
src="/logo/zerodotemail.svg"
width={158}
height={48}
className="max-h-12 w-full object-contain lg:col-span-1"
className="max-h-12 w-full object-contain lg:col-span-1 dark:invert"
/>

<img
alt="Upstash"
src="/logo/upstash.png"
width={158}
height={48}
className="max-h-12 w-full object-contain lg:col-span-1 dark:hidden"
className="max-h-12 w-full object-contain lg:col-span-1 dark:invert"
/>

<img
alt="v0"
src="/logo/v0.svg"
width={158}
height={48}
className="max-h-10 w-full object-contain lg:col-span-1"
className="max-h-10 w-full object-contain lg:col-span-1 dark:invert"
/>

<div className="flex justify-center w-full items-center">
<div className="flex shrink-0 size-12 items-center justify-center rounded bg-stone-800">
<div className="flex shrink-0 size-12 items-center justify-center rounded bg-stone-800 dark:invert">
<Icons.context7 className="size-8" />
</div>
<span className="px-2 text-lg font-inter font-semibold leading-none text-stone-800">
<span className="px-2 text-lg font-inter font-semibold leading-none text-stone-800 dark:text-zinc-600">
Context7
</span>
</div>

<div className="w-full flex items-center justify-center">
<div className="w-full flex items-center justify-center dark:invert">
<Icons.databuddy className="size-12" />
</div>
</div>
Expand Down
18 changes: 9 additions & 9 deletions src/components/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
'use client'

import * as React from 'react'
import { Icons } from '@/components/icons'
import { baseStyles, sizeStyles, variantStyles } from '@/components/ui/duolingo-button'
import { GITHUB_REPO } from '@/constants/misc'
import { authClient } from '@/lib/auth-client'
import { cn } from '@/lib/utils'
import { Menu, X } from 'lucide-react'
import Link from 'next/link'
import { GITHUB_REPO } from '@/constants/misc'
import { authClient } from '@/lib/auth-client'
import * as React from 'react'

const Logo = ({ className }: { className?: string }) => (
<Link href="/" className={cn('-m-1.5 p-1.5 flex items-center gap-1.5', className)}>
Expand All @@ -28,7 +28,7 @@ const NavigationLinks = ({
href={`https://github.com/${GITHUB_REPO}`}
target="_blank"
rel="noopener noreferrer"
className="text-gray-700 w-fit hover:text-gray-900 transition-colors font-medium"
className="text-gray-700 dark:text-white w-fit hover:text-gray-900 transition-colors font-medium"
>
GitHub
</Link>
Expand Down Expand Up @@ -80,9 +80,9 @@ const Navbar = ({ title }: { title: string }) => {
return (
<>
{mobileMenuOpen && (
<div className="fixed inset-0 z-[50] bg-black bg-opacity-50" />
<div className="fixed inset-0 z-[50] bg-black bg-opacity-50 backdrop-blur-sm" onClick={() => setMobileMenuOpen(false)} />
)}
<header className="fixed inset-x-0 top-0 z-50 bg-white/80 backdrop-blur-md border-b border-black border-opacity-[0.1] h-16">
<header className="fixed inset-x-0 top-0 z-50 bg-white/80 dark:bg-zinc-800/60 backdrop-blur-md border-b dark:border-zinc-700/60 h-16">
<nav className="max-w-7xl mx-auto h-full flex items-center px-6 lg:px-8">
<div className="flex sm:flex-1">
<Logo />
Expand All @@ -91,7 +91,7 @@ const Navbar = ({ title }: { title: string }) => {
<button
type="button"
onClick={() => setMobileMenuOpen(true)}
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700 dark:text-white"
>
<span className="sr-only">Open main menu</span>
<Menu aria-hidden="true" className="size-6" />
Expand All @@ -108,13 +108,13 @@ const Navbar = ({ title }: { title: string }) => {
mobileMenuOpen ? 'fixed inset-0 z-[100]' : 'hidden',
)}
>
<div className="absolute top-0 inset-x-0 bg-white right-0 z-[100] w-full overflow-y-auto px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
<div className="absolute top-0 inset-x-0 bg-white dark:bg-zinc-900 right-0 z-[100] w-full overflow-y-auto px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
<div className="flex items-center justify-between">
<Logo />
<button
type="button"
onClick={() => setMobileMenuOpen(false)}
className="-m-2.5 rounded-md p-2.5 text-gray-700"
className="-m-2.5 rounded-md p-2.5 text-gray-700 dark:text-zinc-400"
>
<span className="sr-only">Close menu</span>
<X aria-hidden="true" className="size-6" />
Expand Down
28 changes: 26 additions & 2 deletions src/components/providers/providers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
'use client'

import { ConfettiProvider } from '@/hooks/use-confetti'
import { QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { HTTPException } from 'hono/http-exception'
import { ThemeProvider as NextThemesProvider } from "next-themes"
import { ReactNode, useState } from 'react'
import toast from 'react-hot-toast'

Expand All @@ -11,6 +11,30 @@ interface ProvidersProps {
}

export function Providers({ children }: ProvidersProps) {
return (
<QueryProvider>
<ThemeProvider>
{children}
</ThemeProvider>
</QueryProvider>
)
}

function ThemeProvider({
children,
}: { children: ReactNode }) {
return (
<NextThemesProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange>
{children}
</NextThemesProvider>
)
}

function QueryProvider({ children }: { children: ReactNode }) {
const [queryClient] = useState(
() =>
new QueryClient({
Expand Down Expand Up @@ -42,4 +66,4 @@ export function Providers({ children }: ProvidersProps) {
)

return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
}
}
28 changes: 16 additions & 12 deletions src/frontend/studio/components/Pricing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
'use client'
import DuolingoButton from '@/components/ui/duolingo-button'
import { cn } from '@/lib/utils'
import dynamic from 'next/dynamic'
import { CheckIcon } from '@phosphor-icons/react'
import DuolingoButton from '@/components/ui/duolingo-button'
import Link from 'next/link'

interface PricingProps {
Expand Down Expand Up @@ -49,7 +48,7 @@ export default function Pricing({ targetUrl }: PricingProps) {
},
]
return (
<div className="relative isolate bg-white px-6 py-24">
<div className="relative isolate bg-white dark:bg-zinc-900 px-6 py-24">
<div
aria-hidden="true"
className="absolute inset-x-0 -top-3 -z-10 transform-gpu overflow-hidden px-36 blur-3xl"
Expand All @@ -64,7 +63,7 @@ export default function Pricing({ targetUrl }: PricingProps) {
</div>
<div className="mx-auto max-w-4xl text-center">
<h2 className="text-base/7 font-semibold text-indigo-600">Pricing</h2>
<p className="mt-2 text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-6xl">
<p className="mt-2 text-5xl font-semibold tracking-tight text-balance text-gray-900 dark:text-white sm:text-6xl">
Get started with Contentport
</p>
</div>
Expand All @@ -73,15 +72,20 @@ export default function Pricing({ targetUrl }: PricingProps) {
<div
key={tier.id}
className={cn(
tier.featured
? 'relative bg-gray-900 shadow-2xl'
: 'bg-white/60 sm:mx-8 lg:mx-0',
{
'relative bg-gray-900 dark:bg-slate-800 shadow-2xl': tier.featured,
'bg-white/60 dark:bg-zinc-800 sm:mx-8 lg:mx-0': !tier.featured,
},
tier.featured
? ''
: tierIdx === 0
? 'rounded-t-3xl sm:rounded-b-none lg:rounded-tr-none lg:rounded-bl-3xl'
: 'sm:rounded-t-none lg:rounded-tr-3xl lg:rounded-bl-none',
'rounded-3xl p-8 ring-1 ring-gray-900/10 sm:p-10',
'rounded-3xl p-8 ring-1 ring-gray-900/10 sm:p-10',
{
'dark:ring-slate-700': tier.featured,
'dark:ring-zinc-700': !tier.featured,
}
)}
>
{/* Most value badge for Pro plan */}
Expand All @@ -105,15 +109,15 @@ export default function Pricing({ targetUrl }: PricingProps) {
<p className="mt-4 flex items-baseline gap-x-2">
<span
className={cn(
tier.featured ? 'text-white' : 'text-gray-900',
tier.featured ? 'text-white' : 'text-gray-900 dark:text-zinc-300',
'text-5xl font-semibold tracking-tight',
)}
>
{tier.priceMonthly}
</span>
<span
className={cn(
tier.featured ? 'text-gray-400' : 'text-gray-500',
tier.featured ? 'text-gray-400' : 'text-gray-500 dark:text-zinc-500',
'text-base',
)}
>
Expand All @@ -122,7 +126,7 @@ export default function Pricing({ targetUrl }: PricingProps) {
</p>
<p
className={cn(
tier.featured ? 'text-gray-300' : 'text-gray-600',
tier.featured ? 'text-gray-300 dark:text-white' : 'text-gray-600 dark:text-zinc-400',
'mt-6 text-base/7',
)}
>
Expand All @@ -131,7 +135,7 @@ export default function Pricing({ targetUrl }: PricingProps) {
<ul
role="list"
className={cn(
tier.featured ? 'text-gray-300' : 'text-gray-600',
tier.featured ? 'text-gray-300 dark:text-zinc-200' : 'text-gray-600 dark:text-zinc-400',
'mt-8 space-y-3 text-sm/6 sm:mt-10',
)}
>
Expand Down
20 changes: 10 additions & 10 deletions src/frontend/studio/components/TestimonialCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,11 @@ const testimonials = organizeTestimonials(transformedTestimonials)

export default function Example() {
return (
<div className="relative isolate bg-white">
<div className="relative isolate bg-white dark:bg-zinc-900">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 grid-rows-1 gap-8 text-sm/6 text-gray-900 sm:mt-20 sm:grid-cols-2 xl:mx-0 xl:max-w-none xl:grid-flow-col xl:grid-cols-4">
<figure className="rounded-2xl bg-white shadow-lg ring-1 ring-gray-900/5 sm:col-span-2 xl:col-start-2 xl:row-end-1">
<blockquote className="p-6 space-y-4 whitespace-pre-wrap text-lg font-semibold tracking-tight text-gray-900 sm:p-10 sm:text-xl/8">
<div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 grid-rows-1 gap-8 text-sm/6 text-gray-900 dark:text-white sm:mt-20 sm:grid-cols-2 xl:mx-0 xl:max-w-none xl:grid-flow-col xl:grid-cols-4">
<figure className="rounded-2xl bg-white dark:bg-zinc-800 shadow-lg ring-1 ring-gray-900/5 dark:ring-zinc-700 sm:col-span-2 xl:col-start-2 xl:row-end-1">
<blockquote className="p-6 space-y-4 whitespace-pre-wrap text-lg font-semibold tracking-tight text-gray-900 dark:text-white sm:p-10 sm:text-xl/8">
{featuredTestimonial.body.split('\n\n').map((part, index) => (
<p key={index}>{part}</p>
))}
Expand All @@ -59,10 +59,10 @@ export default function Example() {
className="size-10 flex-none rounded-full bg-gray-50"
/>
<div className="flex-auto">
<p className="font-semibold text-gray-900 leading-none">
<p className="font-semibold text-gray-900 dark:text-white leading-none">
{featuredTestimonial.author.name}
</p>
<p className="text-gray-600">{`@${featuredTestimonial.author.handle} `}</p>
<p className="text-gray-600 dark:text-zinc-500">{`@${featuredTestimonial.author.handle} `}</p>
</div>
</figcaption>
</figure>
Expand All @@ -83,9 +83,9 @@ export default function Example() {
{column.map((testimonial) => (
<figure
key={testimonial.author.handle}
className="rounded-2xl bg-white p-6 shadow-lg ring-1 ring-gray-900/5"
className="rounded-2xl bg-white dark:bg-zinc-800 p-6 shadow-lg ring-1 ring-gray-900/5 dark:ring-zinc-700"
>
<blockquote className="text-gray-900">
<blockquote className="text-gray-900 dark:text-white">
<p className="whitespace-pre-wrap">{testimonial.body}</p>
</blockquote>
<figcaption className="mt-6 flex items-center gap-x-4">
Expand All @@ -95,10 +95,10 @@ export default function Example() {
className="size-10 rounded-full bg-gray-50"
/>
<div>
<p className="font-semibold text-gray-900 leading-none">
<p className="font-semibold text-gray-900 dark:text-white leading-none">
{testimonial.author.name}
</p>
<p className="text-gray-600">{`@${testimonial.author.handle} `}</p>
<p className="text-gray-600 dark:text-zinc-500">{`@${testimonial.author.handle} `}</p>
</div>
</figcaption>
</figure>
Expand Down