Skip to content

Commit b178fa1

Browse files
Copilotlyzno1
Copilot
and
lyzno1
authored
refactor: replace isDark conditional logic with Tailwind dark: prefix across codebase (iflabx#227)
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com> Co-authored-by: lyzno1 <yuanyouhuilyz@gmail.com>
1 parent dbce640 commit b178fa1

10 files changed

Lines changed: 85 additions & 148 deletions

File tree

‎app/phone-login/page.tsx‎

Lines changed: 11 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,19 @@
11
'use client';
22

33
import PhoneAuth from '@components/auth/phone-auth';
4-
import { useTheme } from '@lib/hooks/use-theme';
54
import { cn } from '@lib/utils';
65

76
import { useTranslations } from 'next-intl';
87
import Link from 'next/link';
98

109
export default function PhoneLoginPage() {
11-
const { isDark } = useTheme();
1210
const t = useTranslations('pages.auth.phoneLoginPage');
1311

1412
return (
1513
<div
1614
className={cn(
1715
'flex min-h-screen items-center justify-center p-4',
18-
isDark
19-
? 'bg-gradient-to-br from-stone-900 via-gray-900 to-stone-900'
20-
: 'bg-gradient-to-br from-stone-50 via-stone-100 to-stone-50'
16+
'bg-gradient-to-br from-stone-50 via-stone-100 to-stone-50 dark:from-stone-900 dark:via-gray-900 dark:to-stone-900'
2117
)}
2218
>
2319
<div className="w-full max-w-md space-y-6">
@@ -26,15 +22,15 @@ export default function PhoneLoginPage() {
2622
<h1
2723
className={cn(
2824
'font-serif text-3xl font-bold tracking-tight',
29-
isDark ? 'text-gray-100' : 'text-gray-900'
25+
'text-gray-900 dark:text-gray-100'
3026
)}
3127
>
3228
{t('title')}
3329
</h1>
3430
<p
3531
className={cn(
3632
'font-serif text-sm',
37-
isDark ? 'text-gray-400' : 'text-gray-600'
33+
'text-gray-600 dark:text-gray-400'
3834
)}
3935
>
4036
{t('subtitle')}
@@ -48,9 +44,7 @@ export default function PhoneLoginPage() {
4844
<div
4945
className={cn(
5046
'rounded-xl border p-6 font-serif shadow-lg transition-all',
51-
isDark
52-
? 'border-stone-800 bg-stone-900'
53-
: 'border-stone-200 bg-stone-50'
47+
'border-stone-200 bg-stone-50 dark:border-stone-800 dark:bg-stone-900'
5448
)}
5549
>
5650
<div className="space-y-4 text-center">
@@ -59,17 +53,15 @@ export default function PhoneLoginPage() {
5953
<span
6054
className={cn(
6155
'w-full border-t',
62-
isDark ? 'border-stone-700' : 'border-stone-300'
56+
'border-stone-300 dark:border-stone-700'
6357
)}
6458
/>
6559
</div>
6660
<div className="relative flex justify-center text-xs uppercase">
6761
<span
6862
className={cn(
6963
'px-2 font-serif',
70-
isDark
71-
? 'bg-stone-900 text-gray-400'
72-
: 'bg-stone-50 text-gray-500'
64+
'bg-stone-50 text-gray-500 dark:bg-stone-900 dark:text-gray-400'
7365
)}
7466
>
7567
{t('orSeparator')}
@@ -82,9 +74,7 @@ export default function PhoneLoginPage() {
8274
href="/login"
8375
className={cn(
8476
'font-serif text-sm hover:underline',
85-
isDark
86-
? 'text-stone-400 hover:text-stone-300'
87-
: 'text-stone-600 hover:text-stone-700'
77+
'text-stone-600 hover:text-stone-700 dark:text-stone-400 dark:hover:text-stone-300'
8878
)}
8979
>
9080
{t('emailLoginLink')}
@@ -93,9 +83,7 @@ export default function PhoneLoginPage() {
9383
href="/register"
9484
className={cn(
9585
'font-serif text-sm hover:underline',
96-
isDark
97-
? 'text-gray-400 hover:text-gray-300'
98-
: 'text-gray-600 hover:text-gray-700'
86+
'text-gray-600 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
9987
)}
10088
>
10189
{t('registerLink')}
@@ -105,18 +93,13 @@ export default function PhoneLoginPage() {
10593
</div>
10694

10795
{/* --- bottom description --- */}
108-
<p
109-
className={cn(
110-
'text-center font-serif text-xs',
111-
isDark ? 'text-gray-500' : 'text-gray-500'
112-
)}
113-
>
96+
<p className={cn('text-center font-serif text-xs', 'text-gray-500')}>
11497
{t('termsText')}{' '}
11598
<Link
11699
href="/terms"
117100
className={cn(
118101
'underline',
119-
isDark ? 'hover:text-gray-400' : 'hover:text-gray-700'
102+
'hover:text-gray-700 dark:hover:text-gray-400'
120103
)}
121104
>
122105
{t('termsLink')}
@@ -126,7 +109,7 @@ export default function PhoneLoginPage() {
126109
href="/privacy"
127110
className={cn(
128111
'underline',
129-
isDark ? 'hover:text-gray-400' : 'hover:text-gray-700'
112+
'hover:text-gray-700 dark:hover:text-gray-400'
130113
)}
131114
>
132115
{t('privacyLink')}

‎components/admin/api-config/dify-app-type-selector.tsx‎

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

3-
import { useThemeColors } from '@lib/hooks/use-theme-colors';
43
import {
54
type DifyAppType,
65
getAllDifyAppTypes,
@@ -37,7 +36,6 @@ export function DifyAppTypeSelector({
3736
onChange,
3837
className,
3938
}: DifyAppTypeSelectorProps) {
40-
const { isDark } = useThemeColors();
4139
const allTypes = getAllDifyAppTypes();
4240
const tSelector = useTranslations(
4341
'pages.admin.apiConfig.page.difyAppTypeSelector'
@@ -51,7 +49,7 @@ export function DifyAppTypeSelector({
5149
<label
5250
className={cn(
5351
'mb-3 block font-serif text-sm font-medium',
54-
isDark ? 'text-stone-300' : 'text-stone-700'
52+
'text-stone-700 dark:text-stone-300'
5553
)}
5654
>
5755
{tSelector('title')}
@@ -68,12 +66,8 @@ export function DifyAppTypeSelector({
6866
'flex cursor-pointer flex-col items-start gap-2 rounded-lg border p-4 text-left transition-colors',
6967
'hover:shadow-sm active:scale-[0.98]',
7068
value === typeInfo.key
71-
? isDark
72-
? 'border-stone-500 bg-stone-700/50'
73-
: 'border-stone-400 bg-stone-100'
74-
: isDark
75-
? 'border-stone-600 hover:border-stone-500'
76-
: 'border-stone-300 hover:border-stone-400'
69+
? 'border-stone-400 bg-stone-100 dark:border-stone-500 dark:bg-stone-700/50'
70+
: 'border-stone-300 hover:border-stone-400 dark:border-stone-600 dark:hover:border-stone-500'
7771
)}
7872
>
7973
{/* --- Top: icon, title and selection indicator --- */}
@@ -83,15 +77,15 @@ export function DifyAppTypeSelector({
8377
<div
8478
className={cn(
8579
'font-serif text-sm font-medium',
86-
isDark ? 'text-stone-100' : 'text-stone-900'
80+
'text-stone-900 dark:text-stone-100'
8781
)}
8882
>
8983
{tDifyTypes(`${typeInfo.key}.label`)}
9084
</div>
9185
<div
9286
className={cn(
9387
'font-serif text-xs',
94-
isDark ? 'text-stone-400' : 'text-stone-600'
88+
'text-stone-600 dark:text-stone-400'
9589
)}
9690
>
9791
{tDifyTypes(`${typeInfo.key}.description`)}
@@ -103,19 +97,15 @@ export function DifyAppTypeSelector({
10397
className={cn(
10498
'flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full border-2',
10599
value === typeInfo.key
106-
? isDark
107-
? 'border-stone-400 bg-stone-400'
108-
: 'border-stone-600 bg-stone-600'
109-
: isDark
110-
? 'border-stone-500'
111-
: 'border-stone-400'
100+
? 'border-stone-600 bg-stone-600 dark:border-stone-400 dark:bg-stone-400'
101+
: 'border-stone-400 dark:border-stone-500'
112102
)}
113103
>
114104
{value === typeInfo.key && (
115105
<div
116106
className={cn(
117107
'h-2 w-2 rounded-full',
118-
isDark ? 'bg-stone-800' : 'bg-white'
108+
'bg-white dark:bg-stone-800'
119109
)}
120110
/>
121111
)}
@@ -129,9 +119,7 @@ export function DifyAppTypeSelector({
129119
key={featureKey}
130120
className={cn(
131121
'rounded px-2 py-0.5 font-serif text-xs',
132-
isDark
133-
? 'bg-stone-600 text-stone-300'
134-
: 'bg-stone-200 text-stone-600'
122+
'bg-stone-200 text-stone-600 dark:bg-stone-600 dark:text-stone-300'
135123
)}
136124
>
137125
{tDifyTypes(`${typeInfo.key}.features.${featureKey}`)}
@@ -146,7 +134,7 @@ export function DifyAppTypeSelector({
146134
<p
147135
className={cn(
148136
'mt-3 font-serif text-xs',
149-
isDark ? 'text-stone-400' : 'text-stone-500'
137+
'text-stone-500 dark:text-stone-400'
150138
)}
151139
>
152140
{tSelector('description')}
@@ -165,7 +153,6 @@ export function DifyAppTypeSelectorCompact({
165153
onChange,
166154
className,
167155
}: DifyAppTypeSelectorProps) {
168-
const { isDark } = useThemeColors();
169156
const allTypes = getAllDifyAppTypes();
170157
const tSelector = useTranslations(
171158
'pages.admin.apiConfig.page.difyAppTypeSelector'
@@ -177,7 +164,7 @@ export function DifyAppTypeSelectorCompact({
177164
<label
178165
className={cn(
179166
'mb-2 block font-serif text-sm font-medium',
180-
isDark ? 'text-stone-300' : 'text-stone-700'
167+
'text-stone-700 dark:text-stone-300'
181168
)}
182169
>
183170
{tSelector('titleCompact')}
@@ -188,9 +175,7 @@ export function DifyAppTypeSelectorCompact({
188175
onChange={e => onChange(e.target.value as DifyAppType)}
189176
className={cn(
190177
'w-full rounded-md border px-3 py-2 font-serif text-sm',
191-
isDark
192-
? 'border-stone-600 bg-stone-700 text-stone-200'
193-
: 'border-stone-300 bg-white text-stone-900'
178+
'border-stone-300 bg-white text-stone-900 dark:border-stone-600 dark:bg-stone-700 dark:text-stone-200'
194179
)}
195180
>
196181
{allTypes.map(typeInfo => (

‎components/chat/message-actions/assistant-message-actions.tsx‎

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

33
import { MessageActionsContainer } from '@components/ui/message-actions-container';
4-
import { useTheme } from '@lib/hooks/use-theme';
54
import { cn } from '@lib/utils';
65

76
import React from 'react';
@@ -43,8 +42,6 @@ export const AssistantMessageActions: React.FC<
4342
tooltipSize = 'sm',
4443
showTooltipArrow = false,
4544
}) => {
46-
const { isDark } = useTheme();
47-
4845
// Use feedback manager hook for exclusive feedback selection
4946
const { selectedFeedback, handleFeedback, shouldShowButton } =
5047
useFeedbackManager(onFeedback);
@@ -75,8 +72,7 @@ export const AssistantMessageActions: React.FC<
7572
{/* Divider - uses a deeper color, less visible in dark mode */}
7673
<div
7774
className={cn(
78-
'mx-1 self-stretch border-r',
79-
isDark ? 'border-gray-800/50' : 'border-gray-200/50'
75+
'mx-1 self-stretch border-r border-gray-200/50 dark:border-gray-800/50'
8076
)}
8177
/>
8278

‎components/chat/messages-loading-indicator.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export function MessagesLoadingIndicator({
2424
error,
2525
onRetry,
2626
}: MessagesLoadingIndicatorProps) {
27-
const { colors, isDark } = useThemeColors();
27+
const { colors } = useThemeColors();
2828
const t = useTranslations('loading');
2929
const [isAtTop, setIsAtTop] = useState(false);
3030

@@ -86,7 +86,7 @@ export function MessagesLoadingIndicator({
8686
<div
8787
className={cn(
8888
'rounded-lg px-4 py-3 text-sm',
89-
isDark ? 'bg-red-900 text-red-100' : 'bg-red-100 text-red-800',
89+
'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100',
9090
'mb-3'
9191
)}
9292
>

‎components/chat/messages/assistant-message/assistant-message-actions.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
import { MessageActionButton } from '@components/ui/message-action-button';
44
import { MessageActionsContainer } from '@components/ui/message-actions-container';
5-
import { useTheme } from '@lib/hooks/use-theme';
65
import { cn } from '@lib/utils';
76
import {
87
FiCheck,
@@ -39,7 +38,6 @@ export const AssistantMessageActions: React.FC<
3938
className,
4039
isRegenerating = false,
4140
}) => {
42-
const { isDark } = useTheme();
4341
const t = useTranslations('components.chat.messageActions');
4442

4543
return (
@@ -69,8 +67,7 @@ export const AssistantMessageActions: React.FC<
6967
{/* Divider between main actions and feedback */}
7068
<div
7169
className={cn(
72-
'mx-1 self-stretch border-r',
73-
isDark ? 'border-gray-700' : 'border-gray-300'
70+
'mx-1 self-stretch border-r border-gray-300 dark:border-gray-700'
7471
)}
7572
/>
7673
{/* Thumbs up feedback button */}

‎components/text-generation/text-generation-layout.tsx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
} from '@components/workflow/workflow-input-form';
1010
import { useMobile } from '@lib/hooks/use-mobile';
1111
import { useTextGenerationExecution } from '@lib/hooks/use-text-generation-execution';
12-
import { useTheme } from '@lib/hooks/use-theme';
1312
import { useWorkflowHistoryStore } from '@lib/stores/workflow-history-store';
1413
import { cn } from '@lib/utils';
1514
import { AlertCircle, RefreshCw, X } from 'lucide-react';
@@ -38,7 +37,6 @@ interface TextGenerationLayoutProps {
3837
export function TextGenerationLayout({
3938
instanceId,
4039
}: TextGenerationLayoutProps) {
41-
const { isDark } = useTheme();
4240
const isMobile = useMobile();
4341
const t = useTranslations('pages.textGeneration.buttons');
4442

@@ -161,7 +159,7 @@ export function TextGenerationLayout({
161159
<div
162160
className={cn(
163161
'flex items-center gap-3 border-l-4 border-red-500 px-4 py-3',
164-
isDark ? 'bg-red-900/20 text-red-200' : 'bg-red-50 text-red-800'
162+
'bg-red-50 text-red-800 dark:bg-red-900/20 dark:text-red-200'
165163
)}
166164
>
167165
<AlertCircle className="h-5 w-5 flex-shrink-0 text-red-500" />
@@ -174,9 +172,7 @@ export function TextGenerationLayout({
174172
onClick={onRetry}
175173
className={cn(
176174
'rounded-md p-1.5 transition-colors',
177-
isDark
178-
? 'text-red-300 hover:bg-red-800/50 hover:text-red-200'
179-
: 'text-red-700 hover:bg-red-200/50 hover:text-red-800'
175+
'text-red-700 hover:bg-red-200/50 hover:text-red-800 dark:text-red-300 dark:hover:bg-red-800/50 dark:hover:text-red-200'
180176
)}
181177
title={t('retry')}
182178
>
@@ -187,9 +183,7 @@ export function TextGenerationLayout({
187183
onClick={onDismiss}
188184
className={cn(
189185
'rounded-md p-1.5 transition-colors',
190-
isDark
191-
? 'text-red-300 hover:bg-red-800/50 hover:text-red-200'
192-
: 'text-red-700 hover:bg-red-200/50 hover:text-red-800'
186+
'text-red-700 hover:bg-red-200/50 hover:text-red-800 dark:text-red-300 dark:hover:bg-red-800/50 dark:hover:text-red-200'
193187
)}
194188
title={t('close')}
195189
>
@@ -334,7 +328,7 @@ export function TextGenerationLayout({
334328
'w-80 min-w-72 overflow-hidden border-l',
335329
'transition-all duration-300 ease-in-out',
336330
'transform-gpu', // Use GPU acceleration
337-
isDark ? 'border-stone-700' : 'border-stone-200'
331+
'border-stone-200 dark:border-stone-700'
338332
)}
339333
>
340334
<ExecutionHistory

0 commit comments

Comments
 (0)