Begin work on dashboard

modules/menus/dashboard/profile/index.js

@@ -1,32 +1,56 @@
+import icons from '../../../icons/index.js';
+
 const Profile = () => {
   return Widget.Box({
     class_name: "profiles-container",
+    hpack: "fill",
+    hexpand: true,
     children: [
       Widget.Box({
-        class_name: "profile-picture-container",
+        class_name: "profile-picture-container dashboard-card",
+        hexpand: true,
+        vertical: true,
         children: [
           Widget.Icon({
+            hpack: "center",
             class_name: "profile-picture",
+            icon: `${App.configDir}/assets/21210205.png`
           }),
-          Widget.Box({
+          Widget.Label({
+            hpack: "center",
             class_name: "profile-name",
-          }),
+            label: "Jaskir Linux"
+          })
         ],
       }),
       Widget.Box({
-        class_name: "power-menu-container",
+        class_name: "power-menu-container dashboard-card",
+        vertical: true,
+        vexpand: true,
         children: [
           Widget.Button({
             class_name: "dashboard-button shutdown",
+            tooltip_text: "Shut Down",
+            vexpand: true,
+            child: Widget.Icon(icons.powermenu.shutdown)
           }),
           Widget.Button({
             class_name: "dashboard-button restart",
+            tooltip_text: "Restart",
+            vexpand: true,
+            child: Widget.Icon(icons.powermenu.reboot)
           }),
           Widget.Button({
             class_name: "dashboard-button lock",
+            tooltip_text: "Log Out",
+            vexpand: true,
+            child: Widget.Icon(icons.powermenu.logout)
           }),
           Widget.Button({
             class_name: "dashboard-button sleep",
+            tooltip_text: "Sleep",
+            vexpand: true,
+            child: Widget.Icon(icons.powermenu.sleep)
           }),
         ],
       }),

scss/main.scss

@@ -36,6 +36,7 @@
 @import "menus/notifications";
 @import "menus/calendar";
 @import "menus/energy";
+@import "menus/dashboard";
 
 //notifications
 @import "notifications/popups";

scss/menus/dashboard.scss

@@ -0,0 +1,64 @@
+@import "../colors";
+
+.dashboard-content-items {
+    min-width: 30em;
+    background: $crust;
+    border: 0.13em solid $surface0;
+    border-radius: 0.7em;
+
+    .dashboard-card {
+        background: $base;
+        margin: 1.3em;
+        border-radius: 0.4em;
+        padding: 1.5em;
+    }
+
+    .profile-picture-container {
+        .profile-picture {
+            font-size: 10em;
+        }
+        .profile-name {
+            font-size: 1.5em;
+            color: $pink;
+            margin-top: 0.75em;
+        }
+    }
+
+    .power-menu-container {
+        margin-left: 0em;
+
+        .dashboard-button {
+            min-width: 2.5em;
+            min-height: 2.5em;
+            border-radius: 0.4em;
+
+            &:not(:last-child) {
+                margin-bottom: 1em;
+            }
+
+            image {
+                color: $base;
+                font-size: 1.5em;
+            }
+
+            &.shutdown {
+                background: $red;
+            }
+            &.restart {
+                background: $peach;
+            }
+            &.lock {
+                background: $green;
+            }
+            &.sleep {
+                background: $sky;
+            }
+
+            &:hover {
+                background: $mauve;
+            }
+
+        }
+    }
+
+}