Skip to content

Commit 7c7cd7a

Browse files
ilidemiilidemi
authored
Dark mode (#3405)
1 parent 07f1db1 commit 7c7cd7a

27 files changed

+551
-94
lines changed

‎ui/app/layout.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { Metadata } from 'next';
2+
import { cookies } from 'next/headers';
23
import { AppThemeProvider, StyledComponentsRegistry } from '../lib/AppTheme';
34

45
export const metadata: Metadata = {
@@ -10,11 +11,17 @@ export default function RootLayout({
1011
}: {
1112
children: React.ReactNode;
1213
}) {
14+
// Read theme from cookie during SSR
15+
const cookieStore = cookies();
16+
const themeCookie = cookieStore.get('peerdb-theme');
17+
const initialTheme = themeCookie?.value === 'dark' ? 'dark' : 'light';
1318
return (
14-
<html lang='en'>
19+
<html lang='en' className={initialTheme}>
1520
<body>
1621
<StyledComponentsRegistry>
17-
<AppThemeProvider>{children}</AppThemeProvider>
22+
<AppThemeProvider initialTheme={initialTheme}>
23+
{children}
24+
</AppThemeProvider>
1825
</StyledComponentsRegistry>
1926
</body>
2027
</html>

‎ui/app/mirror-logs/table.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
'use client';
22

3+
import SelectTheme from '@/app/styles/select';
34
import LogsTable from '@/components/LogsTable';
45
import { ListMirrorNamesResponse } from '@/grpc_generated/route';
56
import { ProgressCircle } from '@/lib/ProgressCircle';
@@ -47,6 +48,7 @@ export default function LogsView() {
4748
setMirrorName(selectedOption?.value ?? '')
4849
}
4950
placeholder='Filter by mirror'
51+
theme={SelectTheme}
5052
/>
5153
</div>
5254
<div style={{ width: 'fit-content' }}>
@@ -60,6 +62,7 @@ export default function LogsView() {
6062
setLogLevel(selectedOption?.value ?? 'all')
6163
}
6264
placeholder='Filter by log type'
65+
theme={SelectTheme}
6366
/>
6467
</div>
6568
</div>

‎ui/app/mirrors/[mirrorId]/cdc.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ export function CDCMirror({ status, syncStatusChild }: CDCMirrorStatusProps) {
4747
<TabList
4848
color='neutral'
4949
style={{ display: 'flex', justifyContent: 'space-around' }}
50+
className='[&_button]:text-gray-600 dark:[&_button]:text-gray-300 [&_button:hover]:text-gray-900 dark:[&_button:hover]:text-white [&_button[data-state=active]]:text-gray-900 dark:[&_button[data-state=active]]:text-white'
5051
>
5152
<Tab>Overview</Tab>
5253
<Tab>Sync Status</Tab>

‎ui/app/mirrors/[mirrorId]/columnDisplayModal.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export default function ColumnDisplayModal({
9393
<Dialog.Root open={isOpen} onOpenChange={onClose}>
9494
<Dialog.Portal>
9595
<Dialog.Overlay className='fixed inset-0 z-50' />
96-
<Dialog.Content className='fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[80vh] overflow-hidden z-50'>
96+
<Dialog.Content className='fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-900 rounded-lg shadow-xl max-w-4xl w-full max-h-[80vh] overflow-hidden z-50'>
9797
{/* Header */}
9898
<div className='flex items-center justify-between p-6 border-b'>
9999
<div>
@@ -164,7 +164,11 @@ export default function ColumnDisplayModal({
164164
return (
165165
<TableRow
166166
key={column.name}
167-
className={isExcluded ? 'opacity-60 bg-gray-50' : ''}
167+
className={
168+
isExcluded
169+
? 'opacity-60 bg-gray-50 dark:bg-gray-800'
170+
: ''
171+
}
168172
>
169173
<TableCell className={isExcluded ? 'line-through' : ''}>
170174
{column.name}
@@ -180,11 +184,11 @@ export default function ColumnDisplayModal({
180184
</TableCell>
181185
<TableCell>
182186
{isExcluded ? (
183-
<Label className='text-red-600 font-medium'>
187+
<Label className='text-red-600 dark:text-red-400 font-medium'>
184188
Excluded
185189
</Label>
186190
) : (
187-
<Label className='text-green-600 font-medium'>
191+
<Label className='text-green-600 dark:text-green-400 font-medium'>
188192
Included
189193
</Label>
190194
)}
@@ -196,7 +200,7 @@ export default function ColumnDisplayModal({
196200
)}
197201

198202
{!loading && !error && excludedColumns.size > 0 && (
199-
<div className='text-xs text-gray-500 pt-4 border-t mt-4'>
203+
<div className='text-xs text-gray-500 dark:text-gray-400 pt-4 border-t mt-4'>
200204
<Label variant='body' colorName='lowContrast'>
201205
<strong>Note:</strong> Excluded columns are shown with
202206
strikethrough text and grayed out. They appear at the bottom

‎ui/app/mirrors/[mirrorId]/rowsDisplay.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,10 @@ export default function RowsDisplay({
2929
alignItems: 'center',
3030
}}
3131
>
32-
<h4 className='text-tremor-default text-tremor-content dark:text-dark-tremor-content'>
32+
<h4 className='text-tremor-default text-gray-600 dark:text-gray-300'>
3333
Rows Synced
3434
</h4>
35-
<p className='text-tremor-metric text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold'>
35+
<p className='text-tremor-metric text-gray-900 dark:text-white font-semibold'>
3636
{RowDataFormatter(totalRowsData.totalCount.valueOf())}
3737
</p>
3838
<Button
@@ -43,7 +43,10 @@ export default function RowsDisplay({
4343
<Icon name={show ? 'arrow_drop_up' : 'arrow_drop_down'} />
4444
</Button>
4545
{show && (
46-
<div style={{ width: '30%', marginTop: '1.5rem' }}>
46+
<div
47+
style={{ width: '30%', marginTop: '1.5rem' }}
48+
className='[&_p]:text-gray-700 dark:[&_p]:text-gray-300'
49+
>
4750
<BarList valueFormatter={RowDataFormatter} data={rowsHero} />
4851
</div>
4952
)}

‎ui/app/mirrors/[mirrorId]/tablePairs.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export default function TablePairs({
6565
key={`${table.sourceTableIdentifier}.${table.destinationTableIdentifier}`}
6666
onClick={() => handleTableClick(table)}
6767
style={{ cursor: 'pointer' }}
68-
className='hover:bg-gray-50'
68+
className='hover:bg-gray-50 dark:hover:bg-gray-800'
6969
>
7070
<TableCell>{table.sourceTableIdentifier}</TableCell>
7171
<TableCell style={{ padding: '0.5rem' }}>

‎ui/app/peers/create/[peerType]/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,7 @@ export default function CreateConfig({
222222
Back
223223
</Button>
224224
<Button
225-
style={{ backgroundColor: 'wheat' }}
225+
variant='warningSolid'
226226
onClick={() =>
227227
handleValidate(getDBType(), config, notifyErr, setLoading, name)
228228
}

‎ui/app/peers/peersTable.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { SearchField } from '@/lib/SearchField';
1111
import { Table, TableCell, TableRow } from '@/lib/Table';
1212
import { useMemo, useState } from 'react';
1313
import ReactSelect from 'react-select';
14-
import SelectTheme from '../styles/select';
14+
import { useSelectTheme } from '../styles/select';
1515

1616
function PeerRow({ peer }: { peer: PeerListItem }) {
1717
return (
@@ -35,6 +35,7 @@ function PeerRow({ peer }: { peer: PeerListItem }) {
3535
}
3636

3737
export default function PeersTable({ peers }: { peers: PeerListItem[] }) {
38+
const selectTheme = useSelectTheme();
3839
const [searchQuery, setSearchQuery] = useState<string>('');
3940
const [filteredType, setFilteredType] = useState<DBType | undefined>(
4041
undefined
@@ -76,7 +77,7 @@ export default function PeersTable({ peers }: { peers: PeerListItem[] }) {
7677
setFilteredType(val?.value);
7778
}}
7879
defaultValue={allTypesOption}
79-
theme={SelectTheme}
80+
theme={selectTheme}
8081
/>
8182
<SearchField
8283
placeholder='Search by peer name'

‎ui/app/styles/select.tsx‎

Lines changed: 41 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,50 @@
1+
import { appThemeColors } from '@/lib/AppTheme/appThemeColors';
2+
import { appThemeColorsDark } from '@/lib/AppTheme/appThemeColorsDark';
3+
import { useTheme } from '@/lib/AppTheme/ThemeContext';
4+
import { useMemo } from 'react';
15
import { Theme } from 'react-select';
26

3-
export default function SelectTheme(theme: Theme) {
7+
// Hook version for components that need reactive theme updates
8+
export function useSelectTheme() {
9+
const { theme: appTheme } = useTheme();
10+
11+
return useMemo(() => {
12+
return (theme: Theme) => {
13+
const colors = appTheme === 'dark' ? appThemeColorsDark : appThemeColors;
14+
15+
return {
16+
...theme,
17+
colors: {
18+
...theme.colors,
19+
primary: colors.select.primary,
20+
primary25: colors.select.primary25,
21+
neutral0: colors.select.neutral0,
22+
neutral80: colors.select.neutral80,
23+
},
24+
};
25+
};
26+
}, [appTheme]);
27+
}
28+
29+
// Static function for backward compatibility
30+
// Checks DOM at render time
31+
function SelectTheme(theme: Theme) {
32+
const isDark =
33+
typeof window !== 'undefined' &&
34+
document.documentElement.classList.contains('dark');
35+
36+
const colors = isDark ? appThemeColorsDark : appThemeColors;
37+
438
return {
539
...theme,
640
colors: {
741
...theme.colors,
8-
primary25: 'rgba(48, 164, 108, 0.3)',
9-
primary: 'rgba(48, 164, 108, 0.3)',
42+
primary: colors.select.primary,
43+
primary25: colors.select.primary25,
44+
neutral0: colors.select.neutral0,
45+
neutral80: colors.select.neutral80,
1046
},
1147
};
1248
}
49+
50+
export default SelectTheme;

‎ui/components/DropDialog.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -182,16 +182,13 @@ export default function DropDialog({
182182
)}
183183
<div style={{ display: 'flex', marginTop: '1rem' }}>
184184
<DialogClose>
185-
<Button style={{ backgroundColor: '#6c757d', color: 'white' }}>
186-
Cancel
187-
</Button>
185+
<Button variant='normal'>Cancel</Button>
188186
</DialogClose>
189187
<Button
190188
onClick={() => handleDelete()}
189+
variant='destructiveSolid'
191190
style={{
192191
marginLeft: '1rem',
193-
backgroundColor: '#dc3545',
194-
color: 'white',
195192
}}
196193
>
197194
{loading ? <BarLoader /> : 'Delete'}

0 commit comments

Comments
 (0)