QML UI: consistent title and attempt of back button for dive details

The back arrow looks terrible. I'm not clear on how this is supposed to be
implemented.

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

qt-mobile/DiveDetails.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.3
 import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2
 import QtQuick.Window 2.2
 import QtQuick.Dialogs 1.2
 import QtQuick.Layouts 1.1
@@ -31,9 +32,29 @@ Item {
 		clip: true
 		ColumnLayout {
 			width: parent.width
+			Rectangle {
+				id: topBar
+				color: "#2C4882"
+				Layout.fillWidth: true
+				Layout.margins: 0
+				height: backButton.height * 1.2
 				RowLayout {
 					Button {
-					text: "Back"
+						id: backButton
+						Layout.margins: 0.1 * height
+						text: "\u2190"
+						style: ButtonStyle {
+							background: Rectangle {
+								color: "#4C68A2"
+							}
+							label: Text {
+								id: txt
+								color: "white"
+								font.pointSize: 24
+								font.bold: true
+								text: control.text
+							}
+						}
 						onClicked: {
 							manager.commitChanges(
 										dive_id,
@@ -45,8 +66,14 @@ Item {
 							stackView.pop();
 						}
 					}
+					Text {
+						text: qsTr("Subsurface mobile")
+						font.pointSize: 18
+						font.bold: true
+						color: "white"
+					}
+				}
 			}
-
 			GridLayout {
 				id: editorDetails
 				width: parent.width