mrege

web/app/components/workflow/header/editing-title.tsx

@@ -14,7 +14,7 @@ const EditingTitle = () => {
   const maximizeCanvas = useStore(s => s.maximizeCanvas)
 
   return (
-    <div className={`system-xs-regular flex h-[18px] min-w-[300px] items-center whitespace-nowrap text-text-tertiary ${maximizeCanvas ? 'ml-2' : ''}`}>
+    <div className={`flex h-[18px] min-w-[300px] items-center whitespace-nowrap text-text-tertiary system-xs-regular ${maximizeCanvas ? 'ml-2' : ''}`}>
       {
         !!draftUpdatedAt && (
           <>

web/app/components/workflow/header/header-in-restoring.tsx

@@ -80,7 +80,7 @@ const HeaderInRestoring = ({
       <div>
         <RestoringTitle />
       </div>
-      <div className=" flex items-center justify-end gap-x-2">
+      <div className="flex items-center justify-end gap-x-2">
         <Button
           onClick={handleRestore}
           disabled={!currentVersion || currentVersion.version === WorkflowVersion.Draft}

web/app/components/workflow/header/restoring-title.tsx

@@ -22,14 +22,14 @@ const RestoringTitle = () => {
   return (
     <div className="flex flex-col gap-y-0.5">
       <div className="flex items-center gap-x-1">
-        <span className="system-sm-semibold text-text-primary">
+        <span className="text-text-primary system-sm-semibold">
           {versionName}
         </span>
-        <span className="system-2xs-medium-uppercase rounded-[5px] border border-text-accent-secondary bg-components-badge-bg-dimm px-1 py-0.5 text-text-accent-secondary">
+        <span className="rounded-[5px] border border-text-accent-secondary bg-components-badge-bg-dimm px-1 py-0.5 text-text-accent-secondary system-2xs-medium-uppercase">
           {t('common.viewOnly', { ns: 'workflow' })}
         </span>
       </div>
-      <div className="system-xs-regular flex h-4 items-center gap-x-1 text-text-tertiary">
+      <div className="flex h-4 items-center gap-x-1 text-text-tertiary system-xs-regular">
         {
           currentVersion && (
             <>

web/app/components/workflow/header/run-mode.tsx

@@ -5,7 +5,7 @@ import { useCallback, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
 import { StopCircle } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { useWorkflowRun, useWorkflowRunValidation, useWorkflowStartRun } from '@/app/components/workflow/hooks'
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 import { useStore } from '@/app/components/workflow/store'
@@ -114,7 +114,7 @@ const RunMode = ({
               <button
                 type="button"
                 className={cn(
-                  'system-xs-medium flex h-7 cursor-not-allowed items-center gap-x-1 rounded-l-md bg-state-accent-hover px-1.5 text-text-accent',
+                  'flex h-7 cursor-not-allowed items-center gap-x-1 rounded-l-md bg-state-accent-hover px-1.5 text-text-accent system-xs-medium',
                 )}
                 disabled={true}
               >
@@ -130,7 +130,7 @@ const RunMode = ({
               >
                 <div
                   className={cn(
-                    'system-xs-medium flex h-7 cursor-pointer items-center gap-x-1 rounded-md px-1.5 text-text-accent hover:bg-state-accent-hover',
+                    'flex h-7 cursor-pointer items-center gap-x-1 rounded-md px-1.5 text-text-accent system-xs-medium hover:bg-state-accent-hover',
                   )}
                   style={{ userSelect: 'none' }}
                 >

web/app/components/workflow/header/scroll-to-selected-node-button.tsx

@@ -23,7 +23,7 @@ const ScrollToSelectedNodeButton: FC = () => {
   return (
     <div
       className={cn(
-        'system-xs-medium flex h-6 cursor-pointer items-center justify-center whitespace-nowrap rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-3 text-text-tertiary shadow-lg backdrop-blur-sm transition-colors duration-200 hover:text-text-accent',
+        'flex h-6 cursor-pointer items-center justify-center whitespace-nowrap rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-3 text-text-tertiary shadow-lg backdrop-blur-sm transition-colors duration-200 system-xs-medium hover:text-text-accent',
       )}
       onClick={handleScrollToSelectedNode}
     >

web/app/components/workflow/header/test-run-menu.tsx

@@ -157,7 +157,7 @@ const TestRunMenu = forwardRef<TestRunMenuRef, TestRunMenuProps>(({
     return (
       <div
         key={option.id}
-        className="system-md-regular flex cursor-pointer items-center rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover"
+        className="flex cursor-pointer items-center rounded-lg px-3 py-1.5 text-text-secondary system-md-regular hover:bg-state-base-hover"
         onClick={() => handleSelect(option)}
       >
         <div className="flex min-w-0 flex-1 items-center">

web/app/components/workflow/header/undo-redo.tsx

@@ -36,7 +36,7 @@ const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
         <div
           data-tooltip-id="workflow.undo"
           className={
-            cn('system-sm-medium flex h-8 w-8 cursor-pointer select-none items-center rounded-md px-1.5 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary', (nodesReadOnly || buttonsDisabled.undo)
+            cn('flex h-8 w-8 cursor-pointer select-none items-center rounded-md px-1.5 text-text-tertiary system-sm-medium hover:bg-state-base-hover hover:text-text-secondary', (nodesReadOnly || buttonsDisabled.undo)
             && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')
           }
           onClick={() => !nodesReadOnly && !buttonsDisabled.undo && handleUndo()}
@@ -48,7 +48,7 @@ const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
         <div
           data-tooltip-id="workflow.redo"
           className={
-            cn('system-sm-medium flex h-8 w-8 cursor-pointer select-none items-center rounded-md px-1.5 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary', (nodesReadOnly || buttonsDisabled.redo)
+            cn('flex h-8 w-8 cursor-pointer select-none items-center rounded-md px-1.5 text-text-tertiary system-sm-medium hover:bg-state-base-hover hover:text-text-secondary', (nodesReadOnly || buttonsDisabled.redo)
             && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')
           }
           onClick={() => !nodesReadOnly && !buttonsDisabled.redo && handleRedo()}

web/app/components/workflow/header/version-history-button.tsx

@@ -21,7 +21,7 @@ const PopupContent = React.memo(() => {
   const { t } = useTranslation()
   return (
     <div className="flex items-center gap-x-1">
-      <div className="system-xs-medium px-0.5 text-text-secondary">
+      <div className="px-0.5 text-text-secondary system-xs-medium">
         {t('common.versionHistory', { ns: 'workflow' })}
       </div>
       <ShortcutsName keys={VERSION_HISTORY_SHORTCUT} bgColor="gray" textColor="secondary" />