Style sort headers to look less like buttons

src/gui.rs

@@ -267,11 +267,53 @@ impl ThrottleApp {
         });
     }
 
+    /// Adjust the style to make sort headers look less like regular buttons.
+    /// This only affects the local Ui (the Grid), not Menus or Modals.
+    /// TODO: Looks ugly and could affect unrelated buttons, replace with "classes" in egui 0.37+:
+    ///   https://github.com/emilk/egui/pull/8153
+    ///   https://github.com/emilk/egui/blob/7ba3db/examples/styling_engine/src/main.rs
+    fn sort_header_button_style(&self, ui: &mut egui::Ui, col_selected: bool) {
+        let style = ui.style_mut();
+        let widgets_style = &mut style.visuals.widgets;
+
+        let transparent = egui::Color32::TRANSPARENT;
+        // Use a gray-ish luminance (0.3) with variable opacity -> works for light and dark theme
+        let selected = egui::Rgba::from_luminance_alpha(0.3, 0.15).into();
+        let hovered = egui::Rgba::from_luminance_alpha(0.3, 0.25).into();
+
+        widgets_style.active.weak_bg_fill = hovered; // "active" = while being clicked
+        widgets_style.hovered.weak_bg_fill = hovered;
+        widgets_style.inactive.weak_bg_fill = if col_selected { selected } else { transparent };
+
+        widgets_style.active.bg_stroke = egui::Stroke::NONE;
+        widgets_style.hovered.bg_stroke = egui::Stroke::NONE;
+        widgets_style.inactive.bg_stroke = egui::Stroke::NONE;
+    }
+
     /// Adjust the sort state when a header is clicked.
     fn sort_header(&mut self, ui: &mut egui::Ui, label: &str, col: SortColumn) {
         let text = egui::RichText::new(label).strong();
-        if ui.button(text).clicked() {
-            if self.sort_column == col {
+        let grow = egui::Atom::grow();
+        let col_selected = self.sort_column == col;
+
+        let direction_text = if !col_selected {
+            ""
+        } else if self.sort_desc {
+            "▼"
+        } else {
+            "▲"
+        };
+        // The default font is missing the arrows, use the bundled monospace font (Hack) instead
+        let direction = egui::RichText::new(direction_text).monospace();
+
+        self.sort_header_button_style(ui, col_selected);
+        let button = egui::Button::new((text, grow))
+            .right_text(direction)
+            .min_size(ui.available_size())
+            .corner_radius(0);
+
+        if ui.add(button).clicked() {
+            if col_selected {
                 self.sort_desc = !self.sort_desc;
             } else {
                 self.sort_column = col;