updater2: Change the look to match Gireen's awesome concept.

DownloadInfo.qml

@@ -11,11 +11,13 @@ Item {
     height: Math.min(parent.height * 0.1, 40)
     anchors.bottom: parent.bottom
     anchors.horizontalCenter: parent.horizontalCenter
-    anchors.bottomMargin: 75
+    anchors.bottomMargin: 20
     Card {
-        width: parent.width - (downloadAction.width / 2)
+        width: parent.width - downloadAction.width
         height: parent.height
         Material.elevation: 2
+        Material.theme: Material.Dark
+        Material.background: "black"
         Item {
             width: parent.width
             height: parent.height
@@ -27,6 +29,7 @@ Item {
                 to: 1.0
                 indeterminate: false
                 value: downloader.completedSize / downloader.totalSize
+                Material.accent: Material.Teal
             }
             Row {
                 id: downloadInfo
@@ -86,11 +89,11 @@ Item {
     ActionButton {
         id: downloadAction
         iconName: "file/file_download"
-        scale: 0.83
+        scale: 0.7
         anchors.verticalCenter: parent.verticalCenter
         anchors.right: parent.right
-        Material.background: Material.Green
         Material.elevation: 1
+        Material.background: Material.Teal
         onClicked: {
             if (downloader.state === QmlDownloader.COMPLETED) {
                 root.hide();

News.qml

@@ -4,13 +4,15 @@ import QtQuick.Controls.Material 2.0
 import Fluid.Controls 1.0
 import Fluid.Material 1.0
 
-Card {
-    id: newsContainer
-    width: Math.min(parent.width * 0.5, 400)
-    height: width * 1.1
-    anchors.right: parent.right
-    anchors.verticalCenter: parent.verticalCenter
-    anchors.margins: parent.width * 0.1
+Item {
+    width: parent.width
+    anchors {
+        horizontalCenter: parent.horizontalCenter
+        top: header.bottom
+        bottom: downloadInfo.top
+        topMargin: 10
+        bottomMargin: 10
+    }
 
     function stripHttpsIfWin(url) {
 
@@ -44,10 +46,13 @@ Card {
     }
     SwipeView {
         id: swipe
-        height: parent.height * 0.9
-        width: parent.width
         clip: true
-        anchors.horizontalCenter: parent.horizontalCenter
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+            left: leftButton.right
+            right: rightButton.left
+        }
         Component.onCompleted: fetchNews()
     }
     PageIndicator {
@@ -58,20 +63,20 @@ Card {
         anchors.horizontalCenter: parent.horizontalCenter
     }
     ActionButton {
-        anchors.left: swipe.left
+        id: leftButton
+        anchors.left: parent.left
         anchors.verticalCenter: swipe.verticalCenter
-        anchors.leftMargin: -width / 2
-        Material.background: Material.Blue
-        scale: 0.5
+        Material.background: Material.Teal
+        scale: 0.75
         iconName: "navigation/chevron_left"
         onClicked: swipe.decrementCurrentIndex()
     }
     ActionButton {
-        anchors.right: swipe.right
+        id: rightButton
+        anchors.right: parent.right
         anchors.verticalCenter: swipe.verticalCenter
-        anchors.rightMargin: -width / 2
-        Material.background: Material.Blue
-        scale: 0.5
+        Material.background: Material.Teal
+        scale: 0.75
         iconName: "navigation/chevron_right"
         onClicked: swipe.incrementCurrentIndex()
     }

NewsCard.qml

@@ -3,43 +3,49 @@ import QtQuick.Controls 2.0
 import QtQuick.Controls.Material 2.0
 import Fluid.Controls 1.0
 import Fluid.Effects 1.0
+import QtQuick.Layouts 1.3
 
 Flickable {
     id: item
     property url source : ""
     property string cardTitle : ""
     property string summary : ""
     property string url: ""
-    Card {
-        id: card
-        width: parent.width
-        height: parent.height
 
-        Image {
-            id: picture
-            anchors {
-                left: parent.left
-                top: parent.top
-                right: parent.right
-                margins: 20
-            }
+    Image {
+        id: picture
+        anchors {
+            left: parent.left
+            top: parent.top
+            margins: 20
+            verticalCenter: parent.verticalCenter
+        }
 
-            height: parent.height * 0.5
-            source: item.source
-            BusyIndicator {
-                anchors.centerIn: parent
-                visible: picture.status !== Image.Ready
-            }
+        width: parent.width * 0.45
+        source: item.source
+        fillMode: Image.PreserveAspectFit
+        BusyIndicator {
+            anchors.centerIn: parent
+            visible: picture.status !== Image.Ready
         }
+    }
+
+    Card {
+        anchors {
+            right: parent.right
+            verticalCenter: parent.verticalCenter
+        }
+        width: picture.paintedWidth
+        height: picture.paintedHeight
+        Layout.maximumHeight: picture.paintedHeight
+        Material.theme: Material.Dark
+        Material.background: "black"
+        visible: picture.status === Image.Ready
 
         Column {
             id: column
-            anchors {
-                left: parent.left
-                top: picture.bottom
-                right: parent.right
-                margins: Units.smallSpacing * 2
-            }
+            width: parent.width
+            height: parent.height
             spacing: Units.smallSpacing * 2
 
             TitleLabel {
@@ -54,7 +60,7 @@ Flickable {
                 text: item.summary
                 textFormat: Text.RichText
                 onLinkActivated:  {
-                    Qt.openUrlExternally(link)
+                    Qt.openUrlExternally(link);
                 }
                 MouseArea {
                     anchors.fill: parent
@@ -63,14 +69,5 @@ Flickable {
                 }
             }
         }
-        Button {
-            text: "Read More"
-            onClicked: Qt.openUrlExternally(item.url)
-            MouseArea {
-                anchors.fill: parent
-                acceptedButtons: Qt.NoButton
-                cursorShape: Qt.PointingHandCursor
-            }
-        }
     }
 }

main.qml

@@ -7,10 +7,8 @@ import Fluid.Material 1.0 as FluidMaterial
 ApplicationWindow {
     id: root
     visible: true
-    width: 1280
-    height: 720
-    minimumWidth: 1280
-    minimumHeight: 720
+    width: 1024
+    height: 768
     title: qsTr("Unvanquished Updater")
     Material.theme: Material.Light
     Material.primary: Material.DarkBlue
@@ -28,21 +26,73 @@ ApplicationWindow {
     Image {
       width: parent.width
       height: parent.height
-      source: "qrc:/resources/menu.png"
+      source: "qrc:/resources/background.png"
     }
+
+    Rectangle {
+        anchors.bottom: header.top
+        width: header.width
+        height: 3
+        color: "#2F1E1E"
+    }
+
+    Image {
+        id: header
+        width: parent.width
+        height: logo.height * 2
+        anchors {
+            top: parent.top
+            topMargin: parent.height * 0.1
+        }
+        source: "qrc:/resources/header.png"
+    }
+    Rectangle {
+        anchors.top: header.bottom
+        width: header.width
+        height: 3
+        color: "#2F1E1E"
+    }
+
+    Image {
+        id: tyrant
+        anchors {
+            right: parent.right
+            verticalCenter: header.verticalCenter
+            verticalCenterOffset: height * 0.20
+        }
+        width: parent.width * 0.25
+        fillMode: Image.PreserveAspectFit
+        source: "qrc:/resources/tyrant.png"
+    }
+    Image {
+        id: logo
+        anchors {
+            left: parent.left
+            verticalCenter: header.verticalCenter
+            leftMargin: 25
+        }
+        width: parent.width * 0.65
+
+        fillMode: Image.PreserveAspectFit
+        source: "qrc:/resources/logo.png"
+    }
+
     FluidMaterial.ActionButton {
         id: settingsAction
         scale: 0.55
         anchors.top: parent.top
         anchors.right: parent.right
         iconName: "action/settings"
         Material.elevation: 1
-        Material.background: Material.Blue
+        Material.background: Material.Teal
         onClicked: settingsBottomSheet.open()
     }
-
-    News {}
-    DownloadInfo {}
+    News {
+        id: newsContainer
+    }
+    DownloadInfo {
+        id: downloadInfo
+    }
     FluidMaterial.BottomSheet {
         id: settingsBottomSheet
         width: parent.width
@@ -62,5 +112,8 @@ ApplicationWindow {
     FluidControls.InfoBar {
         id: infoBar
         duration: 3000
+        onClicked: {
+            this.hide();
+        }
     }
 }

qml.qrc

@@ -2,8 +2,6 @@
     <qresource prefix="/">
         <file>main.qml</file>
         <file>qtquickcontrols2.conf</file>
-        <file>resources/menu.png</file>
-        <file>resources/menu720p.png</file>
         <file>resources/Roboto-Regular.ttf</file>
         <file>resources/updater.png</file>
         <file>News.qml</file>
@@ -14,5 +12,9 @@
         <file>Settings.qml</file>
         <file>utils.js</file>
         <file>resources/unvanquished.png</file>
+        <file>resources/background.png</file>
+        <file>resources/header.png</file>
+        <file>resources/logo.png</file>
+        <file>resources/tyrant.png</file>
     </qresource>
 </RCC>

splash.qml

@@ -54,7 +54,7 @@ ApplicationWindow {
 
         iconName: "action/settings"
         Material.elevation: 0
-        Material.background: Material.Blue
+        Material.background: Material.Teal
         onClicked: {
             showUpdater();
             timer.stop();

updater2.pro

@@ -65,4 +65,8 @@ else: unix:!android: target.path = /opt/$${TARGET}/bin
 
 DISTFILES += \
     resources/unvanquished.desktop \
-    resources/unvanquished.png
+    resources/unvanquished.png \
+    resources/background.png \
+    resources/header.png \
+    resources/logo.png \
+    resources/tyrant.png