replace arrow text with arrow image

widgetry/src/widgets/spinner.rs

@@ -1,8 +1,8 @@
 use geom::{Polygon, Pt2D};
 
 use crate::{
-    text, Button, ButtonBuilder, EventCtx, GeomBatch, GfxCtx, Line, Outcome, ScreenDims, ScreenPt,
-    ScreenRectangle, Text, Widget, WidgetImpl, WidgetOutput,
+    text, Button, EdgeInsets, EventCtx, GeomBatch, GfxCtx, Line, Outcome, ScreenDims, ScreenPt,
+    ScreenRectangle, StyledButtons, Text, Widget, WidgetImpl, WidgetOutput,
 };
 
 // TODO MAX_CHAR_WIDTH is a hardcoded nonsense value
@@ -25,27 +25,24 @@ pub struct Spinner {
 
 impl Spinner {
     pub fn new(ctx: &EventCtx, (low, high): (isize, isize), mut current: isize) -> Widget {
-        let button_builder = ButtonBuilder::new();
+        let button_builder = ctx
+            .style()
+            .btn_plain_light()
+            .padding(EdgeInsets {
+                top: 2.0,
+                bottom: 2.0,
+                left: 4.0,
+                right: 4.0,
+            })
+            .image_dims(17.0);
 
-        let button_builder = button_builder
-            // CLEANUP: For things to look balanced, left/right padding are unequal.
-            // I'm not sure why this is - maybe an issue with text layout?
-            .padding_left(7.0)
-            .padding_right(4.0)
-            .bg_color(Color::WHITE.alpha(0.1), ControlState::Hovered);
-
-        use crate::{Color, ControlState};
         let up = button_builder
             .clone()
-            .label_text("↑")
-            .padding_top(2.0)
-            .padding_bottom(0.0)
+            .image_path("system/assets/tools/arrow_up.svg")
             .build(ctx, "increase value");
 
         let down = button_builder
-            .label_text("↓")
-            .padding_top(0.0)
-            .padding_bottom(2.0)
+            .image_path("system/assets/tools/arrow_down.svg")
             .build(ctx, "decrease value");
 
         let dims = ScreenDims::new(

widgetry/src/widgets/table.rs

@@ -100,11 +100,13 @@ impl<A, T, F> Table<A, T, F> {
             .map(|col| {
                 if self.sort_by == col.name {
                     ctx.style()
-                        .btn_primary_dark_text(&format!(
-                            "{} {}",
-                            col.name,
-                            if self.descending { "↓" } else { "↑" }
-                        ))
+                        .btn_primary_dark_icon_text("tmp", &col.name)
+                        .image_path(if self.descending {
+                            "system/assets/tools/arrow_down.svg"
+                        } else {
+                            "system/assets/tools/arrow_up.svg"
+                        })
+                        .label_first()
                         .build_widget(ctx, &col.name)
                 } else if let Col::Sortable(_) = col.col {
                     ctx.style().btn_primary_dark_text(&col.name).build_def(ctx)

widgetry_demo/src/lib.rs

@@ -376,6 +376,7 @@ fn make_controls(ctx: &mut EventCtx) -> Panel {
                 .build_widget(ctx, "btn_height_icon_text"),
             btn.btn_popup_light("popup")
                 .build_widget(ctx, "btn_height_popup"),
+            widgetry::Spinner::new(ctx, (0, 11), 1),
         ]),
         Text::from(Line("Spinner").big_heading_styled().size(18)).draw(ctx),
         widgetry::Spinner::new(ctx, (0, 11), 1),