Merge pull request #1985 from ethereum/hhhh

fixed icons paddings on verticalicons and PM selection from home

Author: ioedeveloper

libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx

@@ -173,7 +173,6 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
     _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'sourcify'])
   }
   const startPluginManager = async () => {
-    await plugin.appManager.activatePlugin('pluginManager')
     plugin.verticalIcons.select('pluginManager')
   }
 

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

@@ -7,7 +7,7 @@ interface HomeProps {
 function Home ({ verticalIconPlugin }: HomeProps) {
   return (
     <div
-      className="mt-3 my-1 remixui_homeIcon"
+      className="mt-2 my-1 remixui_homeIcon"
       onClick={async () => await verticalIconPlugin.activateHome()}
       {...{ plugin: 'home'}}
       title="Home"

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

@@ -85,7 +85,7 @@ const Icon = ({
   return (
     <>
       <div
-        className={`remixui_icon m-2 pl-1`}
+        className={`remixui_icon m-2  pt-1`}
         onClick={() => {
           (verticalIconPlugin as any).toggle(name)
         }}

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

@@ -29,6 +29,7 @@
     width: 36px;
     height: 36px;
     border-radius: 8px;
+    align-items: center;
   }
   .remixui_icon img {
     width: 28px;
@@ -39,15 +40,12 @@
 
   .remixui_icon .selected-dark {
     filter: invert(1) grayscale(1);
-    
   }
 
   .remixui_icon .selected-light {
     filter: invert(0) grayscale(1);
   }
 
-  .remixui_image {
-  }
   .remixui_icon svg {
     width: 28px;
     height: 28px;
@@ -119,9 +117,12 @@
   }
   .remixui_default-icons-container {
     border-bottom: 2px solid #3f4455;
+    text-align: center;
   }
   .remixui_icon-chevron {
     z-index: 1000;
+    cursor: pointer;
+    align-items: center;
   }
 
   .remixui_settings {
@@ -132,7 +133,3 @@
     list-style: none;
     margin: 0px;
   }
-
-  .remixui_icon-chevron {
-    cursor: pointer;
-  }

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

@@ -90,7 +90,7 @@ const RemixUiVerticalIconsPanel = ({
                 <Chevron
                   direction='up'
                   divElementRef={scrollableRef}
-                  cssRule={'fa fa-chevron-up remixui_icon-chevron mt-0 mb-0 ml-1 pl-3'}
+                  cssRule={'fa fa-chevron-up remixui_icon-chevron my-0'}
                 />
               ) : null
           }
@@ -109,19 +109,19 @@ const RemixUiVerticalIconsPanel = ({
             itemContextAction={itemContextAction}
           />
         </div>
-            <div>
-              { scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight ? (<Chevron
-                divElementRef={scrollableRef}
-                direction='down'
-                cssRule={'fa fa-chevron-down remixui_icon-chevron mt-0 mb-0 ml-1 pl-3'}
-              />) : null }
-              <IconList
-                theme={theme}
-                icons={icons.filter((p) => p.profile.name === 'settings' || p.profile.name === 'pluginManager')}
-                verticalIconsPlugin={verticalIconsPlugin}
-                itemContextAction={itemContextAction}
-              />
-            </div>
+        <div className="remixui_default-icons-container border-0">
+          { scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight ? (<Chevron
+            divElementRef={scrollableRef}
+            direction='down'
+            cssRule={'fa fa-chevron-down remixui_icon-chevron my-0'}
+          />) : null }
+          <IconList
+            theme={theme}
+            icons={icons.filter((p) => p.profile.name === 'settings' || p.profile.name === 'pluginManager')}
+            verticalIconsPlugin={verticalIconsPlugin}
+            itemContextAction={itemContextAction}
+          />
+        </div>
       </div>
     </div>
   )