Merge branch 'Jas-SinghFSU:master' into master

customModules/cpu/computeCPU.ts

@@ -4,6 +4,7 @@ import GTop from 'gi://GTop';
 let previousCpuData = new GTop.glibtop_cpu();
 GTop.glibtop_get_cpu(previousCpuData);
 
+// FIX: Consolidate with Cpu service class
 export const computeCPU = (): number => {
     const currentCpuData = new GTop.glibtop_cpu();
     GTop.glibtop_get_cpu(currentCpuData);

customModules/ram/computeRam.ts

@@ -4,6 +4,7 @@ import { divide } from 'customModules/utils';
 import { GenericResourceData } from 'lib/types/customModules/generic';
 import { Variable as VariableType } from 'types/variable';
 
+// FIX: Consolidate with Ram service class
 export const calculateRamUsage = (round: VariableType<boolean>): GenericResourceData => {
     try {
         const [success, meminfoBytes] = GLib.file_get_contents('/proc/meminfo');

customModules/storage/computeStorage.ts

@@ -5,6 +5,7 @@ import { divide } from 'customModules/utils';
 import { Variable as VariableType } from 'types/variable';
 import { GenericResourceData } from 'lib/types/customModules/generic';
 
+// FIX: Consolidate with Storage service class
 export const computeStorage = (round: VariableType<boolean>): GenericResourceData => {
     try {
         const currentFsUsage = new GTop.glibtop_fsusage();

customModules/utils.ts

@@ -159,7 +159,7 @@ export const renderResourceLabel = (lblType: ResourceLabelType, rmUsg: GenericRe
         B: (size: number): number => size,
     };
 
-    // Get them datas in proper GiB, MiB, KiB, TiB, or bytes
+    // Get the data in proper GiB, MiB, KiB, TiB, or bytes
     const totalSizeFormatted = autoFormatSize(total, round);
     // get the postfix: one of [TiB, GiB, MiB, KiB, B]
     const postfix = getPostfix(total);

lib/icons.ts

@@ -41,7 +41,6 @@ export default {
         time: 'hourglass-symbolic',
         toolbars: 'toolbars-symbolic',
         warning: 'dialog-warning-symbolic',
-        avatar: 'avatar-default-symbolic',
         arrow: {
             right: 'pan-end-symbolic',
             left: 'pan-start-symbolic',

lib/types/customModules/generic.d.ts

@@ -6,7 +6,7 @@ export type GenericResourceMetrics = {
     percentage: number;
 };
 
-type GenericResourceData = ResourceUsage & {
+export type GenericResourceData = GenericResourceMetrics & {
     free: number;
 };
 

modules/bar/utils.ts

@@ -25,7 +25,7 @@ export const openMenu = async (clicked: Button<Child, Attribute>, event: Gdk.Eve
     /*
      * NOTE: We have to make some adjustments so the menu pops up relatively
      * to the center of the button clicked. We don't want the menu to spawn
-     * offcenter dependending on which edge of the button you click on.
+     * offcenter depending on which edge of the button you click on.
      * -------------
      * To fix this, we take the x coordinate of the click within the button's bounds.
      * If you click the left edge of a 100 width button, then the x axis will be 0

modules/icons/index.ts

@@ -41,7 +41,6 @@ export default {
         time: 'hourglass-symbolic',
         toolbars: 'toolbars-symbolic',
         warning: 'dialog-warning-symbolic',
-        avatar: 'avatar-default-symbolic',
         arrow: {
             right: 'pan-end-symbolic',
             left: 'pan-start-symbolic',

modules/menus/dashboard/stats/index.ts

@@ -1,67 +1,36 @@
 import options from 'options';
+import Ram from 'services/Ram';
 import { GPU_Stat } from 'lib/types/gpustat';
 import { dependencies } from 'lib/utils';
 import { BoxWidget } from 'lib/types/widget';
-import { GenericResourceMetrics } from 'lib/types/customModules/generic';
+import Cpu from 'services/Cpu';
+import Storage from 'services/Storage';
+import { renderResourceLabel } from 'customModules/utils';
 
 const { terminal } = options;
-const { enable_gpu } = options.menus.dashboard.stats;
+const { enable_gpu, interval } = options.menus.dashboard.stats;
+
+const ramService = new Ram();
+const cpuService = new Cpu();
+const storageService = new Storage();
+
+ramService.setShouldRound(true);
+storageService.setShouldRound(true);
+
+interval.connect('changed', () => {
+    ramService.updateTimer(interval.value);
+    cpuService.updateTimer(interval.value);
+    storageService.updateTimer(interval.value);
+});
+
+const handleClick = (): void => {
+    App.closeWindow('dashboardmenu');
+    Utils.execAsync(`bash -c "${terminal} -e btop"`).catch((err) => `Failed to open btop: ${err}`);
+};
 
 const Stats = (): BoxWidget => {
     const divide = ([total, free]: number[]): number => free / total;
 
-    const formatSizeInGB = (sizeInKB: number): number => Number((sizeInKB / 1024 ** 2).toFixed(2));
-
-    const cpu = Variable(0, {
-        poll: [
-            2000,
-            'top -b -n 1',
-            (out): number => {
-                if (typeof out !== 'string') {
-                    return 0;
-                }
-
-                const cpuOut = out.split('\n').find((line) => line.includes('Cpu(s)'));
-
-                if (cpuOut === undefined) {
-                    return 0;
-                }
-
-                const freeCpu = parseFloat(cpuOut.split(/\s+/)[1].replace(',', '.'));
-                return divide([100, freeCpu]);
-            },
-        ],
-    });
-
-    const ram = Variable(
-        { total: 0, used: 0, percentage: 0 },
-        {
-            poll: [
-                2000,
-                'free',
-                (out): GenericResourceMetrics => {
-                    if (typeof out !== 'string') {
-                        return { total: 0, used: 0, percentage: 0 };
-                    }
-
-                    const ramOut = out.split('\n').find((line) => line.includes('Mem:'));
-
-                    if (ramOut === undefined) {
-                        return { total: 0, used: 0, percentage: 0 };
-                    }
-
-                    const [totalRam, usedRam] = ramOut.split(/\s+/).splice(1, 2).map(Number);
-
-                    return {
-                        percentage: divide([totalRam, usedRam]),
-                        total: formatSizeInGB(totalRam),
-                        used: formatSizeInGB(usedRam),
-                    };
-                },
-            ],
-        },
-    );
-
     const gpu = Variable(0);
 
     const GPUStat = Widget.Box({
@@ -118,28 +87,18 @@ const Stats = (): BoxWidget => {
 
                                 return (self.children = [
                                     Widget.Button({
-                                        on_primary_click: terminal.bind('value').as((term) => {
+                                        on_primary_click: () => {
-                                            return (): void => {
+                                            handleClick();
-                                                App.closeWindow('dashboardmenu');
+                                        },
-                                                Utils.execAsync(`bash -c "${term} -e btop"`).catch(
-                                                    (err) => `Failed to open btop: ${err}`,
-                                                );
-                                            };
-                                        }),
                                         child: Widget.Label({
                                             class_name: 'txt-icon',
                                             label: '󰢮',
                                         }),
                                     }),
                                     Widget.Button({
-                                        on_primary_click: terminal.bind('value').as((term) => {
+                                        on_primary_click: () => {
-                                            return (): void => {
+                                            handleClick();
-                                                App.closeWindow('dashboardmenu');
+                                        },
-                                                Utils.execAsync(`bash -c "${term} -e btop"`).catch(
-                                                    (err) => `Failed to open btop: ${err}`,
-                                                );
-                                            };
-                                        }),
                                         child: Widget.LevelBar({
                                             class_name: 'stats-bar',
                                             hexpand: true,
@@ -170,40 +129,6 @@ const Stats = (): BoxWidget => {
         }),
     });
 
-    const storage = Variable(
-        { total: 0, used: 0, percentage: 0 },
-        {
-            poll: [
-                2000,
-                'df -B1 /',
-                (out): GenericResourceMetrics => {
-                    if (typeof out !== 'string') {
-                        return { total: 0, used: 0, percentage: 0 };
-                    }
-
-                    const dfOut = out.split('\n').find((line) => line.startsWith('/'));
-
-                    if (dfOut === undefined) {
-                        return { total: 0, used: 0, percentage: 0 };
-                    }
-
-                    const parts = dfOut.split(/\s+/);
-                    const size = parseInt(parts[1], 10);
-                    const used = parseInt(parts[2], 10);
-
-                    const sizeInGB = formatSizeInGB(size);
-                    const usedInGB = formatSizeInGB(used);
-
-                    return {
-                        total: Math.floor(sizeInGB / 1000),
-                        used: Math.floor(usedInGB / 1000),
-                        percentage: divide([size, used]),
-                    };
-                },
-            ],
-        },
-    );
-
     return Widget.Box({
         class_name: 'dashboard-card stats-container',
         vertical: true,
@@ -220,35 +145,25 @@ const Stats = (): BoxWidget => {
                         vpack: 'center',
                         children: [
                             Widget.Button({
-                                on_primary_click: terminal.bind('value').as((term) => {
+                                on_primary_click: () => {
-                                    return () => {
+                                    handleClick();
-                                        App.closeWindow('dashboardmenu');
+                                },
-                                        Utils.execAsync(`bash -c "${term} -e btop"`).catch(
-                                            (err) => `Failed to open btop: ${err}`,
-                                        );
-                                    };
-                                }),
                                 child: Widget.Label({
                                     class_name: 'txt-icon',
                                     label: '',
                                 }),
                             }),
                             Widget.Button({
-                                on_primary_click: terminal.bind('value').as((term) => {
+                                on_primary_click: () => {
-                                    return () => {
+                                    handleClick();
-                                        App.closeWindow('dashboardmenu');
+                                },
-                                        Utils.execAsync(`bash -c "${term} -e btop"`).catch(
-                                            (err) => `Failed to open btop: ${err}`,
-                                        );
-                                    };
-                                }),
                                 child: Widget.LevelBar({
                                     class_name: 'stats-bar',
                                     hexpand: true,
                                     vpack: 'center',
                                     bar_mode: 'continuous',
                                     max_value: 1,
-                                    value: cpu.bind('value'),
+                                    value: cpuService.cpu.bind('value').as((cpuUsage) => Math.round(cpuUsage) / 100),
                                 }),
                             }),
                         ],
@@ -256,7 +171,7 @@ const Stats = (): BoxWidget => {
                     Widget.Label({
                         hpack: 'end',
                         class_name: 'stat-value cpu',
-                        label: cpu.bind('value').as((v) => `${Math.floor(v * 100)}%`),
+                        label: cpuService.cpu.bind('value').as((cpuUsage) => `${Math.round(cpuUsage)}%`),
                     }),
                 ],
             }),
@@ -269,33 +184,25 @@ const Stats = (): BoxWidget => {
                         hexpand: true,
                         children: [
                             Widget.Button({
-                                on_primary_click: terminal.bind('value').as((term) => {
+                                on_primary_click: () => {
-                                    return () => {
+                                    handleClick();
-                                        App.closeWindow('dashboardmenu');
+                                },
-                                        Utils.execAsync(`bash -c "${term} -e btop"`).catch(
-                                            (err) => `Failed to open btop: ${err}`,
-                                        );
-                                    };
-                                }),
                                 child: Widget.Label({
                                     class_name: 'txt-icon',
                                     label: '',
                                 }),
                             }),
                             Widget.Button({
-                                on_primary_click: terminal.bind('value').as((term) => {
+                                on_primary_click: () => {
-                                    return () => {
+                                    handleClick();
-                                        App.closeWindow('dashboardmenu');
+                                },
-                                        Utils.execAsync(`bash -c "${term} -e btop"`).catch(
-                                            (err) => `Failed to open btop: ${err}`,
-                                        );
-                                    };
-                                }),
                                 child: Widget.LevelBar({
                                     class_name: 'stats-bar',
                                     hexpand: true,
                                     vpack: 'center',
-                                    value: ram.bind('value').as((v) => v.percentage),
+                                    value: ramService.ram.bind('value').as((ramUsage) => {
+                                        return ramUsage.percentage / 100;
+                                    }),
                                 }),
                             }),
                         ],
@@ -303,7 +210,9 @@ const Stats = (): BoxWidget => {
                     Widget.Label({
                         hpack: 'end',
                         class_name: 'stat-value ram',
-                        label: ram.bind('value').as((v) => `${v.used}/${v.total} GB`),
+                        label: ramService.ram
+                            .bind('value')
+                            .as((ramUsage) => `${renderResourceLabel('used/total', ramUsage, true)}`),
                     }),
                 ],
             }),
@@ -317,33 +226,25 @@ const Stats = (): BoxWidget => {
                         vpack: 'center',
                         children: [
                             Widget.Button({
-                                on_primary_click: terminal.bind('value').as((term) => {
+                                on_primary_click: () => {
-                                    return () => {
+                                    handleClick();
-                                        App.closeWindow('dashboardmenu');
+                                },
-                                        Utils.execAsync(`bash -c "${term} -e btop"`).catch(
-                                            (err) => `Failed to open btop: ${err}`,
-                                        );
-                                    };
-                                }),
                                 child: Widget.Label({
                                     class_name: 'txt-icon',
                                     label: '󰋊',
                                 }),
                             }),
                             Widget.Button({
-                                on_primary_click: terminal.bind('value').as((term) => {
+                                on_primary_click: () => {
-                                    return () => {
+                                    handleClick();
-                                        App.closeWindow('dashboardmenu');
+                                },
-                                        Utils.execAsync(`bash -c "${term} -e btop"`).catch(
-                                            (err) => `Failed to open btop: ${err}`,
-                                        );
-                                    };
-                                }),
                                 child: Widget.LevelBar({
                                     class_name: 'stats-bar',
                                     hexpand: true,
                                     vpack: 'center',
-                                    value: storage.bind('value').as((v) => v.percentage),
+                                    value: storageService.storage
+                                        .bind('value')
+                                        .as((storageUsage) => storageUsage.percentage / 100),
                                 }),
                             }),
                         ],
@@ -351,7 +252,9 @@ const Stats = (): BoxWidget => {
                     Widget.Label({
                         hpack: 'end',
                         class_name: 'stat-value storage',
-                        label: storage.bind('value').as((v) => `${v.used}/${v.total} GB`),
+                        label: storageService.storage
+                            .bind('value')
+                            .as((storageUsage) => `${renderResourceLabel('used/total', storageUsage, true)}`),
                     }),
                 ],
             }),

modules/menus/shared/dropdown/index.ts

@@ -8,7 +8,7 @@ import { globalEventBoxes } from 'globals/dropdown';
 const { location } = options.theme.bar;
 
 // NOTE: We make the window visible for 2 seconds (on startup) so the child
-// elements can allocat their proper dimensions.
+// elements can allocate their proper dimensions.
 // Otherwise the width that we rely on for menu positioning is set improperly
 // for the first time we open a menu of each type.
 const initRender = Variable(true);

options.ts

@@ -387,6 +387,8 @@ const options = mkOptions(OPTIONS, {
                     enabled: opt(colors.lavender),
                     disabled: opt(tertiary_colors.surface0),
                     puck: opt(secondary_colors.surface1),
+                    radius: opt('0.2em'),
+                    slider_radius: opt('0.2em'),
                 },
                 check_radio_button: {
                     background: opt(colors.surface1),
@@ -411,6 +413,8 @@ const options = mkOptions(OPTIONS, {
                     background: opt(tertiary_colors.surface2),
                     backgroundhover: opt(colors.surface1),
                     puck: opt(colors.overlay0),
+                    slider_radius: opt('0.3rem'),
+                    progress_radius: opt('0.3rem'),
                 },
                 dropdownmenu: {
                     background: opt(colors.crust),
@@ -1060,12 +1064,13 @@ const options = mkOptions(OPTIONS, {
                 logout: opt('hyprctl dispatch exit'),
                 shutdown: opt('systemctl poweroff'),
                 avatar: {
-                    image: opt('avatar-default-symbolic'),
+                    image: opt('$HOME/.face.icon'),
                     name: opt<'system' | string>('system'),
                 },
             },
             stats: {
                 enabled: opt(true),
+                interval: opt(2000),
                 enable_gpu: opt(false),
             },
             controls: {
@@ -1113,29 +1118,29 @@ const options = mkOptions(OPTIONS, {
                 left: {
                     directory1: {
                         label: opt('󰉍 Downloads'),
-                        command: opt('bash -c "dolphin $HOME/Downloads/"'),
+                        command: opt('bash -c "xdg-open $HOME/Downloads/"'),
                     },
                     directory2: {
                         label: opt('󰉏 Videos'),
-                        command: opt('bash -c "dolphin $HOME/Videos/"'),
+                        command: opt('bash -c "xdg-open $HOME/Videos/"'),
                     },
                     directory3: {
                         label: opt('󰚝 Projects'),
-                        command: opt('bash -c "dolphin $HOME/Projects/"'),
+                        command: opt('bash -c "xdg-open $HOME/Projects/"'),
                     },
                 },
                 right: {
                     directory1: {
                         label: opt('󱧶 Documents'),
-                        command: opt('bash -c "dolphin $HOME/Documents/"'),
+                        command: opt('bash -c "xdg-open $HOME/Documents/"'),
                     },
                     directory2: {
                         label: opt('󰉏 Pictures'),
-                        command: opt('bash -c "dolphin $HOME/Pictures/"'),
+                        command: opt('bash -c "xdg-open $HOME/Pictures/"'),
                     },
                     directory3: {
                         label: opt('󱂵 Home'),
-                        command: opt('bash -c "dolphin $HOME/"'),
+                        command: opt('bash -c "xdg-open $HOME/"'),
                     },
                 },
             },
@@ -1159,8 +1164,7 @@ const options = mkOptions(OPTIONS, {
 
     scalingPriority: opt<ScalingPriority>('gdk'),
 
-    terminal: opt('kitty'),
+    terminal: opt('$TERM'),
-
     tear: opt(false),
 
     wallpaper: {

package.json

@@ -1,7 +1,7 @@
 {
     "name": "hyprpanel",
     "version": "1.0.0",
-    "description": "A customizble panel built for Hyprland.",
+    "description": "A customizable panel built for Hyprland.",
     "main": "config.js",
     "directories": {
         "lib": "lib"

scss/style/menus/dashboard.scss

@@ -1,386 +1,592 @@
 .dashboard-menu-content * {
-  font-size: $font-size * $bar-menus-menu-dashboard-scaling * 0.01;
+    font-size: $font-size * $bar-menus-menu-dashboard-scaling * 0.01;
 }
 
 .dashboard-content-items {
-  margin-left: 0.50em;
+    margin-left: 0.5em;
-  min-width: 28.5em;
+    min-width: 28.5em;
-  background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-background-color);
+    background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-background-color);
-  border: $bar-menus-border-size solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-dashboard-border-color);
+    border: $bar-menus-border-size solid
-  border-radius: $bar-menus-border-radius;
+        if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-dashboard-border-color);
-  opacity: $bar-menus-opacity * 0.01;
+    border-radius: $bar-menus-border-radius;
-
+    opacity: $bar-menus-opacity * 0.01;
-  button {
-    border-radius: 0.4em;
-  }
-
-  .dashboard-card {
-    background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-dashboard-card-color);
-    margin: 1.3em;
-    border-radius: $bar-menus-card_radius;
-    padding: 1.5em;
-  }
-
-  .profile-picture-container {
-    margin-right: 0.65em;
-    margin-bottom: 0.65em;
-
-    .profile-picture {
-      min-width: $bar-menus-menu-dashboard-profile-size;
-      min-height: $bar-menus-menu-dashboard-profile-size;
-      border-radius: $bar-menus-menu-dashboard-profile-radius;
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: center;
-    }
-
-    .profile-name {
-      font-size: 1.5em;
-      color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-profile-name);
-      margin-top: 0.75em;
-    }
-  }
-
-  .power-menu-container {
-    margin-left: 0em;
-    margin-bottom: 0.65em;
-
-    .dashboard-button {
-      min-width: 3em;
-      min-height: 2.5em;
-
-      &:not(:last-child) {
-        margin-bottom: 0.75em;
-      }
-
-      label {
-        color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text);
-        font-size: 1.7em;
-      }
-
-      &.shutdown {
-        background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-shutdown);
-
-        label {
-          font-size: 1.9em;
-        }
-      }
-
-      &.restart {
-        background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-restart);
-
-        label {
-          font-size: 1.9em;
-        }
-      }
-
-      &.lock {
-        background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-logout);
-      }
-
-      &.sleep {
-        background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-sleep);
-      }
-
-      &:hover {
-        &.shutdown {
-          background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-shutdown), 0.5);
-        }
-
-        &.restart {
-          background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-restart), 0.5);
-        }
-
-        &.lock {
-          background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-logout), 0.5);
-        }
-
-        &.sleep {
-          background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-sleep), 0.5);
-        }
-      }
-
-
-    }
-  }
-
-  .shortcuts-container {
-    font-size: 1em;
-
-    .dashboard-card {
-      padding: 1.5em;
-
-      button {
-        min-height: 2.5em;
-        min-width: 2.5em;
-      }
-    }
-
-    .card-button-section-container.visible {
-      margin-right: 1.5em;
-    }
-
-    .top-button.paired {
-      margin-bottom: 1.5em;
-    }
-
-    .container {
-      margin-top: 0em;
-      margin-bottom: 0.65em;
-
-      &.most-used {
-        margin-right: 0.65em;
-      }
-
-      &.utilities.paired {
-        margin-left: 0em;
-      }
-
-      button {
-        background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-shortcuts-background);
-        color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text);
-        min-height: 3em;
-
-        label {
-          font-size: 1.5em;
-        }
-
-        &.record.active {
-          background: $red;
-
-          &:hover {
-            background: transparentize($red, 0.5);
-          }
-        }
-
-        &:hover {
-          background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-shortcuts-background), 0.5);
-        }
-      }
-    }
-  }
-
-  .controls-container {
-    margin-bottom: 0.65em;
-
-    &.dashboard-card {
-      margin-top: 0em;
-    }
 
     button {
-      padding: 0em;
+        border-radius: 0.4em;
-      min-height: 3em;
-      min-width: 3.8em;
-
-      label {
-        color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-controls-wifi-text);
-        font-size: 1.6em;
-      }
-
-      &:not(:last-child) {
-        margin-right: 1em;
-      }
-
-      &.wifi {
-        background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-wifi-background);
-      }
-
-      &.bluetooth {
-        background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-bluetooth-background);
-      }
-
-      &.notifications {
-        background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-notifications-background);
-      }
-
-      &.playback {
-        background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-volume-background);
-      }
-
-      &.input {
-        background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-input-background);
-      }
-
-      &.wifi:hover {
-        background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-wifi-background), 0.5);
-      }
-
-      &.bluetooth:hover {
-        background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-bluetooth-background), 0.5);
-      }
-
-      &.notifications:hover {
-        background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-notifications-background), 0.5);
-      }
-
-      &.playback:hover {
-        background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-volume-background), 0.5);
-      }
-
-      &.input:hover {
-        background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-input-background), 0.5);
-      }
-
-      &.disabled {
-        background: if($bar-menus-monochrome, $bar-menus-buttons-disabled, $bar-menus-menu-dashboard-controls-disabled);
-
-        &.wifi:hover {
-          background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-wifi-background), 0.5);
-        }
-
-        &.bluetooth:hover {
-          background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-bluetooth-background), 0.5);
-        }
-
-        &.notifications:hover {
-          background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-notifications-background), 0.5);
-        }
-
-        &.playback:hover {
-          background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-volume-background), 0.5);
-        }
-
-        &.input:hover {
-          background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-input-background), 0.5);
-        }
-      }
-    }
-  }
-
-  .directories-container {
-    &.dashboard-card {
-      margin-top: 0em;
-      margin-bottom: 0.65em;
-      padding-left: 1.5em;
-      padding-right: 0em;
     }
 
-    .directory-link {
+    .dashboard-card {
-      padding: 0.5em 0em;
+        background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-dashboard-card-color);
-      min-width: 9em;
+        margin: 0em 1.3em;
-
+        border-radius: $bar-menus-card_radius;
-      &:last-child {
+        padding: 1.5em;
-        margin-bottom: 0em;
-      }
-
-      label {
-        font-size: 1.3em;
-      }
-
-      &.right.top {
-        color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-right-top-color);
-      }
-
-      &.right.middle {
-        color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-right-middle-color);
-      }
-
-      &.right.bottom {
-        color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-right-bottom-color);
-      }
-
-      &.left.top {
-        color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-left-top-color);
-      }
-
-      &.left.middle {
-        color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-left-middle-color);
-      }
-
-      &.left.bottom {
-        color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-left-bottom-color);
-      }
-
-      &:hover {
-        opacity: 0.5;
-      }
-    }
-  }
-
-  .stats-container {
-    margin-top: 0em;
-
-    .stat {
-      label {
-        margin-right: 0.75em;
-        font-size: 1.3em;
-        min-width: 1.65em;
-      }
-
-      &.cpu label {
-        color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-cpu-icon);
-      }
-
-      &.ram label {
-        color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-ram-icon);
-      }
-
-      &.gpu label {
-        color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-gpu-icon);
-      }
-
-      &.storage label {
-        color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-disk-icon);
-      }
-
-      .stats-bar {
-        levelbar * {
-          transition: 200ms;
-        }
-
-        trough {
-          min-height: 1.05em;
-        }
-
-        block {
-          border-radius: 0.4em;
-
-          &.empty {
-            background: if($bar-menus-monochrome, $bar-menus-progressbar-background, $bar-menus-menu-dashboard-monitors-bar_background);
-          }
-
-          &.filled {
-            padding-left: 0.85em;
-          }
-        }
-      }
-
-      &.cpu .stats-bar block.filled {
-        background: if($bar-menus-monochrome, $bar-menus-progressbar-foreground, $bar-menus-menu-dashboard-monitors-cpu-bar);
-      }
-
-      &.ram .stats-bar block.filled {
-        background: if($bar-menus-monochrome, $bar-menus-progressbar-foreground, $bar-menus-menu-dashboard-monitors-ram-bar);
-      }
-
-      &.gpu .stats-bar block.filled {
-        background: if($bar-menus-monochrome, $bar-menus-progressbar-foreground, $bar-menus-menu-dashboard-monitors-gpu-bar);
-      }
-
-      &.storage .stats-bar block.filled {
-        background: if($bar-menus-monochrome, $bar-menus-progressbar-foreground, $bar-menus-menu-dashboard-monitors-disk-bar);
-      }
     }
 
-    .stat-value {
+    .profile-picture-container {
-      margin-bottom: 0.75em;
+        margin-right: 0.65em;
-      font-size: 0.9em;
 
-      &.cpu {
+        .profile-picture {
-        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-cpu-label);
+            min-width: $bar-menus-menu-dashboard-profile-size;
-      }
+            min-height: $bar-menus-menu-dashboard-profile-size;
+            border-radius: $bar-menus-menu-dashboard-profile-radius;
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-position: center;
+        }
 
-      &.ram {
+        .profile-name {
-        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-ram-label);
+            font-size: 1.5em;
-      }
+            color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-profile-name);
-
+            margin-top: 0.75em;
-      &.gpu {
+        }
-        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-gpu-label);
+    }
-      }
+
-
+    .power-menu-container {
-      &.storage {
+        margin-left: 0em;
-        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-disk-label);
+
-      }
+        .dashboard-button {
+            min-width: 3em;
+            min-height: 2.5em;
+
+            &:not(:last-child) {
+                margin-bottom: 0.75em;
+            }
+
+            label {
+                color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text);
+                font-size: 1.7em;
+            }
+
+            &.shutdown {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-powermenu-shutdown
+                );
+
+                label {
+                    font-size: 1.9em;
+                }
+            }
+
+            &.restart {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-powermenu-restart
+                );
+
+                label {
+                    font-size: 1.9em;
+                }
+            }
+
+            &.lock {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-powermenu-logout
+                );
+            }
+
+            &.sleep {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-powermenu-sleep
+                );
+            }
+
+            &:hover {
+                &.shutdown {
+                    background: transparentize(
+                        if(
+                            $bar-menus-monochrome,
+                            $bar-menus-buttons-default,
+                            $bar-menus-menu-dashboard-powermenu-shutdown
+                        ),
+                        0.5
+                    );
+                }
+
+                &.restart {
+                    background: transparentize(
+                        if(
+                            $bar-menus-monochrome,
+                            $bar-menus-buttons-default,
+                            $bar-menus-menu-dashboard-powermenu-restart
+                        ),
+                        0.5
+                    );
+                }
+
+                &.lock {
+                    background: transparentize(
+                        if(
+                            $bar-menus-monochrome,
+                            $bar-menus-buttons-default,
+                            $bar-menus-menu-dashboard-powermenu-logout
+                        ),
+                        0.5
+                    );
+                }
+
+                &.sleep {
+                    background: transparentize(
+                        if(
+                            $bar-menus-monochrome,
+                            $bar-menus-buttons-default,
+                            $bar-menus-menu-dashboard-powermenu-sleep
+                        ),
+                        0.5
+                    );
+                }
+            }
+        }
+    }
+
+    .shortcuts-container {
+        font-size: 1em;
+
+        .dashboard-card {
+            padding: 1.5em;
+
+            button {
+                min-height: 2.5em;
+                min-width: 2.5em;
+            }
+        }
+
+        .card-button-section-container.visible {
+            margin-right: 1.5em;
+        }
+
+        .top-button.paired {
+            margin-bottom: 1.5em;
+        }
+
+        .container {
+            margin-top: 0em;
+
+            &.most-used {
+                margin-right: 0.65em;
+            }
+
+            &.utilities.paired {
+                margin-left: 0em;
+            }
+
+            button {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-shortcuts-background
+                );
+                color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text);
+                min-height: 3em;
+
+                label {
+                    font-size: 1.5em;
+                }
+
+                &.record.active {
+                    background: $red;
+
+                    &:hover {
+                        background: transparentize($red, 0.5);
+                    }
+                }
+
+                &:hover {
+                    background: transparentize(
+                        if(
+                            $bar-menus-monochrome,
+                            $bar-menus-buttons-default,
+                            $bar-menus-menu-dashboard-shortcuts-background
+                        ),
+                        0.5
+                    );
+                }
+            }
+        }
+    }
+
+    .controls-container {
+        &.dashboard-card {
+            margin-top: 0em;
+        }
+
+        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);
+                font-size: 1.6em;
+            }
+
+            &:not(:last-child) {
+                margin-right: 1em;
+            }
+
+            &.wifi {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-controls-wifi-background
+                );
+            }
+
+            &.bluetooth {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-controls-bluetooth-background
+                );
+            }
+
+            &.notifications {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-controls-notifications-background
+                );
+            }
+
+            &.playback {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-controls-volume-background
+                );
+            }
+
+            &.input {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-controls-input-background
+                );
+            }
+
+            &.wifi:hover {
+                background: transparentize(
+                    if(
+                        $bar-menus-monochrome,
+                        $bar-menus-buttons-default,
+                        $bar-menus-menu-dashboard-controls-wifi-background
+                    ),
+                    0.5
+                );
+            }
+
+            &.bluetooth:hover {
+                background: transparentize(
+                    if(
+                        $bar-menus-monochrome,
+                        $bar-menus-buttons-default,
+                        $bar-menus-menu-dashboard-controls-bluetooth-background
+                    ),
+                    0.5
+                );
+            }
+
+            &.notifications:hover {
+                background: transparentize(
+                    if(
+                        $bar-menus-monochrome,
+                        $bar-menus-buttons-default,
+                        $bar-menus-menu-dashboard-controls-notifications-background
+                    ),
+                    0.5
+                );
+            }
+
+            &.playback:hover {
+                background: transparentize(
+                    if(
+                        $bar-menus-monochrome,
+                        $bar-menus-buttons-default,
+                        $bar-menus-menu-dashboard-controls-volume-background
+                    ),
+                    0.5
+                );
+            }
+
+            &.input:hover {
+                background: transparentize(
+                    if(
+                        $bar-menus-monochrome,
+                        $bar-menus-buttons-default,
+                        $bar-menus-menu-dashboard-controls-input-background
+                    ),
+                    0.5
+                );
+            }
+
+            &.disabled {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-disabled,
+                    $bar-menus-menu-dashboard-controls-disabled
+                );
+
+                &.wifi:hover {
+                    background: transparentize(
+                        if(
+                            $bar-menus-monochrome,
+                            $bar-menus-buttons-default,
+                            $bar-menus-menu-dashboard-controls-wifi-background
+                        ),
+                        0.5
+                    );
+                }
+
+                &.bluetooth:hover {
+                    background: transparentize(
+                        if(
+                            $bar-menus-monochrome,
+                            $bar-menus-buttons-default,
+                            $bar-menus-menu-dashboard-controls-bluetooth-background
+                        ),
+                        0.5
+                    );
+                }
+
+                &.notifications:hover {
+                    background: transparentize(
+                        if(
+                            $bar-menus-monochrome,
+                            $bar-menus-buttons-default,
+                            $bar-menus-menu-dashboard-controls-notifications-background
+                        ),
+                        0.5
+                    );
+                }
+
+                &.playback:hover {
+                    background: transparentize(
+                        if(
+                            $bar-menus-monochrome,
+                            $bar-menus-buttons-default,
+                            $bar-menus-menu-dashboard-controls-volume-background
+                        ),
+                        0.5
+                    );
+                }
+
+                &.input:hover {
+                    background: transparentize(
+                        if(
+                            $bar-menus-monochrome,
+                            $bar-menus-buttons-default,
+                            $bar-menus-menu-dashboard-controls-input-background
+                        ),
+                        0.5
+                    );
+                }
+            }
+        }
+    }
+
+    .directories-container {
+        &.dashboard-card {
+            margin-top: 0em;
+            padding-left: 1.5em;
+            padding-right: 0em;
+        }
+
+        .directory-link {
+            padding: 0.5em 0em;
+            min-width: 9em;
+
+            &:last-child {
+                margin-bottom: 0em;
+            }
+
+            label {
+                font-size: 1.3em;
+            }
+
+            &.right.top {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-directories-right-top-color
+                );
+            }
+
+            &.right.middle {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-directories-right-middle-color
+                );
+            }
+
+            &.right.bottom {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-directories-right-bottom-color
+                );
+            }
+
+            &.left.top {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-directories-left-top-color
+                );
+            }
+
+            &.left.middle {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-directories-left-middle-color
+                );
+            }
+
+            &.left.bottom {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-directories-left-bottom-color
+                );
+            }
+
+            &:hover {
+                opacity: 0.5;
+            }
+        }
+    }
+
+    .stats-container {
+        margin-top: 0em;
+
+        .stat {
+            label {
+                margin-right: 0.75em;
+                font-size: 1.3em;
+                min-width: 1.65em;
+            }
+
+            &.cpu label {
+                color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-cpu-icon);
+            }
+
+            &.ram label {
+                color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-ram-icon);
+            }
+
+            &.gpu label {
+                color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-gpu-icon);
+            }
+
+            &.storage label {
+                color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-disk-icon);
+            }
+
+            .stats-bar {
+                levelbar * {
+                    transition: 200ms;
+                }
+
+                trough {
+                    min-height: 1.05em;
+                }
+
+                block {
+                    border-radius: 0.4em;
+
+                    &.empty {
+                        background: if(
+                            $bar-menus-monochrome,
+                            $bar-menus-progressbar-background,
+                            $bar-menus-menu-dashboard-monitors-bar_background
+                        );
+                    }
+
+                    &.filled {
+                        padding-left: 0.85em;
+                    }
+                }
+            }
+
+            &.cpu .stats-bar block.filled {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-progressbar-foreground,
+                    $bar-menus-menu-dashboard-monitors-cpu-bar
+                );
+            }
+
+            &.ram .stats-bar block.filled {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-progressbar-foreground,
+                    $bar-menus-menu-dashboard-monitors-ram-bar
+                );
+            }
+
+            &.gpu .stats-bar block.filled {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-progressbar-foreground,
+                    $bar-menus-menu-dashboard-monitors-gpu-bar
+                );
+            }
+
+            &.storage .stats-bar block.filled {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-progressbar-foreground,
+                    $bar-menus-menu-dashboard-monitors-disk-bar
+                );
+            }
+        }
+
+        .stat-value {
+            margin-bottom: 0.5em;
+            font-size: 0.9em;
+
+            &.cpu {
+                color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-cpu-label);
+            }
+
+            &.ram {
+                color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-ram-label);
+            }
+
+            &.gpu {
+                color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-gpu-label);
+            }
+
+            &.storage {
+                color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-disk-label);
+            }
+        }
     }
-  }
+}
+
+.dashboard-content-items > :not(:first-child):not(:last-child) {
+    margin-top: 0;
+    margin-bottom: 0.65em;
+}
+
+.dashboard-content-items > :first-child {
+    margin-top: 1.3em;
+    margin-bottom: 0.65em;
+}
+
+.dashboard-content-items > :last-child {
+    margin-top: 0;
+    margin-bottom: 1.3em;
+}
+
+.dashboard-content-items > :only-child {
+    margin-top: 1.3em;
+    margin-bottom: 1.3em;
 }

scss/style/menus/media.scss

@@ -1,126 +1,145 @@
 .menu-items.media {
-  background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-media-background-color);
+    background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-media-background-color);
-  border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-media-border-color);
+    border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-media-border-color);
-  opacity: $bar-menus-opacity * 0.01;
+    opacity: $bar-menus-opacity * 0.01;
-
 }
 
 .menu-items-container.media {
-  * {
+    * {
-    font-size: $font-size * $bar-menus-menu-media-scaling * 0.01;
+        font-size: $font-size * $bar-menus-menu-media-scaling * 0.01;
-  }
-
-  min-width: 23em * $bar-menus-menu-media-scaling * 0.01;
-  min-height: 10em * $bar-menus-menu-media-scaling * 0.01;
-
-  .menu-section-container {
-    margin: 1em 0em;
-  }
-
-  .menu-items-section {
-    border-radius: $bar-menus-card_radius;
-    padding: 0em;
-  }
-
-  .menu-content {
-    border-radius: 0.4em;
-    background-size: cover;
-    background-position: center;
-  }
-
-  .media-content {
-    margin: 1em;
-  }
-
-  .media-indicator-current-song-name {
-    margin-bottom: 0.75rem;
-  }
-
-  .media-indicator-current-song-author {
-    margin-bottom: 0.75rem;
-  }
-
-  .media-indicator-current-song-name-label {
-    color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-song);
-    font-size: 1.35em;
-  }
-
-  .media-indicator-current-song-author-label {
-    color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-artist);
-    font-size: 1em;
-  }
-
-  .media-indicator-current-song-album-label {
-    color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-album);
-    font-size: 1em;
-  }
-
-  .media-indicator-current-controls {
-    margin-top: 1.5rem;
-    margin-bottom: 0.5rem;
-  }
-
-  .media-indicator-control-button {
-    margin: 0rem 0.5rem;
-  }
-
-  .media-indicator-control-button {
-    background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background);
-    color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-media-buttons-text);
-    min-height: 1.8em;
-    min-width: 2.5em;
-    border-radius: 0.2rem;
-
-    &.disabled {
-      background: if($bar-menus-monochrome, $bar-menus-buttons-disabled, $bar-menus-menu-media-buttons-inactive);
     }
 
-    &.enabled {
+    min-width: 23em * $bar-menus-menu-media-scaling * 0.01;
-      background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background);
+    min-height: 10em * $bar-menus-menu-media-scaling * 0.01;
 
-      &:hover {
+    .menu-section-container {
-        background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background), 0.5);
+        margin: 1em 0em;
-      }
+    }
 
-      &.active {
+    .menu-items-section {
-        background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-enabled);
+        border-radius: $bar-menus-card_radius;
+        padding: 0em;
+    }
+
+    .menu-content {
+        border-radius: 0.4em;
+        background-size: cover;
+        background-position: center;
+    }
+
+    .media-content {
+        margin: 1em;
+    }
+
+    .media-indicator-current-song-name {
+        margin-bottom: 0.75rem;
+    }
+
+    .media-indicator-current-song-author {
+        margin-bottom: 0.75rem;
+    }
+
+    .media-indicator-current-song-name-label {
+        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-song);
+        font-size: 1.35em;
+    }
+
+    .media-indicator-current-song-author-label {
+        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-artist);
+        font-size: 1em;
+    }
+
+    .media-indicator-current-song-album-label {
+        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-album);
+        font-size: 1em;
+    }
+
+    .media-indicator-current-controls {
+        margin-top: 1.5rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .media-indicator-control-button {
+        margin: 0rem 0.5rem;
+    }
+
+    .media-indicator-control-button {
+        background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background);
+        color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-media-buttons-text);
+        min-height: 1.8em;
+        min-width: 2.5em;
+        border-radius: 0.2rem;
+
+        &.disabled {
+            background: if($bar-menus-monochrome, $bar-menus-buttons-disabled, $bar-menus-menu-media-buttons-inactive);
+        }
+
+        &.enabled {
+            background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background);
+
+            &:hover {
+                background: transparentize(
+                    if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background),
+                    0.5
+                );
+            }
+
+            &.active {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-media-buttons-enabled
+                );
+
+                &:hover {
+                    background: transparentize(
+                        if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-enabled),
+                        0.5
+                    );
+                }
+            }
+        }
+    }
+
+    image {
+        font-size: 1.1em;
+    }
+
+    .menu-slider.media.progress {
+        margin-top: 1em;
+        margin-bottom: 1em;
+
+        trough {
+            background: if(
+                $bar-menus-monochrome,
+                $bar-menus-slider-background,
+                $bar-menus-menu-media-slider-background
+            );
+            border-radius: $bar-menus-slider-progress-radius;
+
+            highlight,
+            progress {
+                border-radius: $bar-menus-slider-progress-radius;
+                min-height: 0.85em;
+                background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-media-slider-primary);
+            }
+        }
+
+        slider {
+            background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-media-slider-puck);
+        }
 
         &:hover {
-          background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-enabled), 0.5);
+            trough {
+                background: transparentize(
+                    if(
+                        $bar-menus-monochrome,
+                        $bar-menus-slider-backgroundhover,
+                        $bar-menus-menu-media-slider-backgroundhover
+                    ),
+                    0.3
+                );
+            }
         }
-      }
     }
-
-  }
-
-  image {
-    font-size: 1.1em;
-  }
-
-  .menu-slider.media.progress {
-    margin-top: 1em;
-    margin-bottom: 1em;
-
-    trough {
-      background: if($bar-menus-monochrome, $bar-menus-slider-background, $bar-menus-menu-media-slider-background);
-      border-radius: 0.2em;
-
-      highlight,
-      progress {
-        border-radius: 0.2em;
-        min-height: .85em;
-        background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-media-slider-primary);
-      }
-    }
-
-    slider {
-      background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-media-slider-puck);
-    }
-
-    &:hover {
-      trough {
-        background: transparentize(if($bar-menus-monochrome, $bar-menus-slider-backgroundhover, $bar-menus-menu-media-slider-backgroundhover), 0.3);
-      }
-    }
-  }
 }

scss/style/menus/menu.scss

@@ -1,12 +1,12 @@
 .menu-slider {
     trough {
-        border-radius: 0.3rem;
+        border-radius: $bar-menus-slider-progress-radius;
         background: $surface0;
 
         highlight,
         progress {
             background: $peach;
-            border-radius: 0.3rem;
+            border-radius: $bar-menus-slider-progress-radius;
         }
     }
 
@@ -16,7 +16,7 @@
         min-height: 0.6rem;
         min-width: 0.6rem;
         border: 0rem solid transparent;
-        border-radius: 0.3rem;
+        border-radius: $bar-menus-slider-slider-radius;
     }
 
     &:hover {
@@ -34,7 +34,7 @@
 .menu-switch {
     font-size: 1.3em;
     background-color: $surface0;
-    border-radius: 0.2em;
+    border-radius: $bar-menus-switch-radius;
 
     &:checked {
         background: $sky;
@@ -44,7 +44,7 @@
         highlight,
         progress {
             background-color: $peach;
-            border-radius: 0.3em;
+            border-radius: $bar-menus-switch-radius;
         }
     }
 
@@ -54,7 +54,7 @@
         min-height: 1em;
         min-width: 1em;
         border: 0em solid transparent;
-        border-radius: 0.2em;
+        border-radius: $bar-menus-switch-slider-radius;
         margin: 0.1em 0.15em;
     }
 

scss/style/notifications/popups.scss

@@ -24,8 +24,8 @@
 
 .notification-card-image {
   border-radius: 0.4em;
-  min-width: 1.5em;
+  min-width: 2.5em;
-  min-height: 1.5em;
+  min-height: 2.5em;
   padding: 0.85em 0.85em;
   background-size: contain;
   background-repeat: no-repeat;

services/Cpu.ts

@@ -0,0 +1,41 @@
+// TODO: Convert to a real service
+
+// @ts-expect-error: This import is a special directive that tells the compiler to use the GTop library
+import GTop from 'gi://GTop';
+
+import { pollVariable } from 'customModules/PollVar';
+
+class Cpu {
+    private updateFrequency = Variable(2000);
+    public cpu = Variable(0);
+
+    private previousCpuData = new GTop.glibtop_cpu();
+
+    constructor() {
+        GTop.glibtop_get_cpu(this.previousCpuData);
+
+        this.calculateUsage = this.calculateUsage.bind(this);
+        pollVariable(this.cpu, [], this.updateFrequency.bind('value'), this.calculateUsage);
+    }
+
+    public calculateUsage(): number {
+        const currentCpuData = new GTop.glibtop_cpu();
+        GTop.glibtop_get_cpu(currentCpuData);
+
+        // Calculate the differences from the previous to current data
+        const totalDiff = currentCpuData.total - this.previousCpuData.total;
+        const idleDiff = currentCpuData.idle - this.previousCpuData.idle;
+
+        const cpuUsagePercentage = totalDiff > 0 ? ((totalDiff - idleDiff) / totalDiff) * 100 : 0;
+
+        this.previousCpuData = currentCpuData;
+
+        return cpuUsagePercentage;
+    }
+
+    public updateTimer(timerInMs: number): void {
+        this.updateFrequency.value = timerInMs;
+    }
+}
+
+export default Cpu;

services/Ram.ts

@@ -0,0 +1,73 @@
+// TODO: Convert to a real service
+
+const GLib = imports.gi.GLib;
+
+import { pollVariable } from 'customModules/PollVar';
+import { GenericResourceData } from 'lib/types/customModules/generic';
+
+class Ram {
+    private updateFrequency = Variable(2000);
+    private shouldRound = false;
+
+    public ram = Variable<GenericResourceData>({ total: 0, used: 0, percentage: 0, free: 0 });
+
+    constructor() {
+        this.calculateUsage = this.calculateUsage.bind(this);
+        pollVariable(this.ram, [], this.updateFrequency.bind('value'), this.calculateUsage);
+    }
+
+    public calculateUsage(): GenericResourceData {
+        try {
+            const [success, meminfoBytes] = GLib.file_get_contents('/proc/meminfo');
+
+            if (!success || !meminfoBytes) {
+                throw new Error('Failed to read /proc/meminfo or file content is null.');
+            }
+
+            const meminfo = new TextDecoder('utf-8').decode(meminfoBytes);
+
+            const totalMatch = meminfo.match(/MemTotal:\s+(\d+)/);
+            const availableMatch = meminfo.match(/MemAvailable:\s+(\d+)/);
+
+            if (!totalMatch || !availableMatch) {
+                throw new Error('Failed to parse /proc/meminfo for memory values.');
+            }
+
+            const totalRamInBytes = parseInt(totalMatch[1], 10) * 1024;
+            const availableRamInBytes = parseInt(availableMatch[1], 10) * 1024;
+
+            let usedRam = totalRamInBytes - availableRamInBytes;
+            usedRam = isNaN(usedRam) || usedRam < 0 ? 0 : usedRam;
+
+            return {
+                percentage: this.divide([totalRamInBytes, usedRam]),
+                total: totalRamInBytes,
+                used: usedRam,
+                free: availableRamInBytes,
+            };
+        } catch (error) {
+            console.error('Error calculating RAM usage:', error);
+            return { total: 0, used: 0, percentage: 0, free: 0 };
+        }
+    }
+
+    public setShouldRound(round: boolean): void {
+        this.shouldRound = round;
+    }
+
+    private divide([total, used]: number[]): number {
+        const percentageTotal = (used / total) * 100;
+
+        if (this.shouldRound) {
+            return total > 0 ? Math.round(percentageTotal) : 0;
+        }
+
+        return total > 0 ? parseFloat(percentageTotal.toFixed(2)) : 0;
+    }
+
+    updateTimer(timerInMs: number): void {
+        this.updateFrequency.value = timerInMs;
+    }
+}
+
+export default Ram;

services/Storage.ts

@@ -0,0 +1,61 @@
+// TODO: Convert to a real service
+
+// @ts-expect-error: This import is a special directive that tells the compiler to use the GTop library
+import GTop from 'gi://GTop';
+
+import { pollVariable } from 'customModules/PollVar';
+import { GenericResourceData } from 'lib/types/customModules/generic';
+
+class Storage {
+    private updateFrequency = Variable(2000);
+    private shouldRound = false;
+
+    public storage = Variable<GenericResourceData>({ total: 0, used: 0, percentage: 0, free: 0 });
+
+    constructor() {
+        this.calculateUsage = this.calculateUsage.bind(this);
+        pollVariable(this.storage, [], this.updateFrequency.bind('value'), this.calculateUsage);
+    }
+
+    public calculateUsage(): GenericResourceData {
+        try {
+            const currentFsUsage = new GTop.glibtop_fsusage();
+
+            GTop.glibtop_get_fsusage(currentFsUsage, '/');
+
+            const total = currentFsUsage.blocks * currentFsUsage.block_size;
+            const available = currentFsUsage.bavail * currentFsUsage.block_size;
+            const used = total - available;
+
+            return {
+                total,
+                used,
+                free: available,
+                percentage: this.divide([total, used]),
+            };
+        } catch (error) {
+            console.error('Error calculating Storage usage:', error);
+            return { total: 0, used: 0, percentage: 0, free: 0 };
+        }
+    }
+
+    public setShouldRound(round: boolean): void {
+        this.shouldRound = round;
+    }
+
+    private divide([total, used]: number[]): number {
+        const percentageTotal = (used / total) * 100;
+
+        if (this.shouldRound) {
+            return total > 0 ? Math.round(percentageTotal) : 0;
+        }
+
+        return total > 0 ? parseFloat(percentageTotal.toFixed(2)) : 0;
+    }
+
+    public updateTimer(timerInMs: number): void {
+        this.updateFrequency.value = timerInMs;
+    }
+}
+
+export default Storage;

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

@@ -283,7 +283,7 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
                     title: 'Monitor Specific',
                     subtitle:
                         'Only workspaces applicable to the monitor will be displayed.\n' +
-                        "Works in conjuction with 'Total Workspaces'.",
+                        "Works in conjunction with 'Total Workspaces'.",
                     type: 'boolean',
                 }),
                 Option({

widget/settings/pages/config/menus/dashboard.ts

@@ -16,7 +16,12 @@ export const DashboardMenuSettings = (): Scrollable<Child, Attribute> => {
             vertical: true,
             children: [
                 Header('Power Menu'),
-                Option({ opt: options.menus.dashboard.powermenu.avatar.image, title: 'Profile Image', type: 'img' }),
+                Option({
+                    opt: options.menus.dashboard.powermenu.avatar.image,
+                    title: 'Profile Image',
+                    type: 'img',
+                    subtitle: "By default, uses '~/.face.icon'",
+                }),
                 Option({
                     opt: options.menus.dashboard.powermenu.avatar.name,
                     title: 'Profile Name',
@@ -43,8 +48,10 @@ export const DashboardMenuSettings = (): Scrollable<Child, Attribute> => {
                 Option({ opt: options.menus.dashboard.powermenu.reboot, title: 'Reboot Command', type: 'string' }),
                 Option({ opt: options.menus.dashboard.powermenu.logout, title: 'Logout Command', type: 'string' }),
                 Option({ opt: options.menus.dashboard.powermenu.sleep, title: 'Sleep Command', type: 'string' }),
+
                 Header('Controls'),
                 Option({ opt: options.menus.dashboard.controls.enabled, title: 'Enabled', type: 'boolean' }),
+
                 Header('Resource Usage Metrics'),
                 Option({ opt: options.menus.dashboard.stats.enabled, title: 'Enabled', type: 'boolean' }),
                 Option({
@@ -53,6 +60,15 @@ export const DashboardMenuSettings = (): Scrollable<Child, Attribute> => {
                     subtitle: "NOTE: This is currently only available for NVidia GPUs and requires 'python-gpustat'.",
                     type: 'boolean',
                 }),
+                Option({
+                    opt: options.menus.dashboard.stats.interval,
+                    title: 'Update Interval',
+                    subtitle: 'The frequency at which to poll system metrics.',
+                    type: 'number',
+                    min: 100,
+                    increment: 500,
+                }),
+
                 Header('Shortcuts'),
                 Option({ opt: options.menus.dashboard.shortcuts.enabled, title: 'Enabled', type: 'boolean' }),
                 Option({

widget/settings/pages/theme/menus/index.ts

@@ -91,6 +91,12 @@ export const MenuTheme = (): Scrollable<Child, Attribute> => {
                 Header('Switch'),
                 Option({ opt: options.theme.bar.menus.switch.enabled, title: 'Enabled', type: 'color' }),
                 Option({ opt: options.theme.bar.menus.switch.disabled, title: 'Disabled', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.switch.radius, title: 'Switch Radius', type: 'string' }),
+                Option({
+                    opt: options.theme.bar.menus.switch.slider_radius,
+                    title: 'Switch Puck Radius',
+                    type: 'string',
+                }),
                 Option({ opt: options.theme.bar.menus.switch.puck, title: 'Puck', type: 'color' }),
 
                 Header('Check/Radio Buttons'),
@@ -123,6 +129,16 @@ export const MenuTheme = (): Scrollable<Child, Attribute> => {
                     title: 'Background (Hover)',
                     type: 'color',
                 }),
+                Option({
+                    opt: options.theme.bar.menus.slider.slider_radius,
+                    title: 'Slider Puck Radius',
+                    type: 'string',
+                }),
+                Option({
+                    opt: options.theme.bar.menus.slider.progress_radius,
+                    title: 'Slider/Progress Bar Radius',
+                    type: 'string',
+                }),
                 Option({ opt: options.theme.bar.menus.slider.puck, title: 'Puck', type: 'color' }),
 
                 Header('Dropdown Menu'),

widget/settings/pages/theme/menus/media.ts

@@ -73,7 +73,7 @@ export const MediaMenuTheme = (): Scrollable<Child, Attribute> => {
                 }),
                 Option({
                     opt: options.theme.bar.menus.menu.media.slider.backgroundhover,
-                    title: 'Backround (Hover)',
+                    title: 'Background (Hover)',
                     type: 'color',
                 }),
                 Option({ opt: options.theme.bar.menus.menu.media.slider.puck, title: 'Puck', type: 'color' }),