Implemented majority of dashboard

README.md

@@ -1,15 +1,14 @@
-
+Requirements: 
-# Starter Config
+```
-
+pipewire
-if suggestions don't work, first make sure
+bluez
-you have TypeScript LSP working in your editor
+bluez-utils
-
+grimblast
-if you do not want typechecking only suggestions
+gpu-screen-recorder
-
+nmcli
-```json
+networkmanager
-// tsconfig.json
+dart-sass
-"checkJs": false
+brightnessctl
+python
+python-gpustat
 ```
-
-types are symlinked to:
-/usr/share/com.github.Aylur.ags/types

modules/menus/dashboard/controls/index.js

@@ -1,30 +1,44 @@
 const Controls = () => {
   return Widget.Box({
-    class_name: "controls-container",
+    class_name: "dashboard-card controls-container",
+    hpack: "fill",
+    vpack: "fill",
+    expand: true,
     children: [
       Widget.Button({
-        class_name: "dashboard-button airplane-mode",
+        expand: true,
-      }),
-      Widget.Separator({
-        hpack: "center",
-        vexpand: true,
-        vertical: true,
-        class_name: "menu-separator dashboard-controls",
-      }),
-      Widget.Button({
         class_name: "dashboard-button wifi",
+        child: Widget.Label({
+          label: "󰤨",
+        }),
       }),
       Widget.Button({
+        expand: true,
         class_name: "dashboard-button bluetooth",
+        child: Widget.Label({
+          label: "󰂯",
+        }),
       }),
       Widget.Button({
+        expand: true,
         class_name: "dashboard-button notifications",
+        child: Widget.Label({
+          label: "󰂚",
+        }),
       }),
       Widget.Button({
+        expand: true,
         class_name: "dashboard-button playback",
+        child: Widget.Label({
+          label: "󰕾",
+        }),
       }),
       Widget.Button({
+        expand: true,
         class_name: "dashboard-button input",
+        child: Widget.Label({
+          label: "󰍬",
+        }),
       }),
     ],
   });

modules/menus/dashboard/profile/index.js

@@ -1,6 +1,12 @@
-import icons from '../../../icons/index.js';
+import icons from "../../../icons/index.js";
+import powermenu from "../../power/helpers/actions.js";
 
 const Profile = () => {
+  const handleClick = (action) => {
+    App.closeWindow("dashboardmenu");
+    return powermenu.action(action);
+  }
+
   return Widget.Box({
     class_name: "profiles-container",
     hpack: "fill",
@@ -14,13 +20,13 @@ const Profile = () => {
           Widget.Icon({
             hpack: "center",
             class_name: "profile-picture",
-            icon: `${App.configDir}/assets/21210205.png`
+            icon: `${App.configDir}/assets/21210205.png`,
           }),
           Widget.Label({
             hpack: "center",
             class_name: "profile-name",
-            label: "Jaskir Linux"
+            label: "Jaskir Linux",
-          })
+          }),
         ],
       }),
       Widget.Box({
@@ -30,27 +36,31 @@ const Profile = () => {
         children: [
           Widget.Button({
             class_name: "dashboard-button shutdown",
+            on_clicked: () => handleClick("shutdown"),
             tooltip_text: "Shut Down",
             vexpand: true,
-            child: Widget.Icon(icons.powermenu.shutdown)
+            child: Widget.Icon(icons.powermenu.shutdown),
           }),
           Widget.Button({
             class_name: "dashboard-button restart",
+            on_clicked: () => handleClick("reboot"),
             tooltip_text: "Restart",
             vexpand: true,
-            child: Widget.Icon(icons.powermenu.reboot)
+            child: Widget.Icon(icons.powermenu.reboot),
           }),
           Widget.Button({
             class_name: "dashboard-button lock",
+            on_clicked: () => handleClick("logout"),
             tooltip_text: "Log Out",
             vexpand: true,
-            child: Widget.Icon(icons.powermenu.logout)
+            child: Widget.Icon(icons.powermenu.logout),
           }),
           Widget.Button({
             class_name: "dashboard-button sleep",
+            on_clicked: () => handleClick("sleep"),
             tooltip_text: "Sleep",
             vexpand: true,
-            child: Widget.Icon(icons.powermenu.sleep)
+            child: Widget.Icon(icons.powermenu.sleep),
           }),
         ],
       }),

modules/menus/dashboard/shortcuts/index.js

@@ -1,38 +1,114 @@
 const Shortcuts = () => {
+  const handleClick = (action) => {
+    App.closeWindow("dashboardmenu");
+    Utils.execAsync(action)
+    .then(res => res)
+    .catch(err => err);
+  }
   return Widget.Box({
     class_name: "shortcuts-container",
+    hpack: "fill",
+    hexpand: true,
     children: [
       Widget.Box({
-        class_name: "most-used-container",
+        class_name: "container most-used dashboard-card",
+        hexpand: true,
+        children: [
+          Widget.Box({
+            class_name: "card-button-left-section",
+            vertical: true,
+            hexpand: true,
             children: [
               Widget.Button({
-            class_name: "dashboard-button edge",
+                class_name: "dashboard-button edge top-button",
+                on_primary_click: () => handleClick("microsoft-edge-stable"),
+                child: Widget.Label({
+                  class_name: "button-label",
+                  label: "󰇩",
+                }),
               }),
               Widget.Button({
                 class_name: "dashboard-button spotify",
+                on_primary_click: () => handleClick("spotify-launcher"),
+                child: Widget.Label({
+                  class_name: "button-label",
+                  label: "",
                 }),
-          Widget.Button({
-            class_name: "dashboard-button discord",
-          }),
-          Widget.Button({
-            class_name: "dashboard-button search",
               }),
             ],
           }),
           Widget.Box({
-        class_name: "utilities-container",
+            vertical: true,
+            hexpand: true,
             children: [
               Widget.Button({
-            class_name: "dashboard-button utility",
+                class_name: "dashboard-button discord top-button",
+                on_primary_click: () => handleClick("discord"),
+                child: Widget.Label({
+                  class_name: "button-label",
+                  label: "",
+                }),
               }),
               Widget.Button({
-            class_name: "dashboard-button utility",
+                class_name: "dashboard-button search",
+                on_primary_click: () => handleClick("rofi -show drun"),
+                child: Widget.Label({
+                  class_name: "button-label",
+                  label: "",
+                }),
+              }),
+            ],
+          }),
+        ],
+      }),
+      Widget.Box({
+        class_name: "container utilities dashboard-card",
+        hexpand: true,
+        children: [
+          Widget.Box({
+            class_name: "card-button-left-section",
+            vertical: true,
+            hexpand: true,
+            children: [
+              Widget.Button({
+                class_name: "dashboard-button colorpicker top-button",
+                on_primary_click: () => handleClick("hyprpicker"),
+                child: Widget.Label({
+                  class_name: "button-label",
+                  label: "",
+                }),
               }),
               Widget.Button({
-            class_name: "dashboard-button utility",
+                class_name: "dashboard-button settings",
+                on_primary_click: () => handleClick('bash -c "kitty -e nvim $HOME/.config/hypr/hyprland.conf"'),
+                child: Widget.Label({
+                  class_name: "button-label",
+                  label: "󰒓",
+                }),
+              }),
+            ],
+          }),
+          Widget.Box({
+            vertical: true,
+            hexpand: true,
+            children: [
+              Widget.Button({
+                class_name: "dashboard-button snapshot top-button",
+                on_primary_click: () => handleClick("grimblast --notify copysave area"),
+                child: Widget.Label({
+                  class_name: "button-label",
+                  label: "󰄀",
+                }),
               }),
               Widget.Button({
-            class_name: "dashboard-button utility",
+                class_name: "dashboard-button record",
+                on_primary_click: () => handleClick("rofi -show drun"),
+                child: Widget.Label({
+                  class_name: "button-label",
+                  label: "󰑊",
+                }),
+              }),
+            ],
           }),
         ],
       }),

modules/menus/dashboard/stats/index.js

@@ -1,18 +1,232 @@
 const Stats = () => {
+  const divide = ([total, free]) => free / total;
+
+  const formatSizeInGB = (sizeInKB) =>
+    Number((sizeInKB / 1024 ** 2).toFixed(2));
+
+  const cpu = Variable(0, {
+    poll: [
+      2000,
+      "top -b -n 1",
+      (out) => {
+        if (typeof out !== "string") {
+          return 0;
+        }
+
+        const cpuOut = out.split("\n").find((line) => line.includes("Cpu(s)"));
+
+        if (cpuOut === undefined) {
+          return 0;
+        }
+
+        return divide([100, cpuOut.split(/\s+/)[1].replace(",", ".")]);
+      },
+    ],
+  });
+
+  const ram = Variable(
+    { total: 0, used: 0, percentage: 0 },
+    {
+      poll: [
+        2000,
+        "free",
+        (out) => {
+          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, {
+    poll: [
+      2000,
+      "gpustat --json",
+      (out) => {
+        if (typeof out !== "string") {
+          return 0;
+        }
+        try {
+          const data = JSON.parse(out);
+
+          const totalGpu = 100;
+          const usedGpu =
+            data.gpus.reduce((acc, gpu) => acc + gpu["utilization.gpu"], 0) /
+            data.gpus.length;
+
+          return divide([totalGpu, usedGpu]);
+        } catch (e) {
+          console.error("Error getting GPU stats:", e);
+          return 0;
+        }
+      },
+    ],
+  });
+
+  const storage = Variable(
+    { total: 0, used: 0, percentage: 0 },
+    {
+      poll: [
+        2000,
+        "df -B1 /",
+        (out) => {
+          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: "stats-container",
+    class_name: "dashboard-card stats-container",
+    vertical: true,
+    vpack: "fill",
+    hpack: "fill",
+    expand: true,
     children: [
       Widget.Box({
-        class_name: "stat-cpu",
+        vertical: true,
+        children: [
+          Widget.Box({
+            class_name: "stat cpu",
+            hexpand: true,
+            vpack: "center",
+            children: [
+              Widget.Label({
+                label: "",
+              }),
+              Widget.LevelBar({
+                class_name: "stats-bar",
+                hexpand: true,
+                vpack: "center",
+                bar_mode: "continuous",
+                max_value: 1,
+                value: cpu.bind("value"),
+              }),
+            ],
+          }),
+          Widget.Label({
+            hpack: "end",
+            class_name: "stat-value cpu",
+            label: cpu.bind("value").as((v) => `${Math.floor(v * 100)}%`),
+          }),
+        ],
       }),
       Widget.Box({
-        class_name: "stat-ram",
+        vertical: true,
+        children: [
+          Widget.Box({
+            class_name: "stat ram",
+            vpack: "center",
+            hexpand: true,
+            children: [
+              Widget.Label({
+                label: "",
+              }),
+              Widget.LevelBar({
+                class_name: "stats-bar",
+                hexpand: true,
+                vpack: "center",
+                value: ram.bind("value").as((v) => v.percentage),
+              }),
+            ],
+          }),
+          Widget.Label({
+            hpack: "end",
+            class_name: "stat-value ram",
+            label: ram.bind("value").as((v) => `${v.used}/${v.total} GB`),
+          }),
+        ],
       }),
       Widget.Box({
-        class_name: "stat-gpu",
+        vertical: true,
+        children: [
+          Widget.Box({
+            class_name: "stat gpu",
+            hexpand: true,
+            vpack: "center",
+            children: [
+              Widget.Label({
+                label: "󰢮",
+              }),
+              Widget.LevelBar({
+                class_name: "stats-bar",
+                hexpand: true,
+                vpack: "center",
+                value: gpu.bind("value"),
+              }),
+            ],
+          }),
+          Widget.Label({
+            hpack: "end",
+            class_name: "stat-value gpu",
+            label: gpu.bind("value").as((v) => `${Math.floor(v * 100)}%`),
+          }),
+        ],
       }),
       Widget.Box({
-        class_name: "stat-storage",
+        vertical: true,
+        children: [
+          Widget.Box({
+            class_name: "stat storage",
+            hexpand: true,
+            vpack: "center",
+            children: [
+              Widget.Label({
+                label: "󰋊",
+              }),
+              Widget.LevelBar({
+                class_name: "stats-bar",
+                hexpand: true,
+                vpack: "center",
+                value: storage.bind("value").as((v) => v.percentage),
+              }),
+            ],
+          }),
+          Widget.Label({
+            hpack: "end",
+            class_name: "stat-value storage",
+            label: storage.bind("value").as((v) => `${v.used}/${v.total} GB`),
+          }),
+        ],
       }),
     ],
   });

modules/menus/network/wifi/WirelessAPs.js

@@ -32,7 +32,9 @@ const renderWAPs = (self, network, staging, connecting) => {
         // Sometimes the network service will yield a "this._device is undefined" when
         // trying to access the "access_points" property. So we must validate that
         // it's not 'undefined'
-        let WAPs = network.wifi["access_points"] !== undefined
+        let WAPs =
+          Object.hasOwnProperty.call(network.wifi, "access_points") &&
+          network.wifi["access_points"] !== undefined
             ? network.wifi["access-points"]
             : [];
 
@@ -42,10 +44,10 @@ const renderWAPs = (self, network, staging, connecting) => {
             if (!Object.hasOwnProperty.call(dedupMap, item.ssid)) {
               dedupMap[item.ssid] = item;
             }
-          })
+          });
 
-          return Object.keys(dedupMap).map(itm => dedupMap[itm]);
+          return Object.keys(dedupMap).map((itm) => dedupMap[itm]);
-        }
+        };
 
         WAPs = dedupeWAPs();
 
@@ -64,11 +66,9 @@ const renderWAPs = (self, network, staging, connecting) => {
           return false;
         };
 
-        const filteredWAPs = WAPs.filter(
+        const filteredWAPs = WAPs.filter((ap) => {
-          (ap) => {
+          return ap.ssid !== "Unknown" && !isInStaging(ap);
-            return ap.ssid !== "Unknown" && !isInStaging(ap)
+        }).sort((a, b) => {
-          },
-        ).sort((a, b) => {
           if (network.wifi.ssid === a.ssid) {
             return -1;
           }
@@ -165,7 +165,8 @@ const renderWAPs = (self, network, staging, connecting) => {
                     Widget.Revealer({
                       hpack: "end",
                       vpack: "start",
-                      reveal_child: ap.bssid === connecting.value || isDisconnecting(ap),
+                      reveal_child:
+                        ap.bssid === connecting.value || isDisconnecting(ap),
                       child: Widget.Spinner({
                         vpack: "start",
                         class_name: "spinner wap",

scss/menus/dashboard.scss

@@ -1,11 +1,15 @@
 @import "../colors";
 
 .dashboard-content-items {
-    min-width: 30em;
+    min-width: 26.5em;
     background: $crust;
     border: 0.13em solid $surface0;
     border-radius: 0.7em;
 
+    button {
+        border-radius: 0.4em;
+    }
+
     .dashboard-card {
         background: $base;
         margin: 1.3em;
@@ -15,7 +19,7 @@
 
     .profile-picture-container {
         .profile-picture {
-            font-size: 10em;
+            font-size: 7.5em;
         }
         .profile-name {
             font-size: 1.5em;
@@ -28,12 +32,11 @@
         margin-left: 0em;
 
         .dashboard-button {
-            min-width: 2.5em;
+            min-width: 3em;
             min-height: 2.5em;
-            border-radius: 0.4em;
 
             &:not(:last-child) {
-                margin-bottom: 1em;
+                margin-bottom: 0.75em;
             }
 
             image {
@@ -61,4 +64,189 @@
         }
     }
 
+    .shortcuts-container {
+        .dashboard-card {
+            padding: 1.5em;
+            button {
+                min-height: 2.5em;
+                min-width: 2.5em;
+            }
+        }
+
+        .card-button-left-section {
+            margin-right: 1.5em;
+        }
+
+        .top-button {
+            margin-bottom: 1.5em;
+        }
+
+        .container {
+            margin-top: 0em;
+
+            &.most-used {
+                margin-right: 0em;
+            }
+
+            button {
+                background: $lavender;
+                color: $base;
+                min-height: 3em;
+
+
+                label {
+                    font-size: 1.5em;
+                }
+
+                &.record.active {
+                    background: $red;
+                }
+
+                &:hover {
+                    background: $pink;
+                }
+            }
+        }
+    }
+
+    .controls-container {
+        &.dashboard-card {
+            margin-top: 0em;
+            // padding: 1em;
+        }
+
+        button {
+            background: $red;
+            padding: 0em;
+            min-height: 3em;
+
+            label {
+                color: $base;
+                font-size: 1.6em;
+            }
+
+            &:not(:last-child) {
+                margin-right: 1em;
+            }
+            
+            &.wifi {
+                background: $mauve;
+            }
+            &.bluetooth {
+                background: $sky;
+            }
+            &.notifications {
+                background: $yellow;
+            }
+            &.playback {
+                background: $maroon;
+            }
+            &.input {
+                background: $pink;
+            }
+            &:hover {
+                background: $surface2;
+            }
+            &.disabled {
+                background: $surface2;
+                &.wifi:hover {
+                    background: $mauve;
+                }
+                &.bluetooth:hover {
+                    background: $sky;
+                }
+                &.notifications:hover {
+                    background: $yellow;
+                }
+                &.playback:hover {
+                    background: $maroon;
+                }
+                &.input:hover {
+                    background: $pink;
+                }
+            }
+        }
+    }
+
+    .stats-container {
+        margin-top: 0em;
+
+        .stat {
+            label {
+                margin-right: 1em;
+                font-size: 1.5em;
+            }
+
+            &.cpu label{
+                color: $maroon;
+            }
+            &.ram label{
+                color: $yellow;
+            }
+            &.gpu label{
+                color: $green;
+            }
+            &.storage label{
+                color: $pink;
+            }
+
+            .stats-bar {
+                levelbar * {
+                    transition: 200ms;
+                }
+
+                trough {
+                    min-height: 1.2em;
+                }
+
+                block {
+                    border-radius: 0.4em;
+
+                    &.empty {
+                        background: $surface1;
+                    }
+
+                    &.filled {
+                        padding-left: 0.85em;
+                    }
+                }
+            }
+
+            &.cpu .stats-bar block.filled {
+                background: $maroon;
+            }
+
+            &.ram .stats-bar block.filled {
+                background: $yellow;
+            }
+
+            &.gpu .stats-bar block.filled {
+                background: $green;
+            }
+
+            &.storage .stats-bar block.filled {
+                background: $pink;
+            }
+        }
+
+        .stat-value {
+            margin-bottom: 0.75em;
+            font-size: 0.9em;
+            &.cpu {
+                color: $maroon;
+            }
+
+            &.ram {
+                color: $yellow;
+            }
+
+            &.gpu {
+                color: $green;
+            }
+
+            &.storage {
+                color: $pink;
+            }
+        }
+    }
 }

scss/menus/menu.scss

@@ -94,13 +94,13 @@ tooltip label {
     background: $crust;
     border: .13em solid $surface0;
     border-radius: .7rem;
-    min-width: 275px;
+    min-width: 400px;
     color: $text;
 }
 
 .menu-items-container {
     border-radius: 0.4em;
-    min-width: 275px;
+    min-width: 400px;
 }
 
 .menu-section-container {

services/screen_record.sh

@@ -0,0 +1,91 @@
+#!/bin/bash
+
+outputDir="$HOME/Videos"
+
+checkRecording() {
+    if pgrep -x "gpu-screen-recorder" > /dev/null; then
+        return 0
+    else
+        return 1
+    fi
+}
+
+startRecording() {
+    if checkRecording; then
+        echo "A recording is already in progress."
+        exit 1
+    fi
+
+    if [ -z "$2" ]; then
+        echo "Usage: $0 start {screen|window} [screen_name|window_id]"
+        exit 1
+    fi
+
+    mode="$2"
+    target="$3"
+
+    outputFile="recording_$(date +%Y-%m-%d_%H-%M-%S).mp4"
+    outputPath="$outputDir/$outputFile"
+    mkdir -p "$outputDir"
+
+    case "$mode" in
+        screen)
+            if [ -z "$target" ]; then
+                echo "Usage: $0 start screen [screen_name]"
+                exit 1
+            fi
+            gpu-screen-recorder -w "$target" -f 60 -a "$(pactl get-default-sink).monitor" -o "$outputPath" &
+            ;;
+        window)
+            if [ -z "$target" ]; then
+                echo "Usage: $0 start window [window_id]"
+                exit 1
+            fi
+            gpu-screen-recorder -w "$target" -f 60 -a "$(pactl get-default-sink).monitor" -o "$outputPath" &
+            ;;
+        *)
+            echo "Invalid mode. Use 'screen' or 'window'."
+            exit 1
+            ;;
+    esac
+
+    echo "Recording started. Output will be saved to $outputPath"
+}
+
+stopRecording() {
+    if ! checkRecording; then
+        echo "No recording is in progress."
+        exit 1
+    fi
+
+    pkill -SIGINT gpu-screen-recorder
+    recentFile=$(ls -t "$outputDir"/recording_*.mp4 | head -n 1)
+    notify-send "Recording stopped" "Your recording has been saved." \
+        -i video-x-generic \
+        -a "Screen Recorder" \
+        -t 10000 \
+        -u normal \
+        --action="open_directory=xdg-open $outputDir" \
+        --action="play_recording=xdg-open $recentFile"
+    echo "Recording stopped. Output saved to $recentFile"
+}
+
+case "$1" in
+    start)
+        startRecording "$@"
+        ;;
+    stop)
+        stopRecording
+        ;;
+    status)
+        if checkRecording; then
+            echo "A recording is in progress."
+        else
+            echo "No recording is in progress."
+        fi
+        ;;
+    *)
+        echo "Usage: $0 {start {screen|window} [screen_name|window_id]|stop|status}"
+        exit 1
+        ;;
+esac

style.css

@@ -654,6 +654,18 @@ tooltip label {
   margin-top: 2.8em;
 }
 
+@keyframes spin {
+  to {
+    -gtk-icon-transform: rotate(1turn);
+  }
+}
+image.spinning {
+  animation-name: spin;
+  animation-duration: 1s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
 window#powermenu,
 window#verification {
   background-color: rgba(0, 0, 0, 0.4);
@@ -851,6 +863,12 @@ window#powermenu .powermenu.box {
 .menu-items-container.network .menu-label {
   color: #cba6f7;
 }
+.menu-items-container.network .menu-icon-button.network {
+  margin: 1em;
+}
+.menu-items-container.network .menu-icon-button.network:hover {
+  color: #cba6f7;
+}
 .menu-items-container.network .network-icon {
   font-size: 1.3em;
   min-width: 1em;
@@ -927,17 +945,6 @@ window#powermenu .powermenu.box {
   font-size: 0.8em;
   margin-bottom: 0em;
 }
-@keyframes spin {
-  to {
-    -gtk-icon-transform: rotate(1turn);
-  }
-}
-.menu-items-container.bluetooth button.search image.spinning {
-  animation-name: spin;
-  animation-duration: 1s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-}
 .menu-items-container.bluetooth button.search image {
   color: #cdd6f4;
 }
@@ -1308,6 +1315,205 @@ window#powermenu .powermenu.box {
   margin-bottom: 0.2em;
 }
 
+.dashboard-content-items {
+  min-width: 26.5em;
+  background: #11111b;
+  border: 0.13em solid #313244;
+  border-radius: 0.7em;
+}
+.dashboard-content-items button {
+  border-radius: 0.4em;
+}
+.dashboard-content-items .dashboard-card {
+  background: #1e1e2e;
+  margin: 1.3em;
+  border-radius: 0.4em;
+  padding: 1.5em;
+}
+.dashboard-content-items .profile-picture-container .profile-picture {
+  font-size: 7.5em;
+}
+.dashboard-content-items .profile-picture-container .profile-name {
+  font-size: 1.5em;
+  color: #f5c2e7;
+  margin-top: 0.75em;
+}
+.dashboard-content-items .power-menu-container {
+  margin-left: 0em;
+}
+.dashboard-content-items .power-menu-container .dashboard-button {
+  min-width: 3em;
+  min-height: 2.5em;
+}
+.dashboard-content-items .power-menu-container .dashboard-button:not(:last-child) {
+  margin-bottom: 0.75em;
+}
+.dashboard-content-items .power-menu-container .dashboard-button image {
+  color: #1e1e2e;
+  font-size: 1.5em;
+}
+.dashboard-content-items .power-menu-container .dashboard-button.shutdown {
+  background: #f38ba8;
+}
+.dashboard-content-items .power-menu-container .dashboard-button.restart {
+  background: #fab387;
+}
+.dashboard-content-items .power-menu-container .dashboard-button.lock {
+  background: #a6e3a1;
+}
+.dashboard-content-items .power-menu-container .dashboard-button.sleep {
+  background: #89dceb;
+}
+.dashboard-content-items .power-menu-container .dashboard-button:hover {
+  background: #cba6f7;
+}
+.dashboard-content-items .shortcuts-container .dashboard-card {
+  padding: 1.5em;
+}
+.dashboard-content-items .shortcuts-container .dashboard-card button {
+  min-height: 2.5em;
+  min-width: 2.5em;
+}
+.dashboard-content-items .shortcuts-container .card-button-left-section {
+  margin-right: 1.5em;
+}
+.dashboard-content-items .shortcuts-container .top-button {
+  margin-bottom: 1.5em;
+}
+.dashboard-content-items .shortcuts-container .container {
+  margin-top: 0em;
+}
+.dashboard-content-items .shortcuts-container .container.most-used {
+  margin-right: 0em;
+}
+.dashboard-content-items .shortcuts-container .container button {
+  background: #b4befe;
+  color: #1e1e2e;
+  min-height: 3em;
+}
+.dashboard-content-items .shortcuts-container .container button label {
+  font-size: 1.5em;
+}
+.dashboard-content-items .shortcuts-container .container button.record.active {
+  background: #f38ba8;
+}
+.dashboard-content-items .shortcuts-container .container button:hover {
+  background: #f5c2e7;
+}
+.dashboard-content-items .controls-container.dashboard-card {
+  margin-top: 0em;
+}
+.dashboard-content-items .controls-container button {
+  background: #f38ba8;
+  padding: 0em;
+  min-height: 3em;
+}
+.dashboard-content-items .controls-container button label {
+  color: #1e1e2e;
+  font-size: 1.6em;
+}
+.dashboard-content-items .controls-container button:not(:last-child) {
+  margin-right: 1em;
+}
+.dashboard-content-items .controls-container button.wifi {
+  background: #cba6f7;
+}
+.dashboard-content-items .controls-container button.bluetooth {
+  background: #89dceb;
+}
+.dashboard-content-items .controls-container button.notifications {
+  background: #f9e2af;
+}
+.dashboard-content-items .controls-container button.playback {
+  background: #eba0ac;
+}
+.dashboard-content-items .controls-container button.input {
+  background: #f5c2e7;
+}
+.dashboard-content-items .controls-container button:hover {
+  background: #585b70;
+}
+.dashboard-content-items .controls-container button.disabled {
+  background: #585b70;
+}
+.dashboard-content-items .controls-container button.disabled.wifi:hover {
+  background: #cba6f7;
+}
+.dashboard-content-items .controls-container button.disabled.bluetooth:hover {
+  background: #89dceb;
+}
+.dashboard-content-items .controls-container button.disabled.notifications:hover {
+  background: #f9e2af;
+}
+.dashboard-content-items .controls-container button.disabled.playback:hover {
+  background: #eba0ac;
+}
+.dashboard-content-items .controls-container button.disabled.input:hover {
+  background: #f5c2e7;
+}
+.dashboard-content-items .stats-container {
+  margin-top: 0em;
+}
+.dashboard-content-items .stats-container .stat label {
+  margin-right: 1em;
+  font-size: 1.5em;
+}
+.dashboard-content-items .stats-container .stat.cpu label {
+  color: #eba0ac;
+}
+.dashboard-content-items .stats-container .stat.ram label {
+  color: #f9e2af;
+}
+.dashboard-content-items .stats-container .stat.gpu label {
+  color: #a6e3a1;
+}
+.dashboard-content-items .stats-container .stat.storage label {
+  color: #f5c2e7;
+}
+.dashboard-content-items .stats-container .stat .stats-bar levelbar * {
+  transition: 200ms;
+}
+.dashboard-content-items .stats-container .stat .stats-bar trough {
+  min-height: 1.2em;
+}
+.dashboard-content-items .stats-container .stat .stats-bar block {
+  border-radius: 0.4em;
+}
+.dashboard-content-items .stats-container .stat .stats-bar block.empty {
+  background: #45475a;
+}
+.dashboard-content-items .stats-container .stat .stats-bar block.filled {
+  padding-left: 0.85em;
+}
+.dashboard-content-items .stats-container .stat.cpu .stats-bar block.filled {
+  background: #eba0ac;
+}
+.dashboard-content-items .stats-container .stat.ram .stats-bar block.filled {
+  background: #f9e2af;
+}
+.dashboard-content-items .stats-container .stat.gpu .stats-bar block.filled {
+  background: #a6e3a1;
+}
+.dashboard-content-items .stats-container .stat.storage .stats-bar block.filled {
+  background: #f5c2e7;
+}
+.dashboard-content-items .stats-container .stat-value {
+  margin-bottom: 0.75em;
+  font-size: 0.9em;
+}
+.dashboard-content-items .stats-container .stat-value.cpu {
+  color: #eba0ac;
+}
+.dashboard-content-items .stats-container .stat-value.ram {
+  color: #f9e2af;
+}
+.dashboard-content-items .stats-container .stat-value.gpu {
+  color: #a6e3a1;
+}
+.dashboard-content-items .stats-container .stat-value.storage {
+  color: #f5c2e7;
+}
+
 .notification-card-container {
   margin-top: 3.5rem;
 }