Skip to content

Commit f6ad75f

Browse files
mrcfpsmrcfps
authored
Merge pull request #927 from refly-ai/fix/dark-mode-style-ch
fix: dark mode style improvements
2 parents a9b0ad5 + 36942e7 commit f6ad75f

File tree

21 files changed

+174
-123
lines changed

21 files changed

+174
-123
lines changed

‎apps/web/src/pages/code-share/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const ShareCodePage = () => {
5454
</div>
5555

5656
{/* Main content */}
57-
<div className="flex h-full w-full grow items-center justify-center bg-white overflow-hidden">
57+
<div className="flex h-full w-full grow items-center justify-center bg-white dark:bg-gray-900 overflow-hidden">
5858
{codeData?.content ? (
5959
<div className="w-full h-full">
6060
<Renderer

‎apps/web/src/pages/document-share/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const DocumentSharePage = () => {
6464
<h1 className="text-3xl font-bold text-gray-800 dark:text-white mt-6 mb-4">{title}</h1>
6565
)}
6666

67-
<div className="flex-grow prose prose-lg max-w-full">
67+
<div className="flex-grow prose prose-lg max-w-full pb-16">
6868
{content && <Markdown content={content} mode="readonly" />}
6969
</div>
7070
</div>

‎apps/web/src/pages/page-share/index.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -257,11 +257,11 @@ const SharePage = () => {
257257
headerContent={
258258
<div className="flex justify-between items-center w-full">
259259
<div className="flex items-center">
260-
<div className="text-xl font-semibold text-gray-800 mr-2">
260+
<div className="text-xl font-semibold text-gray-800 dark:text-gray-200 mr-2">
261261
{pageData?.page?.title || t('common.untitled')}
262262
</div>
263263
{pageData?.shareInfo && (
264-
<div className="text-sm text-gray-500 ml-2">
264+
<div className="text-sm text-gray-500 dark:text-gray-400 ml-2">
265265
{t('pages.share.sharedAt')}:{' '}
266266
{new Date(pageData.shareInfo.sharedAt).toLocaleString()}
267267
</div>
@@ -274,7 +274,7 @@ const SharePage = () => {
274274
type="text"
275275
onClick={togglePreviewMode}
276276
icon={<PlayCircleOutlined />}
277-
className="flex items-center mx-2 text-blue-600 hover:text-blue-700 hover:bg-blue-50"
277+
className="flex items-center mx-2 text-green-600 hover:text-green-700 hover:bg-green-50"
278278
>
279279
{t('pages.share.slideshow')}
280280
</Button>
@@ -314,10 +314,10 @@ const SharePage = () => {
314314
// Enable scrolling for this specific card
315315
handleCardClick(`content-block-${index}`);
316316
}}
317-
className={`transition-all duration-300 h-[400px] rounded-lg bg-white ${
317+
className={`transition-all duration-300 h-[400px] rounded-lg bg-white dark:bg-gray-900 ${
318318
activeNodeIndex === index
319-
? 'shadow-[0_10px_30px_rgba(0,0,0,0.15)] transform -translate-y-1 border border-blue-400'
320-
: 'shadow-md hover:shadow-lg'
319+
? 'shadow-[0_10px_30px_rgba(0,0,0,0.15)] dark:shadow-[0_10px_30px_rgba(255,255,255,0.15)] transform -translate-y-1 border border-blue-400'
320+
: 'shadow-md hover:shadow-lg dark:hover:shadow-gray-600'
321321
}`}
322322
>
323323
<NodeRenderer

‎apps/web/src/pages/pages/components/ArtifactRenderer.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -139,15 +139,15 @@ const ArtifactRenderer = memo(
139139
>
140140
<div className="h-full w-full overflow-hidden flex flex-col">
141141
{isMinimap ? (
142-
<div className="flex-1 bg-white overflow-hidden">
142+
<div className="flex-1 bg-white dark:bg-gray-900 overflow-hidden">
143143
{status === 'generating' ? (
144144
<div className="flex h-full w-full items-center justify-center">
145145
<div className="text-xs text-gray-500">
146146
{t('pages.components.artifact.generating', { type: '' })}
147147
</div>
148148
</div>
149149
) : (
150-
<div className="transform scale-[0.5] origin-top-left w-[200%] h-[200%] overflow-hidden bg-white rounded shadow-sm">
150+
<div className="transform scale-[0.5] origin-top-left w-[200%] h-[200%] overflow-hidden bg-white dark:bg-gray-900 rounded shadow-sm">
151151
<Renderer
152152
content={content}
153153
type={currentType}

‎apps/web/src/pages/pages/components/EmptyContentPrompt.tsx

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,10 @@ const EmptyContentPrompt: FC<EmptyContentPromptProps> = ({
6464
// Filter out already existing nodes
6565
const filteredAvailableNodes = useMemo(() => {
6666
if (!excludeNodeIds.length) return availableNodes;
67-
return availableNodes.filter((node) => !excludeNodeIds.includes(node.data?.entityId));
67+
return availableNodes.filter(
68+
(node) =>
69+
!excludeNodeIds.includes(node.data?.entityId) && !['skill', 'group'].includes(node?.type),
70+
);
6871
}, [availableNodes, excludeNodeIds]);
6972

7073
// Filtered nodes based on search term
@@ -239,11 +242,11 @@ const EmptyContentPrompt: FC<EmptyContentPromptProps> = ({
239242

240243
return (
241244
<div
242-
className="refly-node-selector bg-white rounded-lg flex flex-col"
245+
className="refly-node-selector bg-white dark:bg-gray-900 rounded-lg flex flex-col"
243246
style={{ width: '100%', height, maxHeight: '80vh', maxWidth: '100%' }}
244247
>
245248
{/* Search bar */}
246-
<div className="p-4 border-b border-gray-200 flex items-center gap-2 bg-white sticky top-0 z-10">
249+
<div className="p-4 border-b border-gray-200 flex items-center bg-white dark:bg-gray-900 gap-2 sticky top-0 z-10">
247250
<Input
248251
ref={inputRef}
249252
placeholder={t('common.searchNodes', 'Search nodes')}
@@ -260,7 +263,7 @@ const EmptyContentPrompt: FC<EmptyContentPromptProps> = ({
260263
</div>
261264

262265
{/* Node list */}
263-
<div className="flex-1 overflow-y-auto relative bg-gray-50 dark:bg-gray-950" ref={listRef}>
266+
<div className="flex-1 overflow-y-auto relative bg-gray-50 dark:bg-gray-900" ref={listRef}>
264267
{isLoadingCanvas ? (
265268
<div className="flex items-center justify-center h-full">
266269
<Spinner size="large" />
@@ -273,18 +276,18 @@ const EmptyContentPrompt: FC<EmptyContentPromptProps> = ({
273276
key={node.id}
274277
data-index={index}
275278
className={classNames(
276-
'relative rounded-lg transition overflow-hidden shadow-sm hover:shadow-md',
279+
'relative rounded-lg transition overflow-hidden shadow-sm hover:shadow-md dark:hover:shadow-gray-600 bg-white dark:bg-gray-700 ring-1',
277280
'cursor-pointer',
278281
selectedNodeIds.includes(node.data?.entityId)
279-
? 'bg-white shadow-md dark:bg-gray-900'
280-
: 'bg-white border border-gray-200 hover:border-blue-200 dark:bg-gray-900 dark:border-gray-700 dark:hover:border-blue-700',
282+
? 'ring-green-600'
283+
: 'ring-transparent dark:ring-gray-700',
281284
)}
282285
onClick={() => handleNodeToggle(node.data?.entityId)}
283286
>
284287
{/* Card title */}
285288
<div
286289
className={classNames(
287-
'py-2 px-3 bg-white z-10 relative flex items-center justify-between',
290+
'py-2 px-3 z-10 relative flex items-center justify-between',
288291
selectedNodeIds.includes(node.data?.entityId)
289292
? 'border-b border-blue-100 dark:border-blue-800'
290293
: 'border-b border-gray-100 dark:border-gray-800',
@@ -295,13 +298,13 @@ const EmptyContentPrompt: FC<EmptyContentPromptProps> = ({
295298
className={classNames(
296299
'flex items-center justify-center w-5 h-5 rounded-full text-xs',
297300
selectedNodeIds.includes(node.data?.entityId)
298-
? 'bg-blue-50 text-blue-600 dark:bg-blue-900 dark:text-blue-300'
301+
? 'bg-green-600 text-white'
299302
: 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300',
300303
)}
301304
>
302305
{index + 1}
303306
</span>
304-
<span className="truncate text-sm font-medium text-gray-700">
307+
<span className="truncate text-sm font-medium text-gray-700 dark:text-gray-300">
305308
{node.data?.title || t('common.untitled', 'Untitled')}
306309
</span>
307310
</div>
@@ -320,7 +323,7 @@ const EmptyContentPrompt: FC<EmptyContentPromptProps> = ({
320323
</div>
321324

322325
{/* Gradient mask */}
323-
<div className="absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-white to-transparent" />
326+
<div className="absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-white to-transparent dark:from-gray-950 dark:to-transparent" />
324327
</div>
325328
</div>
326329
))}
@@ -333,7 +336,7 @@ const EmptyContentPrompt: FC<EmptyContentPromptProps> = ({
333336
</div>
334337

335338
{/* Action bar - fixed at bottom */}
336-
<div className="p-4 border-t border-gray-200 dark:border-gray-700 flex justify-between items-center bg-white dark:bg-gray-900 sticky bottom-0 left-0 right-0 z-10">
339+
<div className="p-4 border-t border-solid border-1 border-x-0 border-b-0 border-transparent dark:border-gray-700 flex justify-between items-center bg-white dark:bg-gray-900 sticky bottom-0 left-0 right-0 z-10">
337340
<div className="text-sm text-gray-500">
338341
{selectedNodeIds.length > 0
339342
? t('common.selectedItems', `Selected ${selectedNodeIds.length} items`, {

‎apps/web/src/pages/pages/components/ImageRenderer.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,13 @@ const ImageRenderer = memo(
3636

3737
return (
3838
<div
39-
className={`h-full bg-white ${!isFullscreen ? 'rounded' : 'w-full'} ${
39+
className={`h-full bg-white dark:bg-gray-900 ${!isFullscreen ? 'rounded' : 'w-full'} ${
4040
isMinimap ? 'p-1' : ''
4141
}`}
4242
>
4343
<div className="h-full w-full overflow-hidden flex flex-col">
4444
{/* Image content area */}
45-
<div className="flex-1 overflow-auto p-4">
45+
<div className="flex-1 overflow-auto p-4 dark:bg-gray-900">
4646
<div
4747
className="cursor-pointer hover:opacity-90 transition-opacity"
4848
onClick={handleOpenPreview}

‎apps/web/src/pages/pages/components/PageLayout.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const PageLayout: React.FC<PageLayoutProps> = ({
5252
<Layout.Sider
5353
width={180}
5454
theme="light"
55-
className="bg-[#f7f9fc] border-r border-gray-200 overflow-hidden relative dark:bg-gray-900 dark:border-gray-700"
55+
className="bg-[#f7f9fc] border-r border-gray-200 overflow-hidden relative dark:bg-gray-700/80 dark:border-gray-700"
5656
>
5757
<SidebarMinimap
5858
nodes={nodes}
@@ -66,14 +66,14 @@ const PageLayout: React.FC<PageLayoutProps> = ({
6666
type="text"
6767
icon={<LeftOutlined />}
6868
onClick={toggleMinimap}
69-
className="absolute top-2 right-2 z-10 bg-white shadow-sm hover:bg-gray-100 border border-gray-200 rounded-full h-6 w-6 flex items-center justify-center p-0"
69+
className="absolute top-2 right-2 z-10 bg-white shadow-sm hover:bg-gray-100 border border-gray-200 rounded-full h-6 w-6 flex items-center justify-center p-0 dark:bg-gray-900 dark:border-gray-700 dark:hover:bg-gray-950"
7070
size="small"
7171
/>
7272
</Layout.Sider>
7373
)}
7474

7575
{/* Middle content area */}
76-
<Layout.Content className="relative overflow-y-auto overflow-x-hidden bg-white dark:bg-gray-900 ">
76+
<Layout.Content className="relative overflow-y-auto overflow-x-hidden bg-white dark:bg-gray-800/90 ">
7777
{/* Button to show minimap */}
7878
{!showMinimap && (
7979
<div className="fixed left-0 top-60 z-500">
@@ -95,7 +95,7 @@ const PageLayout: React.FC<PageLayoutProps> = ({
9595
type="text"
9696
icon={<MenuUnfoldOutlined />}
9797
onClick={toggleSidebar}
98-
className="absolute top-4 right-4 z-10 bg-white shadow-sm hover:bg-gray-100 border border-gray-200 h-8 w-8 flex items-center justify-center p-0 rounded-md"
98+
className="absolute top-4 right-4 z-10 bg-white dark:bg-gray-900 shadow-sm hover:bg-gray-100 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 h-8 w-8 flex items-center justify-center p-0 rounded-md"
9999
/>
100100
)}
101101

‎apps/web/src/pages/pages/components/PreviewMode.tsx

Lines changed: 48 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { NodeRenderer } from './NodeRenderer';
66
import { type NodeRelation } from './ArtifactRenderer';
77
import '../styles/preview-mode.css';
88
import Logo from '@/assets/logo.svg';
9+
import { useThemeStoreShallow } from '@refly-packages/ai-workspace-common/stores/theme';
910

1011
interface PreviewModeProps {
1112
nodes: NodeRelation[];
@@ -45,6 +46,9 @@ const PreviewMode: React.FC<PreviewModeProps> = ({
4546
previewContentRef,
4647
}) => {
4748
const { t } = useTranslation();
49+
const { isDarkMode } = useThemeStoreShallow((state: { isDarkMode: boolean }) => ({
50+
isDarkMode: state.isDarkMode,
51+
}));
4852

4953
// Calculate current progress percentage
5054
const progressPercentage = useMemo(() => {
@@ -55,7 +59,7 @@ const PreviewMode: React.FC<PreviewModeProps> = ({
5559
return (
5660
<div
5761
ref={previewContentRef}
58-
className={`preview-content-container relative ${uiState.isIdle ? 'idle' : ''} ${uiState.showNav ? 'show-nav' : ''}`}
62+
className={`preview-content-container relative bg-white dark:bg-gray-900 ${uiState.isIdle ? 'idle' : ''} ${uiState.showNav ? 'show-nav' : ''}`}
5963
onMouseMove={onMouseMove}
6064
>
6165
{/* Top progress bar */}
@@ -118,8 +122,20 @@ const PreviewMode: React.FC<PreviewModeProps> = ({
118122
className={`preview-minimap ${showPreviewMinimap ? 'preview-minimap-show' : ''}`}
119123
onMouseEnter={onMinimapMouseEnter}
120124
onMouseLeave={onMinimapMouseLeave}
125+
style={{
126+
background: isDarkMode ? 'rgba(17, 24, 39, 0.95)' : '',
127+
borderRight: isDarkMode ? '1px solid rgba(75, 85, 99, 0.2)' : '',
128+
}}
121129
>
122-
<div className="preview-minimap-header">{t('pages.components.navigationDirectory')}</div>
130+
<div
131+
className="preview-minimap-header"
132+
style={{
133+
background: isDarkMode ? 'rgba(17, 24, 39, 0.95)' : '',
134+
borderBottom: isDarkMode ? '1px solid rgba(75, 85, 99, 0.2)' : '',
135+
}}
136+
>
137+
{t('pages.components.navigationDirectory')}
138+
</div>
123139
<div className="preview-minimap-content">
124140
{nodes.map((node, index) => (
125141
<div
@@ -129,29 +145,27 @@ const PreviewMode: React.FC<PreviewModeProps> = ({
129145
>
130146
<div className="preview-minimap-number">{index + 1}</div>
131147
<div className="preview-minimap-thumbnail">
132-
<div
133-
style={{
134-
height: '100%',
135-
overflow: 'hidden',
136-
transform: 'scale(0.95)',
137-
background: '#fff',
138-
pointerEvents: 'none',
139-
userSelect: 'none',
140-
}}
141-
>
148+
<div className="h-full overflow-hidden transform scale(0.95) bg-white dark:bg-gray-900 pointer-events-none select-none">
142149
<NodeRenderer node={node} isFullscreen={false} isModal={true} isMinimap={true} />
143150
</div>
144151
{/* Transparent mask layer */}
145152
<div className="absolute inset-0 bg-transparent" />
146153
</div>
147-
<div className="preview-minimap-title">{getNodeTitle(node)}</div>
154+
<div
155+
className="preview-minimap-title"
156+
style={{
157+
color: isDarkMode ? 'rgba(229, 231, 235, 0.8)' : '',
158+
}}
159+
>
160+
{getNodeTitle(node)}
161+
</div>
148162
</div>
149163
))}
150164
</div>
151165
</div>
152166

153167
{/* Main preview content */}
154-
<div className="preview-content">
168+
<div className="preview-content bg-white dark:bg-gray-900">
155169
<div
156170
className="w-full h-full preview-slide"
157171
style={{
@@ -167,7 +181,7 @@ const PreviewMode: React.FC<PreviewModeProps> = ({
167181

168182
{/* Swipe hint - only displayed on mobile devices */}
169183
{nodes.length > 1 && (
170-
<div className="swipe-hint md:hidden">
184+
<div className="swipe-hint md:hidden text-gray-200 dark:text-gray-800 dark:bg-gray-900">
171185
{t('pages.components.swipeHint', { current: currentSlideIndex + 1, total: nodes.length })}
172186
</div>
173187
)}
@@ -177,7 +191,12 @@ const PreviewMode: React.FC<PreviewModeProps> = ({
177191
<div
178192
className={`preview-footer ${uiState.isIdle ? 'opacity-0' : 'opacity-100'}`}
179193
onMouseEnter={onUiInteraction}
180-
style={{ transition: 'opacity 0.3s ease-out' }}
194+
style={{
195+
transition: 'opacity 0.3s ease-out',
196+
background: isDarkMode
197+
? 'linear-gradient(to top, rgba(17, 24, 39, 0.7), transparent)'
198+
: 'linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent)',
199+
}}
181200
>
182201
<div className="dots-container">
183202
{nodes.map((_, index) => (
@@ -198,25 +217,32 @@ const PreviewMode: React.FC<PreviewModeProps> = ({
198217
style={{
199218
filter: 'drop-shadow(0 0 4px rgba(0, 0, 0, 0.2))',
200219
backdropFilter: 'blur(2px)',
201-
background: 'rgba(255, 255, 255, 0.15)',
220+
background: isDarkMode ? 'rgba(30, 30, 30, 0.7)' : 'rgba(255, 255, 255, 0.15)',
202221
borderRadius: '30px',
203222
padding: '5px 10px',
204-
border: '1px solid rgba(255, 255, 255, 0.2)',
223+
border: isDarkMode
224+
? '1px solid rgba(75, 85, 99, 0.4)'
225+
: '1px solid rgba(255, 255, 255, 0.2)',
205226
}}
206227
>
207228
<div className="flex items-center gap-2">
208229
<img
209230
src={Logo}
210231
alt="Refly"
211232
className="h-6 w-6"
212-
style={{ filter: 'saturate(1.2) brightness(1.05)' }}
233+
style={{
234+
filter: isDarkMode
235+
? 'brightness(1.3) saturate(1.2)'
236+
: 'saturate(1.2) brightness(1.05)',
237+
}}
213238
/>
214239
<span
215-
className="text-sm font-bold"
240+
className="text-sm font-bold text-[#333] dark:text-gray-100"
216241
translate="no"
217242
style={{
218-
color: '#333',
219-
textShadow: '0 1px 1px rgba(255, 255, 255, 0.5)',
243+
textShadow: isDarkMode
244+
? '0 1px 2px rgba(0, 0, 0, 0.8)'
245+
: '0 1px 1px rgba(255, 255, 255, 0.5)',
220246
}}
221247
>
222248
Refly

0 commit comments

Comments
 (0)