Skip to content

Commit bd76f9c

Browse files
clostaocursoragentcarlos
authored
Add dark mode to auto-drive apps (#475)
* feat: Add theme toggle and no-flash script Introduces a theme toggle component and a script to prevent flash of unstyled content. Co-authored-by: carlos <[email protected]> * feat: implement dark mode * refactor: update DeveloperSection and HeroSection styles for improved readability and consistency * Update styles in ObjectDeleteModal and CreditsUpdateModal for improved readability and consistency * Enhance FileTableRow component with improved selection and folder handling - Added selection highlighting for files and folders based on user selection. - Updated cursor style for folders to indicate interactivity. - Refactored child file rendering logic for better readability and maintainability. --------- Co-authored-by: Cursor Agent <[email protected]> Co-authored-by: carlos <[email protected]>
1 parent 1d09e41 commit bd76f9c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+504
-298
lines changed

‎apps/frontend/src/app/[chain]/drive/layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,14 @@ export default function AppLayout({
3131
}
3232

3333
return (
34-
<div className='dark:bg-darkWhite flex min-h-screen bg-white'>
34+
<div className='flex min-h-screen bg-background'>
3535
<AutomaticLoginWrapper>
3636
<SessionProvider>
3737
<NetworkProvider network={network}>
3838
<SessionEnsurer>
3939
<SidebarProvider className='contents'>
4040
<SideNavbar networkId={params.chain} />
41-
<div className='dark:bg-darkWhite flex h-screen flex-1 flex-col rounded-lg bg-white dark:text-white'>
41+
<div className='flex h-screen flex-1 flex-col rounded-lg bg-background text-foreground'>
4242
<TopNavbar networkId={params.chain} />
4343
<div className='flex flex-1 overflow-hidden'>
4444
<main className='flex-1 overflow-auto px-6 pb-6'>

‎apps/frontend/src/app/globals.css‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ All colors MUST be HSL.
1212
--background: 0 0% 100%;
1313
--foreground: 222.2 84% 4.9%;
1414

15+
/* Core theme colors */
16+
--background-hover: 0 0% 95%;
17+
--foreground-hover: 222.2 84% 20%;
18+
1519
/* Auto Drive brand colors */
1620
--auto-drive-primary: 234 50% 48%;
1721
--auto-drive-primary-foreground: 0 0% 100%;
@@ -99,14 +103,17 @@ All colors MUST be HSL.
99103
--background: 222.2 84% 4.9%;
100104
--foreground: 210 40% 98%;
101105

106+
--background-hover: 240 3.7% 15.9%;
107+
--background-hover-foreground: 240 4.8% 95.9%;
108+
102109
--card: 222.2 84% 4.9%;
103110
--card-foreground: 210 40% 98%;
104111

105112
--popover: 222.2 84% 4.9%;
106113
--popover-foreground: 210 40% 98%;
107114

108-
--primary: 210 40% 98%;
109-
--primary-foreground: 222.2 47.4% 11.2%;
115+
--primary: 234 50% 48%;
116+
--primary-foreground: 0 0% 100%;
110117

111118
--secondary: 217.2 32.6% 17.5%;
112119
--secondary-foreground: 210 40% 98%;
@@ -131,6 +138,11 @@ All colors MUST be HSL.
131138
--sidebar-accent-foreground: 240 4.8% 95.9%;
132139
--sidebar-border: 240 3.7% 15.9%;
133140
--sidebar-ring: 217.2 91.2% 59.8%;
141+
142+
--light-accent: 234 50% 48%;
143+
--light-accent-foreground: 210 40% 98%;
144+
--light-danger: 350 68% 54%;
145+
--light-danger-foreground: 210 40% 98%;
134146
}
135147
}
136148

‎apps/frontend/src/app/layout.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { Metadata } from 'next';
1+
import { Metadata, type Viewport } from 'next';
22
import localFont from 'next/font/local';
33
import './globals.css';
4+
import { getNoFlashScript } from '@auto-drive/ui';
45
import dynamic from 'next/dynamic';
56
import NextTopLoader from 'nextjs-toploader';
67
import { Toaster } from 'react-hot-toast';
@@ -75,6 +76,13 @@ export const metadata: Metadata = {
7576
},
7677
};
7778

