Styles: don't override small-label

data/stylesheet/_index.scss

@@ -69,17 +69,6 @@ roundy-label:hover:selected {
     }
 }
 
-.small-label {
-    padding: 0;
-    font-weight: bold;
-    font-size: 9px;
-    color: grey;
-
-    @media (prefers-color-scheme: dark) {
-        color: var(--SILVER-500);
-    }
-}
-
 .grape_500 {
     background-color: color-mix(in srgb, var(--GRAPE-500) 60%, transparent);
 }
@@ -100,6 +89,13 @@ roundy-label:hover:selected {
     }
 }
 
+header.small-label {
+    margin: 0;
+    padding: 0;
+    font-size: 0.75em;
+    text-transform: uppercase;
+}
+
 .state_badge,
 .state_badge:hover,
 .state_badge:selected,

src/Views/SystemView/SystemCPUView.vala

@@ -157,11 +157,12 @@ public class Monitor.SystemCPUView : Monitor.WidgetResource {
                 row = 0;
             }
         }
-        var threads_label = new Gtk.Label (_("THREADS"));
-        // this can be archived by Granite.CssClass.DIM and
-        // Granite.CssClass.SMALL, however the style is
-        // differs from the OG
-        threads_label.add_css_class ("small-label");
+        var threads_label = new Granite.HeaderLabel (_("Threads")) {
+            halign = CENTER
+        };
+        threads_label.add_css_class (Granite.CssClass.DIM);
+        threads_label.add_css_class (Granite.CssClass.SMALL);
+
         grid.attach (threads_label, 0, -1, column, 1);
 
         return grid;

src/Views/SystemView/SystemStorageView.vala

@@ -17,12 +17,12 @@ public class Monitor.SystemStorageView : Gtk.Box {
     construct {
         var storage_name_label = new Granite.HeaderLabel (_("Storage"));
 
-        storage_write_label = new LabelRoundy (_("WRITE")) {
+        storage_write_label = new LabelRoundy (_("Write")) {
             width_chars = 7
         };
         storage_write_label.add_css_class ("blue");
 
-        storage_read_label = new LabelRoundy (_("READ")) {
+        storage_read_label = new LabelRoundy (_("Read")) {
             width_chars = 7
         };
         storage_read_label.add_css_class ("green");

src/Widgets/Labels/LabelRoundy.vala

@@ -29,17 +29,18 @@ public class Monitor.LabelRoundy : Gtk.Box {
     }
 
     construct {
-        halign = Gtk.Align.START;
         val = new Gtk.Label (Utils.NO_DATA) {
             selectable = true
         };
         val.add_css_class ("value");
 
-        var header_label = new Granite.HeaderLabel (title.up ()) {
+        var header_label = new Granite.HeaderLabel (title) {
             mnemonic_widget = val
         };
+        header_label.add_css_class (Granite.CssClass.DIM);
         header_label.add_css_class (Granite.CssClass.SMALL);
 
+        halign = START;
         orientation = VERTICAL;
         append (header_label);
         append (val);