Header icon consistency

src/main/frontend/components/header.css

@@ -17,6 +17,7 @@
   white-space: nowrap;
 
   > .l {
+    @apply pl-4;
     width: var(--ls-left-sidebar-width);
     height: 100%;
     align-items: center;
@@ -24,8 +25,8 @@
   }
 
   > .r {
+    @apply pr-4;
     align-items: center;
-    padding-right: 0.5rem;
     flex: 1;
     justify-content: flex-end;
   }
@@ -41,10 +42,7 @@
     transform: scale(0.8);
   }
 
-  a.button {
-    margin: 0 4px;
-    height: 30px;
-    min-width: 30px;
+  .button {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -119,18 +117,6 @@
       top: 1px;
     }
   }
-
-  &-left-menu {
-    &.button {
-      margin: 0;
-      padding: 0;
-    }
-
-    > .inner {
-      line-height: 0;
-      padding: 3px;
-    }
-  }
 }
 
 .is-electron.is-mac .cp__header {
@@ -191,11 +177,9 @@
   height: 14px;
 }
 
-a.button {
-  padding: 0.25rem;
-  opacity: 0.6;
+.button {
+  @apply h-8 px-2.5 py-1 rounded-md opacity-60;
   display: block;
-  border-radius: 4px;
   user-select: none;
 
   &:hover, &.active {
@@ -212,6 +196,10 @@ a.button {
   }
 }
 
+.button.icon {
+  @apply w-8 h-8 text-lg p-1;
+}
+
 .is-mac.is-electron :is(.cp__header, .cp__right-sidebar-topbar) :is(button, .button, a) {
   cursor: default !important;
 }
@@ -257,7 +245,7 @@ html.is-native-ipad {
       display: flex;
     }
 
-    a.button {
+    .button {
       opacity: 1;
     }
   }