icon alignment fixed

Author: LianaHus

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

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

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

@@ -12,7 +12,7 @@ interface OtherIconsProps {
 
 function IconList ({ verticalIconsPlugin, itemContextAction, icons, theme }: OtherIconsProps) {
   return (
-    <div id="otherIcons">
+    <div className="" id="otherIcons">
       {
         icons
           .map(p => (

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

@@ -19,7 +19,6 @@
     flex-flow: column nowrap;
     justify-content: space-between;
     align-items: center;
-    text-align: center;
   }
   .remixui_icon:hover {
     box-shadow: 0px 0px 14px -7px;
@@ -30,6 +29,7 @@
     width: 36px;
     height: 36px;
     border-radius: 8px;
+    align-items: center;
   }
   .remixui_icon img {
     width: 28px;
@@ -40,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;
@@ -120,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 {
@@ -133,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

@@ -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 my-0'}
-              />) : 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>
   )