style improvements and shift issue fix in FE

libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx

@@ -20,11 +20,11 @@ export const TreeViewItem = (props: TreeViewItemProps) => {
         onClick={() => !controlBehaviour && setIsExpanded(!isExpanded)}
       >
         {children && showIcon ? (
-          <div className={isExpanded ? `px-0 ${iconY}` : `px-1 ${iconX} caret caret_tv`} style={{visibility: children ? 'visible' : 'hidden'}}></div>
+          <div className={isExpanded ? `pl-2 ${iconY}` : `pl-2 ${iconX} caret caret_tv`} style={{visibility: children ? 'visible' : 'hidden'}}></div>
         ) : icon ? (
-          <div className={`pr-3 pl-1 ${icon} caret caret_tv`}></div>
+          <div className={`pr-3 pl-2 ${icon} caret caret_tv`}></div>
         ) : null}
-        <span className="w-100 pl-1">{label}</span>
+        <span className="w-100 pl-2">{label}</span>
       </div>
       {isExpanded ? children : null}
     </li>

libs/remix-ui/workspace/src/lib/components/file-explorer-menu.tsx

@@ -29,13 +29,13 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
       {
         action: 'uploadFile',
         title: 'Upload files into current workspace',
-        icon: 'fa fa-upload',
+        icon: 'far fa-upload',
         placement: 'top'
       },
       {
         action: 'uploadFolder',
         title: 'Upload folder into current workspace',
-        icon: 'fas fa-folder-upload',
+        icon: 'far fa-folder-upload',
         placement: 'top'
       },
       {
@@ -83,7 +83,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
                 tooltipText={<FormattedMessage id={`filePanel.${action}`} defaultMessage={title} />}
                 key={`index-${action}-${placement}-${icon}`}
               >
-                <label id={action} data-id={'fileExplorerUploadFile' + action} className={icon + ' mb-0 px-1 remixui_newFile'} key={`index-${action}-${placement}-${icon}`}>
+                <label id={action} style={{fontSize: '1.1rem', cursor: 'pointer'}} data-id={'fileExplorerUploadFile' + action} className={icon + ' mb-0 px-1 remixui_newFile'} key={`index-${action}-${placement}-${icon}`}>
                   <input
                     id="fileUpload"
                     data-id="fileExplorerFileUpload"
@@ -108,7 +108,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
                 tooltipText={<FormattedMessage id={`filePanel.${action}`} defaultMessage={title} />}
                 key={`index-${action}-${placement}-${icon}`}
               >
-                <label id={action} data-id={'fileExplorerUploadFolder' + action} className={icon + ' mb-0 px-1 remixui_newFile'} key={`index-${action}-${placement}-${icon}`}>
+                <label id={action} style={{fontSize: '1.1rem', cursor: 'pointer'}} data-id={'fileExplorerUploadFolder' + action} className={icon + ' mb-0 px-1 remixui_newFile'} key={`index-${action}-${placement}-${icon}`}>
                   <input
                     id="folderUpload"
                     data-id="fileExplorerFolderUpload"
@@ -134,8 +134,9 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
                 tooltipText={<FormattedMessage id={`filePanel.${action}`} defaultMessage={title} />}
                 key={`${action}-${title}-${index}`}
               >
-                <span
+                <label
                   id={action}
+                  style={{fontSize: '1.1rem', cursor: 'pointer'}}
                   data-id={'fileExplorerNewFile' + action}
                   onClick={(e) => {
                     e.stopPropagation()
@@ -152,7 +153,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
                   }}
                   className={'newFile ' + icon + ' px-1 remixui_newFile'}
                   key={`${action}-${title}-${index}`}
-                ></span>
+                ></label>
               </CustomTooltip>
             )
           }

libs/remix-ui/workspace/src/lib/components/file-render.tsx

@@ -86,7 +86,7 @@ export const FileRender = (props: RenderFileProps) => {
       <TreeViewItem
         id={`treeViewItem${file.path}`}
         iconX="pr-3 fa fa-folder"
-        iconY={props.expandPath.includes(file.path) ? 'pr-0 fa fa-folder-open' : 'pr-3 fa fa-folder'}
+        iconY={props.expandPath.includes(file.path) ? 'pr-3 fa fa-folder-open' : 'pr-3 fa fa-folder'}
         key={`${file.path + props.index}`}
         label={
           <>

libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

@@ -861,10 +861,10 @@ export function Workspace() {
         }}
       >
         <div className="d-flex flex-column w-100 pb-4 mb-2 remixui_fileexplorer" data-id="remixUIWorkspaceExplorer" onClick={resetFocus}>
-          <div>
+          <div className='mb-1'>
             <header>
               <div className="mx-2 my-2 d-flex flex-column">
-                <div className="d-flex">
+                <div className="mx-2 d-flex">
                   {currentWorkspace !== LOCALHOST ? (
                     <span className="remixui_topmenu d-flex">
                       <Dropdown id="workspacesMenuDropdown" data-id="workspacesMenuDropdown" onToggle={() => hideIconsMenu(!showIconsMenu)} show={showIconsMenu}>
@@ -904,6 +904,7 @@ export function Workspace() {
                     </label>
                   </span>
                 </div>
+                <div className='mx-2'>
                   <Dropdown id="workspacesSelect" data-id="workspacesSelect" onToggle={toggleDropdown} show={showDropdown}>
                     <Dropdown.Toggle
                       as={CustomToggle}
@@ -971,6 +972,7 @@ export function Workspace() {
                     </Dropdown.Menu>
                   </Dropdown>
                 </div>
+              </div>
             </header>
           </div>
           <div