From 6ff54e9f6b944252c7aa81b1480644d2a28ac921 Mon Sep 17 00:00:00 2001
From: jacobiclark <jacobcs@zoho.com>
Date: Thu, 31 Oct 2024 11:49:23 -0700
Subject: [PATCH] wip: Updated styling for tree view

---
 .../shared/DatasetTreeViewRenderer/index.jsx  | 23 ++++++++-----------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/src/renderer/src/components/shared/DatasetTreeViewRenderer/index.jsx b/src/renderer/src/components/shared/DatasetTreeViewRenderer/index.jsx
index dd2040582..89b8ca2b0 100644
--- a/src/renderer/src/components/shared/DatasetTreeViewRenderer/index.jsx
+++ b/src/renderer/src/components/shared/DatasetTreeViewRenderer/index.jsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Collapse, Text, Stack, UnstyledButton, TextInput } from "@mantine/core";
+import { Collapse, Text, Stack, UnstyledButton, TextInput, Flex } from "@mantine/core";
 import { useHover } from "@mantine/hooks";
 import {
   IconFolder,
@@ -52,19 +52,15 @@ const getFileTypeIcon = (fileName) => {
 
 // FileItem component
 const FileItem = ({ name, content, onFileClick, getFileBackgroundColor }) => (
-  <div
-    style={{
-      paddingLeft: 10,
-      display: "flex",
-      alignItems: "center",
-      gap: 5,
-      backgroundColor: getFileBackgroundColor(content.relativePath),
-    }}
+  <Flex
+    align="center"
+    gap="sm"
+    bg={getFileBackgroundColor(content.relativePath)}
     onClick={() => onFileClick(name, content)}
   >
     {getFileTypeIcon(name)}
     <Text>{name}</Text>
-  </div>
+  </Flex>
 );
 
 // FolderItem component
@@ -82,8 +78,8 @@ const FolderItem = ({
   const toggleFolder = () => setIsOpen((prev) => !prev);
 
   return (
-    <Stack gap={1}>
-      <div style={{ display: "flex", alignItems: "center", gap: 3 }}>
+    <Stack gap={1} ml="sm">
+      <Flex align="center" gap="sm">
         {isOpen ? (
           <IconFolderOpen
             size={FOLDER_ICON_SIZE}
@@ -97,14 +93,13 @@ const FolderItem = ({
           ref={ref}
           style={{
             backgroundColor: hovered ? "gray" : "transparent",
-            padding: "2px 5px",
             borderRadius: "4px",
           }}
           onClick={() => onFolderClick(name, content)}
         >
           <Text size="lg">{name}</Text>
         </UnstyledButton>
-      </div>
+      </Flex>
       <Collapse in={isOpen}>
         {content.filteredFolders?.map(([folderName, folderContent]) => (
           <FolderItem