simplify styles

Author: sprocketc

src/renderer/components.css

@@ -30,13 +30,12 @@
 }
 
 @utility button {
-  @apply relative text-center text-nowrap outline-default bg-transparent;
+  @apply relative text-center text-nowrap outline-default bg-transparent no-drag;
   color: var(--font-color);
   fill: var(--font-color);
   font-size: 1em;
   height: var(--button-size);
   line-height: var(--button-size);
-  -webkit-app-region: no-drag;
 
   &:hover {
     @apply overlay;

src/renderer/menubar/styles.css

@@ -3,33 +3,25 @@
 }
 
 .menubar-trigger {
-  @apply px-3 py-1.5 flex rounded-sm;
-  outline: none;
-  user-select: none;
-  line-height: 1;
-  color: var(--font-color);
-  align-items: center;
-  justify-content: space-between;
+  @apply px-3 py-1.5 flex rounded-sm outline-none select-none items-center leading-none;
 
   &[data-highlighted],
   &[data-state='open'] {
-    background-color: var(--overlay);
+    @apply overlay;
   }
 
   &:hover,
   &:focus {
-    color: var(--font-color-active);
-    background-color: var(--overlay);
+    @apply text-active overlay;
   }
 }
 
 .menu-content,
 .menu-sub-content {
-  @apply bg-secondary drop-shadow-lg p-1 z-10 rounded-sm;
+  @apply bg-secondary drop-shadow-lg p-1 z-10 rounded-sm no-drag;
   min-width: 200px;
   will-change: transform, opacity;
   border: 1px solid var(--border-color);
-  -webkit-app-region: no-drag;
 }
 
 .menu-item,

src/renderer/utilities.css

@@ -22,6 +22,10 @@
   -webkit-app-region: drag;
 }
 
+@utility no-drag {
+  -webkit-app-region: no-drag;
+}
+
 @utility overlay {
   background-color: var(--overlay);
 }

src/renderer/window/views.cljs

@@ -55,13 +55,14 @@
        :style {:z-index -1}}
       @(rf/subscribe [::document.subs/title-bar])]
      [:div.flex.h-full.flex-1.drag]
-     [button {:action [::theme.events/cycle-mode]
-              :title (str "Theme mode - " theme-mode)
-              :icon theme-mode
-              :class "bg-primary"}]
-     (when (and electron? (not fullscreen?) (not mac?))
-       (into [:div.text-right]
-             (map button (window-control-buttons maximized?))))
-     (when fullscreen?
-       [button {:action [::window.events/toggle-fullscreen]
-                :icon "arrow-minimize"}])]))
+     [:div.flex
+      [button {:action [::theme.events/cycle-mode]
+               :title (str "Theme mode - " theme-mode)
+               :icon theme-mode
+               :class "bg-primary"}]
+      (when (and electron? (not fullscreen?) (not mac?))
+        (into [:div.flex]
+              (map button (window-control-buttons maximized?))))
+      (when fullscreen?
+        [button {:action [::window.events/toggle-fullscreen]
+                 :icon "arrow-minimize"}])]]))