review comment changes

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

@@ -41,7 +41,7 @@
   }
   .remixui_treeview {
     overflow-y        : auto;
-  }  
+  }
   .remixui_dialog {
     display: flex;
     flex-direction: column;
@@ -51,7 +51,7 @@
     word-break: break-word;
   }
   .remixui_menuicon {
-    padding-right   : 10px;
+    padding-right   : 30px;
   }
   .remixui_menuicon:hover {
     transform: scale(1.3);
@@ -61,7 +61,7 @@
     align-items: center;
     height: 32px;
   }
-  
+
   .remixui_cloneContainer input {
     height: 32px;
     border-top-left-radius: 0 !important;
@@ -78,7 +78,7 @@
   .remixui_menuicon .bs-popover-auto[x-placement^="bottom"] > .arrow::after, .bs-popover-bottom > .arrow::after {
     border-bottom-color: var(--dark) !important
   }
-  
+
   .custom-dropdown-items {
     padding: 0.25rem 0.25rem;
     border-radius: .25rem;
@@ -101,4 +101,7 @@
   .remixuimenuicon_shadow:hover {
     box-shadow: 0px 0px 14px -7px;
   }
-  
+
+  .remixui_topmenu {
+    padding-bottom: 0.1rem;
+  }

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

@@ -294,6 +294,30 @@ export function Workspace () {
   }
 
   const workspaceMenuIcons = [
+    <OverlayTrigger
+      placement="top-start"
+      overlay={
+        <Tooltip id="createWorkspaceTooltip" className="text-nowrap">
+          <span>Create</span>
+        </Tooltip>
+      }
+    >
+      <div>
+        <span
+          hidden={currentWorkspace === LOCALHOST}
+          id='workspaceCreate'
+          data-id='workspaceCreate'
+          onClick={(e) => {
+            e.stopPropagation()
+            createWorkspace()
+            _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspaceCreate'])
+          }}
+          className='far fa-plus remixui_menuicon'
+        >
+        </span>
+        <span className="pl-3">Create</span>
+      </div>
+    </OverlayTrigger>,
     <OverlayTrigger
       placement='right-start'
       overlay={
@@ -422,7 +446,7 @@ export function Workspace () {
                     Workspaces
                   </label>
                 </span>
-                <span className="remixui_menu d-flex justify-content-between align-items-end w-75">
+                <span className="remixui_menu remixui_topmenu d-flex justify-content-between align-items-end w-75">
                   <OverlayTrigger
                     placement="top-start"
                     overlay={
@@ -431,18 +455,20 @@ export function Workspace () {
                       </Tooltip>
                     }
                   >
-                    <span
-                    hidden={currentWorkspace === LOCALHOST}
-                    id='workspaceCreate'
-                    data-id='workspaceCreate'
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      createWorkspace()
-                      _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspaceCreate'])
-                    }}
-                    className='far fa-plus-square remixui_menuicon'
-                    >
-                  </span>
+                    <div>
+                      <span
+                        hidden={currentWorkspace === LOCALHOST}
+                        id='workspaceCreate'
+                        data-id='workspaceCreate'
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          createWorkspace()
+                          _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspaceCreate'])
+                        }}
+                        className='far fa-plus remixui_menuicon'
+                        >
+                      </span>
+                    </div>
                   </OverlayTrigger>
                   <Dropdown id="workspacesMenuDropdown" data-id="workspacesMenuDropdown" onToggle={() => hideIconsMenu(!showIconsMenu)} show={showIconsMenu}>
                     <Dropdown.Toggle
@@ -452,7 +478,7 @@ export function Workspace () {
                       }}
                       icon={'fas fa-bars'}
                     ></Dropdown.Toggle>
-                    <Dropdown.Menu as={CustomMenu} data-id="wsdropdownMenu" className='w-100 custom-dropdown-items' align={'right'}>
+                    <Dropdown.Menu as={CustomMenu} data-id="wsdropdownMenu" className='custom-dropdown-items' align={'right'}>
                       {
                       workspaceMenuIcons.map(m => (
                         <Dropdown.Item>