Tweak the look of various UI surfaces and buttons.

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);
     }