diff --git a/assets/21210205.png b/assets/21210205.png new file mode 100644 index 0000000..c1f3edc Binary files /dev/null and b/assets/21210205.png differ diff --git a/modules/menus/dashboard/profile/index.js b/modules/menus/dashboard/profile/index.js index c05fb75..6a5a0a1 100644 --- a/modules/menus/dashboard/profile/index.js +++ b/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) }), ], }), diff --git a/scss/main.scss b/scss/main.scss index 319e85d..ab89e88 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -36,6 +36,7 @@ @import "menus/notifications"; @import "menus/calendar"; @import "menus/energy"; +@import "menus/dashboard"; //notifications @import "notifications/popups"; diff --git a/scss/menus/dashboard.scss b/scss/menus/dashboard.scss new file mode 100644 index 0000000..3e92042 --- /dev/null +++ b/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; + } + + } + } + +}