Skip to content

Commit 3d12c73

Browse files
pkyria14vincanger
pkyria14
and
vincanger
authored
Extended Dark mode for landing page and user-facing app (wasp-lang#10)
* Extended Dark mode for landing page and user-facing app * Update LandingPage.tsx * Fixed issues with dark mode * Landing Page changes based on comments * removed migrations --------- Co-authored-by: vincanger <[email protected]>
1 parent b2f8fb4 commit 3d12c73

File tree

9 files changed

+91
-67
lines changed

9 files changed

+91
-67
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@
33
*/.env.client
44
*/.DS_Store
55
.DS_Store
6+
*/migrations

‎app/src/client/App.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,14 +43,16 @@ export default function App({ children }: { children: ReactNode }) {
4343

4444
return (
4545
<>
46+
<div className='min-h-screen dark:text-white dark:bg-boxdark-2'>
4647
{isAdminDashboard ? (
4748
<>{children}</>
4849
) : (
4950
<>
5051
{shouldDisplayAppNavBar && <AppNavBar />}
51-
<div className='mx-auto max-w-7xl sm:px-6 lg:px-8 '>{children}</div>
52+
<div className='mx-auto max-w-7xl sm:px-6 lg:px-8'>{children}</div>
5253
</>
5354
)}
55+
</div>
5456
</>
5557
);
5658
}

‎app/src/client/app/GptPage.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -34,20 +34,20 @@ export default function GptPage() {
3434
} = useForm();
3535

3636
return (
37-
<div className='my-10 lg:mt-20'>
38-
<div className='mx-auto max-w-7xl px-6 lg:px-8'>
37+
<div className='my-10 lg:mt-20 dark:bg-boxdark-2'>
38+
<div className='mx-auto max-w-7xl px-6 lg:px-8 dark:bg-boxdark'>
3939
<div id='pricing' className='mx-auto max-w-4xl text-center'>
40-
<h2 className='mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl'>
40+
<h2 className='mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl dark:text-white'>
4141
Create your AI-powered <span className='text-yellow-500'>SaaS</span>
4242
</h2>
4343
</div>
44-
<p className='mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-600'>
44+
<p className='mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-600 dark:text-white'>
4545
Below is an example of integrating the OpenAI API into your SaaS.
4646
</p>
4747
<form onSubmit={handleSubmit(onSubmit)} className='py-8 mt-10 sm:mt-20 ring-1 ring-gray-200 rounded-lg'>
4848
<div className='space-y-6 sm:w-[90%] md:w-[60%] mx-auto border-b border-gray-900/10 px-6 pb-12'>
4949
<div className='col-span-full'>
50-
<label htmlFor='instructions' className='block text-sm font-medium leading-6 text-gray-900'>
50+
<label htmlFor='instructions' className='block text-sm font-medium leading-6 text-gray-900 dark:text-white'>
5151
Instructions -- How should GPT behave?
5252
</label>
5353
<div className='mt-2'>
@@ -71,7 +71,7 @@ export default function GptPage() {
7171
</span>
7272
</div>
7373
<div className='col-span-full'>
74-
<label htmlFor='command' className='block text-sm font-medium leading-6 text-gray-900'>
74+
<label htmlFor='command' className='block text-sm font-medium leading-6 text-gray-900 dark:text-white'>
7575
Command -- What should GPT do?
7676
</label>
7777
<div className='mt-2'>
@@ -95,8 +95,8 @@ export default function GptPage() {
9595
</span>
9696
</div>
9797

98-
<div className='h-10 '>
99-
<label htmlFor='temperature' className='w-full text-gray-700 text-sm font-semibold'>
98+
<div className='h-10'>
99+
<label htmlFor='temperature' className='w-full text-gray-700 text-sm font-semibold dark:text-white'>
100100
Temperature Input -- Controls How Random GPT's Output is
101101
</label>
102102
<div className='w-32 mt-2'>
@@ -133,9 +133,9 @@ export default function GptPage() {
133133
<div
134134
className={`${
135135
isSubmitting && 'animate-pulse'
136-
} mt-4 mx-6 flex justify-center rounded-lg border border-dashed border-gray-900/25 sm:w-[90%] md:w-[50%] mx-auto mt-12 px-6 py-10`}
136+
} mt-4 mx-6 flex justify-center rounded-lg border border-dashed border-gray-900/25 dark:border-white sm:w-[90%] md:w-[50%] mx-auto mt-12 px-6 py-10`}
137137
>
138-
<div className='space-y-2 flex flex-col gap-2 text-center text-sm text-gray-500 w-full'>
138+
<div className='space-y-2 flex flex-col gap-2 text-center text-sm text-gray-500 w-full dark:text-white'>
139139
{response.length > 0 ? response.map((str) => <p key={str}>{str}</p>) : <p>GPT Response will load here</p>}
140140
</div>
141141
</div>

‎app/src/client/app/PricingPage.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -57,14 +57,14 @@ const PricingPage = () => {
5757
}
5858

5959
return (
60-
<div className='my-10 lg:mt-20'>
60+
<div className='py-10 lg:mt-10'>
6161
<div className='mx-auto max-w-7xl px-6 lg:px-8'>
6262
<div id='pricing' className='mx-auto max-w-4xl text-center'>
63-
<h2 className='mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl'>
63+
<h2 className='mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl dark:text-white'>
6464
Pick your <span className='text-yellow-500'>pricing</span>
6565
</h2>
6666
</div>
67-
<p className='mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-600'>
67+
<p className='mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-600 dark:text-white'>
6868
Stripe subscriptions and secure webhooks are built-in. Just add your Stripe Product IDs! Try it out below with
6969
test credit card number{' '}
7070
<span className='px-2 py-1 bg-gray-100 rounded-md text-gray-500'>4242 4242 4242 4242 4242</span>
@@ -80,7 +80,7 @@ const PricingPage = () => {
8080
{tier.bestDeal && (
8181
<div className='absolute top-0 right-0 -z-10 w-full h-full transform-gpu blur-3xl' aria-hidden='true'>
8282
<div
83-
className='absolute w-full h-full bg-gradient-to-br from-amber-400 to-purple-300 opacity-30'
83+
className='absolute w-full h-full bg-gradient-to-br from-amber-400 to-purple-300 opacity-30 dark:opacity-50'
8484
style={{
8585
clipPath: 'circle(670% at 50% 50%)',
8686
}}
@@ -89,16 +89,16 @@ const PricingPage = () => {
8989
)}
9090
<div className='mb-8'>
9191
<div className='flex items-center justify-between gap-x-4'>
92-
<h3 id={tier.id} className='text-gray-900 text-lg font-semibold leading-8'>
92+
<h3 id={tier.id} className='text-gray-900 text-lg font-semibold leading-8 dark:text-white'>
9393
{tier.name}
9494
</h3>
9595
</div>
96-
<p className='mt-4 text-sm leading-6 text-gray-600'>{tier.description}</p>
97-
<p className='mt-6 flex items-baseline gap-x-1'>
98-
<span className='text-4xl font-bold tracking-tight text-gray-900'>{tier.priceMonthly}</span>
99-
<span className='text-sm font-semibold leading-6 text-gray-600'>/month</span>
96+
<p className='mt-4 text-sm leading-6 text-gray-600 dark:text-white'>{tier.description}</p>
97+
<p className='mt-6 flex items-baseline gap-x-1 dark:text-white'>
98+
<span className='text-4xl font-bold tracking-tight text-gray-900 dark:text-white'>{tier.priceMonthly}</span>
99+
<span className='text-sm font-semibold leading-6 text-gray-600 dark:text-white'>/month</span>
100100
</p>
101-
<ul role='list' className='mt-8 space-y-3 text-sm leading-6 text-gray-600'>
101+
<ul role='list' className='mt-8 space-y-3 text-sm leading-6 text-gray-600 dark:text-white'>
102102
{tier.features.map((feature) => (
103103
<li key={feature} className='flex gap-x-3'>
104104
<AiFillCheckCircle className='h-6 w-5 flex-none text-yellow-500' aria-hidden='true' />
@@ -127,7 +127,7 @@ const PricingPage = () => {
127127
<button
128128
onClick={() => handleBuyNowClick(tier.id)}
129129
aria-describedby={tier.id}
130-
className={`
130+
className={`dark:text-white
131131
${tier.id === 'enterprise-tier' ? 'opacity-50 cursor-not-allowed' : 'opacity-100 cursor-pointer'}
132132
${
133133
tier.bestDeal

‎app/src/client/auth/LoginPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default function Login() {
2020
<AuthWrapper>
2121
<LoginForm />
2222
<br />
23-
<span className='text-sm font-medium text-gray-900'>
23+
<span className='text-sm font-medium text-gray-900 dark:text-gray-900'>
2424
Don't have an account yet?{' '}
2525
<Link to='/signup' className='underline'>
2626
go to signup

‎app/src/client/auth/authWrapper.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { ReactNode } from 'react';
22

33
export function AuthWrapper({children} : {children: ReactNode }) {
44
return (
5-
<div className='flex min-h-full flex-col justify-center mt-10 sm:px-6 lg:px-8'>
5+
<div className='flex min-h-full flex-col justify-center pt-10 sm:px-6 lg:px-8'>
66
<div className='sm:mx-auto sm:w-full sm:max-w-md'>
7-
<div className='bg-white py-8 px-4 shadow-xl ring-1 ring-gray-900/10 sm:rounded-lg sm:px-10'>
7+
<div className='bg-white py-8 px-4 shadow-xl ring-1 ring-gray-900/10 sm:rounded-lg sm:px-10 dark:bg-white dark:text-gray-900'>
88
<div className='-mt-8'>
99
{ children }
1010
</div>

‎app/src/client/components/AppNavBar.tsx‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import useAuth from '@wasp/auth/useAuth';
55
import logo from '../static/logo.png';
66
import DropdownUser from './DropdownUser';
77
import { DOCS_URL, BLOG_URL } from '@wasp/shared/constants';
8+
import DarkModeSwitcher from '../admin/components/DarkModeSwitcher';
89

910
const navigation = [
1011
{ name: 'GPT Wrapper', href: '/gpt' },
@@ -18,7 +19,7 @@ export default function AppNavBar() {
1819

1920
const { data: user, isLoading: isUserLoading } = useAuth();
2021
return (
21-
<header className='absolute inset-x-0 top-0 z-50 shadow sticky bg-white bg-opacity-50 backdrop-blur-lg backdrop-filter'>
22+
<header className='absolute inset-x-0 top-0 z-50 shadow sticky bg-white bg-opacity-50 backdrop-blur-lg backdrop-filter dark:border-strokedark dark:bg-boxdark-2'>
2223
<nav className='flex items-center justify-between p-6 lg:px-8' aria-label='Global'>
2324
<div className='flex lg:flex-1'>
2425
<a href='/' className='-m-1.5 p-1.5'>
@@ -40,24 +41,32 @@ export default function AppNavBar() {
4041
<a
4142
key={item.name}
4243
href={item.href}
43-
className='text-sm font-semibold leading-6 text-gray-900 duration-300 ease-in-out hover:text-yellow-500'
44+
className='text-sm font-semibold leading-6 text-gray-900 duration-300 ease-in-out hover:text-yellow-500 dark:text-white'
4445
>
4546
{item.name}
4647
</a>
4748
))}
4849
</div>
49-
<div className='hidden lg:flex lg:flex-1 lg:justify-end lg:align-end'>
50+
<div className='hidden lg:flex lg:flex-1 lg:justify-end items-center'>
51+
<div className='flex items-center gap-3 2xsm:gap-7'>
52+
<ul className='flex justify-center items-center gap-2 2xsm:gap-4'>
53+
<DarkModeSwitcher />
54+
</ul>
55+
</div>
5056
{isUserLoading ? null : !user ? (
51-
<a href={!user ? '/login' : '/account'} className='text-sm font-semibold leading-6 '>
52-
<div className='flex justify-end items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500'>
57+
<a href={!user ? '/login' : '/account'} className='text-sm font-semibold leading-6 ml-4'>
58+
<div className='flex items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
5359
Log in <BiLogIn size='1.1rem' className='ml-1 mt-[0.1rem]' />
5460
</div>
5561
</a>
5662
) : (
57-
<DropdownUser user={user} />
63+
<div className='ml-4'>
64+
<DropdownUser user={user} />
65+
</div>
5866
)}
5967
</div>
68+
6069
</nav>
6170
</header>
6271
);
63-
}
72+
}

‎app/src/client/components/DropdownUser.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,9 @@ const DropdownUser = ({ user } : { user: Partial<User> }) => {
4343
<span className='hidden text-right lg:block'>
4444
<span className='block text-sm font-medium dark:text-white'>{user.username}</span>
4545
</span>
46-
<CgProfile size='1.1rem' className='ml-1 mt-[0.1rem]' />
46+
<CgProfile size='1.1rem' className='ml-1 mt-[0.1rem] dark:text-white' />
4747
<svg
48-
className={`hidden fill-current sm:block ${dropdownOpen ? 'rotate-180' : ''}`}
48+
className={`hidden fill-current dark:fill-white sm:block ${dropdownOpen ? 'rotate-180' : ''}`}
4949
width='12'
5050
height='8'
5151
viewBox='0 0 12 8'
@@ -64,7 +64,7 @@ const DropdownUser = ({ user } : { user: Partial<User> }) => {
6464
{/* <!-- Dropdown --> */}
6565
<div
6666
ref={dropdown}
67-
className={`absolute right-0 mt-4 flex w-62.5 flex-col rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark ${
67+
className={`absolute right-0 mt-4 flex w-62.5 flex-col rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark dark:text-white ${
6868
dropdownOpen === true ? 'block' : 'hidden'
6969
}`}
7070
>

0 commit comments

Comments
 (0)