Update icons & styling

webview-ui/src/components/FileList/FileNode.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx";
 
 import { useWorkspaceContext } from "../../Context";
 import FileNodeChildren from "./FileNodeChildren";
-import nextflowIcon from "../../images/nextflow-icon.svg";
+import processIcon from "../../images/process.svg";
 
 import styles from "./styles.module.css";
 
@@ -25,7 +25,7 @@ const FileNode = ({ node }: Props) => {
     <div className={clsx(styles.row, { [styles[typeStyleName]]: !!type })}>
       <label className={clsx(styles.item)}>
         <span className={styles.name} onClick={() => openFile(node)}>
-          <img className={styles.icon} src={nextflowIcon} />
+          <img className={styles.icon} src={processIcon} />
           {node.name}
         </span>
         {type === "processes" && (

webview-ui/src/components/FileList/styles.module.css

@@ -19,8 +19,8 @@
       width: 100%;
     }
     & .icon {
-      width: 10px;
-      height: 10px;
+      width: 15px;
+      height: 14px;
       margin-right: 6px;
     }
   }

webview-ui/src/components/FileTree/FileNode.tsx

@@ -3,6 +3,9 @@ import { useState, useEffect } from "react";
 import { useWorkspaceContext } from "../../Context";
 import styles from "./styles.module.css";
 import { FileNode as FileNodeType } from "../../Context/WorkspaceProvider/types";
+import folderClosed from "../../images/folder-closed.svg";
+import folderOpen from "../../images/folder-open.svg";
+import file from "../../images/file.svg";
 
 type Props = {
   node: FileNodeType;
@@ -53,16 +56,31 @@ const FileNode = ({ node, level = 0, searchTerm }: Props) => {
   }
   if (!hasChildren && !isMatch) return null;
 
+  let icon = null;
+  let iconClassName = "";
+  if (isFolder) {
+    if (expanded) {
+      icon = folderOpen;
+      iconClassName = styles.folderIconOpen;
+    } else {
+      icon = folderClosed;
+      iconClassName = styles.folderIconClosed;
+    }
+  } else {
+    icon = file;
+    iconClassName = styles.fileIcon;
+  }
+
   return (
-    <div className={clsx(styles.row, { [styles.folder]: isFolder })}>
+    <div
+      className={clsx(styles.row, {
+        [styles.folder]: isFolder,
+        [styles.expanded]: expanded
+      })}
+    >
       <label className={clsx(styles.item)}>
         <span className={styles.name} onClick={handleClick}>
-          <i
-            className={clsx(
-              "codicon",
-              isFolder ? "codicon-symbol-method" : "codicon-symbol-method"
-            )}
-          />
+          <img src={icon} className={clsx(styles.icon, iconClassName)} />
           {node.name}
         </span>
         {hasChildren && (

webview-ui/src/components/FileTree/styles.module.css

@@ -21,17 +21,12 @@
       align-items: center;
       padding: 6px 8px;
       width: 100%;
-      & i {
-        margin-right: 6px;
-        opacity: 0.8;
-        font-size: 14px;
-      }
     }
   }
   & .children {
     padding: 0 0 4px 0;
     margin-left: 7px;
-    border-left: 1px solid var(--vscode-dropdown-border);
+    border-left: 1px solid var(--vscode-tree-inactiveIndentGuidesStroke);
   }
   &.folder {
     & > .item > .name {
@@ -42,3 +37,15 @@
     }
   }
 }
+.icon {
+  margin-right: 6px;
+  height: 13px;
+  width: 20px;
+  &.fileIcon {
+    width: 11px;
+    height: 14px;
+  }
+  &.folderIconOpen {
+    transform: translateX(1px);
+  }
+}

webview-ui/src/styles/index.css

@@ -8,7 +8,7 @@ html,
 body,
 #root,
 #root > * {
-  background-color: var(--vscode-editor-background) !important;
+  background-color: var(--vscode-sideBar-background) !important;
 }
 :root {
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
@@ -17,7 +17,6 @@ body,
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  /* background-color: #242424; */
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;