QML UI: make the buttons on the start page more attractive

Those plain rectangular buttons were just too ugly.

Signed-off-by: Dirk Hohndel <dirk@hohndel.org>

1 files changed, 25 insertions, 1 deletions

diff --git a/qt-mobile/qml/StartPage.qml b/qt-mobile/qml/StartPage.qml
index f8dc36735..741a879a8 100644
--- a/qt-mobile/qml/StartPage.qml
+++ b/qt-mobile/qml/StartPage.qml
@@ -1,15 +1,33 @@
 import QtQuick 2.5
 import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2
 import QtQuick.Layouts 1.1
 import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
+import org.subsurfacedivelog.mobile 1.0
 
 Item {
+	property var subsurfaceButton: Component {
+		ButtonStyle {
+			background: Rectangle {
+				border.width: 1
+				radius: height / 3
+				color: subsurfaceTheme.accentColor
+			}
+			label: Text{
+				text: control.text
+				color: subsurfaceTheme.accentTextColor
+				verticalAlignment: Text.AlignVCenter
+				horizontalAlignment: Text.AlignHCenter
+			}
+		}
+	}
+
 	ColumnLayout {
 		id: startpage
 		anchors.fill: parent
 		anchors.margins: MobileComponents.Units.gridUnit / 2
 
-		property int buttonWidth: welcomeText.width
+		property int buttonWidth: width * 0.9
 
 		MobileComponents.Heading {
 			Layout.bottomMargin: MobileComponents.Units.largeSpacing
@@ -25,27 +43,33 @@ Item {
 			Layout.columnSpan: 2
 		}
 		Button {
+			style: subsurfaceButton
 			id: cloudstorageButton
 			Layout.bottomMargin: MobileComponents.Units.largeSpacing
 			Layout.preferredWidth: startpage.buttonWidth
+			anchors.horizontalCenter: parent.horizontalCenter
 			text: "Connect to CloudStorage..."
 			onClicked: {
 				stackView.push(cloudCredWindow)
 			}
 		}
 		Button {
+			style: subsurfaceButton
 			id: computerButton
 			Layout.preferredWidth: startpage.buttonWidth
 			Layout.bottomMargin: MobileComponents.Units.largeSpacing
+			anchors.horizontalCenter: parent.horizontalCenter
 			text: "Transfer from dive computer..."
 			onClicked: {
 				stackView.push(downloadDivesWindow)
 			}
 		}
 		Button {
+			style: subsurfaceButton
 			id: manualButton
 			Layout.preferredWidth: startpage.buttonWidth
 			Layout.bottomMargin: MobileComponents.Units.largeSpacing
+			anchors.horizontalCenter: parent.horizontalCenter
 			text: "Add dive manually..."
 			onClicked: {
 				manager.addDive();