Feat/environment variables in workflow (#6515)

Co-authored-by: JzoNg <jzongcode@gmail.com>

web/app/components/workflow/header/checklist.tsx

@@ -57,22 +57,15 @@ const WorkflowChecklist = ({
       <PortalToFollowElemTrigger onClick={() => !disabled && setOpen(v => !v)}>
         <div
           className={cn(
-            'relative flex items-center justify-center p-0.5 w-8 h-8 rounded-lg border-[0.5px] border-gray-200 bg-white shadow-xs',
+            'relative ml-0.5 flex items-center justify-center w-7 h-7 rounded-md',
             disabled && 'opacity-50 cursor-not-allowed',
           )}
         >
           <div
-            className={`
-              group flex items-center justify-center w-full h-full rounded-md cursor-pointer
-              hover:bg-primary-50
-              ${open && 'bg-primary-50'}
-            `}
+            className={cn('group flex items-center justify-center w-full h-full rounded-md cursor-pointer hover:bg-state-accent-hover', open && 'bg-state-accent-hover')}
           >
             <RiListCheck3
-              className={`
-                w-4 h-4 group-hover:text-primary-600
-                ${open ? 'text-primary-600' : 'text-gray-500'}`
-              }
+              className={cn('w-4 h-4 group-hover:text-components-button-secondary-accent-text', open ? 'text-components-button-secondary-accent-text' : 'text-components-button-ghost-text')}
             />
           </div>
           {