move tailwind styling to inline styling

Author: mmattu-wd

dist/components/treeview/RichTreeView.d.ts.map

@@ -40,7 +40,7 @@ const ChevronRightIcon = () => (
     stroke-width="2"
     stroke-linecap="round"
     stroke-linejoin="round"
-    class="transition-transform duration-200"
+    style={{ transition: 'transform 0.2s' }}
   >
     <path d="m9 18 6-6-6-6" />
   </svg>
@@ -57,7 +57,7 @@ const ChevronDownIcon = () => (
     stroke-width="2"
     stroke-linecap="round"
     stroke-linejoin="round"
-    class="transition-transform duration-200"
+    style={{ transition: 'transform 0.2s' }}
   >
     <path d="m6 9 6 6 6-6" />
   </svg>
@@ -198,9 +198,23 @@ export const RichTreeView = (props: RichTreeViewProps) => {
       padding-left: ${mergedProps.indentationLevel}px !important;
     }
     .tree-item-content {
+      display: flex;
+      align-items: center;
+      padding: 0.5rem 0.25rem;
+      border-radius: 0.25rem;
+      cursor: pointer;
       border-left: 3px solid transparent;
       transition: background-color 0.15s ease, border-color 0.15s ease;
     }
+    .tree-item-icon-container {
+      margin-right: 0.25rem;
+    }
+    .tree-item-icon {
+      margin-right: 0.5rem;
+    }
+    .tree-item-label {
+      flex-grow: 1;
+    }
     .tree-item-content:hover {
       background-color: rgba(0, 0, 0, 0.06);
     }
@@ -282,20 +296,18 @@ export const TreeItem = (props: TreeItemProps) => {
   return (
     <div class="tree-item-root">
       <div
-        class={`tree-item-content flex items-center py-2 px-1 rounded cursor-pointer ${context.isSelected(props.itemId) ? 'selected' : ''} ${
-          context.isHighlighted(props.itemId) ? 'highlighted' : ''
-        }`}
+        class={`tree-item-content ${context.isSelected(props.itemId) ? 'selected' : ''} ${context.isHighlighted(props.itemId) ? 'highlighted' : ''}`}
         onClick={handleClick}
       >
-        <div class="tree-item-icon-container mr-1">
+        <div class="tree-item-icon-container">
           {!isLeaf && <Dynamic component={context.isExpanded(props.itemId) ? ChevronDownIcon : ChevronRightIcon} />}
         </div>
 
-        <div class="tree-item-icon mr-2">
+        <div class="tree-item-icon">
           {props.icon ? props.icon : props.expandedIcon && context.isExpanded(props.itemId) ? props.expandedIcon : getDefaultIcon()}
         </div>
 
-        <div class="tree-item-label flex-grow">{props.label}</div>
+        <div class="tree-item-label">{props.label}</div>
 
         <Show when={props.endIcon}>
           <div class="tree-item-end-icon">{props.endIcon}</div>

dist/components/treeview/TracesDialog.d.ts.map

@@ -31,7 +31,7 @@ const ChevronDownIcon = () => (
     stroke-width="2"
     stroke-linecap="round"
     stroke-linejoin="round"
-    class="transition-transform duration-200"
+    style={{ transition: 'transform 0.2s' }}
   >
     <path d="m6 9 6 6 6-6" />
   </svg>
@@ -48,7 +48,7 @@ const ChevronRightIcon = () => (
     stroke-width="2"
     stroke-linecap="round"
     stroke-linejoin="round"
-    class="transition-transform duration-200"
+    style={{ transition: 'transform 0.2s' }}
   >
     <path d="m9 18 6-6-6-6" />
   </svg>
@@ -206,6 +206,7 @@ export const TracesDialog = (props: TracesDialogProps) => {
   const DialogContent = () => (
     <>
       <style>{nddStyles}</style>
+      <style>{`.tree-panel-header:hover { background-color: rgba(0,0,0,0.06); }`}</style>
       {/* Backdrop */}
       <div
         style={{ position: 'fixed', inset: '0', 'z-index': 1001, 'background-color': 'rgba(0,0,0,0.25)', 'pointer-events': 'auto' }}
@@ -298,19 +299,25 @@ export const TracesDialog = (props: TracesDialogProps) => {
             >
               {/* Collapsible tree header */}
               <div
-                class="flex items-center p-2 cursor-pointer hover:bg-gray-100 transition-colors duration-150"
+                class="tree-panel-header"
                 onClick={togglePanel}
-                style={{ 'background-color': 'rgba(0,0,0,0.03)', gap: '4px' }}
+                style={{
+                  display: 'flex',
+                  'align-items': 'center',
+                  padding: '0.5rem',
+                  cursor: 'pointer',
+                  'background-color': 'rgba(0,0,0,0.03)',
+                  gap: '4px',
+                  transition: 'background-color 0.15s ease',
+                }}
               >
-                <div class="flex-shrink-0">{isPanelExpanded() ? <ChevronDownIcon /> : <ChevronRightIcon />}</div>
+                <div style={{ 'flex-shrink': '0' }}>{isPanelExpanded() ? <ChevronDownIcon /> : <ChevronRightIcon />}</div>
                 <Show when={isPanelExpanded()}>
-                  <span class="font-semibold text-xs" style={{ 'white-space': 'nowrap' }}>
-                    Process Flow
-                  </span>
+                  <span style={{ 'font-weight': '600', 'font-size': '0.75rem', 'line-height': '1rem', 'white-space': 'nowrap' }}>Process Flow</span>
                 </Show>
               </div>
               <Show when={isPanelExpanded()}>
-                <div class="p-2" style={{ 'font-size': '0.85rem' }}>
+                <div style={{ padding: '0.5rem', 'font-size': '0.85rem' }}>
                   <RichTreeView
                     defaultExpanded={expandedNodes()}
                     defaultSelected={selectedNodeId()}