Settings: less wide + cleanup about

Modules/SettingsPanel/SettingsPanel.qml

@@ -11,8 +11,8 @@ import qs.Widgets
 NPanel {
   id: root
 
-  panelWidth: Math.max(screen?.width * 0.5, 1280) * scaling
-  panelHeight: Math.max(screen?.height * 0.5, 720) * scaling
+  panelWidth: Math.max(screen?.width * 0.4, 768) * scaling
+  panelHeight: Math.max(screen?.height * 0.75, 810) * scaling
   panelAnchorHorizontalCenter: true
   panelAnchorVerticalCenter: true
 
@@ -184,7 +184,7 @@ NPanel {
 
       Rectangle {
         id: sidebar
-        Layout.preferredWidth: Style.sliderWidth * 1.3 * scaling
+        Layout.preferredWidth: 220 * scaling
         Layout.fillHeight: true
         color: Color.mSurfaceVariant
         border.color: Color.mOutline
@@ -208,6 +208,19 @@ NPanel {
               readonly property bool selected: index === currentTabIndex
               property bool hovering: false
               property color tabTextColor: selected ? Color.mOnPrimary : (tabItem.hovering ? Color.mOnTertiary : Color.mOnSurface)
+
+              Behavior on color {
+                ColorAnimation {
+                  duration: Style.animationFast
+                }
+              }
+
+              Behavior on tabTextColor {
+                ColorAnimation {
+                  duration: Style.animationFast
+                }
+              }
+
               RowLayout {
                 anchors.fill: parent
                 anchors.leftMargin: Style.marginS * scaling

Modules/SettingsPanel/Tabs/AboutTab.qml

@@ -46,6 +46,7 @@ ColumnLayout {
     Layout.bottomMargin: Style.marginS * scaling
   }
 
+  // Versions
   GridLayout {
     Layout.alignment: Qt.AlignCenter
     columns: 2
@@ -77,6 +78,7 @@ ColumnLayout {
     }
   }
 
+  // Updater
   Rectangle {
     Layout.alignment: Qt.AlignCenter
     Layout.topMargin: Style.marginS * scaling
@@ -137,42 +139,45 @@ ColumnLayout {
   NDivider {
     Layout.fillWidth: true
     Layout.topMargin: Style.marginXL * scaling
-    Layout.bottomMargin: Style.marginxL * scaling
+    Layout.bottomMargin: Style.marginXL * scaling
   }
 
   NText {
-    text: `Shout-out to our ${root.contributors.length} awesome contributors!`
+    text: `Shout-out to our ${root.contributors.length} <b>awesome</b> contributors!`
     font.pointSize: Style.fontSizeL * scaling
-    font.weight: Style.fontWeightBold
     color: Color.mOnSurface
     Layout.alignment: Qt.AlignCenter
-    Layout.topMargin: Style.marginL * 2
   }
 
-  ScrollView {
-    Layout.alignment: Qt.AlignCenter
-    Layout.preferredWidth: 200 * Style.marginXS * scaling
-    Layout.fillHeight: true
-    Layout.topMargin: Style.marginL * scaling
-    clip: true
-    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-    ScrollBar.vertical.policy: ScrollBar.AsNeeded
-
   GridView {
     id: contributorsGrid
 
-      anchors.fill: parent
-      width: 200 * 4 * scaling
-      height: Math.ceil(root.contributors.length / 4) * 100
-      cellWidth: Style.baseWidgetSize * 7.5 * scaling
-      cellHeight: Style.baseWidgetSize * 3.5 * scaling
+    Layout.topMargin: Style.marginL * scaling
+    Layout.alignment: Qt.AlignHCenter
+    Layout.preferredWidth: cellWidth * 3 // Fixed 3 columns
+    Layout.preferredHeight: {
+      if (root.contributors.length === 0)
+        return 0
+      const columns = 3
+      const rows = Math.ceil(root.contributors.length / columns)
+      return rows * cellHeight
+    }
+    cellWidth: Style.baseWidgetSize * 7 * scaling
+    cellHeight: Style.baseWidgetSize * 3 * scaling
     model: root.contributors
+    clip: true
 
     delegate: Rectangle {
       width: contributorsGrid.cellWidth - Style.marginM * scaling
-        height: contributorsGrid.cellHeight - Style.marginS * scaling
+      height: contributorsGrid.cellHeight - Style.marginM * scaling
       radius: Style.radiusL * scaling
-        color: contributorArea.containsMouse ? Color.mSecondary : Color.transparent
+      color: contributorArea.containsMouse ? Color.mTertiary : Color.transparent
+
+      Behavior on color {
+        ColorAnimation {
+          duration: Style.animationFast
+        }
+      }
 
       RowLayout {
         anchors.fill: parent
@@ -189,8 +194,14 @@ ColumnLayout {
             anchors.fill: parent
             anchors.margins: Style.marginXS * scaling
             fallbackIcon: "person"
-              borderColor: Color.mPrimary
+            borderColor: contributorArea.containsMouse ? Color.mOnTertiary : Color.mPrimary
             borderWidth: Math.max(1, Style.borderM * scaling)
+
+            Behavior on borderColor {
+              ColorAnimation {
+                duration: Style.animationFast
+              }
+            }
           }
         }
 
@@ -228,5 +239,8 @@ ColumnLayout {
       }
     }
   }
+
+  Item {
+    Layout.fillHeight: true
   }
 }

Modules/SettingsPanel/Tabs/ColorSchemeTab.qml

@@ -180,9 +180,9 @@ ColumnLayout {
 
       // Color Schemes Grid
       GridLayout {
-        columns: 4
-        rowSpacing: Style.marginL * scaling
-        columnSpacing: Style.marginL * scaling
+        columns: 3
+        rowSpacing: Style.marginM * scaling
+        columnSpacing: Style.marginM * scaling
         Layout.fillWidth: true
 
         Repeater {

Modules/SettingsPanel/Tabs/WallpaperSelectorTab.qml

@@ -100,7 +100,7 @@ ColumnLayout {
       interactive: false
       clip: true
 
-      property int columns: 5
+      property int columns: 4
       property int itemSize: Math.floor((width - leftMargin - rightMargin - (4 * Style.marginS * scaling)) / columns)
 
       cellWidth: Math.floor((width - leftMargin - rightMargin) / columns)
@@ -118,7 +118,7 @@ ColumnLayout {
         property bool isSelected: screen ? (wallpaperPath === WallpaperService.getWallpaper(screen.name)) : false
 
         width: wallpaperGridView.itemSize
-        height: Math.floor(wallpaperGridView.itemSize * 0.67)
+        height: Math.round(wallpaperGridView.itemSize * 0.67)
         color: Color.transparent
 
         // NImageCached relies on the image being visible to work properly.
@@ -179,7 +179,7 @@ ColumnLayout {
           anchors.fill: parent
           acceptedButtons: Qt.LeftButton
           hoverEnabled: true
-          onClicked: {
+          onPressed: {
             if (Settings.data.wallpaper.setWallpaperOnAllMonitors) {
               WallpaperService.changeWallpaper(undefined, wallpaperPath)
             } else if (screen) {