chore: improve file tree style

Author: drl990114

apps/desktop/src/components/FileTree/FileNode.tsx

@@ -347,7 +347,7 @@ function FileNode({
             <div style={{ flex: 1 }}>
               {node.data?.kind === 'dir' ? (
                 <i
-                  className={`${node.isOpen ? 'ri-folder-5-line' : 'ri-folder-3-line'} file-icon`}
+                  className={`${node.isOpen ? 'ri-folder-5-fill' : 'ri-folder-3-fill'} file-icon`}
                 />
               ) : (
                 <i className={`${getFileIconClass(node.data)} file-icon`} />
@@ -423,8 +423,9 @@ function FileNode({
 export default FileNode
 
 const extFileIconClassMap: Record<string, string> = {
-  md: 'ri-markdown-fill',
-  markdown: 'ri-markdown-fill',
+  md: 'ri-markdown-line',
+  markdown: 'ri-markdown-line',
+  json: 'ri-file-code-line',
 }
 
 const getFileIconClass = (file: IFile) => {
@@ -433,5 +434,5 @@ const getFileIconClass = (file: IFile) => {
     return extFileIconClassMap[ext]
   }
 
-  return 'ri-file-text-fill'
+  return 'ri-file-line'
 }

apps/desktop/src/components/FileTree/styles.ts

@@ -16,19 +16,19 @@ export const NodeContainer = styled.div<NodeContainerProps>`
   color: ${(props) =>
     props.highlight || props.selected
       ? props.theme.primaryFontColor
-      : props.theme.primaryFontColor};
+      : props.theme.unselectedFontColor};
   background-color: ${(props) =>
     props.highlight
       ? props.theme.accentColorFocused
       : props.selected
         ? props.theme.fileTreeSelectedBgColor
         : 'transparent'};
-  border: 1px solid
-    ${(props) => (props.selected ? props.theme.borderColorFocused : 'transparent')};
+  border: 1px solid ${(props) => (props.selected ? props.theme.borderColorFocused : 'transparent')};
   box-sizing: border-box;
 
   &:hover {
     background-color: ${(props) => props.theme.fileTreeSelectedBgColor};
+    color: ${(props) => props.theme.primaryFontColor};
   }
 
   .file-icon {