refactor

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,
-    Cpu,
-    FocusedClient,
-    PowerMenu,
-    Ram,
-    Storage,
-    SysTray,
-    Time,
-    Workspaces
-}
+  BatteryLevel,
+  Cpu,
+  FocusedClient,
+  PowerMenu,
+  Ram,
+  Storage,
+  SysTray,
+  Time,
+  Workspaces,
+  Media,
+};