refactor

style.scss

@@ -1,4 +1,6 @@
 // https://gitlab.gnome.org/GNOME/gtk/-/blob/gtk-3-24/gtk/theme/Adwaita/_colors-public.scss
+@use "./widget/modules/Media/Media.scss";
+@use "./widget/modules/Powermenu/PowerMenu.scss";
 $fg-color: #{"@theme_fg_color"};
 $bg-color: #{"@theme_bg_color"};
 
@@ -121,41 +123,7 @@ window.Bar {
     // }
 }
 
-window.Media {
+/* window.Powermenu {
-    margin: 5px;
-    padding: 5px;
-    background-color: transparent;
-    box {
-        margin: 5px;
-        background-color: black;
-        border-radius: 25px;
-        padding: 2px;
-    }
-
-    box.title {
-        padding: 5px;
-        margin: 0;
-        label {
-            font-weight: bold;
-            font-size: 1.1em;
-        }
-    }
-
-    .Cover {
-        min-width: 120px;
-        min-height: 120px;
-        border-radius: 9px;
-        margin-right: 0.6rem;
-        background-size: contain;
-        background-position: center;
-    }
-
-    label.artist {
-        padding: 5px;
-    }
-}
-
-window.Powermenu {
     margin: 5px;
     background-color: transparent;
     box {
@@ -176,4 +144,4 @@ window.Powermenu {
             }
         }
     }
-}
+} */

widget/Bar.tsx

@@ -11,9 +11,9 @@ import {
   FocusedClient,
   Time,
   SysTray,
+  Media,
 } from "./modules/export";
 import { close_all_menus } from "./utils/windows";
-import Media from "./Media";
 
 export default function Bar(gdkmonitor: Gdk.Monitor) {
   const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;

widget/modules/Media/Media.scss

@@ -0,0 +1,33 @@
+window.Media {
+    margin: 5px;
+    padding: 5px;
+    background-color: transparent;
+    box {
+        margin: 5px;
+        background-color: black;
+        border-radius: 25px;
+        padding: 2px;
+    }
+
+    box.title {
+        padding: 5px;
+        margin: 0;
+        label {
+            font-weight: bold;
+            font-size: 1.1em;
+        }
+    }
+
+    .Cover {
+        min-width: 120px;
+        min-height: 120px;
+        border-radius: 9px;
+        margin-right: 0.6rem;
+        background-size: contain;
+        background-position: center;
+    }
+
+    label.artist {
+        padding: 5px;
+    }
+}

widget/modules/Powermenu/PowerMenu.scss

@@ -0,0 +1,22 @@
+window.Powermenu {
+    margin: 5px;
+    background-color: transparent;
+    box {
+        margin: 5px;
+        background-color: black;
+        border-radius: 25px;
+        // padding: 10px;
+        button {
+            all: unset;
+            margin: 2px;
+            padding: 5px 15px 5px 13px;
+            background-color: black;
+            border-radius: 25px;
+            transition: 300ms;
+
+            &:hover {
+                background-color: gray;
+            }
+        }
+    }
+}

widget/modules/export.ts

@@ -1,21 +1,23 @@
 import BatteryLevel from "./Battery";
 import Cpu from "./Cpu";
 import FocusedClient from "./FocusedClient";
-import PowerMenu from "./PowerMenu";
+import PowerMenu from "./Powermenu/PowerMenu";
 import Ram from "./Ram";
 import Storage from "./Storage";
 import SysTray from "./SysTray";
 import Time from "./Time";
 import Workspaces from "./Workspaces";
+import Media from "./Media/Media";
 
 export {
-    BatteryLevel,
+  BatteryLevel,
-    Cpu,
+  Cpu,
-    FocusedClient,
+  FocusedClient,
-    PowerMenu,
+  PowerMenu,
-    Ram,
+  Ram,
-    Storage,
+  Storage,
-    SysTray,
+  SysTray,
-    Time,
+  Time,
-    Workspaces
+  Workspaces,
-}
+  Media,
+};