SetupWizard: layout changes

Autoformat

Modules/SetupWizard/SetupAppearanceStep.qml

@@ -51,13 +51,15 @@ ColumnLayout {
   // Beautiful header with icon
   RowLayout {
     Layout.fillWidth: true
+    Layout.bottomMargin: Style.marginL
     spacing: Style.marginM
 
     Rectangle {
-      width: 28
-      height: 28
-      radius: Style.radiusM
-      color: Color.mSurface
+      width: 40
+      height: 40
+      radius: Style.radiusL
+      color: Color.mSurfaceVariant
+      opacity: 0.6
 
       NIcon {
         icon: "palette"
@@ -75,7 +77,7 @@ ColumnLayout {
         text: I18n.tr("setup.appearance.header")
         pointSize: Style.fontSizeXL
         font.weight: Style.fontWeightBold
-        color: Color.mOnSurface
+        color: Color.mPrimary
       }
 
       NText {
@@ -443,7 +445,7 @@ ColumnLayout {
               Layout.alignment: Qt.AlignHCenter
               height: 50
               radius: Style.radiusS
-              color: (root.cacheVersion, root.getSchemeColor(schemeName, "mSurface"))
+              color: root.cacheVersion >= 0 ? root.getSchemeColor(schemeName, "mSurface") : root.getSchemeColor(schemeName, "mSurface")
               border.width: Math.max(1, Style.borderL)
               border.color: itemMouseArea.containsMouse ? Color.mTertiary : (Settings.data.colorSchemes.predefinedScheme === schemeName ? Color.mSecondary : Color.mOutline)
 
@@ -468,41 +470,41 @@ ColumnLayout {
                   width: 14
                   height: 14
                   radius: width * 0.5
-                  color: (root.cacheVersion, function () {
-                            var mode = Settings.data.colorSchemes.darkMode ? "dark" : "light"
-                            var cached = root.schemeColorsCache[schemeItem.schemeName]
-                            return (cached && cached[mode] && cached[mode].mPrimary) || root.getSchemeColor(schemeItem.schemeName, "mPrimary")
-                          })()
+                  color: root.cacheVersion >= 0 ? (function () {
+                    var mode = Settings.data.colorSchemes.darkMode ? "dark" : "light"
+                    var cached = root.schemeColorsCache[schemeItem.schemeName]
+                    return (cached && cached[mode] && cached[mode].mPrimary) || root.getSchemeColor(schemeItem.schemeName, "mPrimary")
+                  })() : Color.mPrimary
                 }
                 Rectangle {
                   width: 14
                   height: 14
                   radius: width * 0.5
-                  color: (root.cacheVersion, function () {
-                            var mode = Settings.data.colorSchemes.darkMode ? "dark" : "light"
-                            var cached = root.schemeColorsCache[schemeItem.schemeName]
-                            return (cached && cached[mode] && cached[mode].mSecondary) || root.getSchemeColor(schemeItem.schemeName, "mSecondary")
-                          })()
+                  color: root.cacheVersion >= 0 ? (function () {
+                    var mode = Settings.data.colorSchemes.darkMode ? "dark" : "light"
+                    var cached = root.schemeColorsCache[schemeItem.schemeName]
+                    return (cached && cached[mode] && cached[mode].mSecondary) || root.getSchemeColor(schemeItem.schemeName, "mSecondary")
+                  })() : Color.mSecondary
                 }
                 Rectangle {
                   width: 14
                   height: 14
                   radius: width * 0.5
-                  color: (root.cacheVersion, function () {
-                            var mode = Settings.data.colorSchemes.darkMode ? "dark" : "light"
-                            var cached = root.schemeColorsCache[schemeItem.schemeName]
-                            return (cached && cached[mode] && cached[mode].mTertiary) || root.getSchemeColor(schemeItem.schemeName, "mTertiary")
-                          })()
+                  color: root.cacheVersion >= 0 ? (function () {
+                    var mode = Settings.data.colorSchemes.darkMode ? "dark" : "light"
+                    var cached = root.schemeColorsCache[schemeItem.schemeName]
+                    return (cached && cached[mode] && cached[mode].mTertiary) || root.getSchemeColor(schemeItem.schemeName, "mTertiary")
+                  })() : Color.mTertiary
                 }
                 Rectangle {
                   width: 14
                   height: 14
                   radius: width * 0.5
-                  color: (root.cacheVersion, function () {
-                            var mode = Settings.data.colorSchemes.darkMode ? "dark" : "light"
-                            var cached = root.schemeColorsCache[schemeItem.schemeName]
-                            return (cached && cached[mode] && cached[mode].mError) || root.getSchemeColor(schemeItem.schemeName, "mError")
-                          })()
+                  color: root.cacheVersion >= 0 ? (function () {
+                    var mode = Settings.data.colorSchemes.darkMode ? "dark" : "light"
+                    var cached = root.schemeColorsCache[schemeItem.schemeName]
+                    return (cached && cached[mode] && cached[mode].mError) || root.getSchemeColor(schemeItem.schemeName, "mError")
+                  })() : Color.mError
                 }
               }
 

Modules/SetupWizard/SetupCustomizeStep.qml

@@ -22,13 +22,15 @@ ColumnLayout {
   // Beautiful header with icon
   RowLayout {
     Layout.fillWidth: true
+    Layout.bottomMargin: Style.marginL
     spacing: Style.marginM
 
     Rectangle {
-      width: 28
-      height: 28
-      radius: Style.radiusM
-      color: Color.mSurface
+      width: 40
+      height: 40
+      radius: Style.radiusL
+      color: Color.mSurfaceVariant
+      opacity: 0.6
 
       NIcon {
         icon: "palette"
@@ -46,7 +48,7 @@ ColumnLayout {
         text: I18n.tr("setup.customize.header")
         pointSize: Style.fontSizeXL
         font.weight: Style.fontWeightBold
-        color: Color.mOnSurface
+        color: Color.mPrimary
       }
 
       NText {
@@ -111,11 +113,9 @@ ColumnLayout {
           }
         }
 
-        GridLayout {
+        RowLayout {
           Layout.fillWidth: true
-          columns: 2
-          rowSpacing: Style.marginS
-          columnSpacing: Style.marginS
+          spacing: Style.marginS
 
           Repeater {
             model: [{
@@ -137,7 +137,7 @@ ColumnLayout {
               }]
             delegate: Rectangle {
               Layout.fillWidth: true
-              Layout.preferredHeight: 48
+              Layout.preferredHeight: 40
               radius: Style.radiusM
               border.width: 1
 
@@ -308,7 +308,7 @@ ColumnLayout {
               radius: 16
               border.width: 1
               Layout.preferredHeight: 32
-              Layout.preferredWidth: Math.max(72, densityText.implicitWidth + Style.marginM)
+              Layout.preferredWidth: Math.max(90, densityText.implicitWidth + Style.marginXL * 2)
 
               property bool isActive: Settings.data.bar.density === modelData.key
 
@@ -403,31 +403,17 @@ ColumnLayout {
           }
         }
 
-        RowLayout {
+        NValueSlider {
           Layout.fillWidth: true
-          spacing: Style.marginM
-          NText {
-            text: "80%"
-            pointSize: Style.fontSizeS
-            color: Color.mOnSurfaceVariant
-          }
-          NValueSlider {
-            Layout.fillWidth: true
-            from: 0.8
-            to: 1.2
-            stepSize: 0.05
-            value: selectedScaleRatio
-            onMoved: function (value) {
-              selectedScaleRatio = value
-              scaleRatioChanged(value)
-            }
-            text: Math.floor(selectedScaleRatio * 100) + "%"
-          }
-          NText {
-            text: "120%"
-            pointSize: Style.fontSizeS
-            color: Color.mOnSurfaceVariant
+          from: 0.8
+          to: 1.2
+          stepSize: 0.05
+          value: selectedScaleRatio
+          onMoved: function (value) {
+            selectedScaleRatio = value
+            scaleRatioChanged(value)
           }
+          text: Math.floor(selectedScaleRatio * 100) + "%"
         }
       }
 

Modules/SetupWizard/SetupWallpaperStep.qml

@@ -23,6 +23,7 @@ ColumnLayout {
   // Beautiful header with icon
   ColumnLayout {
     Layout.fillWidth: true
+    Layout.bottomMargin: Style.marginL
     spacing: Style.marginM
 
     RowLayout {
@@ -50,7 +51,7 @@ ColumnLayout {
           text: I18n.tr("setup.wallpaper.header")
           pointSize: Style.fontSizeXL
           font.weight: Style.fontWeightBold
-          color: Color.mOnSurface
+          color: Color.mPrimary
         }
 
         NText {

Modules/SetupWizard/SetupWizard.qml

@@ -346,7 +346,7 @@ NPanel {
             }
 
             NButton {
-              text: currentStep === totalSteps - 1 ? "🎉 All Done!" : "Continue →"
+              text: currentStep === totalSteps - 1 ? "All Done!" : "Continue →"
               Layout.preferredHeight: 44
               onClicked: {
                 if (currentStep < totalSteps - 1) {