fix: resolve style issues in dark mode

This commit is contained in:
LIlGG
2025-09-29 12:50:15 +08:00
parent 7fd33183c5
commit 2838a7f923
7 changed files with 76 additions and 41 deletions

View File

@@ -350,7 +350,7 @@ export const DeploymentRecordsDialog = memo(({ isOpen, onClose }: DeploymentReco
</h3>
<Tabs value={activePlatform} onValueChange={handleTabChange} className="mb-4">
<TabsList className="w-full border border-upage-elements-borderColor rounded-md p-1 bg-gray-50 dark:bg-gray-900/20 flex">
<TabsList className="w-full border border-upage-elements-borderColor rounded-md p-1 bg-gray-50 dark:bg-gray-900/50 flex">
{Object.values(DeploymentPlatformEnum).map((platform, index) => {
const count = stats.sitesByPlatform?.[platform] || 0;
const isLoading = isPlatformLoading(platform);
@@ -364,8 +364,8 @@ export const DeploymentRecordsDialog = memo(({ isOpen, onClose }: DeploymentReco
className={classNames(
'flex-1 relative py-2 px-3 transition-all duration-200',
isActive
? 'bg-white dark:bg-gray-800 shadow-sm rounded-md text-upage-elements-textPrimary font-medium'
: 'hover:bg-gray-100/70 dark:hover:bg-gray-800/30 text-upage-elements-textSecondary',
? 'bg-white dark:bg-gray-800 shadow-sm rounded-md text-upage-elements-textPrimary dark:text-upage-elements-textPrimary font-medium'
: 'bg-transparent dark:bg-transparent hover:bg-gray-100/70 dark:hover:bg-gray-800/30 text-upage-elements-textSecondary dark:text-upage-elements-textSecondary',
)}
>
<div className="flex items-center justify-center gap-2">

View File

@@ -618,6 +618,7 @@ export default function NetlifyConnection() {
'bg-upage-elements-button-secondary-background',
'hover:bg-upage-elements-button-secondary-backgroundHover',
'disabled:opacity-50 disabled:cursor-not-allowed',
'text-upage-elements-textPrimary',
)}
>
{isConnecting ? (
@@ -627,7 +628,7 @@ export default function NetlifyConnection() {
</>
) : (
<>
<div className="heroicons:cloud size-4" />
<div className="i-ph:plug-charging size-4" />
</>
)}

View File

@@ -510,6 +510,7 @@ export default function _1PanelConnection({
'bg-upage-elements-button-secondary-background',
'hover:bg-upage-elements-button-secondary-backgroundHover',
'disabled:opacity-50 disabled:cursor-not-allowed',
'text-upage-elements-textPrimary',
)}
>
{isConnecting ? (

View File

@@ -125,7 +125,7 @@ interface FullscreenButtonProps {
const FullscreenButton = memo(({ onClick, isFullscreen }: FullscreenButtonProps) => (
<button
onClick={onClick}
className="ml-4 p-1 rounded hover:bg-upage-elements-background-depth-3 text-upage-elements-textTertiary hover:text-upage-elements-textPrimary transition-colors"
className="ml-4 p-1 rounded hover:bg-upage-elements-background-depth-3 text-upage-elements-textTertiary hover:text-upage-elements-textPrimary transition-colors dark:bg-gray-800"
title={isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
>
<div className={isFullscreen ? 'i-ph:corners-in' : 'i-ph:corners-out'} />

View File

@@ -265,8 +265,8 @@ function Page({ page, onClick, selected, unsavedChanges = false }: PageProps) {
>
<NodeButton
className={classNames('group', {
'text-upage-elements-item-contentDefault': !selected,
'text-upage-elements-item-contentAccent': selected,
'text-upage-elements-item-contentDefault dark:bg-gray-800': !selected,
'text-upage-elements-item-contentAccent dark:bg-gray-800': selected,
})}
iconClasses={classNames('i-ph:file-duotone scale-98', {
'group-hover:text-upage-elements-item-contentActive': !selected,