79+
export const viewport: Viewport = {
80+
themeColor: [
81+
{ media: '(prefers-color-scheme: light)', color: '#ffffff' },
82+
{ media: '(prefers-color-scheme: dark)', color: '#0b1220' },
83+
],
84+
};
85+
7886
const WalletProvider = dynamic(
7987
() => import('@/contexts/web3').then((mod) => mod.Web3Provider),
8088
{
@@ -88,10 +96,11 @@ export default function RootLayout({
8896
children: React.ReactNode;
8997
}>) {
9098
return (
91-
<html lang='en'>
99+
<html lang='en' suppressHydrationWarning>
92100
<body
93101
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
94102
>
103+
<script dangerouslySetInnerHTML={{ __html: getNoFlashScript() }} />
95104
<NextTopLoader color='#1949D2' height={2} showSpinner={false} />
96105
<WalletProvider>{children}</WalletProvider>
97106
<Toaster position='top-center' />

‎apps/frontend/src/components/atoms/GoBackButton.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,9 @@ import { ChevronLeftIcon } from 'lucide-react';
22
import { Button } from '@auto-drive/ui';
33
import { useRouter } from 'next/navigation';
44

5-
export const GoBackButton = ({
5+
/* eslint-disable react/prop-types */
6+
export const GoBackButton: React.FC<{ children?: string }> = ({
67
children = 'Back',
7-
}: {
8-
children?: React.ReactNode;
98
}) => {
109
const router = useRouter();
1110

‎apps/frontend/src/components/atoms/Skeleton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export const Skeleton = ({
66
}: React.HTMLAttributes<HTMLDivElement>) => {
77
return (
88
<div
9-
className={cn('bg-muted animate-pulse rounded-md', className)}
9+
className={cn('animate-pulse rounded-md bg-muted', className)}
1010
{...props}
1111
/>
1212
);

‎apps/frontend/src/components/molecules/ApiKeyCreationModal.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export const ApiKeyCreationModal = ({
6565
leaveFrom='opacity-100'
6666
leaveTo='opacity-0'
6767
>
68-
<div className='dark:bg-backgroundDarkest dark:bg-darkBlack/25 fixed inset-0 bg-black' />
68+
<div className='bg-background-hover fixed inset-0 bg-opacity-25' />
6969
</TransitionChild>
7070

7171
<div className='fixed inset-0 overflow-y-auto'>
@@ -79,10 +79,10 @@ export const ApiKeyCreationModal = ({
7979
leaveFrom='opacity-100 scale-100'
8080
leaveTo='opacity-0 scale-95'
8181
>
82-
<DialogPanel className='dark:bg-backgroundDark dark:bg-darkWhite w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all'>
82+
<DialogPanel className='bg-background-hover w-full max-w-md transform overflow-hidden rounded-2xl bg-background p-6 text-left align-middle shadow-xl transition-all'>
8383
<DialogTitle
8484
as='h3'
85-
className='dark:text-darkBlack text-center text-lg font-medium leading-6 text-black'
85+
className='text-center text-lg font-medium leading-6 text-foreground'
8686
>
8787
Create API Key
8888
</DialogTitle>
@@ -93,7 +93,7 @@ export const ApiKeyCreationModal = ({
9393
<button
9494
tabIndex={0}
9595
onKeyDown={handleEnterOrSpace(copyApiKey)}
96-
className='dark:bg-backgroundDark flex cursor-pointer items-center rounded bg-gray-100 px-2 py-1 text-center font-mono text-sm'
96+
className='bg-background-hover flex cursor-pointer items-center rounded px-2 py-1 text-center font-mono text-sm'
9797
onClick={copyApiKey}
9898
title='Click to copy'
9999
>
@@ -108,7 +108,7 @@ export const ApiKeyCreationModal = ({
108108
</div>
109109
) : (
110110
<Fragment>
111-
<p className='text-center text-sm text-gray-500 dark:text-white'>
111+
<p className='text-foreground-hover text-center text-sm'>
112112
You are about to create a new API key. This key will
113113
allow you to access the API programmatically. Please
114114
keep this key secure and do not share it with anyone.

‎apps/frontend/src/components/molecules/AuthModal.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export const AuthModal = ({ isOpen, onClose }: AuthModalProps) => {
2828
leaveFrom='opacity-100'
2929
leaveTo='opacity-0'
3030
>
31-
<div className='dark:bg-darkBlack/25 fixed inset-0 bg-black bg-opacity-25' />
31+
<div className='bg-background-hover fixed inset-0 bg-opacity-25' />
3232
</TransitionChild>
3333

3434
<div className='fixed inset-0 overflow-y-auto'>
@@ -42,12 +42,12 @@ export const AuthModal = ({ isOpen, onClose }: AuthModalProps) => {
4242
leaveFrom='opacity-100 scale-100'
4343
leaveTo='opacity-0 scale-95'
4444
>
45-
<DialogPanel className='dark:bg-darkWhite w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all'>
45+
<DialogPanel className='w-full max-w-md transform overflow-hidden rounded-2xl bg-background p-6 text-left align-middle text-foreground shadow-xl transition-all'>
4646
<div className='space-y-2'>
4747
<DialogTitle className='text-center text-2xl font-bold'>
4848
Welcome to Auto Drive
4949
</DialogTitle>
50-
<div className='text-center text-muted-foreground'>
50+
<div className='text-center'>
5151
Choose your preferred sign-in method to get started
5252
</div>
5353
</div>
@@ -114,9 +114,7 @@ export const AuthModal = ({ isOpen, onClose }: AuthModalProps) => {
114114
<div className='w-full border-t border-gray-200' />
115115
</div>
116116
<div className='relative flex justify-center text-xs uppercase'>
117-
<span className='bg-background px-2 text-muted-foreground'>
118-
Or
119-
</span>
117+
<span className='bg-background px-2'>Or</span>
120118
</div>
121119
</div>
122120

‎apps/frontend/src/components/molecules/DeleteApiKeyModal.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export const DeleteApiKeyModal = ({
5050
leaveFrom='opacity-100'
5151
leaveTo='opacity-0'
5252
>
53-
<div className='dark:bg-backgroundDarkest dark:bg-darkBlack/25 fixed inset-0 bg-black' />
53+
<div className='bg-background-hover fixed inset-0 bg-opacity-25' />
5454
</TransitionChild>
5555

5656
<div className='fixed inset-0 overflow-y-auto'>
@@ -64,15 +64,15 @@ export const DeleteApiKeyModal = ({
6464
leaveFrom='opacity-100 scale-100'
6565
leaveTo='opacity-0 scale-95'
6666
>
67-
<DialogPanel className='dark:bg-darkWhite w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left text-center align-middle shadow-xl transition-all'>
67+
<DialogPanel className='bg-background-hover w-full max-w-md transform overflow-hidden rounded-2xl bg-background p-6 text-left text-center align-middle shadow-xl transition-all'>
6868
<DialogTitle
6969
as='h3'
70-
className='text-lg font-medium leading-6 text-gray-900 dark:text-white'
70+
className='text-lg font-medium leading-6 text-foreground'
7171
>
7272
Delete API Key
7373
</DialogTitle>
7474
<div className='mt-2'>
75-
<p className='text-center text-sm text-gray-500 dark:text-white'>
75+
<p className='text-foreground-hover text-center text-sm'>
7676
Do you want to delete this API key?
7777
<br />
7878
<strong>This action cannot be undone.</strong>

‎apps/frontend/src/components/molecules/NetworkDropdown/index.tsx‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const NetworkDropdown: FC<{
2626
return (
2727
<Listbox value={selected} onChange={onChange}>
2828
<div className='relative mt-1 w-36'>
29-
<ListboxButton className='dark:bg-darkWhite dark:ring-darkBlackHover relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 dark:ring-1 sm:text-sm'>
29+
<ListboxButton className='bg-background-hover text-background-hover-foreground hover:text-background-hover-foreground relative w-full cursor-default rounded-lg py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 dark:ring-2 dark:ring-white dark:ring-opacity-5 sm:text-sm'>
3030
<div className='flex items-center space-x-2'>
3131
<AutonomysSymbol />
3232
<span className='ml-2 block'>{selected.name}</span>
@@ -44,13 +44,12 @@ export const NetworkDropdown: FC<{
4444
leaveFrom='opacity-100'
4545
leaveTo='opacity-0'
4646
>
47-
<ListboxOptions className='dark:bg-darkWhite absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm'>
47+
<ListboxOptions className='absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:ring-white dark:ring-opacity-5 sm:text-sm'>
4848
{Object.values(networks).map((network, personIdx) => (
4949
<ListboxOption
5050
key={personIdx}
5151
className={cn(
52-
'dark:bg-darkWhite relative flex cursor-default select-none items-center justify-start gap-2 bg-white py-2 pl-4 pr-4',
53-
isActive(selected, network) ? 'bg-gray-100' : '',
52+
'bg-background-hover text-background-hover-foreground hover:text-background-hover-foreground relative flex cursor-default select-none items-center justify-start gap-2 bg-sidebar-accent py-2 pl-4 pr-4 hover:bg-background',
5453
)}
5554
value={network}
5655
>
@@ -67,11 +66,8 @@ export const NetworkDropdown: FC<{
6766
{network.name}
6867
</span>
6968
{isActive(selected, network) ? (
70-
<span className='text-greenBright absolute inset-y-0 right-2 my-auto flex items-center'>
71-
<CheckIcon
72-
className='size-4 text-gray-400'
73-
aria-hidden='true'
74-
/>
69+
<span className='absolute inset-y-0 right-2 my-auto flex items-center'>
70+
<CheckIcon className='size-4' aria-hidden='true' />
7571
</span>
7672
) : null}
7773
</div>

‎apps/frontend/src/components/molecules/NoFilesPlaceholder.tsx‎

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

33
export const NoFilesPlaceholder = () => {
44
return (
5-
<div className='py-12 text-center'>
6-
<File className='text-muted-foreground mx-auto mb-4 h-12 w-12' />
5+
<div className='bg-background py-12 text-center'>
6+
<File className='text-foreground-hover mx-auto mb-4 h-12 w-12' />
77
<h3 className='mb-2 text-lg font-medium'>No files found</h3>
8-
<p className='text-muted-foreground'>Try adjusting your search terms.</p>
8+
<p className='text-foreground-hover'>Try adjusting your search terms.</p>
99
</div>
1010
);
1111
};

0 commit comments

Comments
 (0)