From ae01827ba934f55b3076deb040d43d981aa96873 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Danielle=20For=C3=A9?= <danielle@elementary.io>
Date: Thu, 1 Oct 2026 17:14:11 -0700
Subject: [PATCH] SettingsPage: use Granite.HeaderLabel

---
 data/styles/SettingsPage.scss | 30 +++++++------------------
 lib/SettingsPage.vala         | 42 ++++++++---------------------------
 2 files changed, 17 insertions(+), 55 deletions(-)

diff --git a/data/styles/SettingsPage.scss b/data/styles/SettingsPage.scss
index 4ac75973..916bad23 100644
--- a/data/styles/SettingsPage.scss
+++ b/data/styles/SettingsPage.scss
@@ -25,15 +25,19 @@ settingspage {
     }
 
     .header-area {
+        header {
+            margin: 0;
+        }
+
         // avatar is inside of a widget
         widget {
             &:dir(ltr) {
                 margin-left: rem(4px);
-                margin-right: rem(9px);
+                margin-right: rem(3px);
             }
 
             &:dir(rtl) {
-                margin-left: rem(9px);
+                margin-left: rem(3px);
                 margin-right: rem(4px);
             }
         }
@@ -44,39 +48,21 @@ settingspage {
             &:dir(ltr) {
                 // Match square icon canvas whitespace at 48px
                 margin-left: rem(-4px);
-                margin-right: rem(7px);
+                margin-right: rem(1px);
             }
 
             &:dir(rtl) {
-                margin-left: rem(7px);
+                margin-left: rem(1px);
                 margin-right: rem(-4px);
             }
         }
 
-        label.title-2 {
-            font-weight: 600;
-            font-size: 2rem;
-        }
-
-        label:not(.title-2) {
-            font-size: 0.95rem;
-            opacity: 0.85;
-        }
-
         switch {
             slider {
                 // Match font size for title
                 min-height: 2rem;
                 min-width: 2rem;
             }
-
-            &:dir(ltr) {
-                margin-left: rem(12px);
-            }
-
-            &:dir(rtl) {
-                margin-right: rem(12px);
-            }
         }
     }
 
diff --git a/lib/SettingsPage.vala b/lib/SettingsPage.vala
index 20e094de..c0edd79c 100644
--- a/lib/SettingsPage.vala
+++ b/lib/SettingsPage.vala
@@ -118,37 +118,21 @@ public abstract class Switchboard.SettingsPage : Gtk.Widget {
             bind_property ("title", header_widget, "text");
         }
 
-        var title_label = new Gtk.Label (title) {
+        var title_label = new Granite.HeaderLabel ("") {
             hexpand = true,
-            wrap = true,
-            xalign = 0
+            size = H2,
+            valign = CENTER
         };
-        title_label.add_css_class (Granite.STYLE_CLASS_H2_LABEL);
 
-        var description_label = new Gtk.Label (description) {
-            hexpand = true,
-            max_width_chars = 0,
-            selectable = true,
-            use_markup = true,
-            wrap = true,
-            xalign = 0
-        };
-
-        var header_area = new Gtk.Grid ();
-        header_area.attach (title_label, 1, 0);
-
-        if (description != null) {
-            header_area.attach (header_widget, 0, 0, 1, 2);
-            header_area.attach (description_label, 1, 1, 2);
-        } else {
-            header_area.attach (header_widget, 0, 0);
-        }
+        var header_area = new Granite.Box (HORIZONTAL, HALF);
+        header_area.append (header_widget);
+        header_area.append (title_label);
 
         if (activatable) {
             status_switch = new Gtk.Switch () {
                 valign = Gtk.Align.START
             };
-            header_area.attach (status_switch, 2, 0);
+            header_area.append (status_switch);
         }
 
         var end_widget = new Gtk.WindowControls (END) {
@@ -196,17 +180,9 @@ public abstract class Switchboard.SettingsPage : Gtk.Widget {
         scrolled.set_parent (this);
         action_bar.set_parent (this);
 
-        bind_property ("description", description_label, "label");
-        bind_property ("title", title_label, "label");
+        bind_property ("description", title_label, "secondary-text", SYNC_CREATE);
+        bind_property ("title", title_label, "label", SYNC_CREATE);
         bind_property ("show-end-title-buttons", end_widget, "visible", SYNC_CREATE);
-
-        notify["description"].connect (() => {
-            if (description_label.parent == null) {
-                header_area.remove (header_widget);
-                header_area.attach (header_widget, 0, 0, 1, 2);
-                header_area.attach (description_label, 1, 1, 2);
-            }
-        });
     }
 
     ~SettingsPage () {