Tweak the look of various UI surfaces and buttons.

Applications/FileManager/main.cpp

@@ -40,8 +40,8 @@ int main(int argc, char** argv)
 
     auto* main_toolbar = new GToolBar(widget);
     auto* location_toolbar = new GToolBar(widget);
-    location_toolbar->layout()->set_margins({ 8, 3, 8, 3 });
-    location_toolbar->set_preferred_size({ 0, 21 });
+    location_toolbar->layout()->set_margins({ 6, 3, 6, 3 });
+    location_toolbar->set_preferred_size({ 0, 23 });
 
     auto* location_label = new GLabel("Location: ", location_toolbar);
     location_label->size_to_fit();
@@ -60,7 +60,7 @@ int main(int argc, char** argv)
         directory_view->open(editor.text());
     };
 
-    auto open_parent_directory_action = GAction::create("Open parent directory", { Mod_Alt, Key_Up }, GraphicsBitmap::load_from_file("/res/icons/parentdirectory16.png"), [directory_view] (const GAction&) {
+    auto open_parent_directory_action = GAction::create("Open parent directory", { Mod_Alt, Key_Up }, GraphicsBitmap::load_from_file("/res/icons/16x16/open-parent-directory.png"), [directory_view] (const GAction&) {
         directory_view->open_parent_directory();
     });
 
@@ -89,7 +89,7 @@ int main(int argc, char** argv)
         directory_view->set_view_mode(DirectoryView::ViewMode::Icon);
     });
 
-    auto copy_action = GAction::create("Copy", GraphicsBitmap::load_from_file("/res/icons/copyfile16.png"), [] (const GAction&) {
+    auto copy_action = GAction::create("Copy", GraphicsBitmap::load_from_file("/res/icons/16x16/edit-copy.png"), [] (const GAction&) {
         dbgprintf("'Copy' action activated!\n");
     });
 

Applications/TextEditor/main.cpp

@@ -69,7 +69,7 @@ int main(int argc, char** argv)
         text_editor->cut();
     });
 
