Align icons in left sidebar

src/main/frontend/components/onboarding/index.css

@@ -487,7 +487,7 @@ body[data-page=import] {
 
     .bd {
       ul a {
-        padding: 2px 4px !important;
+        padding: 2px 8px !important;
       }
     }
   }

src/main/frontend/components/sidebar.cljs

@@ -47,7 +47,7 @@
   [:div.nav-content-item.is-expand
    {:class class}
    [:div.nav-content-item-inner
-    [:div.header.items-center
+    [:div.header.items-center.mb-1
      {:on-click (fn [^js/MouseEvent e]
                   (let [^js target (.-target e)
                         ^js parent (.closest target ".nav-content-item")]

src/main/frontend/components/sidebar.css

@@ -82,11 +82,13 @@
   }
 
   .page-icon {
+    @apply mr-1 align-baseline;
+    width: 16px;
+    height: 16px;
     text-align: center;
     display: inline-block;
     line-height: 1em;
-    color: #aaa;
-    padding: 0 4px 0 8px;
+    color: var(--ls-icon-color);
   }
 
   a.item {
@@ -120,12 +122,12 @@
     }
 
     .header {
+      @apply px-6 py-1;
       display: flex;
       justify-content: space-between;
       align-items: center;
       user-select: none;
       cursor: pointer;
-      padding: 4px 25px;
 
       > span {
         > a {
@@ -173,7 +175,6 @@
         > span {
           font-size: 11px;
           font-weight: 600;
-          padding-top: 2px;
         }
       }
     }
@@ -188,7 +189,7 @@
 
         a {
           width: 100%;
-          padding: 2px 18px;
+          padding: 2px 24px;
           display: block;
           text-overflow: ellipsis;
           overflow: hidden;