add layouts and align top

qml/buttons/Settings.qml

@@ -1,7 +1,7 @@
 pragma ComponentBehavior: Bound
 
-import QtQuick 2.15
-import QtQuick.Controls 2.15
+import QtQuick
+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.Layouts 1.15
+import QtQuick
+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
 }