Merge pull request #1731 from ethereum/editorMakeup

tabs UI improvements

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

@@ -1,6 +1,6 @@
 .remix-ui-tabs {
     display: -webkit-box; 
-    max-height: 42px
+    max-height: 2.15rem;
 }
 .remix-ui-tabs li {
     display: inline-block;
@@ -28,12 +28,11 @@
 }
 .close-tabs {
     visibility: hidden;
-    padding-top: 4px;
     font-size: medium;
 }
 .iconImage {
-    width: 16px;
+    width: 1rem;
-    height: 16px;
+    height: 1rem;
 }
 .active {
     border: 1px solid transparent;
@@ -44,11 +43,6 @@
     overflow-x: auto;
     overflow-y: hidden;
     white-space: nowrap;
-    max-width: 1000px;
-}
-.left-icon {
-    width: 70px;
-    height: 49px;
 }
 
 /* Hide scrollbar for Chrome, Safari and Opera */

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

@@ -33,7 +33,7 @@ export const TabsUI = (props: TabsUIProps) => {
 
   const renderTab = (tab, index) => {
     const classNameImg = 'my-1 mr-1 text-dark ' + tab.iconClass
-    const classNameTab = 'nav-item nav-link tab' + (index === currentIndexRef.current ? ' active' : '')
+    const classNameTab = 'nav-item nav-link d-flex justify-content-center align-items-center px-2 py-1 tab' + (index === currentIndexRef.current ? ' active' : '')
     return (
       <div ref={el => { tabsRef.current[index] = el }} className={classNameTab} title={tab.tooltip}>
         {tab.icon ? (<img className="my-1 mr-1 iconImage" src={tab.icon} />) : (<i className={classNameImg}></i>)}
@@ -62,16 +62,24 @@ export const TabsUI = (props: TabsUIProps) => {
   }, [])
 
   return (
-    <div className="remix-ui-tabs header nav nav-tabs">
+    <div className="remix-ui-tabs d-flex justify-content-between border-0 header nav-tabs">
-      <div className="d-flex flex-row justify-content-center align-items-center left-icon">
+      <div className="d-flex flex-row" style={ { maxWidth: 'fit-content', width: '97%' } }>
-        <span data-id="tabProxyZoomOut" className="btn btn-sm px-1 fas fa-search-minus text-dark" title="Zoom out" onClick={() => props.onZoomOut()}></span>
+        <div className="d-flex flex-row justify-content-center align-items-center m-1 mt-2">
-        <span data-id="tabProxyZoomIn" className="btn btn-sm px-1 fas fa-search-plus text-dark" title="Zoom in" onClick={() => props.onZoomIn()}></span>
+          <span data-id="tabProxyZoomOut" className="btn btn-sm px-2 fas fa-search-minus text-dark" title="Zoom out" onClick={() => props.onZoomOut()}></span>
-        <i className="d-flex flex-row justify-content-center align-items-center far fa-sliders-v px-1" title="press F1 when focusing the editor to show advanced configuration settings"></i>
+          <span data-id="tabProxyZoomIn" className="btn btn-sm px-2 fas fa-search-plus text-dark" title="Zoom in" onClick={() => props.onZoomIn()}></span>
+        </div>
+        <Tabs
+          className="tab-scroll"
+          selectedIndex={selectedIndex}
+          onSelect={index => { props.onSelect(index); currentIndexRef.current = index; setSelectedIndex(index) }}
+        >
+          <TabList className="d-flex flex-row justify-content-center align-items-center">
+            {props.tabs.map((tab, i) => <Tab className="py-1" key={tab.name}>{renderTab(tab, i)}</Tab>)}
+          </TabList>
+          {props.tabs.map((tab) => <TabPanel key={tab.name} ></TabPanel>)}
+        </Tabs>
       </div>
-      <Tabs className="tab-scroll" selectedIndex={selectedIndex} onSelect={index => { props.onSelect(index); currentIndexRef.current = index; setSelectedIndex(index) }} >
+      <i className="mt-2 mr-2 fas fa-arrows-alt-h" title="Scroll to see all tabs"></i>
-        <TabList>{props.tabs.map((tab, i) => <Tab key={tab.name}>{renderTab(tab, i)}</Tab>)}</TabList>
-        {props.tabs.map((tab) => <TabPanel key={tab.name} ></TabPanel>)}
-      </Tabs>
     </div>
   )
 }