Settings: using NLabel everywhere

Modules/SettingsPanel/Tabs/AudioTab.qml

@@ -45,7 +45,7 @@ ColumnLayout {
         Layout.fillWidth: true
 
         NText {
-          text: "Audio"
+          text: "Audio Output Volume"
           font.pointSize: Style.fontSizeXXL * scaling
           font.weight: Style.fontWeightBold
           color: Color.mOnSurface

Modules/SettingsPanel/Tabs/BarTab.qml

@@ -34,7 +34,7 @@ ColumnLayout {
         Layout.fillWidth: true
 
         NText {
-          text: "Components"
+          text: "Bar Components"
           font.pointSize: Style.fontSizeXXL * scaling
           font.weight: Style.fontWeightBold
           color: Color.mOnSurface

Modules/SettingsPanel/Tabs/BrightnessTab.qml

@@ -34,39 +34,14 @@ Item {
           color: Color.mOnSurface
         }
 
-        NText {
-          text: "Configure brightness controls and monitor settings."
-          font.pointSize: Style.fontSize * scaling
-          color: Color.mOnSurfaceVariant
-        }
-
         // Bar Visibility Section
-        ColumnLayout {
+        NToggle {
-          spacing: Style.marginS * scaling
+          label: "Show Bar Icon"
-          Layout.fillWidth: true
+          description: "Display the brightness control icon in the bar."
-          Layout.topMargin: Style.marginL * scaling
+          checked: Settings.data.bar.showBrightness
-
+          onToggled: checked => {
-          NText {
+                       Settings.data.bar.showBrightness = checked
-            text: "Bar Integration"
+                     }
-            font.pointSize: Style.fontSizeL * scaling
-            font.weight: Style.fontWeightBold
-            color: Color.mOnSurface
-          }
-
-          NToggle {
-            label: "Show Brightness Icon"
-            description: "Display the brightness control icon in the top bar."
-            checked: Settings.data.bar.showBrightness
-            onToggled: checked => {
-                         Settings.data.bar.showBrightness = checked
-                       }
-          }
-        }
-
-        NDivider {
-          Layout.fillWidth: true
-          Layout.topMargin: Style.marginL * scaling
-          Layout.bottomMargin: Style.marginL * scaling
         }
 
         // Brightness Step Section
@@ -74,19 +49,9 @@ Item {
           spacing: Style.marginS * scaling
           Layout.fillWidth: true
 
-          NText {
+          NLabel {
-            text: "Brightness Step Size"
+            label: "Brightness Step Size"
-            font.pointSize: Style.fontSizeL * scaling
+            description: "Adjust the step size for brightness changes (scroll wheel, keyboard shortcuts)."
-            font.weight: Style.fontWeightBold
-            color: Color.mOnSurface
-          }
-
-          NText {
-            text: "Adjust the step size for brightness changes (scroll wheel, keyboard shortcuts)."
-            font.pointSize: Style.fontSizeXS * scaling
-            color: Color.mOnSurfaceVariant
-            wrapMode: Text.WordWrap
-            Layout.fillWidth: true
           }
 
           RowLayout {
@@ -127,19 +92,9 @@ Item {
           spacing: Style.marginS * scaling
           Layout.fillWidth: true
 
-          NText {
+          NLabel {
-            text: "Monitor Brightness Overview"
+            label: "Monitors Brightness Control"
-            font.pointSize: Style.fontSizeL * scaling
+description: "Current brightness levels for all detected monitors."
-            font.weight: Style.fontWeightBold
-            color: Color.mOnSurface
-          }
-
-          NText {
-            text: "Current brightness levels for all detected monitors."
-            font.pointSize: Style.fontSizeXS * scaling
-            color: Color.mOnSurfaceVariant
-            wrapMode: Text.WordWrap
-            Layout.fillWidth: true
           }
 
           // Single monitor display using the same data source as the bar icon

Modules/SettingsPanel/Tabs/ColorSchemeTab.qml

@@ -107,19 +107,6 @@ ColumnLayout {
         spacing: Style.marginL * scaling
         Layout.fillWidth: true
 
-        // Use Matugen
-        NToggle {
-          label: "Enable Matugen"
-          description: "Automatically generate colors based on your active wallpaper."
-          checked: Settings.data.colorSchemes.useWallpaperColors
-          onToggled: checked => {
-                       Settings.data.colorSchemes.useWallpaperColors = checked
-                       if (Settings.data.colorSchemes.useWallpaperColors) {
-                         ColorSchemeService.changedWallpaper()
-                       }
-                     }
-        }
-
         // Dark Mode Toggle (affects both Matugen and predefined schemes that provide variants)
         NToggle {
           label: "Dark Mode"
@@ -154,6 +141,19 @@ ColumnLayout {
                      }
         }
 
+        // Use Matugen
+        NToggle {
+          label: "Enable Matugen"
+          description: "Automatically generate colors based on your active wallpaper."
+          checked: Settings.data.colorSchemes.useWallpaperColors
+          onToggled: checked => {
+                       Settings.data.colorSchemes.useWallpaperColors = checked
+                       if (Settings.data.colorSchemes.useWallpaperColors) {
+                         ColorSchemeService.changedWallpaper()
+                       }
+                     }
+        }
+
         NDivider {
           Layout.fillWidth: true
           Layout.topMargin: Style.marginL * scaling

Modules/SettingsPanel/Tabs/DisplayTab.qml

@@ -88,7 +88,7 @@ Item {
 
                 NToggle {
                   label: "Bar"
-                  description: "Enable the top bar on this monitor."
+                  description: "Enable the bar on this monitor."
                   checked: (Settings.data.bar.monitors || []).indexOf(modelData.name) !== -1
                   onToggled: checked => {
                                if (checked) {

Modules/SettingsPanel/Tabs/ScreenRecorderTab.qml

@@ -34,7 +34,7 @@ ColumnLayout {
         Layout.fillWidth: true
 
         NText {
-          text: "Recording"
+          text: "Recordings"
           font.pointSize: Style.fontSizeXXL * scaling
           font.weight: Style.fontWeightBold
           color: Color.mOnSurface

Modules/SettingsPanel/Tabs/WallpaperSelectorTab.qml

@@ -38,21 +38,16 @@ Item {
 
         Rectangle {
           Layout.fillWidth: true
-          Layout.preferredHeight: 120 * scaling
+          Layout.preferredHeight: 140 * scaling
           radius: Style.radiusM * scaling
-          color: Color.mSurface
+          color: Color.mPrimary
-          border.color: Color.mOutline
-          border.width: Math.max(1, Style.borderS * scaling)
-          clip: true
 
           NImageRounded {
             id: currentWallpaperImage
             anchors.fill: parent
-            anchors.margins: Style.marginS * scaling
+            anchors.margins: Style.marginXS * scaling
             imagePath: WallpaperService.currentWallpaper
             fallbackIcon: "image"
-            borderColor: Color.mOutline
-            borderWidth: Math.max(1, Style.borderS * scaling)
             imageRadius: Style.radiusM * scaling
           }
         }

Modules/SettingsPanel/Tabs/WallpaperTab.qml

@@ -96,22 +96,10 @@ ColumnLayout {
         // Interval
         ColumnLayout {
           RowLayout {
-            Layout.fillWidth: true
+            NLabel {
-
+              label: "Wallpaper Interval"
-            ColumnLayout {
+              description: "How often to change wallpapers automatically (in seconds)."
-              NText {
+              Layout.fillWidth: true
-                text: "Wallpaper Interval"
-                font.weight: Style.fontWeightBold
-                color: Color.mOnSurface
-              }
-
-              NText {
-                text: "How often to change wallpapers automatically (in seconds)."
-                font.pointSize: Style.fontSizeXS * scaling
-                color: Color.mOnSurface
-                wrapMode: Text.WordWrap
-                Layout.fillWidth: true
-              }
             }
 
             NText {

Services/ScalingService.qml

@@ -6,7 +6,6 @@ import qs.Commons
 Singleton {
   id: root
 
-  // Automatic, orientation-agnostic scaling
   function scale(aScreen) {
     return scaleByName(aScreen.name)
   }

Widgets/NLabel.qml

@@ -14,6 +14,7 @@ ColumnLayout {
     font.pointSize: Style.fontSizeM * scaling
     font.weight: Style.fontWeightBold
     color: Color.mOnSurface
+    visible: label !== ""
   }
 
   NText {
@@ -21,5 +22,7 @@ ColumnLayout {
     font.pointSize: Style.fontSizeS * scaling
     color: Color.mOnSurfaceVariant
     wrapMode: Text.WordWrap
+    visible: description !== ""
+    Layout.fillWidth: true
   }
 }