Merge pull request #4292 from ethereum/selvi

left highlight for active plugin icon

libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx

@@ -84,15 +84,22 @@ const Icon = ({iconRecord, verticalIconPlugin, contextMenuAction, theme}: IconPr
     }
   }, [])
 
+
+  const stylePC = iconRecord.active ? 'flex-start' : 'center'
   return (
     <>
+      <div className='d-flex py-1' style={{width: 'auto', placeContent: stylePC}}>      
+        {iconRecord.active && <div
+          className='pt-1 bg-primary'
+          style={{width: "6px", height: "36px", position: 'relative', borderRadius: '24%'}}
+        ></div>}
         <CustomTooltip
           placement={name === 'settings' ? 'right' : name === 'search' ? 'top' : name === 'udapp' ? 'bottom' : 'top'}
           tooltipText={title}
           delay={{show: 1000, hide: 0}}
         >
           <div
-          className={`remixui_icon m-2  pt-1`}
+            className={`remixui_icon m-0  pt-1`}
             onClick={() => {
               ;(verticalIconPlugin as any).toggle(name)
             }}
@@ -127,6 +134,7 @@ const Icon = ({iconRecord, verticalIconPlugin, contextMenuAction, theme}: IconPr
             contextMenuAction={contextMenuAction}
           />
         ) : null}
+      </div>
     </>
   )
 }

libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css

@@ -3,6 +3,8 @@
     width: 42px;
     height: 42px;
     cursor: pointer;
+    justify-content: space-between;
+    align-self: center;
 }
   .remixui_homeIcon:hover {
     box-shadow: 0px 0px 14px -7px;
@@ -17,8 +19,6 @@
   .remixui_icons {
     display: flex;
     flex-flow: column nowrap;
-    justify-content: space-between;
-    align-items: center;
   }
   .remixui_icon:hover {
     box-shadow: 0px 0px 14px -7px;