From f34a3b952108d27f0988c3301efc945b2c3e2893 Mon Sep 17 00:00:00 2001
From: Andreas Kling <kling@serenityos.org>
Date: Sun, 16 May 2021 20:57:45 +0200
Subject: [PATCH] Taskbar: Give the shutdown dialog a UI facelift :^)

---
 Base/res/icons/32x32/shutdown.png            | Bin 0 -> 432 bytes
 Userland/Services/Taskbar/ShutdownDialog.cpp |  80 ++++++++++++-------
 2 files changed, 51 insertions(+), 29 deletions(-)
 create mode 100644 Base/res/icons/32x32/shutdown.png

diff --git a/Base/res/icons/32x32/shutdown.png b/Base/res/icons/32x32/shutdown.png
new file mode 100644
index 0000000000000000000000000000000000000000..7da2d6189538471bd7b3c2eb49bb62e47a025147
GIT binary patch
literal 432
zcmeAS@N?(olHy`uVBq!ia0y~yU{C;I4mJh`hT^KKFANNf<(@8%ArXh)PBY9q<RIYs
zUuwR>T5F{!aSbuoyatz-O_PLoJYXpK68wZ=%89>XUo>@=7G!3sich<<;{)%7C7qLQ
zINbOu)xi?ndu`hN`#+7ZG4${FE?}iEDEOVRd(n%A=dTW=Z=Pvdv-u_i!*>0*uj&%)
z=9jmv4_iI?e9UBiRnH_I`*7Rk{P{C?Z|}IQzN1^<IGdi!=9R4i$CRozF3^4QiYe#N
z#+_d`${DO}%Z~naUujpw!+V$h*I#6I6P@9scC2C5s$YU1uK)k@NHjuk`u5EW)@A?L
zm(Q!!btvXQ+3u$we?)Q{NZ2IqU(bJTla8~@aR!F-p97{Xy(c0d$nMCnRIA5LpW(uZ
zr8W6a4nO?xz~;1(#!?1`-FNv?BVV1>5iFedTxV$t!<sAZ%KxJ-TAcs<eow95(iEjf
zN0ScDd%p3TpNEUh+<j%=qE^n|*!}p&o3lqZ{$2l8m0`{GeD#Hi65CufmSnC9Ei3GN
r8!lc~!ga}Ht60L7g8m)9f3Soq9I?L1?zoSEfq}u()z4*}Q$iB}aBs<|

literal 0
HcmV?d00001

diff --git a/Userland/Services/Taskbar/ShutdownDialog.cpp b/Userland/Services/Taskbar/ShutdownDialog.cpp
index 6b80374fd4..f947801c37 100644
--- a/Userland/Services/Taskbar/ShutdownDialog.cpp
+++ b/Userland/Services/Taskbar/ShutdownDialog.cpp
@@ -9,6 +9,7 @@
 #include <AK/Vector.h>
 #include <LibGUI/BoxLayout.h>
 #include <LibGUI/Button.h>
+#include <LibGUI/ImageWidget.h>
 #include <LibGUI/Label.h>
 #include <LibGUI/RadioButton.h>
 #include <LibGUI/Widget.h>
@@ -23,10 +24,9 @@ struct Option {
 };
 
 static const Vector<Option> options = {
-    { "Shut down", { "/bin/shutdown", "--now", nullptr }, true, true },
-    { "Restart", { "/bin/reboot", nullptr }, true, false },
+    { "Power off computer", { "/bin/shutdown", "--now", nullptr }, true, true },
+    { "Reboot", { "/bin/reboot", nullptr }, true, false },
     { "Log out", {}, false, false },
-    { "Sleep", {}, false, false },
 };
 
 Vector<char const*> ShutdownDialog::show()
@@ -42,29 +42,41 @@ Vector<char const*> ShutdownDialog::show()
 ShutdownDialog::ShutdownDialog()
     : Dialog(nullptr)
 {
-    resize(180, 180 + ((static_cast<int>(options.size()) - 3) * 16));
-    center_on_screen();
-    set_resizable(false);
-    set_title("SerenityOS");
-    set_icon(Gfx::Bitmap::load_from_file("/res/icons/16x16/power.png"));
+    auto& widget = set_main_widget<GUI::Widget>();
+    widget.set_fill_with_background_color(true);
+    widget.set_layout<GUI::VerticalBoxLayout>();
+    widget.layout()->set_spacing(0);
 
-    // Request WindowServer to re-update us on the current theme as we might've not been alive for the last notification.
-    refresh_system_theme();
+    auto& banner_image = widget.add<GUI::ImageWidget>();
+    banner_image.load_from_file("/res/graphics/brand-banner.png");
 
-    auto& main = set_main_widget<GUI::Widget>();
-    main.set_layout<GUI::VerticalBoxLayout>();
-    main.layout()->set_margins({ 8, 8, 8, 8 });
-    main.layout()->set_spacing(8);
-    main.set_fill_with_background_color(true);
+    auto& content_container = widget.add<GUI::Widget>();
+    content_container.set_layout<GUI::HorizontalBoxLayout>();
 
-    auto& header = main.add<GUI::Label>();
-    header.set_text("What would you like to do?");
-    header.set_fixed_height(16);
-    header.set_font(Gfx::FontDatabase::default_bold_font());
+    auto& left_container = content_container.add<GUI::Widget>();
+    left_container.set_fixed_width(60);
+    left_container.set_layout<GUI::VerticalBoxLayout>();
+    left_container.layout()->set_margins({ 0, 12, 0, 0 });
+
+    auto& icon_wrapper = left_container.add<GUI::Widget>();
+    icon_wrapper.set_fixed_size(32, 48);
+    icon_wrapper.set_layout<GUI::VerticalBoxLayout>();
+
+    auto& icon_image = icon_wrapper.add<GUI::ImageWidget>();
+    icon_image.set_bitmap(Gfx::Bitmap::load_from_file("/res/icons/32x32/shutdown.png"));
+
+    auto& right_container = content_container.add<GUI::Widget>();
+    right_container.set_layout<GUI::VerticalBoxLayout>();
+    right_container.layout()->set_margins({ 0, 12, 12, 8 });
+
+    auto& label = right_container.add<GUI::Label>("What would you like to do?");
+    label.set_text_alignment(Gfx::TextAlignment::CenterLeft);
+    label.set_fixed_height(22);
+    label.set_font(Gfx::FontDatabase::default_bold_font());
 
     for (size_t i = 0; i < options.size(); i++) {
         auto action = options[i];
-        auto& radio = main.add<GUI::RadioButton>();
+        auto& radio = right_container.add<GUI::RadioButton>();
         radio.set_enabled(action.enabled);
         radio.set_text(action.title);
 
@@ -78,21 +90,31 @@ ShutdownDialog::ShutdownDialog()
         }
     }
 
-    auto& button_box = main.add<GUI::Widget>();
-    button_box.set_layout<GUI::HorizontalBoxLayout>();
-    button_box.layout()->set_spacing(8);
+    right_container.layout()->add_spacer();
 
-    auto& ok_button = button_box.add<GUI::Button>();
+    auto& button_container = right_container.add<GUI::Widget>();
+    button_container.set_fixed_height(23);
+    button_container.set_layout<GUI::HorizontalBoxLayout>();
+    button_container.layout()->add_spacer();
+    auto& ok_button = button_container.add<GUI::Button>("OK");
+    ok_button.set_fixed_size(80, 23);
     ok_button.on_click = [this](auto) {
-        done(ExecResult::ExecOK);
+        done(Dialog::ExecOK);
     };
-    ok_button.set_text("OK");
-
-    auto& cancel_button = button_box.add<GUI::Button>();
+    auto& cancel_button = button_container.add<GUI::Button>("Cancel");
+    cancel_button.set_fixed_size(80, 23);
     cancel_button.on_click = [this](auto) {
         done(ExecResult::ExecCancel);
     };
-    cancel_button.set_text("Cancel");
+
+    resize(413, 235);
+    center_on_screen();
+    set_resizable(true);
+    set_title("Exit SerenityOS");
+    set_icon(Gfx::Bitmap::load_from_file("/res/icons/16x16/power.png"));
+
+    // Request WindowServer to re-update us on the current theme as we might've not been alive for the last notification.
+    refresh_system_theme();
 }
 
 ShutdownDialog::~ShutdownDialog()