Merge pull request #4100 from ethereum/festyless

fe style improvements

Author: LianaHus

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

@@ -111,7 +111,7 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) =>
     return groupedActions.map((groupItem, groupIndex) =>
       groupItem.map((item, index) => {
         key++
-        const className = `remixui_liitem ${group !== item.group ? 'border-top' : ''}`
+        const className = `px-3 remixui_liitem ${group !== item.group ? 'border-top' : ''}`
         group = item.group
         if (item.name === 'Upload File') {
           return (

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

@@ -67,12 +67,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
 
   return (
     <>
-      <CustomTooltip placement="top" tooltipId="remixuilabelTooltip" tooltipClasses="text-nowrap" tooltipText={props.title}>
-        <span className="remixui_label" data-path={props.title} style={{fontWeight: 'bold'}}>
-          {props.title}
-        </span>
-      </CustomTooltip>
-      <span className="pl-0 pb-1">
+      <span data-id="spanContaining" className="pl-0 pb-1 w-50">
         {state.menuItems.map(({action, title, icon, placement}, index) => {
           if (action === 'uploadFile') {
             return (
@@ -83,7 +78,13 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
                 tooltipText={<FormattedMessage id={`filePanel.${action}`} defaultMessage={title} />}
                 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}`}>
+                <label
+                  id={action}
+                  style={{fontSize: '1.1rem', cursor: 'pointer'}}
+                  data-id={'fileExplorerUploadFile' + action}
+                  className={icon + ' mx-1 remixui_menuItem'}
+                  key={`index-${action}-${placement}-${icon}`}
+                >
                   <input
                     id="fileUpload"
                     data-id="fileExplorerFileUpload"
@@ -108,7 +109,13 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
                 tooltipText={<FormattedMessage id={`filePanel.${action}`} defaultMessage={title} />}
                 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}`}>
+                <label
+                  id={action}
+                  style={{fontSize: '1.1rem', cursor: 'pointer'}}
+                  data-id={'fileExplorerUploadFolder' + action}
+                  className={icon + ' mx-1 remixui_menuItem'}
+                  key={`index-${action}-${placement}-${icon}`}
+                >
                   <input
                     id="folderUpload"
                     data-id="fileExplorerFolderUpload"
@@ -151,7 +158,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
                       state.actions[action]()
                     }
                   }}
-                  className={'newFile ' + icon + ' pr-2 pl-1 remixui_newFile'}
+                  className={icon + ' mx-1 remixui_menuItem'}
                   key={`${action}-${title}-${index}`}
                 ></label>
               </CustomTooltip>

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

@@ -1,6 +1,6 @@
 import React, {useEffect, useState, useRef, SyntheticEvent} from 'react' // eslint-disable-line
 import {useIntl} from 'react-intl'
-import {TreeView, TreeViewItem} from '@remix-ui/tree-view' // eslint-disable-line
+import {TreeView} from '@remix-ui/tree-view' // eslint-disable-line
 import {FileExplorerMenu} from './file-explorer-menu' // eslint-disable-line
 import {FileExplorerContextMenu} from './file-explorer-context-menu' // eslint-disable-line
 import {FileExplorerProps, FileType, WorkSpaceState} from '../types'
@@ -358,7 +358,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
               data-id={`treeViewDivMenu`}
               className={`d-flex flex-row align-items-center`}
             >
-              <span className="w-100 pl-2">
+              <span className="w-100 pl-2 mt-1">
                 <div onClick={handleFileExplorerMenuClick}>
                   <FileExplorerMenu
                     title={''}
@@ -394,7 +394,8 @@ export const FileExplorer = (props: FileExplorerProps) => {
                     showIconsMenu={props.showIconsMenu}
                     hideIconsMenu={props.hideIconsMenu}
                   />
-                ))}
+                ))
+              }
             </TreeView>
           </div>
           <Draggable isDraggable={false} file={{ name: '/', path: '/', type: 'folder', isDirectory: true }} expandedPath={props.expandPath} handleClickFolder={null}>

libs/remix-ui/workspace/src/lib/css/file-explorer.css

@@ -23,10 +23,10 @@ input[type="file"] {
 .remixui_file               {
     padding           : 4px;
 }
-.remixui_newFile i {
+.remixui_menuItem i {
     cursor            : pointer;
 }
-.remixui_newFile:hover {
+.remixui_menuItem:hover {
     transform         : scale(1.3);
 }
 .remixui_menu {