Skip to content

Commit 346c0ad

Browse files
juanlou1217juanlou1217
authored
feat(theme): Complete theme color migration for multiple modules (#1875)
* feat(theme): Complete theme color system migration for CL, Issue, Queue, OrionClient, and Settings modules * feat(theme): Complete theme color system migration for CL, Issue, Queue, OrionClient, and Settings modules * feat(theme): Complete theme color system migration for CL, Issue, Queue, OrionClient, and Settings modules * feat(theme): Complete theme color system migration for CL, Issue, Queue, OrionClient, and Settings modules
1 parent d3aeb8c commit 346c0ad

30 files changed

Lines changed: 224 additions & 222 deletions

‎moon/apps/web/components/ClBox/ChecksSection.tsx‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -69,13 +69,13 @@ const CheckStatus = ({
6969
return (
7070
<div className='flex w-full items-center px-3 py-0'>
7171
{hasFailures ? (
72-
<AlertIcon className='mr-3 h-5 w-5 text-yellow-600' />
72+
<AlertIcon className='mr-3 h-5 w-5 text-yellow-600 dark:text-yellow-500' />
7373
) : (
74-
<CheckIcon className='mr-3 h-5 w-5 text-green-700' />
74+
<CheckIcon className='mr-3 h-5 w-5 text-green-700 dark:text-green-400' />
7575
)}
7676
<div>
7777
<p className='font-semibold'>{hasFailures ? 'Some checks were not successful' : 'All checks have passed'}</p>
78-
<p className='text-sm text-gray-600'>{statusInfo.join(', ')}</p>
78+
<p className='text-tertiary text-sm'>{statusInfo.join(', ')}</p>
7979
</div>
8080
<div className='ml-auto flex items-center gap-2'>
8181
{isOutdated && (
@@ -85,8 +85,7 @@ const CheckStatus = ({
8585
onUpdateBranch()
8686
}}
8787
disabled={isUpdating}
88-
style={{ backgroundColor: '#f6f8fa' }}
89-
className='flex-shrink-0 rounded-md border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50'
88+
className='border-primary bg-secondary hover:bg-tertiary text-secondary flex-shrink-0 rounded-md border px-3 py-1.5 text-sm font-medium disabled:cursor-not-allowed disabled:opacity-50'
9089
>
9190
{isUpdating ? (
9291
<span className='flex items-center gap-1.5'>
@@ -106,7 +105,7 @@ const CheckStatus = ({
106105

107106
const CheckGroup = ({ title, checks }: CheckGroupProps) => (
108107
<div className='mb-2'>
109-
<h4 className='px-2 py-1 text-xs font-bold uppercase text-gray-500'>
108+
<h4 className='text-tertiary px-2 py-1 text-xs font-bold uppercase'>
110109
{title} ({checks.length})
111110
</h4>
112111
<div>
@@ -141,25 +140,25 @@ const getStatusIcon = (status: AdditionalCheckStatus) => {
141140
}
142141

143142
const AdditionalCheckItemComponent = ({ check }: AdditionalCheckItemProps) => (
144-
<div className='flex items-start border-b border-gray-100 px-2 py-2 last:border-b-0'>
143+
<div className='border-primary flex items-start border-b px-2 py-2 last:border-b-0'>
145144
<div className='mr-3 mt-0.5 flex-shrink-0'>{getStatusIcon(check.result)}</div>
146145
<div className='min-w-0 flex-1'>
147146
<div className='flex items-center justify-between'>
148-
<h5 className='text-sm font-medium text-gray-900'>{ADDITIONAL_CHECK_LABELS[check.type]}</h5>
147+
<h5 className='text-primary text-sm font-medium'>{ADDITIONAL_CHECK_LABELS[check.type]}</h5>
149148
<span
150149
className={`rounded-full px-2 py-1 text-xs font-medium ${
151150
check.result === 'PASSED'
152-
? 'bg-green-100 text-green-800'
151+
? 'bg-green-100 text-green-800 dark:bg-green-950 dark:text-green-200'
153152
: check.result === 'FAILED'
154-
? 'bg-red-100 text-red-800'
155-
: 'bg-gray-100 text-gray-800'
153+
? 'bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-200'
154+
: 'bg-secondary text-secondary'
156155
}`}
157156
>
158157
{check.result.toLowerCase()}
159158
</span>
160159
</div>
161160
{check.result === 'FAILED' && (
162-
<ul className='mt-1 list-inside list-disc text-sm text-red-600'>
161+
<ul className='mt-1 list-inside list-disc text-sm text-red-600 dark:text-red-400'>
163162
<li className='list-inside'>{check.message}</li>
164163
</ul>
165164
)}
@@ -178,7 +177,7 @@ const AdditionalChecksSection = ({ additionalChecks }: AdditionalChecksSectionPr
178177

179178
return (
180179
<div className='mt-2 border-t pt-2'>
181-
<h4 className='mb-2 px-2 py-1 text-xs font-bold uppercase text-gray-500'>
180+
<h4 className='text-tertiary mb-2 px-2 py-1 text-xs font-bold uppercase'>
182181
Additional Checks ({additionalChecks.length})
183182
</h4>
184183
<div className='space-y-1'>
@@ -236,7 +235,7 @@ export function ChecksSection({ checks, onStatusChange, additionalChecks, clLink
236235
<>
237236
<Collapsible.Root open={open} onOpenChange={setOpen}>
238237
{/* CheckStatus section */}
239-
<Collapsible.Trigger className='flex w-full cursor-pointer rounded-md hover:bg-gray-100'>
238+
<Collapsible.Trigger className='hover:bg-tertiary flex w-full cursor-pointer rounded-md'>
240239
<CheckStatus
241240
hasFailures={hasFailures}
242241
failureCount={failureCount}

‎moon/apps/web/components/ClBox/MergeBox.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,13 +65,13 @@ export const MergeBox = React.memo<{ prId: string; status?: string }>(({ prId, s
6565

6666
return (
6767
<div className='flex'>
68-
<FeedMergedIcon size={24} className='ml-1 text-gray-500' />
68+
<FeedMergedIcon size={24} className='text-tertiary ml-1' />
6969
{isReviewerLoading && isAdditionLoading ? (
7070
<div className='flex h-[400px] items-center justify-center'>
7171
<LoadingSpinner />
7272
</div>
7373
) : (
74-
<div className='ml-3 w-full divide-y rounded-lg border bg-white'>
74+
<div className='border-primary bg-primary ml-3 w-full divide-y rounded-lg border'>
7575
<ReviewerSection required={required} actual={actual} />
7676
<ChecksSection
7777
checks={checks}

‎moon/apps/web/components/ClBox/ReviewerSection.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export function ReviewerSection({ required, actual }: ReviewerSectionProps) {
1010

1111
if (isApproved) {
1212
return (
13-
<div className='flex items-center p-3 text-green-700'>
13+
<div className='flex items-center p-3 text-green-700 dark:text-green-400'>
1414
<CheckCircleIcon className='mr-3 h-5 w-5' />
1515
<div>
1616
<span className='font-semibold'>All required reviewers have approved</span>
@@ -20,11 +20,11 @@ export function ReviewerSection({ required, actual }: ReviewerSectionProps) {
2020
}
2121

2222
return (
23-
<div className='flex items-center p-3 text-gray-800'>
24-
<AlertIcon className='mr-3 h-5 w-5 text-yellow-600' />
23+
<div className='text-primary flex items-center p-3'>
24+
<AlertIcon className='mr-3 h-5 w-5 text-yellow-600 dark:text-yellow-500' />
2525
<div>
2626
<div className='font-semibold'>Review required</div>
27-
<div className='ml-auto text-sm text-gray-500'>
27+
<div className='text-tertiary ml-auto text-sm'>
2828
{`At least ${required} reviewer${required > 1 ? 's' : ''} required with write access, now has ${actual}`}
2929
</div>
3030
</div>

‎moon/apps/web/components/ClBox/components/CheckGroup.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,18 +26,18 @@ export function CheckGroup({ title, summary, status, children }: CheckGroupProps
2626
return (
2727
<div className={`border-l-4 ${color} rounded`}>
2828
<Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>
29-
<Collapsible.Trigger className='flex w-full items-center justify-between rounded-t bg-gray-50 p-3'>
29+
<Collapsible.Trigger className='bg-secondary flex w-full items-center justify-between rounded-t p-3'>
3030
<div className='flex items-center'>
31-
<h4 className='font-bold text-gray-900'>{title}</h4>
32-
<span className='ml-4 text-sm text-gray-600'>{summary}</span>
31+
<h4 className='text-primary font-bold'>{title}</h4>
32+
<span className='text-tertiary ml-4 text-sm'>{summary}</span>
3333
</div>
3434
{isOpen ? (
35-
<ArrowUpIcon className='h-5 w-5 text-gray-500' />
35+
<ArrowUpIcon className='text-tertiary h-5 w-5' />
3636
) : (
37-
<ArrowDownIcon className='h-5 w-5 text-gray-500' />
37+
<ArrowDownIcon className='text-tertiary h-5 w-5' />
3838
)}
3939
</Collapsible.Trigger>
40-
<Collapsible.Content className='rounded-b bg-white p-2'>{children}</Collapsible.Content>
40+
<Collapsible.Content className='bg-primary rounded-b p-2'>{children}</Collapsible.Content>
4141
</Collapsible.Root>
4242
</div>
4343
)

‎moon/apps/web/components/ClBox/components/MergeCheckItem.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,23 @@ import { AlertIcon, CheckCircleIcon, WarningTriangleIcon } from '@gitmono/ui'
33
import { TaskData } from '../types/mergeCheck.config'
44

55
const statusMap = {
6-
Pending: { Icon: WarningTriangleIcon, className: 'text-yellow-600' },
7-
Success: { Icon: CheckCircleIcon, className: 'text-green-600' },
8-
Failure: { Icon: AlertIcon, className: 'text-red-600' },
9-
Warning: { Icon: WarningTriangleIcon, className: 'text-yellow-600' } // GitHub 通常用黄点表示 in-progress 或 warning
6+
Pending: { Icon: WarningTriangleIcon, className: 'text-yellow-600 dark:text-yellow-500' },
7+
Success: { Icon: CheckCircleIcon, className: 'text-green-600 dark:text-green-400' },
8+
Failure: { Icon: AlertIcon, className: 'text-red-600 dark:text-red-400' },
9+
Warning: { Icon: WarningTriangleIcon, className: 'text-yellow-600 dark:text-yellow-500' }
1010
}
1111

1212
export function MergeCheckItem({ check }: { check: TaskData }) {
1313
const { Icon, className } = statusMap[check.status]
1414

1515
return (
16-
<div className='flex items-center rounded-md p-2 hover:bg-gray-100'>
16+
<div className='hover:bg-tertiary flex items-center rounded-md p-2'>
1717
<Icon className={`h-5 w-5 flex-shrink-0 ${className}`} />
1818
<div className='ml-3 flex-grow'>
19-
<span className='font-semibold text-gray-800'>{check.repo_name}</span>
20-
{check.arguments && <span className='ml-2 text-sm text-gray-500'>{check.arguments}</span>}
19+
<span className='text-primary font-semibold'>{check.repo_name}</span>
20+
{check.arguments && <span className='text-tertiary ml-2 text-sm'>{check.arguments}</span>}
2121
</div>
22-
<button className='text-gray-500 hover:text-gray-800'></button>
22+
<button className='text-tertiary hover:text-primary'></button>
2323
</div>
2424
)
2525
}

‎moon/apps/web/components/ClView/CLComment.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@ const Comment = React.memo<CommentProps>(({ conv, id, whoamI, editorRef }: Comme
4545
const [refresh, setRefresh] = useAtom(refreshAtom)
4646

4747
return (
48-
<div className='overflow-hidden rounded-lg border border-gray-300 bg-white'>
49-
<div className='flex items-center justify-between border-b border-gray-300 px-4 py-2'>
48+
<div className='border-primary bg-primary overflow-hidden rounded-lg border'>
49+
<div className='border-primary flex items-center justify-between border-b px-4 py-2'>
5050
<div className='flex items-center space-x-3'>
5151
<div className='cursor-pointer'>
5252
<ConditionalWrap
@@ -76,7 +76,7 @@ const Comment = React.memo<CommentProps>(({ conv, id, whoamI, editorRef }: Comme
7676
</UIText>
7777
</ConditionalWrap>
7878
</div>
79-
<div className='text-sm text-gray-500 hover:text-gray-700'>
79+
<div className='text-tertiary hover:text-secondary text-sm'>
8080
<HandleTime created_at={conv.created_at} />
8181
</div>
8282
</div>

‎moon/apps/web/components/ClView/ConversationTab.tsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -192,11 +192,13 @@ export const ConversationTab = React.memo<ConversationTabProps>(
192192
emptyExtra={
193193
clDetail &&
194194
clDetail.status === 'Open' && (
195-
<div className='mt-2 text-xs text-gray-900'>
195+
<div className='text-primary mt-2 text-xs'>
196196
<span>Still in progress? </span>
197197
<ConvertToDraftDialog
198198
trigger={
199-
<span className='cursor-pointer text-gray-500 underline hover:text-gray-700'>Convert to draft</span>
199+
<span className='text-tertiary hover:text-secondary cursor-pointer underline'>
200+
Convert to draft
201+
</span>
200202
}
201203
link={clDetail.link}
202204
/>
@@ -214,12 +216,14 @@ export const ConversationTab = React.memo<ConversationTabProps>(
214216
const isApproved = reviewer?.approved ?? false
215217

216218
return (
217-
<div key={i} className='mb-4 flex items-center gap-2 px-4 text-sm text-gray-500'>
219+
<div key={i} className='text-tertiary mb-4 flex items-center gap-2 px-4 text-sm'>
218220
<MemberAvatar size='sm' member={memberMap.get(i)} />
219221
<span className='flex-1'>{i}</span>
220222
<span
221223
className={`ml-2 inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${
222-
isApproved ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
224+
isApproved
225+
? 'bg-green-100 text-green-800 dark:bg-green-950 dark:text-green-200'
226+
: 'bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-200'
223227
}`}
224228
>
225229
{isApproved ? 'Approved' : 'Pending'}
@@ -241,7 +245,7 @@ export const ConversationTab = React.memo<ConversationTabProps>(
241245
e.stopPropagation()
242246
handleDeleteReviewer(i)
243247
}}
244-
className='pointer-events-auto cursor-pointer rounded-full border-2 hover:bg-red-800'
248+
className='pointer-events-auto cursor-pointer rounded-full border-2 hover:bg-red-800 hover:text-white'
245249
>
246250
<TrashIcon />
247251
</span>
@@ -250,11 +254,11 @@ export const ConversationTab = React.memo<ConversationTabProps>(
250254
)
251255
})}
252256
{clDetail && clDetail.status === 'Open' && (
253-
<div className='pointer-events-auto mt-2 px-4 text-xs text-gray-900'>
257+
<div className='text-primary pointer-events-auto mt-2 px-4 text-xs'>
254258
<span>Still in progress? </span>
255259
<ConvertToDraftDialog
256260
trigger={
257-
<span className='cursor-pointer text-gray-500 underline hover:text-gray-700'>
261+
<span className='text-tertiary hover:text-secondary cursor-pointer underline'>
258262
Convert to draft
259263
</span>
260264
}
@@ -281,7 +285,7 @@ export const ConversationTab = React.memo<ConversationTabProps>(
281285
return (
282286
<>
283287
{names.map((i) => (
284-
<div key={i} className='mb-4 flex items-center gap-2 px-4 text-sm text-gray-500'>
288+
<div key={i} className='text-tertiary mb-4 flex items-center gap-2 px-4 text-sm'>
285289
<MemberAvatar size='sm' member={memberMap.get(i)} />
286290
<span>{i}</span>
287291
</div>
@@ -327,7 +331,7 @@ export const ConversationTab = React.memo<ConversationTabProps>(
327331
<BadgeItem title='Type' items={labels} />
328332
<BadgeItem title='Projects' items={labels} />
329333
<BadgeItem title='Milestones' items={labels} />
330-
<div className='w-full' style={{ marginTop: '24px' }}>
334+
<div className='mt-6 w-full'>
331335
<WorkWithChatDialog />
332336
</div>
333337
</div>

‎moon/apps/web/components/ClView/ReviewComment.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -105,20 +105,22 @@ const ReviewComment = React.memo<ReviewCommentProps>(
105105

106106
return (
107107
<div
108-
className={`overflow-hidden rounded-lg border-2 bg-white ${
109-
isResolved ? 'border-green-200 bg-green-50' : 'border-blue-200 bg-blue-50'
108+
className={`overflow-hidden rounded-lg border-2 ${
109+
isResolved
110+
? 'border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-950'
111+
: 'border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950'
110112
}`}
111113
>
112-
<div className='bg-blue-100 px-3 py-1 text-xs font-medium text-blue-800'>
114+
<div className='bg-blue-100 px-3 py-1 text-xs font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-200'>
113115
📝 Review Comment
114116
{isResolved && (
115-
<span className='ml-2 inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800'>
117+
<span className='ml-2 inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900 dark:text-green-200'>
116118
✓ Resolved
117119
</span>
118120
)}
119121
</div>
120122

121-
<div className='flex items-center justify-between border-b border-blue-200 px-4 py-2'>
123+
<div className='border-primary flex items-center justify-between border-b px-4 py-2'>
122124
<div className='flex items-center space-x-3'>
123125
<div className='cursor-pointer'>
124126
<ConditionalWrap
@@ -148,7 +150,7 @@ const ReviewComment = React.memo<ReviewCommentProps>(
148150
</UIText>
149151
</ConditionalWrap>
150152
</div>
151-
<div className='text-sm text-gray-500 hover:text-gray-700'>
153+
<div className='text-tertiary hover:text-secondary text-sm'>
152154
<HandleTime created_at={conv.created_at} />
153155
</div>
154156
</div>
@@ -158,7 +160,7 @@ const ReviewComment = React.memo<ReviewCommentProps>(
158160
size='sm'
159161
variant='base'
160162
onClick={handleResolve}
161-
className='border-green-300 text-green-600 hover:bg-green-50'
163+
className='border-green-300 text-green-600 hover:bg-green-50 dark:border-green-700 dark:text-green-400 dark:hover:bg-green-950'
162164
>
163165
Resolve Conversation
164166
</Button>

‎moon/apps/web/components/ClView/TimelineItems.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
import React, { useMemo } from 'react'
2-
3-
import '@primer/primitives/dist/css/functional/themes/light.css'
4-
52
import {
63
CheckCircleIcon,
74
CommentIcon,
@@ -14,6 +11,7 @@ import {
1411
RepoPushIcon
1512
} from '@primer/octicons-react'
1613
import { BaseStyles, ThemeProvider, Timeline } from '@primer/react'
14+
import { useTheme } from 'next-themes'
1715

1816
import { ConversationItem, ReviewerInfo } from '@gitmono/types/generated'
1917

@@ -63,8 +61,10 @@ const TimelineItem = React.memo(({ badge, children, isOver }: TimelineItemProps)
6361
TimelineItem.displayName = 'TimelineItem'
6462

6563
const TimelineWrapper = React.memo<TimelineWrapperProps>(({ convItems = [] }) => {
64+
const { theme } = useTheme()
65+
6666
return (
67-
<ThemeProvider>
67+
<ThemeProvider colorMode={theme === 'dark' ? 'dark' : 'light'}>
6868
<BaseStyles>
6969
<Timeline clipSidebar>
7070
{convItems?.map((item) => (
@@ -106,38 +106,38 @@ const TimelineItems = React.memo<{
106106
icon = <CommentIcon />
107107
children = <CLComment conv={conv} id={id} whoamI={type} editorRef={editorRef} />
108108
} else {
109-
icon = <CheckCircleIcon size={24} className='text-blue-500' />
109+
icon = <CheckCircleIcon size={24} className='text-blue-500 dark:text-blue-400' />
110110
children = <ReviewComment reviewers={reviewers} conv={conv} id={id} whoamI={type} editorRef={editorRef} />
111111
}
112112
break
113113
case 'Approve':
114-
icon = <CheckCircleIcon size={24} className='text-green-500' />
114+
icon = <CheckCircleIcon size={24} className='text-green-500 dark:text-green-400' />
115115
children = <ApproveItem conv={conv} />
116116
break
117117
case 'Merged':
118-
icon = <FeedMergedIcon size={24} className='text-purple-500' />
118+
icon = <FeedMergedIcon size={24} className='text-purple-500 dark:text-purple-400' />
119119
children = <MergedItem conv={conv} />
120120
isOver = true
121121
break
122122
case 'Closed':
123-
icon = <FeedPullRequestClosedIcon size={24} className='text-red-600' />
123+
icon = <FeedPullRequestClosedIcon size={24} className='text-red-600 dark:text-red-400' />
124124
children = <CloseItem conv={conv} />
125125
isOver = true
126126
break
127127
case 'Draft':
128-
icon = <GitPullRequestDraftIcon size={16} className='text-[#6e7781]' />
128+
icon = <GitPullRequestDraftIcon size={16} className='text-tertiary' />
129129
children = <EditItem conv={conv} />
130130
break
131131
case 'Reopen':
132-
icon = <FeedPullRequestOpenIcon size={24} className='text-green-500' />
132+
icon = <FeedPullRequestOpenIcon size={24} className='text-green-500 dark:text-green-400' />
133133
children = <ReopenItem conv={conv} />
134134
break
135135
case 'Assignee':
136-
icon = <PersonIcon size={24} />
136+
icon = <PersonIcon size={24} className='text-tertiary' />
137137
children = <AssigneeItem conv={conv} />
138138
break
139139
case 'Label':
140-
icon = <FeedTagIcon size={24} className='text-cyan-500' />
140+
icon = <FeedTagIcon size={24} className='text-cyan-500 dark:text-cyan-400' />
141141
children = <LabelItem conv={conv} />
142142
break
143143
case 'ForcePush':

0 commit comments

Comments
 (0)