Use inline styles for highlighting and comments

- Replace CSS classes with inline styles to ensure visibility
- Add backgroundColor inline style for highlighted prop
- Add color and opacity inline styles for comment text
- This ensures the styling works regardless of CSS class support

Co-Authored-By: Colton Berry <[email protected]>

Author: devin-ai-integration[bot]

fern/components/File.tsx

@@ -16,10 +16,10 @@ export const File: React.FC<FileProps> = ({
   className = '' 
 }) => {
   const baseClasses = "grid items-center gap-2 py-1 px-2 rounded transition-colors";
-  const highlightedClasses = highlighted ? "files-row-highlighted" : "";
   const gridClasses = "grid-cols-[24px_24px_1fr_auto]";
-  const combinedClasses = `${baseClasses} ${gridClasses} ${highlightedClasses} ${className}`.trim();
+  const combinedClasses = `${baseClasses} ${gridClasses} ${className}`.trim();
 
+  const highlightStyle = highlighted ? { backgroundColor: 'rgba(255, 235, 59, 0.15)' } : {};
   const formattedComment = comment ? (comment.startsWith('#') ? comment : `# ${comment}`) : null;
 
   const content = (
@@ -39,7 +39,8 @@ export const File: React.FC<FileProps> = ({
       {/* Comment */}
       {formattedComment && (
         <span 
-          className="files-row-comment text-xs font-mono whitespace-nowrap overflow-hidden text-ellipsis" 
+          className="text-xs font-mono whitespace-nowrap overflow-hidden text-ellipsis" 
+          style={{ color: '#6b7280', opacity: 0.8 }}
           title={formattedComment}
         >
           {formattedComment}
@@ -53,14 +54,15 @@ export const File: React.FC<FileProps> = ({
       <a 
         href={href} 
         className={`${combinedClasses} hover:underline cursor-pointer no-underline`}
+        style={highlightStyle}
       >
         {content}
       </a>
     );
   }
 
   return (
-    <div className={combinedClasses}>
+    <div className={combinedClasses} style={highlightStyle}>
       {content}
     </div>
   );

fern/components/Folder.tsx

@@ -22,9 +22,10 @@ export const Folder: React.FC<FolderProps> = ({
   const [isOpen, setIsOpen] = useState(defaultOpen);
 
   const baseClasses = "grid items-center gap-2 py-1 px-2 rounded transition-colors";
-  const highlightedClasses = highlighted ? "files-row-highlighted" : "";
   const gridClasses = "grid-cols-[24px_24px_1fr_auto]";
-  const combinedClasses = `${baseClasses} ${gridClasses} ${highlightedClasses}`.trim();
+  const combinedClasses = `${baseClasses} ${gridClasses}`.trim();
+
+  const highlightStyle = highlighted ? { backgroundColor: 'rgba(255, 235, 59, 0.15)' } : {};
 
   const handleToggle = () => {
     setIsOpen(!isOpen);
@@ -67,7 +68,8 @@ export const Folder: React.FC<FolderProps> = ({
       <span className="text-default text-sm font-mono">{name}</span>
       {formattedComment && (
         <span 
-          className="files-row-comment text-xs font-mono whitespace-nowrap overflow-hidden text-ellipsis" 
+          className="text-xs font-mono whitespace-nowrap overflow-hidden text-ellipsis" 
+          style={{ color: '#6b7280', opacity: 0.8 }}
           title={formattedComment}
         >
           {formattedComment}
@@ -80,13 +82,15 @@ export const Folder: React.FC<FolderProps> = ({
     <a 
       href={href} 
       className={`${combinedClasses} hover:underline cursor-pointer no-underline`}
+      style={highlightStyle}
     >
       {content}
     </a>
   ) : (
     <button
       onClick={handleToggle}
       className={`${combinedClasses} w-full text-left cursor-pointer border-0 bg-transparent`}
+      style={highlightStyle}
       aria-expanded={isOpen}
       type="button"
     >