update and refactor

widget/modules/Volume/Volume.scss

@@ -0,0 +1,12 @@
+.VolumeMenuButton {
+    all: unset;
+    background-color: rgb(70, 70, 70);
+    border-radius: 25px;
+    border: 3pt solid black;
+    .VolumeBlock {
+        border-radius: 25px;
+        icon {
+            padding: 0 8px;
+        }
+    }
+}

widget/modules/Volume/Volume.tsx

@@ -0,0 +1,15 @@
+import Wp from "gi://AstalWp";
+import { bind } from "astal";
+
+export default function Volume() {
+  const speaker = Wp.get_default()?.audio.defaultSpeaker!;
+  const microphone = Wp.get_default()?.audio.defaultMicrophone!;
+  return (
+    <button className="VolumeMenuButton" onClicked="pavucontrol">
+      <box className="VolumeBlock">
+        <icon className="VolumeIcon" icon={bind(speaker, "volumeIcon")} />
+        <icon className="VolumeIcon" icon={bind(microphone, "volumeIcon")} />
+      </box>
+    </button>
+  );
+}