add layouts and align top

CMakeLists.txt

@@ -23,8 +23,8 @@ qt_add_qml_module(apparchpack
   QML_FILES
     Main.qml
     qml/style/Theme.qml
-    qml/components/Title.qml
     qml/buttons/Settings.qml
+    qml/components/Title.qml
   SOURCES
     cpp/utils/utils.hpp
     cpp/utils/utils.cpp

Main.qml

@@ -22,14 +22,22 @@ ApplicationWindow {
   ColumnLayout {
     id: mainLayout
     anchors.fill: parent
-    anchors.margins: 16
+    anchors.margins: Theme.baseMargins
-    spacing: 12
+    spacing: Theme.baseSpacing
 
     RowLayout {
       id: headerLayout
+      Layout.alignment: Qt.AlignTop
+      Layout.maximumWidth: Number.POSITIVE_INFINITY
 
-      Components.Title {}
+      Components.Title {
-      Buttons.Settings {}
+        id: title
+        Layout.maximumWidth: Number.POSITIVE_INFINITY
+      }
+
+      Buttons.Settings {
+        id: settingsButton
+      }
     }
   }
 }

qml/buttons/Settings.qml

@@ -1,7 +1,7 @@
 pragma ComponentBehavior: Bound
 
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
 
 Item {
   id: root
@@ -28,7 +28,7 @@ Item {
             width: 18
             height: 2
             radius: 1
-            color: "#585b70"
+            color: Theme.color3
           }
         }
       }
@@ -36,7 +36,7 @@ Item {
 
     background: Rectangle {
       radius: 3
-      color: button.down ? "#45475a" : button.hovered ? "#313244" : "transparent"
+      color: button.down ? Theme.color4 : button.hovered ? Theme.color5 : Theme.colorTransparent
     }
   }
 }

qml/components/Title.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
 
 ColumnLayout {
   id: root
@@ -14,7 +14,7 @@ ColumnLayout {
 
     Text {
       text: "Arch Linux Updater"
-      font.pixelSize: 20
+      font.pixelSize: Theme.fontTitleSize
       font.bold: true
       color: Theme.color2
       Layout.alignment: Qt.AlignBaseline
@@ -22,7 +22,7 @@ ColumnLayout {
 
     Text {
       text: "v. " + Qt.application.version
-      font.pixelSize: 12
+      font.pixelSize: Theme.fontSize
       font.italic: true
       color: Theme.color3
       Layout.alignment: Qt.AlignBaseline

qml/style/Theme.qml

@@ -1,11 +1,18 @@
 pragma Singleton
 
-import QtQuick 2.15
+import QtQuick
 
 QtObject {
   readonly property color color1: "#303446"
   readonly property color color2: "#cdd6f4"
   readonly property color color3: "#6c7086"
+  readonly property color color4: "#45475a"
+  readonly property color color5: "#313244"
+  readonly property color colorTransparent: "transparent"
 
   readonly property int fontSize: 12
+  readonly property int fontTitleSize: 20
+
+  readonly property int baseMargins: 12
+  readonly property int baseSpacing: 12
 }