Skip to content

Commit 6cfc0ca

Browse files
RostislavDuginRostislavDugin
committed
FEATURE (dark): Add dark theme
1 parent 5d27123 commit 6cfc0ca

Some content is hidden

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

45 files changed

+555
-225
lines changed

‎frontend/src/App.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { App as AntdApp, ConfigProvider } from 'antd';
1+
import { App as AntdApp, ConfigProvider, theme } from 'antd';
22
import { useEffect, useState } from 'react';
33
import { BrowserRouter, Route } from 'react-router';
44
import { Routes } from 'react-router';
@@ -7,10 +7,12 @@ import { userApi } from './entity/users';
77
import { AuthPageComponent } from './pages/AuthPageComponent';
88
import { OAuthCallbackPage } from './pages/OAuthCallbackPage';
99
import { OauthStorageComponent } from './pages/OauthStorageComponent';
10+
import { ThemeProvider, useTheme } from './shared/theme';
1011
import { MainScreenComponent } from './widgets/main/MainScreenComponent';
1112

12-
function App() {
13+
function AppContent() {
1314
const [isAuthorized, setIsAuthorized] = useState(false);
15+
const { resolvedTheme } = useTheme();
1416

1517
useEffect(() => {
1618
const isAuthorized = userApi.isAuthorized();
@@ -24,6 +26,7 @@ function App() {
2426
return (
2527
<ConfigProvider
2628
theme={{
29+
algorithm: resolvedTheme === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
2730
token: {
2831
colorPrimary: '#155dfc', // Tailwind blue-600
2932
},
@@ -45,4 +48,12 @@ function App() {
4548
);
4649
}
4750

51+
function App() {
52+
return (
53+
<ThemeProvider>
54+
<AppContent />
55+
</ThemeProvider>
56+
);
57+
}
58+
4859
export default App;

‎frontend/src/features/backups/ui/BackupsComponent.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -446,7 +446,9 @@ export const BackupsComponent = ({ database, isCanManageDBs, scrollContainerRef
446446
render: (createdAt: string) => (
447447
<div>
448448
{dayjs.utc(createdAt).local().format(getUserTimeFormat().format)} <br />
449-
<span className="text-gray-500">({dayjs.utc(createdAt).local().fromNow()})</span>
449+
<span className="text-gray-500 dark:text-gray-400">
450+
({dayjs.utc(createdAt).local().fromNow()})
451+
</span>
450452
</div>
451453
),
452454
sorter: (a, b) => dayjs(a.createdAt).unix() - dayjs(b.createdAt).unix(),
@@ -522,8 +524,8 @@ export const BackupsComponent = ({ database, isCanManageDBs, scrollContainerRef
522524
}
523525

524526
return (
525-
<div className="mt-5 w-full rounded-md bg-white p-3 shadow md:p-5">
526-
<h2 className="text-lg font-bold md:text-xl">Backups</h2>
527+
<div className="mt-5 w-full rounded-md bg-white p-3 shadow md:p-5 dark:bg-gray-800">
528+
<h2 className="text-lg font-bold md:text-xl dark:text-white">Backups</h2>
527529

528530
{!isBackupConfigLoading && !backupConfig?.isBackupsEnabled && (
529531
<div className="text-sm text-red-600 md:text-base">
@@ -558,16 +560,16 @@ export const BackupsComponent = ({ database, isCanManageDBs, scrollContainerRef
558560
{backups.map((backup) => (
559561
<div
560562
key={backup.id}
561-
className="mb-2 rounded-lg border border-gray-200 bg-white p-4 shadow-sm"
563+
className="mb-2 rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800"
562564
>
563565
<div className="space-y-3">
564566
<div className="flex items-start justify-between">
565567
<div>
566-
<div className="text-xs text-gray-500">Created at</div>
568+
<div className="text-xs text-gray-500 dark:text-gray-400">Created at</div>
567569
<div className="text-sm font-medium">
568570
{dayjs.utc(backup.createdAt).local().format(getUserTimeFormat().format)}
569571
</div>
570-
<div className="text-xs text-gray-500">
572+
<div className="text-xs text-gray-500 dark:text-gray-400">
571573
({dayjs.utc(backup.createdAt).local().fromNow()})
572574
</div>
573575
</div>
@@ -576,11 +578,11 @@ export const BackupsComponent = ({ database, isCanManageDBs, scrollContainerRef
576578

577579
<div className="grid grid-cols-2 gap-4">
578580
<div>
579-
<div className="text-xs text-gray-500">Size</div>
581+
<div className="text-xs text-gray-500 dark:text-gray-400">Size</div>
580582
<div className="text-sm font-medium">{formatSize(backup.backupSizeMb)}</div>
581583
</div>
582584
<div>
583-
<div className="text-xs text-gray-500">Duration</div>
585+
<div className="text-xs text-gray-500 dark:text-gray-400">Duration</div>
584586
<div className="text-sm font-medium">
585587
{formatDuration(backup.backupDurationMs)}
586588
</div>
@@ -602,12 +604,12 @@ export const BackupsComponent = ({ database, isCanManageDBs, scrollContainerRef
602604
</div>
603605
)}
604606
{!hasMore && backups.length > 0 && (
605-
<div className="mt-3 text-center text-sm text-gray-500">
607+
<div className="mt-3 text-center text-sm text-gray-500 dark:text-gray-400">
606608
All backups loaded ({totalBackups} total)
607609
</div>
608610
)}
609611
{!isBackupsLoading && backups.length === 0 && (
610-
<div className="py-8 text-center text-gray-500">No backups yet</div>
612+
<div className="py-8 text-center text-gray-500 dark:text-gray-400">No backups yet</div>
611613
)}
612614
</div>
613615

@@ -628,7 +630,7 @@ export const BackupsComponent = ({ database, isCanManageDBs, scrollContainerRef
628630
</div>
629631
)}
630632
{!hasMore && backups.length > 0 && (
631-
<div className="mt-2 text-center text-gray-500">
633+
<div className="mt-2 text-center text-gray-500 dark:text-gray-400">
632634
All backups loaded ({totalBackups} total)
633635
</div>
634636
)}

‎frontend/src/features/backups/ui/EditBackupConfigComponent.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -529,7 +529,7 @@ export const EditBackupConfigComponent = ({
529529
open={isShowCreateStorage}
530530
onCancel={() => setShowCreateStorage(false)}
531531
>
532-
<div className="my-3 max-w-[275px] text-gray-500">
532+
<div className="my-3 max-w-[275px] text-gray-500 dark:text-gray-400">
533533
Storage - is a place where backups will be stored (local disk, S3, Google Drive, etc.)
534534
</div>
535535

‎frontend/src/features/databases/ui/DatabaseCardComponent.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const DatabaseCardComponent = ({
2929

3030
return (
3131
<div
32-
className={`mb-3 cursor-pointer rounded p-3 shadow ${selectedDatabaseId === database.id ? 'bg-blue-100' : 'bg-white'}`}
32+
className={`mb-3 cursor-pointer rounded p-3 shadow ${selectedDatabaseId === database.id ? 'bg-blue-100 dark:bg-blue-800' : 'bg-white dark:bg-gray-800'}`}
3333
onClick={() => setSelectedDatabaseId(database.id)}
3434
>
3535
<div className="flex">
@@ -49,7 +49,7 @@ export const DatabaseCardComponent = ({
4949
</div>
5050

5151
{storage && (
52-
<div className="text-sm text-gray-500">
52+
<div className="text-sm text-gray-500 dark:text-gray-400">
5353
<span>Storage: </span>
5454
<span className="inline-flex items-center">
5555
{storage.name}{' '}
@@ -65,11 +65,13 @@ export const DatabaseCardComponent = ({
6565
)}
6666

6767
{database.lastBackupTime && (
68-
<div className="text-gray-500">Last backup {dayjs(database.lastBackupTime).fromNow()}</div>
68+
<div className="text-gray-500 dark:text-gray-400">
69+
Last backup {dayjs(database.lastBackupTime).fromNow()}
70+
</div>
6971
)}
7072

7173
{database.lastBackupErrorMessage && (
72-
<div className="mt-1 flex items-center text-sm text-red-600 underline">
74+
<div className="mt-1 flex items-center text-sm text-red-600 underline dark:text-red-400">
7375
<InfoCircleOutlined className="mr-1" style={{ color: 'red' }} />
7476
Has backup error
7577
</div>

‎frontend/src/features/databases/ui/DatabaseComponent.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,14 +51,14 @@ export const DatabaseComponent = ({
5151
>
5252
<div className="flex">
5353
<div
54-
className={`mr-2 cursor-pointer rounded-tl-md rounded-tr-md px-6 py-2 ${currentTab === 'config' ? 'bg-white' : 'bg-gray-200'}`}
54+
className={`mr-2 cursor-pointer rounded-tl-md rounded-tr-md px-6 py-2 ${currentTab === 'config' ? 'bg-white dark:bg-gray-800' : 'bg-gray-200 dark:bg-gray-700'}`}
5555
onClick={() => setCurrentTab('config')}
5656
>
5757
Config
5858
</div>
5959

6060
<div
61-
className={`mr-2 cursor-pointer rounded-tl-md rounded-tr-md px-6 py-2 ${currentTab === 'backups' ? 'bg-white' : 'bg-gray-200'}`}
61+
className={`mr-2 cursor-pointer rounded-tl-md rounded-tr-md px-6 py-2 ${currentTab === 'backups' ? 'bg-white dark:bg-gray-800' : 'bg-gray-200 dark:bg-gray-700'}`}
6262
onClick={() => setCurrentTab('backups')}
6363
>
6464
Backups

‎frontend/src/features/databases/ui/DatabaseConfigComponent.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ export const DatabaseConfigComponent = ({
147147
};
148148

149149
return (
150-
<div className="w-full rounded-tr-md rounded-br-md rounded-bl-md bg-white p-3 shadow sm:p-5">
150+
<div className="w-full rounded-tr-md rounded-br-md rounded-bl-md bg-white p-3 shadow sm:p-5 dark:bg-gray-800">
151151
{!isEditName ? (
152152
<div className="mb-5 flex items-center text-xl font-bold sm:text-2xl">
153153
{database.name}
@@ -184,7 +184,7 @@ export const DatabaseConfigComponent = ({
184184
setEditDatabase(undefined);
185185
}}
186186
>
187-
<CloseOutlined className="text-gray-500" />
187+
<CloseOutlined className="text-gray-500 dark:text-gray-400" />
188188
</Button>
189189
</div>
190190
</div>
@@ -216,7 +216,7 @@ export const DatabaseConfigComponent = ({
216216
{database.lastBackupErrorMessage}
217217
</div>
218218

219-
<div className="mt-3 text-sm text-gray-500">
219+
<div className="mt-3 text-sm text-gray-500 dark:text-gray-400">
220220
To clean this error (choose any):
221221
<ul>
222222
<li>- test connection via button below (even if you updated settings);</li>
@@ -370,7 +370,6 @@ export const DatabaseConfigComponent = ({
370370
<Button
371371
type="primary"
372372
className="w-full sm:mr-1 sm:w-auto"
373-
ghost
374373
onClick={testConnection}
375374
loading={isTestingConnection}
376375
disabled={isTestingConnection}
@@ -381,7 +380,6 @@ export const DatabaseConfigComponent = ({
381380
<Button
382381
type="primary"
383382
className="w-full sm:mr-1 sm:w-auto"
384-
ghost
385383
onClick={copyDatabase}
386384
loading={isCopying}
387385
disabled={isCopying}

‎frontend/src/features/databases/ui/DatabasesComponent.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ export const DatabasesComponent = ({ contentHeight, workspace, isCanManageDBs }:
111111
placeholder="Search database"
112112
value={searchQuery}
113113
onChange={(e) => setSearchQuery(e.target.value)}
114-
className="w-full border-b border-gray-300 p-1 text-gray-500 outline-none"
114+
className="w-full border-b border-gray-300 p-1 text-gray-500 outline-none dark:text-gray-400"
115115
/>
116116
</div>
117117
</>
@@ -127,14 +127,14 @@ export const DatabasesComponent = ({ contentHeight, workspace, isCanManageDBs }:
127127
/>
128128
))
129129
: searchQuery && (
130-
<div className="mb-4 text-center text-sm text-gray-500">
130+
<div className="mb-4 text-center text-sm text-gray-500 dark:text-gray-400">
131131
No databases found matching &quot;{searchQuery}&quot;
132132
</div>
133133
)}
134134

135135
{databases.length < 5 && isCanManageDBs && addDatabaseButton}
136136

137-
<div className="mx-3 text-center text-xs text-gray-500">
137+
<div className="mx-3 text-center text-xs text-gray-500 dark:text-gray-400">
138138
Database - is a thing we are backing up
139139
</div>
140140
</div>

‎frontend/src/features/databases/ui/edit/CreateReadOnlyComponent.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,12 @@ export const CreateReadOnlyComponent = ({
9898

9999
<p className="mb-2">
100100
Postgresus enforce enterprise-grade security (
101-
<a href="https://postgresus.com/security" target="_blank" rel="noreferrer">
101+
<a
102+
href="https://postgresus.com/security"
103+
target="_blank"
104+
rel="noreferrer"
105+
className="!text-blue-600 dark:!text-blue-400"
106+
>
102107
read in details here
103108
</a>
104109
). However, it is not possible to be covered from all possible risks.

‎frontend/src/features/databases/ui/edit/EditDatabaseNotifiersComponent.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export const EditDatabaseNotifiersComponent = ({
9393

9494
return (
9595
<div>
96-
<div className="mb-5 max-w-[275px] text-gray-500">
96+
<div className="mb-5 max-w-[275px] text-gray-500 dark:text-gray-400">
9797
Notifier - is a place where notifications will be sent (email, Slack, Telegram, etc.)
9898
<br />
9999
<br />
@@ -162,7 +162,7 @@ export const EditDatabaseNotifiersComponent = ({
162162
open={isShowCreateNotifier}
163163
onCancel={() => setShowCreateNotifier(false)}
164164
>
165-
<div className="my-3 max-w-[275px] text-gray-500">
165+
<div className="my-3 max-w-[275px] text-gray-500 dark:text-gray-400">
166166
Notifier - is a place where notifications will be sent (email, Slack, Telegram, etc.)
167167
</div>
168168

‎frontend/src/features/databases/ui/edit/EditDatabaseSpecificDataComponent.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -177,12 +177,13 @@ export const EditDatabaseSpecificDataComponent = ({
177177
{isLocalhostDb && (
178178
<div className="mb-1 flex">
179179
<div className="min-w-[150px]" />
180-
<div className="max-w-[200px] text-xs text-gray-500">
180+
<div className="max-w-[200px] text-xs text-gray-500 dark:text-gray-400">
181181
Please{' '}
182182
<a
183183
href="https://postgresus.com/faq#how-to-backup-localhost"
184184
target="_blank"
185185
rel="noreferrer"
186+
className="!text-blue-600 dark:!text-blue-400"
186187
>
187188
read this document
188189
</a>{' '}

0 commit comments

Comments
 (0)