Feat: update icon and Divider components (#10975)

web/app/components/base/divider/index.tsx

@@ -1,17 +1,31 @@
 import type { CSSProperties, FC } from 'react'
 import React from 'react'
-import s from './style.module.css'
+import { type VariantProps, cva } from 'class-variance-authority'
+import classNames from '@/utils/classnames'
 
-type Props = {
-  type?: 'horizontal' | 'vertical'
-  // orientation?: 'left' | 'right' | 'center'
+const dividerVariants = cva(
+  'bg-divider-regular',
+  {
+    variants: {
+      type: {
+        horizontal: 'w-full h-[0.5px] my-2',
+        vertical: 'w-[1px] h-full mx-2',
+      },
+    },
+    defaultVariants: {
+      type: 'horizontal',
+    },
+  },
+)
+
+type DividerProps = {
   className?: string
   style?: CSSProperties
-}
+} & VariantProps<typeof dividerVariants>
 
-const Divider: FC<Props> = ({ type = 'horizontal', className = '', style }) => {
+const Divider: FC<DividerProps> = ({ type, className = '', style }) => {
   return (
-    <div className={`${s.divider} ${s[type]} ${className}`} style={style}></div>
+    <div className={classNames(dividerVariants({ type }), className)} style={style}></div>
   )
 }
 

web/app/components/base/divider/style.module.css

@@ -1,9 +0,0 @@
-.divider {
-  @apply bg-gray-200;
-}
-.horizontal {
-  @apply w-full h-[0.5px] my-2;
-}
-.vertical {
-  @apply w-[1px] h-full mx-2;
-}

web/themes/dark.css

@@ -265,6 +265,7 @@ html[data-theme="dark"] {
   --color-text-logo-text: #E9E9EC;
   --color-text-empty-state-icon: #C8CEDA4D;
   --color-text-inverted: #FFFFFF;
+  --color-text-inverted-dimmed: #FFFFFFCC;
 
   --color-background-body: #1D1D20;
   --color-background-default-subtle: #222225;
@@ -296,7 +297,7 @@ html[data-theme="dark"] {
   --color-background-section-burn: #18181B99;
   --color-background-default-dodge: #3A3A40;
   --color-background-overlay: #18181BCC;
-  --color-background-default-dimm: #27272B;
+  --color-background-default-dimmed: #27272B;
   --color-background-default-hover: #27272B;
   --color-background-overlay-alt: #18181B66;
   --color-background-surface-white: #FFFFFFE5;
@@ -325,6 +326,12 @@ html[data-theme="dark"] {
   --color-workflow-link-line-normal: #676F83;
   --color-workflow-link-line-handle: #296DFF;
 
+  --color-workflow-link-line-success-active: #47CD89;
+  --color-workflow-link-line-success-handle: #47CD89;
+
+  --color-workflow-link-line-error-active: #F97066;
+  --color-workflow-link-line-error-handle: #F97066;
+
   --color-workflow-minimap-bg: #27272B;
   --color-workflow-minimap-block: #C8CEDA14;
 
@@ -598,6 +605,5 @@ html[data-theme="dark"] {
 
   --color-third-party-LangChain: #FFFFFF;
   --color-third-party-Langfuse: #FFFFFF;
-
   --color-third-party-Github: #FFFFFF;
 }

web/themes/light.css

@@ -265,6 +265,7 @@ html[data-theme="light"] {
   --color-text-logo-text: #18222F;
   --color-text-empty-state-icon: #D0D5DC;
   --color-text-inverted: #000000;
+  --color-text-inverted-dimmed: #000000F2;
 
   --color-background-body: #F2F4F7;
   --color-background-default-subtle: #FCFCFD;
@@ -296,7 +297,7 @@ html[data-theme="light"] {
   --color-background-section-burn: #F2F4F7;
   --color-background-default-dodge: #FFFFFF;
   --color-background-overlay: #10182899;
-  --color-background-default-dimm: #E9EBF0;
+  --color-background-default-dimmed: #E9EBF0;
   --color-background-default-hover: #F9FAFB;
   --color-background-overlay-alt: #10182866;
   --color-background-surface-white: #FFFFFFF2;
@@ -324,6 +325,17 @@ html[data-theme="light"] {
   --color-workflow-link-line-active: #296DFF;
   --color-workflow-link-line-normal: #D0D5DC;
   --color-workflow-link-line-handle: #296DFF;
+  --color-workflow-link-line-normal-transparent: #D0D5DC33;
+  --color-workflow-link-line-failure-active: #F79009;
+  --color-workflow-link-line-failure-handle: #F79009;
+  --color-workflow-link-line-failure-button-bg: #DC6803;
+  --color-workflow-link-line-failure-button-hover: #B54708;
+
+  --color-workflow-link-line-success-active: #17B26A;
+  --color-workflow-link-line-success-handle: #17B26A;
+
+  --color-workflow-link-line-error-active: #F04438;
+  --color-workflow-link-line-error-handle: #F04438;
 
   --color-workflow-minimap-bg: #E9EBF0;
   --color-workflow-minimap-block: #C8CEDA4D;

web/themes/tailwind-theme-var-define.ts

@@ -265,6 +265,7 @@ const vars = {
   'text-logo-text': 'var(--color-text-logo-text)',
   'text-empty-state-icon': 'var(--color-text-empty-state-icon)',
   'text-inverted': 'var(--color-text-inverted)',
+  'text-inverted-dimmed': 'var(--color-text-inverted-dimmed)',
 
   'background-body': 'var(--color-background-body)',
   'background-default-subtle': 'var(--color-background-default-subtle)',
@@ -296,7 +297,7 @@ const vars = {
   'background-section-burn': 'var(--color-background-section-burn)',
   'background-default-dodge': 'var(--color-background-default-dodge)',
   'background-overlay': 'var(--color-background-overlay)',
-  'background-default-dimm': 'var(--color-background-default-dimm)',
+  'background-default-dimmed': 'var(--color-background-default-dimmed)',
   'background-default-hover': 'var(--color-background-default-hover)',
   'background-overlay-alt': 'var(--color-background-overlay-alt)',
   'background-surface-white': 'var(--color-background-surface-white)',
@@ -324,6 +325,17 @@ const vars = {
   'workflow-link-line-active': 'var(--color-workflow-link-line-active)',
   'workflow-link-line-normal': 'var(--color-workflow-link-line-normal)',
   'workflow-link-line-handle': 'var(--color-workflow-link-line-handle)',
+  'workflow-link-line-normal-transparent': 'var(--color-workflow-link-line-normal-transparent)',
+  'workflow-link-line-failure-active': 'var(--color-workflow-link-line-failure-active)',
+  'workflow-link-line-failure-handle': 'var(--color-workflow-link-line-failure-handle)',
+  'workflow-link-line-failure-button-bg': 'var(--color-workflow-link-line-failure-button-bg)',
+  'workflow-link-line-failure-button-hover': 'var(--color-workflow-link-line-failure-button-hover)',
+
+  'workflow-link-line-success-active': 'var(--color-workflow-link-line-success-active)',
+  'workflow-link-line-success-handle': 'var(--color-workflow-link-line-success-handle)',
+
+  'workflow-link-line-error-active': 'var(--color-workflow-link-line-error-active)',
+  'workflow-link-line-error-handle': 'var(--color-workflow-link-line-error-handle)',
 
   'workflow-minimap-bg': 'var(--color-workflow-minimap-bg)',
   'workflow-minimap-block': 'var(--color-workflow-minimap-block)',

web/yarn.lock

@@ -2568,9 +2568,9 @@
     zustand "^4.4.1"
 
 "@remixicon/react@^4.2.0":
-  version "4.2.0"
-  resolved "https://registry.npmjs.org/@remixicon/react/-/react-4.2.0.tgz"
-  integrity sha512-eGhKpZ88OU0qkcY9pJu6khBmItDV82nU130E6C68yc+FbljueHlUYy/4CrJsmf860RIDMay2Rpzl27OSJ81miw==
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/@remixicon/react/-/react-4.5.0.tgz#5600d122ee4995bff2c4442cb056eeb4f11ecb5a"
+  integrity sha512-Xr20SxMpRNlgXZnoF5BCMyZuQEhXY3yJCyms8kxB/vJCCiV1nWdiO48XqRG5LBd1192iSHC4m658AIWi6rmBFg==
 
 "@rgrove/parse-xml@^4.1.0":
   version "4.1.0"