Added folder icons

client/modules/IDE/components/FileNode.jsx

@@ -7,10 +7,8 @@ import { withTranslation } from 'react-i18next';
 
 import * as IDEActions from '../actions/ide';
 import * as FileActions from '../actions/files';
-import DownArrowIcon from '../../../images/down-filled-triangle.svg';
-import FolderRightIcon from '../../../images/triangle-arrow-right.svg';
-import FolderDownIcon from '../../../images/triangle-arrow-down.svg';
 import FileIcon from '../../../images/file.svg';
+import { FolderClose, FolderOpen, ShowOptionIcon } from './FolderIcon';
 
 function parseFileName(name) {
   const nameArray = name.split('.');
@@ -278,23 +276,15 @@ class FileNode extends React.Component {
                   aria-label={t('FileNode.OpenFolderARIA')}
                   title={t('FileNode.OpenFolderARIA')}
                 >
-                  <FolderRightIcon
-                    className="folder-right"
-                    focusable="false"
-                    aria-hidden="true"
-                  />
+                  <FolderClose />
                 </button>
                 <button
                   className="sidebar__file-item-open"
                   onClick={this.hideFolderChildren}
                   aria-label={t('FileNode.CloseFolderARIA')}
                   title={t('FileNode.CloseFolderARIA')}
                 >
-                  <FolderDownIcon
-                    className="folder-down"
-                    focusable="false"
-                    aria-hidden="true"
-                  />
+                  <FolderOpen />
                 </button>
               </div>
             )}
@@ -330,7 +320,7 @@ class FileNode extends React.Component {
               onBlur={this.onBlurComponent}
               onFocus={this.onFocusComponent}
             >
-              <DownArrowIcon focusable="false" aria-hidden="true" />
+              <ShowOptionIcon />
             </button>
             <div className="sidebar__file-item-options">
               <ul title="file options">

client/modules/IDE/components/FolderIcon.jsx

@@ -0,0 +1,17 @@
+import { FaChevronDown } from 'react-icons/fa6';
+import { FaChevronRight } from 'react-icons/fa6';
+import { BsThreeDotsVertical } from 'react-icons/bs';
+
+import React from 'react';
+
+export function FolderOpen() {
+  return <FaChevronDown />;
+}
+
+export function FolderClose() {
+  return <FaChevronRight />;
+}
+
+export function ShowOptionIcon() {
+  return <BsThreeDotsVertical />;
+}

client/styles/components/_sidebar.scss

@@ -170,8 +170,11 @@
 }
 
 .sidebar__file-item-show-options {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: #{20 / $base-font-size}rem;
-  height: #{20 / $base-font-size}rem;
+  height: 100%;
   @include icon();
   @include themify() {
     margin-right: #{5 / $base-font-size}rem;
@@ -192,7 +195,7 @@
     }
   }
   & svg {
-    width: #{10 / $base-font-size}rem;
+    width: 100%;
   }
   .sidebar__file-item--open > .file-item__content & {
     display: inline-block;