-    auto copy_action = GAction::create("Copy", { Mod_Ctrl, Key_C }, GraphicsBitmap::load_from_file("/res/icons/copyfile16.png"), [&] (const GAction&) {
+    auto copy_action = GAction::create("Copy", { Mod_Ctrl, Key_C }, GraphicsBitmap::load_from_file("/res/icons/16x16/edit-copy.png"), [&] (const GAction&) {
         text_editor->copy();
     });
 

LibGUI/GScrollBar.cpp

@@ -167,7 +167,7 @@ Rect GScrollBar::scrubber_rect() const
         return { };
     float x_or_y;
     if (m_value == m_min)
-        x_or_y = button_size() - 1;
+        x_or_y = button_size();
     else if (m_value == m_max)
         x_or_y = ((orientation() == Orientation::Vertical ? height() : width()) - (button_size() * 2)) + 1;
     else {

LibGUI/GStyle.cpp

@@ -14,13 +14,58 @@ GStyle::GStyle()
 {
 }
 
+static void paint_button_new(Painter& painter, const Rect& rect, bool pressed)
+{
+    Color button_color = Color::from_rgb(0xc0c0c0);
+    Color highlight_color1 = Color::from_rgb(0xffffff);
+    Color highlight_color2 = Color::from_rgb(0xdfdfdf);
+    Color shadow_color1 = Color::from_rgb(0x808080);
+    Color shadow_color2 = Color::from_rgb(0x404040);
+
+    PainterStateSaver saver(painter);
+    painter.translate(rect.location());
+
+    if (pressed) {
+        // Base
+        painter.fill_rect({ 1, 1, rect.width() - 2, rect.height() - 2 }, button_color);
+
+        painter.draw_rect(rect, shadow_color2);
+
+        // Sunken shadow
+        painter.draw_line({ 1, 1 }, { rect.width() - 2, 1 }, shadow_color1);
+        painter.draw_line({ 1, 2 }, {1, rect.height() - 2 }, shadow_color1);
+    } else {
+        // Base
+        painter.fill_rect({ 2, 2, rect.width() - 4, rect.height() - 4 }, button_color);
+
+        // Outer highlight
+        painter.draw_line({ 0, 0 }, { rect.width() - 2, 0 }, highlight_color2);
+        painter.draw_line({ 0, 1 }, { 0, rect.height() - 2 }, highlight_color2);
+
+        // Inner highlight
+        painter.draw_line({ 1, 1 }, { rect.width() - 3, 1 }, highlight_color1);
+        painter.draw_line({ 1, 2 }, { 1, rect.height() - 3 }, highlight_color1);
+
+        // Outer shadow
+        painter.draw_line({ 0, rect.height() - 1 }, { rect.width() - 1, rect.height() - 1 }, shadow_color2);
+        painter.draw_line({ rect.width() - 1, 0 }, { rect.width() - 1, rect.height() - 2 }, shadow_color2);
+
+        // Inner shadow
+        painter.draw_line({ 1, rect.height() - 2 }, { rect.width() - 2, rect.height() - 2 }, shadow_color1);
+        painter.draw_line({ rect.width() - 2, 1 }, { rect.width() - 2, rect.height() - 3 }, shadow_color1);
+    }
+}
+
 void GStyle::paint_button(Painter& painter, const Rect& rect, GButtonStyle button_style, bool pressed, bool hovered)
 {
+    if (button_style == GButtonStyle::Normal)
+        return paint_button_new(painter, rect, pressed);
+
     Color button_color = Color::LightGray;
     Color highlight_color = Color::White;
     Color shadow_color = Color(96, 96, 96);
 
-    if (button_style == GButtonStyle::Normal)
+    if (button_style == GButtonStyle::OldNormal)
         painter.draw_rect(rect, Color::Black);
 
     PainterStateSaver saver(painter);
@@ -37,7 +82,7 @@ void GStyle::paint_button(Painter& painter, const Rect& rect, GButtonStyle butto
         // Bottom highlight
         painter.draw_line({ rect.width() - 2, 1 }, { rect.width() - 2, rect.height() - 3 }, highlight_color);
         painter.draw_line({ 1, rect.height() - 2 }, { rect.width() - 2, rect.height() - 2 }, highlight_color);
-    } else if (button_style == GButtonStyle::Normal || (button_style == GButtonStyle::CoolBar && hovered)) {
+    } else if (button_style == GButtonStyle::OldNormal || (button_style == GButtonStyle::CoolBar && hovered)) {
         // Base
         painter.fill_rect({ 1, 1, rect.width() - 2, rect.height() - 2 }, button_color);
 
@@ -55,7 +100,7 @@ void GStyle::paint_surface(Painter& painter, const Rect& rect)
 {
     painter.fill_rect({ rect.x(), rect.y() + 1, rect.width(), rect.height() - 2 }, Color::LightGray);
     painter.draw_line(rect.top_left(), rect.top_right(), Color::White);
-    painter.draw_line(rect.bottom_left(), rect.bottom_right(), Color::DarkGray);
+    painter.draw_line(rect.bottom_left(), rect.bottom_right(), Color::MidGray);
     painter.draw_line(rect.top_left().translated(0, 1), rect.bottom_left().translated(0, -1), Color::White);
-    painter.draw_line(rect.top_right(), rect.bottom_right().translated(0, -1), Color::DarkGray);
+    painter.draw_line(rect.top_right(), rect.bottom_right().translated(0, -1), Color::MidGray);
 }

LibGUI/GStyle.h

@@ -3,7 +3,7 @@
 class Painter;
 class Rect;
 
-enum class GButtonStyle { Normal, CoolBar };
+enum class GButtonStyle { Normal, CoolBar, OldNormal };
 
 class GStyle {
 public:

LibGUI/GTableView.cpp

@@ -183,7 +183,7 @@ void GTableView::paint_headers(Painter& painter)
     int exposed_width = max(content_size().width(), width());
     painter.fill_rect({ 0, 0, exposed_width, header_height() }, Color::LightGray);
     painter.draw_line({ 0, 0 }, { exposed_width - 1, 0 }, Color::White);
-    painter.draw_line({ 0, header_height() - 1 }, { exposed_width - 1, header_height() - 1 }, Color::DarkGray);
+    painter.draw_line({ 0, header_height() - 1 }, { exposed_width - 1, header_height() - 1 }, Color::MidGray);
     int x_offset = 0;
     for (int column_index = 0; column_index < model()->column_count(); ++column_index) {
         if (is_column_hidden(column_index))
@@ -199,7 +199,7 @@ void GTableView::paint_headers(Painter& painter)
         x_offset += column_width + horizontal_padding() * 2;
         // Draw column separator.
         painter.draw_line(cell_rect.top_left().translated(0, 1), cell_rect.bottom_left().translated(0, -1), Color::White);
-        painter.draw_line(cell_rect.top_right(), cell_rect.bottom_right().translated(0, -1), Color::DarkGray);
+        painter.draw_line(cell_rect.top_right(), cell_rect.bottom_right().translated(0, -1), Color::MidGray);
     }
     // Draw the "start" of a new column to make the last separator look right.
     painter.draw_line({ x_offset, 1 }, { x_offset, header_height() - 2 }, Color::White);

LibGUI/GTextEditor.cpp

@@ -216,7 +216,7 @@ void GTextEditor::paint_event(GPaintEvent& event)
     if (is_focused())
         painter.draw_rect(item_area_rect, Color::from_rgb(0x84351a));
     else if (is_single_line())
-        painter.draw_rect(item_area_rect, Color::DarkGray);
+        painter.draw_rect(item_area_rect, Color::MidGray);
 }
 
 void GTextEditor::toggle_selection_if_needed_for_event(const GKeyEvent& event)

LibGUI/GToolBar.cpp

@@ -8,10 +8,10 @@ GToolBar::GToolBar(GWidget* parent)
     : GWidget(parent)
 {
     set_size_policy(SizePolicy::Fill, SizePolicy::Fixed);
-    set_preferred_size({ 0, 30 });
+    set_preferred_size({ 0, 28 });
     set_layout(make<GBoxLayout>(Orientation::Horizontal));
     layout()->set_spacing(0);
-    layout()->set_margins({ 3, 3, 3, 3 });
+    layout()->set_margins({ 2, 2, 2, 2 });
 }
 
 GToolBar::~GToolBar()
@@ -50,7 +50,7 @@ public:
     {
         set_size_policy(SizePolicy::Fixed, SizePolicy::Fixed);
         set_background_color(Color::White);
-        set_preferred_size({ 8, 20 });
+        set_preferred_size({ 8, 22 });
     }
     virtual ~SeparatorWidget() override { }
 
@@ -59,7 +59,7 @@ public:
         Painter painter(*this);
         painter.set_clip_rect(event.rect());
         painter.translate(rect().center().x() - 1, 0);
-        painter.draw_line({ 0, 0 }, { 0, rect().bottom() }, Color::DarkGray);
+        painter.draw_line({ 0, 0 }, { 0, rect().bottom() }, Color::MidGray);
         painter.draw_line({ 1, 0 }, { 1, rect().bottom() }, Color::White);
     }
 

Servers/WindowServer/WSWindowManager.cpp

@@ -507,7 +507,7 @@ void WSWindowManager::paint_window_frame(WSWindow& window)
 
     m_back_painter->blit(titlebar_icon_rect.location(), window.icon(), window.icon().rect());
 
-    m_back_painter->draw_rect(close_button_rect, Color::DarkGray);
+    m_back_painter->draw_rect(close_button_rect, Color::MidGray);
     auto x_location = close_button_rect.center();
     x_location.move_by(-(s_close_button_bitmap_width / 2), -(s_close_button_bitmap_height / 2));
     m_back_painter->draw_bitmap(x_location, *s_close_button_bitmap, Color::Black);

Servers/WindowServer/WSWindowSwitcher.cpp

@@ -77,7 +77,7 @@ void WSWindowSwitcher::draw()
             rect_text_color = Color::LightGray;
         } else {
             text_color = Color::Black;
-            rect_text_color = Color::DarkGray;
+            rect_text_color = Color::MidGray;
         }
         painter.blit(item_rect.location().translated(0, (item_rect.height() - window.icon().height()) / 2), window.icon(), window.icon().rect());
         painter.draw_text(item_rect.translated(window.icon().width() + 4, 0), window.title(), WSWindowManager::the().window_title_font(), TextAlignment::CenterLeft, text_color);