Skip to content

Commit eb451c7

Browse files
steveninhlesteveninhle
committed
feat: implement dark mode for memeber page
1 parent f9fa3f3 commit eb451c7

10 files changed

Lines changed: 44 additions & 28 deletions

File tree

‎ui/dashboard/src/components/popover/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const PopoverContent = React.forwardRef<
4646
align={align}
4747
sideOffset={sideOffset}
4848
className={cn(
49-
'max-h-[260px] min-w-[167px] overflow-auto rounded-lg bg-gray-50 dark:bg-dark-black-800 p-1 shadow-dropdown dark:shadow-dark-card dark:border dark:border-dark-black-700',
49+
'max-h-[260px] min-w-[167px] overflow-auto rounded-lg bg-gray-50 dark:bg-dark-black-600 p-1 shadow-dropdown dark:shadow-dark-card dark:border dark:border-dark-black-700',
5050
className
5151
)}
5252
{...props}

‎ui/dashboard/src/pages/members/collection-layout/data-collection.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ export const useColumns = ({
120120
/>
121121

122122
{isPendingInvite && (
123-
<div className="py-[3px] px-2 w-fit rounded bg-accent-orange-50 typo-para-small text-accent-orange-500">
123+
<div className="py-[3px] px-2 w-fit rounded bg-accent-orange-50 dark:bg-accent-orange-900/30 typo-para-small text-accent-orange-500">
124124
{t(`table:pending-invite`)}
125125
</div>
126126
)}
@@ -136,7 +136,7 @@ export const useColumns = ({
136136
cell: ({ row }) => {
137137
const account = row.original;
138138
return (
139-
<div className="text-gray-700 typo-para-medium capitalize">
139+
<div className="text-gray-700 dark:text-dark-gray-300 typo-para-medium capitalize">
140140
{t(String(account.organizationRole).split('_')[1]?.toLowerCase())}
141141
</div>
142142
);
@@ -172,7 +172,7 @@ export const useColumns = ({
172172
return (
173173
<DateTooltip
174174
trigger={
175-
<div className="text-gray-700 typo-para-medium">
175+
<div className="text-gray-700 dark:text-dark-gray-300 typo-para-medium">
176176
{isNever ? t('never') : formatDateTime(account.lastSeen)}
177177
</div>
178178
}

‎ui/dashboard/src/pages/members/member-modal/add-member-modal/environment-roles.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,9 @@ const EnvironmentRoles = ({
6363

6464
return (
6565
<>
66-
<p className="text-gray-800 typo-head-bold-small">{t('environment')}</p>
66+
<p className="text-gray-800 dark:text-dark-gray-400 typo-head-bold-small">
67+
{t('environment')}
68+
</p>
6769
<Button
6870
onClick={onAddEnvironment}
6971
variant="text"

‎ui/dashboard/src/pages/members/member-modal/add-member-modal/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ const AddMemberModal = ({ isOpen, onClose }: AddMemberModalProps) => {
197197
return (
198198
<SlideModal title={t('invite-member')} isOpen={isOpen} onClose={onClose}>
199199
<div className="w-full p-5 pb-28">
200-
<p className="text-gray-800 typo-head-bold-small">
200+
<p className="text-gray-800 dark:text-dark-gray-400 typo-head-bold-small">
201201
{t('form:general-info')}
202202
</p>
203203
<FormProvider {...form}>
@@ -328,7 +328,7 @@ const AddMemberModal = ({ isOpen, onClose }: AddMemberModalProps) => {
328328
<EnvironmentRoles environments={formattedEnvironments} />
329329
</>
330330
)}
331-
<div className="absolute left-0 bottom-0 bg-gray-50 w-full rounded-b-lg">
331+
<div className="absolute left-0 bottom-0 bg-gray-50 dark:bg-dark-black-800 w-full rounded-b-lg">
332332
<ButtonBar
333333
primaryButton={
334334
<Button variant="secondary" onClick={onClose}>

‎ui/dashboard/src/pages/members/member-modal/delete-member-modal/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const DeleteMemberModal = ({
3232
>
3333
<div className="py-8 px-5 flex flex-col gap-6 items-center justify-center">
3434
<IconDelete />
35-
<div className="typo-para-big text-gray-700 text-center">
35+
<div className="typo-para-big text-gray-700 dark:text-dark-gray-300 text-center">
3636
<Trans
3737
i18nKey="table:members.delete-member-desc"
3838
values={{ email: member.email }}

‎ui/dashboard/src/pages/members/member-modal/edit-member-modal/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,7 @@ const EditMemberModal = ({ isOpen, onClose, member }: EditMemberModalProps) => {
226226
return (
227227
<SlideModal title={t('update-member')} isOpen={isOpen} onClose={onClose}>
228228
<div className="w-full p-5 pb-28">
229-
<p className="text-gray-800 typo-head-bold-small">
229+
<p className="text-gray-800 dark:text-dark-gray-400 typo-head-bold-small">
230230
{t('form:general-info')}
231231
</p>
232232
<FormProvider {...form}>
@@ -384,7 +384,7 @@ const EditMemberModal = ({ isOpen, onClose, member }: EditMemberModalProps) => {
384384
<EnvironmentRoles environments={formattedEnvironments} />
385385
</>
386386
)}
387-
<div className="absolute left-0 bottom-0 bg-gray-50 w-full rounded-b-lg">
387+
<div className="absolute left-0 bottom-0 bg-gray-50 dark:bg-dark-black-800 w-full rounded-b-lg">
388388
<ButtonBar
389389
primaryButton={
390390
<Button variant="secondary" onClick={onClose}>

‎ui/dashboard/src/pages/members/member-modal/filter-member-modal/index.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -231,9 +231,10 @@ const FilterMemberModal = ({
231231
>
232232
<div
233233
className={cn(
234-
'typo-para-small text-center py-[3px] w-[42px] min-w-[42px] rounded text-accent-pink-500 bg-accent-pink-50',
234+
'typo-para-small text-center py-[3px] w-[42px] min-w-[42px] rounded text-accent-pink-500 bg-accent-pink-50 dark:bg-accent-pink-900/30',
235235
{
236-
'bg-gray-200 text-gray-600': filterIndex !== 0
236+
'bg-gray-200 dark:bg-dark-black-700 text-gray-600 dark:text-dark-gray-300':
237+
filterIndex !== 0
237238
}
238239
)}
239240
>
@@ -259,7 +260,9 @@ const FilterMemberModal = ({
259260
}}
260261
/>
261262

262-
<p className="typo-para-medium text-gray-600">is</p>
263+
<p className="typo-para-medium text-gray-600 dark:text-dark-gray-300">
264+
is
265+
</p>
263266
<Dropdown
264267
placeholder={t(`select-value`)}
265268
labelCustom={handleGetLabelFilterValue(filterOption)}

‎ui/dashboard/src/pages/members/member-modal/member-details-modal/index.tsx‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -53,26 +53,32 @@ const MemberDetailsModal = ({
5353
</div>
5454
) : (
5555
<div className="flex flex-col w-full p-5 gap-y-5">
56-
<h3 className="typo-head-bold-small text-gray-800">
56+
<h3 className="typo-head-bold-small text-gray-800 dark:text-dark-gray-400">
5757
{t(`form:general-info`)}
5858
</h3>
5959
<div className="flex items-start w-full gap-x-4">
6060
<div className="flex-1">
61-
<p className="typo-para-small text-gray-600">{t('name')}</p>
62-
<p className="text-gray-700 mt-1 typo-para-medium">
61+
<p className="typo-para-small text-gray-600 dark:text-dark-gray-200">
62+
{t('name')}
63+
</p>
64+
<p className="text-gray-700 dark:text-dark-gray-300 mt-1 typo-para-medium">
6365
{joinName(member.firstName, member.lastName) || member.name}
6466
</p>
6567
</div>
6668
<div className="flex-1">
67-
<p className="typo-para-small text-gray-600">{t('email')}</p>
68-
<p className="text-gray-700 mt-1 typo-para-medium break-all">
69+
<p className="typo-para-small text-gray-600 dark:text-dark-gray-200">
70+
{t('email')}
71+
</p>
72+
<p className="text-gray-700 dark:text-dark-gray-300 mt-1 typo-para-medium break-all">
6973
{member.email}
7074
</p>
7175
</div>
7276
</div>
7377
<div className="flex items-start w-full gap-x-4">
7478
<div className="flex flex-col w-full gap-y-1 flex-1">
75-
<p className="typo-para-small text-gray-600">{t('teams')}</p>
79+
<p className="typo-para-small text-gray-600 dark:text-dark-gray-200">
80+
{t('teams')}
81+
</p>
7682
<div className="flex items-center flex-wrap w-full max-w-full gap-2">
7783
{member?.teams.map(item => (
7884
<Tag
@@ -86,8 +92,10 @@ const MemberDetailsModal = ({
8692
</div>
8793
</div>
8894
<div className="flex-1">
89-
<p className="typo-para-small text-gray-600">{t('role')}</p>
90-
<p className="text-gray-700 mt-1 typo-para-medium break-all">
95+
<p className="typo-para-small text-gray-600 dark:text-dark-gray-200">
96+
{t('role')}
97+
</p>
98+
<p className="text-gray-700 dark:text-dark-gray-300 mt-1 typo-para-medium break-all">
9199
{t(
92100
typeof member.organizationRole === 'string' &&
93101
member.organizationRole.includes('_')
@@ -99,11 +107,11 @@ const MemberDetailsModal = ({
99107
</div>
100108
<Divider />
101109
<div>
102-
<h3 className="typo-head-bold-small text-gray-800">
110+
<h3 className="typo-head-bold-small text-gray-800 dark:text-dark-gray-400">
103111
{t('form:env-access')}
104112
</h3>
105113
{isAdminOwnerAccount && (
106-
<div className="typo-para-small text-gray-800 mt-2">
114+
<div className="typo-para-small text-gray-800 dark:text-dark-gray-300 mt-2">
107115
{t('form:env-admin-access-desc')}
108116
</div>
109117
)}
@@ -112,10 +120,10 @@ const MemberDetailsModal = ({
112120
(member.environmentRoles || []).map((env, index) => (
113121
<div className="flex items-start w-full gap-x-4" key={index}>
114122
<div className="flex-1">
115-
<p className="typo-para-small text-gray-600">
123+
<p className="typo-para-small text-gray-600 dark:text-dark-gray-200">
116124
{t('environment')}
117125
</p>
118-
<p className="text-gray-700 mt-1 typo-para-medium">
126+
<p className="text-gray-700 dark:text-dark-gray-300 mt-1 typo-para-medium">
119127
{
120128
environments?.find(
121129
item => item.environment.id === env.environmentId
@@ -124,7 +132,9 @@ const MemberDetailsModal = ({
124132
</p>
125133
</div>
126134
<div className="flex-1">
127-
<p className="typo-para-small text-gray-600">{t('role')}</p>
135+
<p className="typo-para-small text-gray-600 dark:text-dark-gray-200">
136+
{t('role')}
137+
</p>
128138
<p className="text-gray-700 mt-1 capitalize typo-para-medium">
129139
{env?.role === 'Environment_EDITOR'
130140
? t('editor')

‎ui/dashboard/src/pages/projects/project-modal/filter-project-modal/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ const FilterProjectModal = ({
7070
>
7171
<div className="flex flex-col w-full items-start p-5 gap-y-4">
7272
<div className="flex items-center w-full h-12 gap-x-4">
73-
<div className="typo-para-small text-center py-[3px] px-4 rounded text-accent-pink-500 bg-accent-pink-50 dark:bg-dark-purple-100">
73+
<div className="typo-para-small text-center py-[3px] px-4 rounded text-accent-pink-500 bg-accent-pink-50 dark:bg-accent-pink-900/30">
7474
{t(`if`)}
7575
</div>
7676
<Divider vertical={true} className="border-primary-500" />

‎ui/dashboard/tailwind.config.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,8 @@ const colors = {
4949
950: '#0D0917',
5050
900: '#110D1C',
5151
800: '#171321',
52-
700: '#1B1725'
52+
700: '#1B1725',
53+
600: '#1f1f1f'
5354
},
5455
purple: {
5556
100: '#2B1F45',

0 commit comments

Comments
 (0)