Skip to content

Commit a2eeff0

Browse files
steveninhlesteveninhle
committed
feat: implement dark mode for admin notification page
1 parent 85d0953 commit a2eeff0

18 files changed

Lines changed: 134 additions & 109 deletions

File tree

‎ui/dashboard/src/components/creatable-select/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export const optionStyle = (
7373
? '#2B1F45'
7474
: '#FAFAFC'
7575
: isDark
76-
? '#110D1C'
76+
? '#171321'
7777
: 'white',
7878
color: isDark ? '#F2EDF7' : '#475569',
7979
':hover': {
@@ -94,7 +94,7 @@ export const buildColorStyles = (
9494
? '#1B1725'
9595
: '#F3F4F6'
9696
: isDark
97-
? '#110D1C'
97+
? '#171321'
9898
: 'white',
9999
borderColor: isDark ? '#2B1F45' : '#CBD5E1',
100100
'&:hover': {
@@ -111,7 +111,7 @@ export const buildColorStyles = (
111111
...base,
112112
fontSize,
113113
lineHeight,
114-
backgroundColor: isDark ? '#110D1C' : 'white',
114+
backgroundColor: isDark ? '#171321' : 'white',
115115
border: `1px solid ${isDark ? '#1B1725' : '#E2E8F0'}`,
116116
boxShadow: isDark
117117
? '0px 4px 8px 1px rgba(0, 0, 0, 0.4)'
@@ -120,7 +120,7 @@ export const buildColorStyles = (
120120
}),
121121
menuList: base => ({
122122
...base,
123-
backgroundColor: isDark ? '#110D1C' : 'white',
123+
backgroundColor: isDark ? '#171321' : 'white',
124124
padding: '4px'
125125
}),
126126
placeholder: styles => ({

‎ui/dashboard/src/components/navigation/notification-bell.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -89,10 +89,10 @@ const NotificationBell = ({ envUrlCode }: { envUrlCode: string }) => {
8989
align="start"
9090
side="top"
9191
sideOffset={8}
92-
className="w-[380px] rounded-lg border-none bg-white p-0 shadow-menu"
92+
className="w-[380px] rounded-lg border-none bg-white dark:bg-dark-black-800 p-0 shadow-menu dark:shadow-none dark:ring-1 dark:ring-dark-purple-200"
9393
>
9494
<div className="flex items-center justify-between px-4 py-3.5">
95-
<span className="typo-head-bold-medium text-gray-900">
95+
<span className="typo-head-bold-medium text-gray-900 dark:text-white">
9696
{t('notifications')}
9797
</span>
9898
{unreadCount > 0 && (
@@ -108,7 +108,7 @@ const NotificationBell = ({ envUrlCode }: { envUrlCode: string }) => {
108108

109109
<div className="max-h-[400px] overflow-y-auto">
110110
{items.length === 0 ? (
111-
<p className="px-4 py-8 text-center typo-para-medium text-gray-500">
111+
<p className="px-4 py-8 text-center typo-para-medium text-gray-500 dark:text-dark-gray-200">
112112
{t('no-notifications')}
113113
</p>
114114
) : (
@@ -119,15 +119,15 @@ const NotificationBell = ({ envUrlCode }: { envUrlCode: string }) => {
119119
key={notification.id}
120120
type="button"
121121
onClick={() => onSelectNotification(notification)}
122-
className="flex w-full flex-col items-start gap-1.5 border-t border-gray-100 px-4 py-3.5 text-left first:border-t-0 hover:bg-gray-50"
122+
className="flex w-full flex-col items-start gap-1.5 border-t border-gray-100 dark:border-dark-black-700 px-4 py-3.5 text-left first:border-t-0 hover:bg-gray-50 dark:hover:bg-dark-black-700"
123123
>
124124
<div className="flex w-full items-center gap-2">
125125
{!notification.read && (
126126
<span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-primary-500" />
127127
)}
128128
<span
129129
className={cn(
130-
'typo-para-medium text-gray-900 truncate',
130+
'typo-para-medium text-gray-900 dark:text-dark-gray-400 truncate',
131131
!notification.read ? 'font-semibold' : 'ml-3.5'
132132
)}
133133
>
@@ -136,13 +136,13 @@ const NotificationBell = ({ envUrlCode }: { envUrlCode: string }) => {
136136
{notification.tags[0] && (
137137
<TagChip tag={notification.tags[0]} hideDot />
138138
)}
139-
<span className="ml-auto shrink-0 typo-para-tiny text-gray-500">
139+
<span className="ml-auto shrink-0 typo-para-tiny text-gray-500 dark:text-dark-gray-200">
140140
{formatDateTime(notification.publishedAt)}
141141
</span>
142142
</div>
143143
<span
144144
className={cn(
145-
'line-clamp-2 typo-para-small text-gray-500',
145+
'line-clamp-2 typo-para-small text-gray-500 dark:text-dark-gray-200',
146146
!notification.read && 'pl-3.5'
147147
)}
148148
>
@@ -172,7 +172,7 @@ const NotificationBell = ({ envUrlCode }: { envUrlCode: string }) => {
172172
<button
173173
type="button"
174174
onClick={goToFeed}
175-
className="block w-full border-t border-gray-100 px-4 py-3 text-center typo-para-medium font-medium text-primary-500 hover:bg-gray-50"
175+
className="block w-full border-t border-gray-100 dark:border-dark-black-700 px-4 py-3 text-center typo-para-medium font-medium text-primary-500 hover:bg-gray-50 dark:hover:bg-dark-black-700"
176176
>
177177
{t('view-all-notifications')}
178178
</button>

‎ui/dashboard/src/pages/feature-flag-details/variation/schema-section/index.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ const SchemaSection = ({
6565
<div className="flex items-center justify-between w-full gap-x-6">
6666
<div className="flex flex-col gap-y-1">
6767
<div className="flex items-center gap-x-2">
68-
<h3 className="typo-head-bold-small text-gray-800">
68+
<h3 className="typo-head-bold-small text-gray-800 dark:text-dark-gray-400">
6969
{t('form:feature-flags.value-schema.title')}
7070
</h3>
7171
<Tooltip
@@ -78,12 +78,12 @@ const SchemaSection = ({
7878
className="max-w-[420px] whitespace-pre-line"
7979
/>
8080
{schema && (
81-
<span className="px-2 py-0.5 rounded bg-primary-50 text-primary-500 typo-para-small">
81+
<span className="px-2 py-0.5 rounded bg-primary-50 dark:bg-dark-purple-100 text-primary-500 dark:text-dark-purple-700 typo-para-small">
8282
{typeLabel}
8383
</span>
8484
)}
8585
</div>
86-
<p className="typo-para-small text-gray-600">
86+
<p className="typo-para-small text-gray-600 dark:text-dark-gray-200">
8787
{schema
8888
? schema.description ||
8989
t('form:feature-flags.value-schema.has-schema')
@@ -143,15 +143,15 @@ const SchemaSection = ({
143143
{schema.enumValidator?.values?.map(value => (
144144
<span
145145
key={value}
146-
className="px-2 py-1 rounded bg-gray-100 text-gray-700 typo-para-small"
146+
className="px-2 py-1 rounded bg-gray-100 dark:bg-dark-black-700 text-gray-700 dark:text-dark-gray-400 typo-para-small"
147147
>
148148
{value}
149149
</span>
150150
))}
151151
</div>
152152
)}
153153
{schema?.type === 'REGEX' && (
154-
<code className="w-fit px-3 py-2 rounded-lg bg-gray-100 text-gray-700 typo-para-small">
154+
<code className="w-fit px-3 py-2 rounded-lg bg-gray-100 dark:bg-dark-black-700 text-gray-700 dark:text-dark-gray-400 typo-para-small">
155155
{schema.regexValidator?.pattern}
156156
</code>
157157
)}

‎ui/dashboard/src/pages/feature-flag-details/variation/schema-section/schema-dialog.tsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ const SchemaDialog = ({ isOpen, feature, onClose }: SchemaDialogProps) => {
154154
<div className="flex flex-col w-full gap-y-5 p-5">
155155
{supportedTypes.length > 1 && (
156156
<div className="flex flex-col gap-y-3">
157-
<p className="typo-para-small text-gray-600">
157+
<p className="typo-para-small text-gray-600 dark:text-dark-gray-200">
158158
{t('form:feature-flags.value-schema.type')}
159159
</p>
160160
<RadioGroup
@@ -168,7 +168,7 @@ const SchemaDialog = ({ isOpen, feature, onClose }: SchemaDialogProps) => {
168168
{supportedTypes.map(type => (
169169
<label
170170
key={type}
171-
className="flex items-center gap-x-2 cursor-pointer typo-para-medium text-gray-700"
171+
className="flex items-center gap-x-2 cursor-pointer typo-para-medium text-gray-700 dark:text-dark-gray-400"
172172
>
173173
<RadioGroupItem value={type} id={`schema-type-${type}`} />
174174
{t(
@@ -186,7 +186,7 @@ const SchemaDialog = ({ isOpen, feature, onClose }: SchemaDialogProps) => {
186186

187187
{schemaType === 'ENUM' && (
188188
<div className="flex flex-col gap-y-2">
189-
<p className="typo-para-small text-gray-600">
189+
<p className="typo-para-small text-gray-600 dark:text-dark-gray-200">
190190
{t('form:feature-flags.value-schema.enum-values')}
191191
</p>
192192
<CreatableSelect
@@ -201,7 +201,7 @@ const SchemaDialog = ({ isOpen, feature, onClose }: SchemaDialogProps) => {
201201
noOptionsMessage={() => null}
202202
/>
203203
{feature.variationType === 'NUMBER' && (
204-
<p className="typo-para-small text-gray-500">
204+
<p className="typo-para-small text-gray-500 dark:text-dark-gray-200">
205205
{t('form:feature-flags.value-schema.enum-values-number-note')}
206206
</p>
207207
)}
@@ -210,7 +210,7 @@ const SchemaDialog = ({ isOpen, feature, onClose }: SchemaDialogProps) => {
210210

211211
{schemaType === 'REGEX' && (
212212
<div className="flex flex-col gap-y-2">
213-
<p className="typo-para-small text-gray-600">
213+
<p className="typo-para-small text-gray-600 dark:text-dark-gray-200">
214214
{t('form:feature-flags.value-schema.regex-pattern')}
215215
</p>
216216
<Input
@@ -223,15 +223,15 @@ const SchemaDialog = ({ isOpen, feature, onClose }: SchemaDialogProps) => {
223223
setTestResults(null);
224224
}}
225225
/>
226-
<p className="typo-para-small text-gray-500">
226+
<p className="typo-para-small text-gray-500 dark:text-dark-gray-200">
227227
{t('form:feature-flags.value-schema.regex-note')}
228228
</p>
229229
</div>
230230
)}
231231

232232
{schemaType === 'JSON_SCHEMA' && (
233233
<div className="flex flex-col gap-y-2">
234-
<p className="typo-para-small text-gray-600">
234+
<p className="typo-para-small text-gray-600 dark:text-dark-gray-200">
235235
{t('form:feature-flags.value-schema.json-schema')}
236236
</p>
237237
<ReactCodeEditor
@@ -244,7 +244,7 @@ const SchemaDialog = ({ isOpen, feature, onClose }: SchemaDialogProps) => {
244244
isExpand={false}
245245
className="min-h-[240px] h-[240px]"
246246
/>
247-
<p className="typo-para-small text-gray-500">
247+
<p className="typo-para-small text-gray-500 dark:text-dark-gray-200">
248248
{t('form:feature-flags.value-schema.json-schema-note')}
249249
</p>
250250
</div>
@@ -264,19 +264,19 @@ const SchemaDialog = ({ isOpen, feature, onClose }: SchemaDialogProps) => {
264264
</div>
265265

266266
{definitionErrorMessage && (
267-
<div className="flex items-center gap-x-2 typo-para-small text-accent-red-500">
267+
<div className="flex items-center gap-x-2 typo-para-small text-accent-red-500 dark:text-accent-red-400">
268268
<Icon icon={IconAlert} size="xs" />
269269
{definitionErrorMessage}
270270
</div>
271271
)}
272272

273273
{testResults && (
274-
<div className="flex flex-col gap-y-2 p-3 rounded-lg bg-gray-100">
274+
<div className="flex flex-col gap-y-2 p-3 rounded-lg bg-gray-100 dark:bg-dark-black-700">
275275
<p
276276
className={
277277
failedCount > 0
278-
? 'typo-para-small text-accent-red-500'
279-
: 'typo-para-small text-accent-green-500'
278+
? 'typo-para-small text-accent-red-500 dark:text-accent-red-400'
279+
: 'typo-para-small text-accent-green-500 dark:text-accent-green-400'
280280
}
281281
>
282282
{failedCount > 0
@@ -289,7 +289,7 @@ const SchemaDialog = ({ isOpen, feature, onClose }: SchemaDialogProps) => {
289289
{testResults.map(result => (
290290
<li
291291
key={result.index}
292-
className="flex flex-col typo-para-small text-gray-700"
292+
className="flex flex-col typo-para-small text-gray-700 dark:text-dark-gray-400"
293293
>
294294
<div className="flex items-center justify-between">
295295
<span className="truncate max-w-[400px]">
@@ -298,8 +298,8 @@ const SchemaDialog = ({ isOpen, feature, onClose }: SchemaDialogProps) => {
298298
<span
299299
className={
300300
result.passed
301-
? 'text-accent-green-500'
302-
: 'text-accent-red-500'
301+
? 'text-accent-green-500 dark:text-accent-green-400'
302+
: 'text-accent-red-500 dark:text-accent-red-400'
303303
}
304304
>
305305
{result.passed
@@ -308,7 +308,7 @@ const SchemaDialog = ({ isOpen, feature, onClose }: SchemaDialogProps) => {
308308
</span>
309309
</div>
310310
{!result.passed && result.detail && (
311-
<span className="max-w-[500px] break-words text-gray-500">
311+
<span className="max-w-[500px] break-words text-gray-500 dark:text-dark-gray-200">
312312
{result.detail}
313313
</span>
314314
)}

‎ui/dashboard/src/pages/notification-feed/drafts/draft-card.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,25 +27,25 @@ const DraftCard = ({ draft, active, onClick, onDelete }: DraftCardProps) => {
2727
<div className="flex w-full flex-col gap-1">
2828
<span
2929
className={cn(
30-
'truncate typo-para-medium font-medium text-gray-900',
30+
'truncate typo-para-medium font-medium text-gray-900 dark:text-dark-gray-400',
3131
onDelete && 'pr-8'
3232
)}
3333
>
3434
{draft.title}
3535
</span>
3636
{draft.content && (
37-
<p className="line-clamp-2 typo-para-small text-gray-500">
37+
<p className="line-clamp-2 typo-para-small text-gray-500 dark:text-dark-gray-200">
3838
{markdownToText(draft.content)}
3939
</p>
4040
)}
4141
</div>
4242
}
4343
footer={
4444
<div className="flex w-full items-center justify-between">
45-
<span className="typo-para-small text-gray-500">
45+
<span className="typo-para-small text-gray-500 dark:text-dark-gray-200">
4646
{draft.createdBy.split('@')[0]}
4747
</span>
48-
<span className="typo-para-tiny text-gray-500">
48+
<span className="typo-para-tiny text-gray-500 dark:text-dark-gray-200">
4949
{formatDateTime(draft.updatedAt)}
5050
</span>
5151
</div>
@@ -57,7 +57,7 @@ const DraftCard = ({ draft, active, onClick, onDelete }: DraftCardProps) => {
5757
<button
5858
type="button"
5959
aria-label={t('delete')}
60-
className="absolute right-4 top-4 shrink-0 text-gray-500 hover:text-accent-red-500"
60+
className="absolute right-4 top-4 shrink-0 text-gray-500 dark:text-dark-gray-200 hover:text-accent-red-500 dark:hover:text-accent-red-400"
6161
onClick={e => {
6262
e.stopPropagation();
6363
onDelete();

‎ui/dashboard/src/pages/notification-feed/drafts/drafts-panel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ const DraftsPanel = ({
6767

6868
return (
6969
<div className="flex flex-col gap-4">
70-
<h2 className="typo-head-bold-small text-gray-900">
70+
<h2 className="typo-head-bold-small text-gray-900 dark:text-dark-gray-400">
7171
{t('drafts')} ({totalCount})
7272
</h2>
7373

‎ui/dashboard/src/pages/notification-feed/elements/markdown-content.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import MDEditor from '@uiw/react-md-editor';
2+
import { useTheme } from 'hooks/use-theme';
23
import { remark } from 'remark';
34
import remarkGfm from 'remark-gfm';
45
import strip from 'strip-markdown';
@@ -13,9 +14,11 @@ export const MarkdownContent = ({
1314
source: string;
1415
className?: string;
1516
}) => {
17+
const { theme } = useTheme();
18+
1619
return (
1720
<div
18-
data-color-mode="light"
21+
data-color-mode={theme}
1922
className={cn('markdown-content max-w-none text-sm', className)}
2023
>
2124
<MDEditor.Markdown source={source} className="!bg-transparent" />

‎ui/dashboard/src/pages/notification-feed/elements/notification-card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const NotificationCard = ({
3030
'rounded-lg border p-4',
3131
active
3232
? 'border-primary-500 shadow-border-primary-500'
33-
: 'border-gray-200 hover:border-gray-300'
33+
: 'border-gray-200 dark:border-dark-black-700 hover:border-gray-300 dark:hover:border-dark-black-600'
3434
)
3535
: 'p-0'
3636
)}

0 commit comments

Comments
 (0)