Fix NerdFont icon alignments. (#143)

* WIP

* Fix nerdfont icon alignments

* Ship needed fonts

* Remove italicised fonts

* Update readme and separate OSD settings into their own category.

* Dashboard styling updates

---------

Co-authored-by: matavach <erik@matijevich.org>

README.md

@@ -3,6 +3,9 @@ A panel built for Hyprland with [Aylur's Gtk Shell](https://github.com/Aylur/ags
 
 ![HyprPanel](./assets/HyprPanel.png)
 
+## Installation
+The [HyprPanel Wiki](https://hyprpanel.com/getting_started/installation.html) contains in depth instructions for installing the panel and all of its dependencies. The instructions below are general instructions for installing the panel.
+
 ## Requirements
 Bun
 

config.js

@@ -33,7 +33,7 @@ try {
     }
 
     if (v.ags[1] < v.expect[1] || v.ags[2] < v.expect[2]) {
-        print(`my config needs at least v${v.expect.join(".")}, yours is v${v.ags.join(".")}`)
+        print(`HyprPanel needs atleast v${v.expect.join(".")} of AGS, yours is v${v.ags.join(".")}`)
         App.quit()
     }
 

install_fonts.sh

@@ -0,0 +1,28 @@
+#!/bin/bash
+
+SOURCE_DIR="./assets/fonts"
+DEST_DIR="$HOME/.local/share/fonts"
+DEST_PATH="$DEST_DIR/NFP"
+
+if [ ! -d "$SOURCE_DIR" ]; then
+    echo "Source directory '$SOURCE_DIR' does not exist."
+    exit 1
+fi
+
+if [ ! -d "$DEST_PATH" ]; then
+    echo "Destination directory '$DEST_PATH' does not exist. Creating it..."
+    mkdir -p "$DEST_PATH"
+fi
+
+if [ -z "$(ls -A "$SOURCE_DIR")" ]; then
+    echo "Source directory '$SOURCE_DIR' is empty. No files to copy."
+    exit 1
+fi
+
+echo "Copying fonts from '$SOURCE_DIR' to '$DEST_PATH'..."
+cp -r "$SOURCE_DIR"/* "$DEST_PATH"
+
+echo "Updating font cache..."
+fc-cache -fv
+
+echo "Fonts installed successfully."

modules/bar/bluetooth/index.ts

@@ -6,7 +6,7 @@ import { openMenu } from "../utils.js";
 const Bluetooth = () => {
     const btIcon = Widget.Label({
         label: bluetooth.bind("enabled").as((v) => v ? "󰂯" : "󰂲"),
-        class_name: "bar-button-icon bluetooth",
+        class_name: "bar-button-icon bluetooth txt-icon bar",
     });
 
     const btText = Widget.Label({

modules/bar/media/index.ts

@@ -63,7 +63,7 @@ const Media = () => {
                 child: Widget.Box({
                     children: [
                         Widget.Label({
-                            class_name: "bar-button-icon media",
+                            class_name: "bar-button-icon media txt-icon bar",
                             label: songIcon.bind("value").as(v => v || "󰝚"),
                         }),
                         Widget.Label({

modules/bar/menu/index.ts

@@ -6,7 +6,7 @@ const Menu = () => {
     return {
         component: Widget.Box({
             child: Widget.Label({
-                class_name: "bar-menu_label",
+                class_name: "bar-menu_label txt-icon bar",
                 label: options.bar.launcher.icon.bind("value"),
             }),
         }),

modules/bar/notifications/index.ts

@@ -18,7 +18,7 @@ export const Notifications = () => {
                     (notif, dnd, showTotal) => {
                         const notifIcon = Widget.Label({
                             hpack: "center",
-                            class_name: "bar-button-icon notifications",
+                            class_name: "bar-button-icon notifications txt-icon bar",
                             label: dnd ? "󰂛" : notif.length > 0 ? "󱅫" : "󰂚",
                         });
 

modules/bar/volume/index.ts

@@ -3,8 +3,6 @@ const audio = await Service.import("audio");
 import { openMenu } from "../utils.js";
 import options from "options";
 
-import { globalMousePos } from "globals.js";
-
 const Volume = () => {
     const icons = {
         101: "󰕾",
@@ -30,7 +28,7 @@ const Volume = () => {
     const volIcn = Widget.Label({
         vpack: "center",
         label: getIcon(),
-        class_name: "bar-button-icon volume",
+        class_name: "bar-button-icon volume txt-icon bar",
     });
 
     const volPct = Widget.Label({

modules/bar/window_title/index.ts

@@ -31,7 +31,7 @@ const ClientTitle = () => {
         component: Widget.Box({
             children: [
                 Widget.Label({
-                    class_name: "bar-button-icon windowtitle",
+                    class_name: "bar-button-icon windowtitle txt-icon bar",
                     label: hyprland.active.bind("client").as((v) => filterTitle(v).icon),
                 }),
                 Widget.Label({

modules/bar/workspaces/index.ts

@@ -188,7 +188,7 @@ const Workspaces = (monitor = -1, ws = 8) => {
                                         ],
                                         (show_icons, show_numbered, numbered_active_indicator) => {
                                             if (show_icons) {
-                                                return `workspace-icon`;
+                                                return `workspace-icon txt-icon bar`;
                                             }
                                             if (show_numbered) {
                                                 const numActiveInd = hyprland.active.workspace.id === i

modules/menus/audio/available/InputDevices.ts

@@ -37,8 +37,8 @@ const renderInputDevices = (inputDevices: Stream[]) => {
                                     .bind("description")
                                     .as((v) =>
                                         device.description === v
-                                            ? "menu-button-icon active input"
+                                            ? "menu-button-icon active input txt-icon"
-                                            : "menu-button-icon input",
+                                            : "menu-button-icon input txt-icon",
                                     ),
                                 label: "",
                             }),

modules/menus/audio/available/PlaybackDevices.ts

@@ -31,8 +31,8 @@ const renderPlaybacks = (playbackDevices: Stream[]) => {
                                     .bind("description")
                                     .as((v) =>
                                         device.description === v
-                                            ? "menu-button-icon active playback"
+                                            ? "menu-button-icon active playback txt-icon"
-                                            : "menu-button-icon playback",
+                                            : "menu-button-icon playback txt-icon",
                                     ),
                                 label: "",
                             }),

modules/menus/bluetooth/devices/connectedControls.ts

@@ -13,7 +13,7 @@ const connectedControls = (dev: BluetoothDevice, connectedDevices: BluetoothDevi
                 class_name: "menu-icon-button unpair bluetooth",
                 child: Widget.Label({
                     tooltip_text: dev.paired ? "Unpair" : "Pair",
-                    class_name: "menu-icon-button-label unpair bluetooth",
+                    class_name: "menu-icon-button-label unpair bluetooth txt-icon",
                     label: dev.paired ? "" : "",
                 }),
                 on_primary_click: () =>
@@ -32,7 +32,7 @@ const connectedControls = (dev: BluetoothDevice, connectedDevices: BluetoothDevi
                 class_name: "menu-icon-button disconnect bluetooth",
                 child: Widget.Label({
                     tooltip_text: dev.connected ? "Disconnect" : "Connect",
-                    class_name: "menu-icon-button-label disconnect bluetooth",
+                    class_name: "menu-icon-button-label disconnect bluetooth txt-icon",
                     label: dev.connected ? "󱘖" : "",
                 }),
                 on_primary_click: () => dev.setConnection(!dev.connected),
@@ -41,7 +41,7 @@ const connectedControls = (dev: BluetoothDevice, connectedDevices: BluetoothDevi
                 class_name: "menu-icon-button untrust bluetooth",
                 child: Widget.Label({
                     tooltip_text: dev.trusted ? "Untrust" : "Trust",
-                    class_name: "menu-icon-button-label untrust bluetooth",
+                    class_name: "menu-icon-button-label untrust bluetooth txt-icon",
                     label: dev.trusted ? "" : "󱖡",
                 }),
                 on_primary_click: () =>
@@ -60,7 +60,7 @@ const connectedControls = (dev: BluetoothDevice, connectedDevices: BluetoothDevi
                 class_name: "menu-icon-button delete bluetooth",
                 child: Widget.Label({
                     tooltip_text: "Forget",
-                    class_name: "menu-icon-button-label delete bluetooth",
+                    class_name: "menu-icon-button-label delete bluetooth txt-icon",
                     label: "󰆴",
                 }),
                 on_primary_click: () => {

modules/menus/bluetooth/devices/devicelist.ts

@@ -86,7 +86,7 @@ const devices = (bluetooth: Bluetooth, self: Box<any, any>) => {
                                         children: [
                                             Widget.Label({
                                                 vpack: "start",
-                                                class_name: `menu-button-icon bluetooth ${conDevNames.includes(device.address) ? "active" : ""}`,
+                                                class_name: `menu-button-icon bluetooth ${conDevNames.includes(device.address) ? "active" : ""} txt-icon`,
                                                 label: getBluetoothIcon(`${device["icon-name"]}-symbolic`),
                                             }),
                                             Widget.Box({

modules/menus/calendar/weather/stats/index.ts

@@ -16,7 +16,7 @@ export const TodayStats = (theWeather: Variable<Weather>) => {
                 class_name: "weather wind",
                 children: [
                     Widget.Label({
-                        class_name: "weather wind icon",
+                        class_name: "weather wind icon txt-icon",
                         label: "",
                     }),
                     Widget.Label({
@@ -37,7 +37,7 @@ export const TodayStats = (theWeather: Variable<Weather>) => {
                 class_name: "weather precip",
                 children: [
                     Widget.Label({
-                        class_name: "weather precip icon",
+                        class_name: "weather precip icon txt-icon",
                         label: "",
                     }),
                     Widget.Label({

modules/menus/calendar/weather/temperature/index.ts

@@ -64,7 +64,7 @@ export const TodayTemperature = (theWeather: Variable<Weather>) => {
                                     .bind("value")
                                     .as(
                                         (v) =>
-                                            `calendar-menu-weather today temp label icon ${getIcon(Math.ceil(v.current.temp_f)).color}`,
+                                            `calendar-menu-weather today temp label icon txt-icon ${getIcon(Math.ceil(v.current.temp_f)).color}`,
                                     ),
                                 label: theWeather
                                     .bind("value")

modules/menus/dashboard/controls/index.ts

@@ -20,6 +20,7 @@ const Controls = () => {
                 },
                 on_primary_click: () => network.toggleWifi(),
                 child: Widget.Label({
+                    class_name: "txt-icon",
                     setup: (self) => {
                         self.hook(network, () => {
                             return (self.label = network.wifi.enabled ? "󰤨" : "󰤭");
@@ -37,6 +38,7 @@ const Controls = () => {
                     ),
                 on_primary_click: () => bluetooth.toggle(),
                 child: Widget.Label({
+                    class_name: "txt-icon",
                     label: bluetooth.bind("enabled").as((btOn) => (btOn ? "󰂯" : "󰂲")),
                 }),
             }),
@@ -50,6 +52,7 @@ const Controls = () => {
                     ),
                 on_primary_click: () => (notifications.dnd = !notifications.dnd),
                 child: Widget.Label({
+                    class_name: "txt-icon",
                     label: notifications.bind("dnd").as((dnd) => (dnd ? "󰂛" : "󰂚")),
                 }),
             }),
@@ -64,6 +67,7 @@ const Controls = () => {
                     });
                 },
                 child: Widget.Label({
+                    class_name: "txt-icon",
                     setup: (self) => {
                         self.hook(audio, () => {
                             return (self.label = audio.speaker.is_muted ? "󰖁" : "󰕾");
@@ -82,6 +86,7 @@ const Controls = () => {
                     });
                 },
                 child: Widget.Label({
+                    class_name: "txt-icon",
                     setup: (self) => {
                         self.hook(audio, () => {
                             return (self.label = audio.microphone.is_muted ? "󰍭" : "󰍬");

modules/menus/dashboard/shortcuts/index.ts

@@ -88,7 +88,7 @@ const Shortcuts = () => {
                                     .bind("value")
                                     .as((cmd) => () => handleClick(cmd)),
                                 child: Widget.Label({
-                                    class_name: "button-label",
+                                    class_name: "button-label txt-icon",
                                     label: left.shortcut1.icon.bind("value"),
                                 }),
                             }),
@@ -99,7 +99,7 @@ const Shortcuts = () => {
                                     .bind("value")
                                     .as((cmd) => () => handleClick(cmd)),
                                 child: Widget.Label({
-                                    class_name: "button-label",
+                                    class_name: "button-label txt-icon",
                                     label: left.shortcut2.icon.bind("value"),
                                 }),
                             }),
@@ -117,7 +117,7 @@ const Shortcuts = () => {
                                     .as((cmd) => () => handleClick(cmd)),
                                 child: Widget.Label({
                                     hpack: "center",
-                                    class_name: "button-label",
+                                    class_name: "button-label txt-icon",
                                     label: left.shortcut3.icon.bind("value"),
                                 }),
                             }),
@@ -128,7 +128,7 @@ const Shortcuts = () => {
                                     .bind("value")
                                     .as((cmd) => () => handleClick(cmd)),
                                 child: Widget.Label({
-                                    class_name: "button-label",
+                                    class_name: "button-label txt-icon",
                                     label: left.shortcut4.icon.bind("value"),
                                 }),
                             }),
@@ -152,7 +152,7 @@ const Shortcuts = () => {
                                     .bind("value")
                                     .as((cmd) => () => handleClick(cmd)),
                                 child: Widget.Label({
-                                    class_name: "button-label",
+                                    class_name: "button-label txt-icon",
                                     label: right.shortcut1.icon.bind("value"),
                                 }),
                             }),
@@ -164,7 +164,7 @@ const Shortcuts = () => {
                                     App.toggleWindow("settings-dialog");
                                 },
                                 child: Widget.Label({
-                                    class_name: "button-label",
+                                    class_name: "button-label txt-icon",
                                     label: "󰒓",
                                 }),
                             }),
@@ -181,7 +181,7 @@ const Shortcuts = () => {
                                     .bind("value")
                                     .as((cmd) => () => handleClick(cmd)),
                                 child: Widget.Label({
-                                    class_name: "button-label",
+                                    class_name: "button-label txt-icon",
                                     label: right.shortcut3.icon.bind("value"),
                                 }),
                             }),
@@ -206,7 +206,7 @@ const Shortcuts = () => {
                                     });
                                 },
                                 child: Widget.Label({
-                                    class_name: "button-label",
+                                    class_name: "button-label txt-icon",
                                     label: "󰑊",
                                 }),
                             }),

modules/menus/dashboard/stats/index.ts

@@ -128,7 +128,10 @@ const Stats = () => {
                                                 );
                                             }
                                         }),
+                                        child: Widget.Label({
+                                            class_name: "txt-icon",
                                             label: "󰢮",
+                                        })
                                     }),
                                     Widget.Button({
                                         on_primary_click: terminal.bind("value").as(term => {
@@ -227,7 +230,10 @@ const Stats = () => {
                                         );
                                     }
                                 }),
+                                child: Widget.Label({
+                                    class_name: "txt-icon",
                                     label: "",
+                                })
                             }),
                             Widget.Button({
                                 on_primary_click: terminal.bind("value").as(term => {
@@ -273,7 +279,10 @@ const Stats = () => {
                                         );
                                     }
                                 }),
+                                child: Widget.Label({
+                                    class_name: "txt-icon",
                                     label: "",
+                                })
                             }),
                             Widget.Button({
                                 on_primary_click: terminal.bind("value").as(term => {
@@ -318,7 +327,10 @@ const Stats = () => {
                                         );
                                     }
                                 }),
+                                child: Widget.Label({
+                                    class_name: "txt-icon",
                                     label: "󰋊",
+                                })
                             }),
                             Widget.Button({
                                 on_primary_click: terminal.bind("value").as(term => {

modules/menus/network/wifi/WirelessAPs.ts

@@ -132,7 +132,7 @@ const renderWAPs = (self: any, network: Network, staging: Variable<AccessPoint>,
                                         children: [
                                             Widget.Label({
                                                 vpack: "start",
-                                                class_name: `network-icon wifi ${ap.ssid === network.wifi.ssid ? "active" : ""}`,
+                                                class_name: `network-icon wifi ${ap.ssid === network.wifi.ssid ? "active" : ""} txt-icon`,
                                                 label: getWifiIcon(`${ap["iconName"]}`),
                                             }),
                                             Widget.Box({
@@ -202,6 +202,7 @@ const renderWAPs = (self: any, network: Network, staging: Variable<AccessPoint>,
                                     });
                                 },
                                 child: Widget.Label({
+                                    class_name: "txt-icon delete-network",
                                     label: "󰚃",
                                 }),
                             }),

modules/menus/notifications/controls/index.ts

@@ -23,6 +23,7 @@ const Controls = (notifs) => {
                 children: [
                     Widget.Switch({
                         class_name: "menu-switch notifications",
+                        vpack: "center",
                         active: notifs.bind("dnd").as((dnd: boolean) => !dnd),
                         on_activate: ({ active }) => {
                             notifs.dnd = !active;
@@ -41,7 +42,7 @@ const Controls = (notifs) => {
                                 tooltip_text: "Clear Notifications",
                                 on_primary_click: () => notifs.clear(),
                                 child: Widget.Label({
-                                    class_name: "clear-notifications-label",
+                                    class_name: "clear-notifications-label txt-icon",
                                     label: "",
                                 }),
                             }),

modules/menus/notifications/notification/close/index.ts

@@ -6,6 +6,7 @@ export const CloseButton = (notif: Notification, notifs: Notifications) => {
             notifs.CloseNotification(notif.id);
         },
         child: Widget.Label({
+            class_name: "txt-icon notif-close",
             label: "󰅜",
             hpack: "center",
         }),

modules/notifications/close/index.ts

@@ -7,6 +7,7 @@ export const CloseButton = (notif: Notification, notifs: Notifications) => {
             notifs.CloseNotification(notif.id);
         },
         child: Widget.Label({
+            class_name: "txt-icon notif-close",
             label: "󰅜",
             hpack: "center",
         }),

modules/osd/icon/index.ts

@@ -7,7 +7,7 @@ export const OSDIcon = (ort: OSDOrientation) => {
         class_name: "osd-icon-container",
         hexpand: true,
         child: Widget.Label({
-            class_name: "osd-icon",
+            class_name: "osd-icon txt-icon",
             hexpand: true,
             vexpand: true,
             hpack: "center",

scss/main.scss

@@ -11,6 +11,9 @@
 @import "style/common/floating-widget.scss";
 @import "style/common/widget-button.scss";
 
+//general styles
+@import "style/common/general";
+
 //modules - bar
 @import "style/bar/menu";
 @import "style/bar/audio";
@@ -46,6 +49,3 @@
 
 //settings dialog
 @import "style/settings/dialog";
-
-//general styles
-@import "style/common/general";

scss/style/common/general.scss

@@ -1,5 +1,27 @@
 @import '../colors.scss';
 
+.txt-icon {
+  font-family: "JetBrainsMono Nerd Font Propo", monospace;
+  font-size: 1.5em;
+
+  &.bluetooth {
+    font-size: 1em;
+  }
+
+  &.playback {
+    font-size: 1.3em;
+  }
+
+  &.input {
+    font-size: 1.3em;
+  }
+}
+
+.bar.txt-icon {
+  font-family: "JetBrainsMono Nerd Font Propo", monospace;
+  font-size: 1.2em;
+}
+
 window.popup {
   opacity: $bar-menus-opacity/100;
 

scss/style/menus/calendar.scss

@@ -166,3 +166,13 @@
 .hourly-weather-temp {
   color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-hourly-temperature);
 }
+
+.weather.precip.icon {
+  min-width: 1em;
+  font-size: 1em;
+}
+
+.weather.wind.icon {
+  min-width: 1em;
+  font-size: 1em;
+}

scss/style/menus/dashboard.scss

@@ -127,10 +127,6 @@
           }
         }
 
-        label {
-          font-size: 1.5em;
-        }
-
         &.record.active {
           background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-shortcuts-recording);
 
@@ -156,6 +152,7 @@
     button {
       padding: 0em;
       min-height: 3em;
+      min-width: 3.8em;
 
       label {
         color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-controls-wifi-text);
@@ -287,8 +284,9 @@
 
     .stat {
       label {
-        margin-right: 1em;
+        margin-right: 0.75em;
         font-size: 1.5em;
+        min-width: 1.65em;
       }
 
       &.cpu label {

services/snapshot.sh

@@ -5,7 +5,25 @@ outputFile="snapshot_$(date +%Y-%m-%d_%H-%M-%S).png"
 outputPath="$outputDir/$outputFile"
 mkdir -p "$outputDir"
 
-if grimblast copysave area "$outputPath"; then
+mode=$1
+
+case "$mode" in
+active)
+    command="grimblast copysave active $outputPath"
+    ;;
+output)
+    command="grimblast copysave output $outputPath"
+    ;;
+area)
+    command="grimblast copysave area $outputPath"
+    ;;
+*)
+    echo "Usage: $0 {active|output|area}"
+    exit 1
+    ;;
+esac
+
+if eval "$command"; then
     recentFile=$(ls -t "$outputDir"/snapshot_*.png | head -n 1)
     notify-send "Grimblast" "Your snapshot has been saved." \
         -i video-x-generic \

widget/settings/pages/config/general/index.ts

@@ -23,15 +23,6 @@ export const BarGeneral = () => {
                 }
             }),
             Option({ opt: options.terminal, title: 'Terminal', subtitle: "Tools such as 'btop' will open in this terminal", type: 'string' }),
-
-            Header('On Screen Display'),
-            Option({ opt: options.theme.osd.enable, title: 'Enabled', type: 'boolean' }),
-            Option({ opt: options.theme.osd.orientation, title: 'Orientation', type: 'enum', enums: ["horizontal", "vertical"] }),
-            Option({ opt: options.theme.osd.location, title: 'Position', subtitle: 'Position of the OSD on the screen', type: 'enum', enums: ["top left", "top", "top right", "right", "bottom right", "bottom", "bottom left", "left"] }),
-            Option({ opt: options.theme.osd.monitor, title: 'Monitor', subtitle: 'The ID of the monitor on which to display the OSD', type: 'number' }),
-            Option({ opt: options.theme.osd.active_monitor, title: 'Follow Cursor', subtitle: 'The OSD will follow the monitor of your cursor', type: 'boolean' }),
-            Option({ opt: options.theme.osd.radius, title: 'Radius', subtitle: 'Radius of the on-screen-display that indicates volume/brightness change', type: 'string' }),
-            Option({ opt: options.theme.osd.margins, title: 'Margins', subtitle: 'Margins in the following format: top right bottom left', type: 'string' }),
         ]
     })
 }

widget/settings/pages/config/index.ts

@@ -3,14 +3,16 @@ import { BarSettings } from "./bar/index";
 import { ClockMenuSettings } from "./menus/clock";
 import { DashboardMenuSettings } from "./menus/dashboard";
 import { NotificationSettings } from "./notifications/index";
+import { OSDSettings } from "./osd/index";
 
-type Page = "General" | "Bar" | "Clock Menu" | "Dashboard Menu" | "Notifications";
+type Page = "General" | "Bar" | "Clock Menu" | "Dashboard Menu" | "Notifications" | "OSD";
 const CurrentPage = Variable<Page>("General");
 
 const pagerMap: Page[] = [
     "General",
     "Bar",
     "Notifications",
+    "OSD",
     "Clock Menu",
     "Dashboard Menu",
 ]
@@ -40,6 +42,7 @@ export const SettingsMenu = () => {
                         "General": BarGeneral(),
                         "Bar": BarSettings(),
                         "Notifications": NotificationSettings(),
+                        "OSD": OSDSettings(),
                         "Clock Menu": ClockMenuSettings(),
                         "Dashboard Menu": DashboardMenuSettings(),
                     },

widget/settings/pages/config/osd/index.ts

@@ -0,0 +1,21 @@
+import { Option } from "widget/settings/shared/Option";
+import { Header } from "widget/settings/shared/Header";
+
+import options from "options";
+
+export const OSDSettings = () => {
+    return Widget.Box({
+        class_name: "bar-theme-page paged-container",
+        vertical: true,
+        children: [
+            Header('On Screen Display'),
+            Option({ opt: options.theme.osd.enable, title: 'Enabled', type: 'boolean' }),
+            Option({ opt: options.theme.osd.orientation, title: 'Orientation', type: 'enum', enums: ["horizontal", "vertical"] }),
+            Option({ opt: options.theme.osd.location, title: 'Position', subtitle: 'Position of the OSD on the screen', type: 'enum', enums: ["top left", "top", "top right", "right", "bottom right", "bottom", "bottom left", "left"] }),
+            Option({ opt: options.theme.osd.monitor, title: 'Monitor', subtitle: 'The ID of the monitor on which to display the OSD', type: 'number' }),
+            Option({ opt: options.theme.osd.active_monitor, title: 'Follow Cursor', subtitle: 'The OSD will follow the monitor of your cursor', type: 'boolean' }),
+            Option({ opt: options.theme.osd.radius, title: 'Radius', subtitle: 'Radius of the on-screen-display that indicates volume/brightness change', type: 'string' }),
+            Option({ opt: options.theme.osd.margins, title: 'Margins', subtitle: 'Margins in the following format: top right bottom left', type: 'string' }),
+        ]
+    })
+}