Use Granite.Box and css spacing

src/Indicator/Indicator.vala

@@ -76,16 +76,27 @@ public class Monitor.Indicator : Wingpanel.Indicator {
     public void apply_custom_styles () throws GLib.Error {
         var provider = new Gtk.CssProvider ();
         string css = """
-        .composited-indicator > revealer label.monitor-indicator-label-warning {
-            color: @warning_color;
-        }
-        .composited-indicator > revealer label.monitor-indicator-label-critical {
-            color: @error_color;
-        }
-        .monitor-indicator-icon {
-            margin-right: 0.4em;
-            margin-left: 0.7em;
-        }
+            monitor-indicator-group {
+                font-size: 0.9rem;
+            }
+
+            monitor-indicator-group:dir(ltr) {
+                margin-left: 1em;
+            }
+
+            monitor-indicator-group:dir(rtl) {
+                margin-right: 1em;
+            }
+
+            monitor-indicator-group label:dir(ltr),
+            monitor-indicator-group image:dir(rtl) {
+                margin-left: 0.5em;
+            }
+
+            monitor-indicator-group label:dir(rtl),
+            monitor-indicator-group image:dir(ltr) {
+                margin-right: 0.5em;
+            }
         """;
         provider.load_from_string (css);
 

src/Indicator/Widgets/IndicatorGroupWidget.vala

@@ -4,32 +4,31 @@
  */
 
 public class Monitor.IndicatorGroupWidget : Gtk.Box {
-
     public string icon_name { get; construct; }
     public bool revealed { get; set; }
 
     protected Gtk.Label label;
 
     public IndicatorGroupWidget (string icon_name) {
-        Object (
-            orientation: Gtk.Orientation.HORIZONTAL,
-            icon_name: icon_name
-           );
+        Object (icon_name: icon_name);
+    }
+
+    class construct {
+        set_css_name ("monitor-indicator-group");
     }
 
     construct {
         var icon = new Gtk.Image.from_icon_name (icon_name);
-        icon.add_css_class ("monitor-indicator-icon");
         base.append (icon);
     }
 
     public new void append (IndicatorWidget widget) {
         var revealer = new Gtk.Revealer () {
             child = widget,
-            transition_type = Gtk.RevealerTransitionType.SLIDE_LEFT,
+            transition_type = SLIDE_LEFT,
         };
         widget.bind_property ("revealed", revealer, "reveal-child", DEFAULT);
+
         base.append (revealer);
     }
-
 }

src/Indicator/Widgets/IndicatorWidget.vala

@@ -4,24 +4,14 @@
  */
 
 public class Monitor.IndicatorWidget : Gtk.Box {
-
     protected Gtk.Label label;
     public bool revealed { get; set; }
 
-    public IndicatorWidget () {
-        Object (
-            orientation: Gtk.Orientation.HORIZONTAL
-            );
-    }
-
     construct {
         label = new Gtk.Label (Utils.NOT_AVAILABLE) {
-            margin_start = 2,
-            margin_end = 2,
-            margin_top = 2,
-            margin_bottom = 2,
-            width_chars = 4,
+            valign = BASELINE_CENTER
         };
+        label.add_css_class (Granite.CssClass.NUMERIC);
 
         append (label);
     }

src/Indicator/Widgets/IndicatorWidgetBandwidth.vala

@@ -4,12 +4,12 @@
  */
 
 public class Monitor.IndicatorWidgetBandwidth : Monitor.IndicatorWidget {
+    construct {
+        label.width_chars = 9;
+    }
 
     public override void update_label (Value value) {
         uint64 bandwidth = value.get_uint64 ();
-
-        label.add_css_class (Granite.CssClass.NUMERIC);
-        label.width_chars = 9;
-        label.label = "%s".printf (Utils.Strings.format_network_speed (bandwidth));
+        label.label = Utils.Strings.format_network_speed (bandwidth);
     }
 }

src/Indicator/Widgets/IndicatorWidgetFrequency.vala

@@ -4,12 +4,12 @@
  */
 
 public class Monitor.IndicatorWidgetFrequency : Monitor.IndicatorWidget {
+    construct {
+        label.width_chars = 7;
+    }
 
-public override void update_label (Value value) {
+    public override void update_label (Value value) {
         double frequency = value.get_double ();
-
-        label.add_css_class (Granite.CssClass.NUMERIC);
-        label.width_chars = 7;
-        label.label = "%s".printf (Utils.Strings.format_frequency (frequency));
+        label.label = Utils.Strings.format_frequency (frequency);
     }
 }

src/Indicator/Widgets/IndicatorWidgetPercentage.vala

@@ -4,22 +4,25 @@
  */
 
 public class Monitor.IndicatorWidgetPercentage : Monitor.IndicatorWidget {
+    construct {
+        label.width_chars = 4;
+    }
 
     public override void update_label (Value value) {
         uint percentage = value.get_uint ();
 
-        label.add_css_class (Granite.CssClass.NUMERIC);
         label.label = "%u%%".printf (percentage);
 
-        label.remove_css_class ("monitor-indicator-label-warning");
-        label.remove_css_class ("monitor-indicator-label-critical");
+        if (percentage > 90) {
+            label.css_classes = {Granite.CssClass.ERROR};
+            return;
+        }
 
         if (percentage > 80) {
-            label.add_css_class ("monitor-indicator-label-warning");
+            label.css_classes = {Granite.CssClass.WARNING};
+            return;
         }
 
-        if (percentage > 90) {
-            label.add_css_class ("monitor-indicator-label-critical");
-        }
+        label.css_classes = {""};
     }
 }

src/Indicator/Widgets/IndicatorWidgetTemperature.vala

@@ -4,12 +4,12 @@
  */
 
 public class Monitor.IndicatorWidgetTemperature : Monitor.IndicatorWidget {
+    construct {
+        label.width_chars = 3;
+    }
 
     public override void update_label (Value value) {
         int temperature = value.get_int ();
-
-        label.add_css_class (Granite.CssClass.NUMERIC);
-        label.width_chars = 3;
         label.label = "%i℃".printf (temperature);
     }
 }