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,49 +84,57 @@ const Icon = ({iconRecord, verticalIconPlugin, contextMenuAction, theme}: IconPr
     }
   }, [])
 
+
+  const stylePC = iconRecord.active ? 'flex-start' : 'center'
   return (
     <>
-      <CustomTooltip
+      <div className='d-flex py-1' style={{width: 'auto', placeContent: stylePC}}>      
-        placement={name === 'settings' ? 'right' : name === 'search' ? 'top' : name === 'udapp' ? 'bottom' : 'top'}
+        {iconRecord.active && <div
-        tooltipText={title}
+          className='pt-1 bg-primary'
-        delay={{show: 1000, hide: 0}}
+          style={{width: "6px", height: "36px", position: 'relative', borderRadius: '24%'}}
-      >
+        ></div>}
-        <div
+        <CustomTooltip
-          className={`remixui_icon m-2  pt-1`}
+          placement={name === 'settings' ? 'right' : name === 'search' ? 'top' : name === 'udapp' ? 'bottom' : 'top'}
-          onClick={() => {
+          tooltipText={title}
-            ;(verticalIconPlugin as any).toggle(name)
+          delay={{show: 1000, hide: 0}}
-          }}
-          {...{plugin: name}}
-          onContextMenu={(e: any) => {
-            e.preventDefault()
-            e.stopPropagation()
-            handleContextMenu(e)
-          }}
-          data-id={`verticalIconsKind${name}`}
-          id={`verticalIconsKind${name}`}
-          ref={iconRef}
         >
-          <img
+          <div
-            data-id={iconRecord.active ? `selected` : ''}
+            className={`remixui_icon m-0  pt-1`}
-            className={`${theme === 'dark' ? 'invert' : ''} ${theme} remixui_image ${iconRecord.active ? `selected-${theme}` : ''}`}
+            onClick={() => {
-            src={icon}
+              ;(verticalIconPlugin as any).toggle(name)
-            alt={name}
+            }}
+            {...{plugin: name}}
+            onContextMenu={(e: any) => {
+              e.preventDefault()
+              e.stopPropagation()
+              handleContextMenu(e)
+            }}
+            data-id={`verticalIconsKind${name}`}
+            id={`verticalIconsKind${name}`}
+            ref={iconRef}
+          >
+            <img
+              data-id={iconRecord.active ? `selected` : ''}
+              className={`${theme === 'dark' ? 'invert' : ''} ${theme} remixui_image ${iconRecord.active ? `selected-${theme}` : ''}`}
+              src={icon}
+              alt={name}
+            />
+            <Badge badgeStatus={badgeStatus} />
+          </div>
+        </CustomTooltip>
+        {showContext ? (
+          <VerticalIconsContextMenu
+            pageX={pageX}
+            pageY={pageY}
+            links={links}
+            profileName={name}
+            hideContextMenu={closeContextMenu}
+            canBeDeactivated={canDeactivate}
+            verticalIconPlugin={verticalIconPlugin}
+            contextMenuAction={contextMenuAction}
           />
-          <Badge badgeStatus={badgeStatus} />
+        ) : null}
-        </div>
+      </div>
-      </CustomTooltip>
-      {showContext ? (
-        <VerticalIconsContextMenu
-          pageX={pageX}
-          pageY={pageY}
-          links={links}
-          profileName={name}
-          hideContextMenu={closeContextMenu}
-          canBeDeactivated={canDeactivate}
-          verticalIconPlugin={verticalIconPlugin}
-          contextMenuAction={contextMenuAction}
-        />
-      ) : null}
     </>
   )
 }

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

@@ -3,7 +3,9 @@
     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;