feat: move linear gradient bg to common config
This commit is contained in:
Yi
parent
0ac5e53c2e
commit
0e419a7a16
@ -50,10 +50,10 @@ const Toast = ({
|
||||
'right-0',
|
||||
)}>
|
||||
<div className={`absolute inset-0 opacity-40 ${
|
||||
(type === 'success' && 'bg-[linear-gradient(92deg,rgba(23,178,106,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
|
||||
|| (type === 'warning' && 'bg-[linear-gradient(92deg,rgba(247,144,9,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
|
||||
|| (type === 'error' && 'bg-[linear-gradient(92deg,rgba(240,68,56,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
|
||||
|| (type === 'info' && 'bg-[linear-gradient(92deg,rgba(11,165,236,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
|
||||
(type === 'success' && 'bg-toast-success-bg')
|
||||
|| (type === 'warning' && 'bg-toast-warning-bg')
|
||||
|| (type === 'error' && 'bg-toast-error-bg')
|
||||
|| (type === 'info' && 'bg-toast-info-bg')
|
||||
}`}
|
||||
/>
|
||||
<div className={`flex ${size === 'md' ? 'gap-1' : 'gap-0.5'}`}>
|
||||
@ -70,9 +70,11 @@ const Toast = ({
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<ActionButton className='z-[1000]' onClick={close}>
|
||||
<RiCloseLine className='w-4 h-4 shrink-0 text-text-tertiary' />
|
||||
</ActionButton>
|
||||
{close
|
||||
&& (<ActionButton className='z-[1000]' onClick={close}>
|
||||
<RiCloseLine className='w-4 h-4 shrink-0 text-text-tertiary' />
|
||||
</ActionButton>)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@ -38,8 +38,8 @@ import { ToastContext } from '@/app/components/base/toast'
|
||||
import { useEventEmitterContextContext } from '@/context/event-emitter'
|
||||
import { useStore as useAppStore } from '@/app/components/app/store'
|
||||
import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
|
||||
import { useStore as usePluginDependencyStore } from '@/app/components/workflow/plugin-dependency/store'
|
||||
import PluginDependency from '@/app/components/workflow/plugin-dependency'
|
||||
import { useStore as usePluginDependencyStore } from '@/app/components/workflow/plugin-dependency/store'
|
||||
|
||||
type UpdateDSLModalProps = {
|
||||
onCancel: () => void
|
||||
@ -229,7 +229,7 @@ const UpdateDSLModal = ({
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex relative p-2 mb-2 gap-0.5 grow rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xs overflow-hidden'>
|
||||
<div className='absolute top-0 left-0 w-full h-full opacity-40 bg-[linear-gradient(92deg,rgba(247,144,9,0.25)_0%,rgba(255,255,255,0.00)_100%)]' />
|
||||
<div className='absolute top-0 left-0 w-full h-full opacity-40 bg-toast-warning-bg' />
|
||||
<div className='flex p-1 justify-center items-start'>
|
||||
<RiAlertFill className='w-4 h-4 shrink-0 text-text-warning-secondary' />
|
||||
</div>
|
||||
|
||||
@ -89,6 +89,10 @@ const config = {
|
||||
'workflow-process-bg': 'var(--color-workflow-process-bg)',
|
||||
'marketplace-divider-bg': 'var(--color-marketplace-divider-bg)',
|
||||
'marketplace-plugin-empty': 'var(--color-marketplace-plugin-empty)',
|
||||
'toast-success-bg': 'var(--color-toast-success-bg)',
|
||||
'toast-warning-bg': 'var(--color-toast-warning-bg)',
|
||||
'toast-error-bg': 'var(--color-toast-error-bg)',
|
||||
'toast-info-bg': 'var(--color-toast-info-bg)',
|
||||
},
|
||||
animation: {
|
||||
'spin-slow': 'spin 2s linear infinite',
|
||||
|
||||
@ -1,7 +1,47 @@
|
||||
html[data-theme="dark"] {
|
||||
--color-chatbot-bg: linear-gradient(180deg, rgba(34, 34, 37, 0.90) 0%, rgba(29, 29, 32, 0.90) 90.48%);
|
||||
--color-chat-bubble-bg: linear-gradient(180deg, rgba(200, 206, 218, 0.08) 0%, rgba(200, 206, 218, 0.02) 100%);
|
||||
--color-workflow-process-bg: linear-gradient(90deg, rgba(24, 24, 27, 0.25) 0%, rgba(24, 24, 27, 0.04) 100%);
|
||||
--color-marketplace-divider-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.14) 0%, rgba(0, 0, 0, 0) 100%);
|
||||
--color-marketplace-plugin-empty: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #222225 100%);
|
||||
}
|
||||
--color-chatbot-bg: linear-gradient(
|
||||
180deg,
|
||||
rgba(34, 34, 37, 0.9) 0%,
|
||||
rgba(29, 29, 32, 0.9) 90.48%
|
||||
);
|
||||
--color-chat-bubble-bg: linear-gradient(
|
||||
180deg,
|
||||
rgba(200, 206, 218, 0.08) 0%,
|
||||
rgba(200, 206, 218, 0.02) 100%
|
||||
);
|
||||
--color-workflow-process-bg: linear-gradient(
|
||||
90deg,
|
||||
rgba(24, 24, 27, 0.25) 0%,
|
||||
rgba(24, 24, 27, 0.04) 100%
|
||||
);
|
||||
--color-marketplace-divider-bg: linear-gradient(
|
||||
90deg,
|
||||
rgba(200, 206, 218, 0.14) 0%,
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
--color-marketplace-plugin-empty: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
#222225 100%
|
||||
);
|
||||
--color-toast-success-bg: linear-gradient(
|
||||
92deg,
|
||||
rgba(23, 178, 106, 0.3) 0%,
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
--color-toast-warning-bg: linear-gradient(
|
||||
92deg,
|
||||
rgba(247, 144, 9, 0.3) 0%,
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
--color-toast-error-bg: linear-gradient(
|
||||
92deg,
|
||||
rgba(240, 68, 56, 0.3) 0%,
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
--color-toast-info-bg: linear-gradient(
|
||||
92deg,
|
||||
rgba(11, 165, 236, 0.3) 0%,
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,7 +1,47 @@
|
||||
html[data-theme="light"] {
|
||||
--color-chatbot-bg: linear-gradient(180deg, rgba(249, 250, 251, 0.90) 0%, rgba(242, 244, 247, 0.90) 90.48%);
|
||||
--color-chat-bubble-bg: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.60) 100%);
|
||||
--color-workflow-process-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%);
|
||||
--color-marketplace-divider-bg: linear-gradient(90deg, rgba(16, 24, 40, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
--color-marketplace-plugin-empty: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FCFCFD 100%);
|
||||
}
|
||||
--color-chatbot-bg: linear-gradient(
|
||||
180deg,
|
||||
rgba(249, 250, 251, 0.9) 0%,
|
||||
rgba(242, 244, 247, 0.9) 90.48%
|
||||
);
|
||||
--color-chat-bubble-bg: linear-gradient(
|
||||
180deg,
|
||||
#fff 0%,
|
||||
rgba(255, 255, 255, 0.6) 100%
|
||||
);
|
||||
--color-workflow-process-bg: linear-gradient(
|
||||
90deg,
|
||||
rgba(200, 206, 218, 0.2) 0%,
|
||||
rgba(200, 206, 218, 0.04) 100%
|
||||
);
|
||||
--color-marketplace-divider-bg: linear-gradient(
|
||||
90deg,
|
||||
rgba(16, 24, 40, 0.08) 0%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
--color-marketplace-plugin-empty: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
#fcfcfd 100%
|
||||
);
|
||||
--color-toast-success-bg: linear-gradient(
|
||||
92deg,
|
||||
rgba(23, 178, 106, 0.25) 0%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
--color-toast-warning-bg: linear-gradient(
|
||||
92deg,
|
||||
rgba(247, 144, 9, 0.25) 0%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
--color-toast-error-bg: linear-gradient(
|
||||
92deg,
|
||||
rgba(240, 68, 56, 0.25) 0%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
--color-toast-info-bg: linear-gradient(
|
||||
92deg,
|
||||
rgba(11, 165, 236, 0.25) 0%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user