use toolbar for EmailForm.ui, ExistingLoginForm.ui, PasswordForm.ui, ConfirmPasswordForm.ui

4 files changed, 73 insertions, 50 deletions

diff --git a/pages/ConfirmPasswordForm.ui.qml b/pages/ConfirmPasswordForm.ui.qml
index 34e03ef..d867587 100644
--- a/pages/ConfirmPasswordForm.ui.qml
+++ b/pages/ConfirmPasswordForm.ui.qml
@@ -13,26 +13,30 @@ Rectangle {
     property alias confirmPassButton: confirmPassButton
     property alias emailAddressLabel: emailAddressLabel
 
-    Rectangle {
-        id: appBar
+    ToolBar {
+        id: toolbar
         height: 56
-        color: "#ffffff"
+        font.family: "Google Sans"
         anchors.top: parent.top
         anchors.topMargin: 0
         anchors.right: parent.right
         anchors.rightMargin: 0
         anchors.left: parent.left
         anchors.leftMargin: 0
+        background: Rectangle {
+            color: "#FFF"
+        }
 
-        RoundButton {
-            id: backButton
-            flat: true
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.left: parent.left
-            display: AbstractButton.IconOnly
-            icon.name: "back-icon"
-            icon.source: "/assets/arrow-back-24px.svg"
-            icon.color: "transparent"
+        RowLayout {
+            anchors.fill: parent
+            spacing: 8
+
+            ToolButton {
+                id: backButton
+                icon.name: "back-icon"
+                icon.source: "/assets/arrow-back-24px.svg"
+                highlighted: true
+            }
         }
     }
 
@@ -116,3 +120,8 @@ Rectangle {
         Material.background: Material.primary
     }
 }
+
+/*##^## Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+ ##^##*/
diff --git a/pages/EmailForm.ui.qml b/pages/EmailForm.ui.qml
index 969dcaa..f05fe96 100644
--- a/pages/EmailForm.ui.qml
+++ b/pages/EmailForm.ui.qml
@@ -12,28 +12,33 @@ Rectangle {
     property alias emailTextField: emailTextField
     property alias loginButton: loginButton
 
-    Rectangle {
-        id: appBar
+    ToolBar {
+        id: toolbar
         height: 56
-        color: "#ffffff"
+        font.family: "Google Sans"
         anchors.top: parent.top
         anchors.topMargin: 0
         anchors.right: parent.right
         anchors.rightMargin: 0
         anchors.left: parent.left
         anchors.leftMargin: 0
+        background: Rectangle {
+            color: "#FFF"
+        }
 
-        RoundButton {
-            id: backButton
-            flat: true
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.left: parent.left
-            display: AbstractButton.IconOnly
-            icon.name: "back-icon"
-            icon.source: "/assets/arrow-back-24px.svg"
-            icon.color: "transparent"
+        RowLayout {
+            anchors.fill: parent
+            spacing: 8
+
+            ToolButton {
+                id: backButton
+                icon.name: "back-icon"
+                icon.source: "/assets/arrow-back-24px.svg"
+                highlighted: true
+            }
         }
     }
+
     Label {
         x: 16
         y: 398
diff --git a/pages/ExistingLoginForm.ui.qml b/pages/ExistingLoginForm.ui.qml
index 9cbc5f4..adca502 100644
--- a/pages/ExistingLoginForm.ui.qml
+++ b/pages/ExistingLoginForm.ui.qml
@@ -12,26 +12,30 @@ Rectangle {
     property alias passTextField: passTextField
     property alias createPassButton: loginButton
 
-    Rectangle {
-        id: appBar
+    ToolBar {
+        id: toolbar
         height: 56
-        color: "#ffffff"
+        font.family: "Google Sans"
         anchors.top: parent.top
         anchors.topMargin: 0
         anchors.right: parent.right
         anchors.rightMargin: 0
         anchors.left: parent.left
         anchors.leftMargin: 0
+        background: Rectangle {
+            color: "#FFF"
+        }
 
-        RoundButton {
-            id: backButton
-            flat: true
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.left: parent.left
-            display: AbstractButton.IconOnly
-            icon.name: "back-icon"
-            icon.source: "/assets/arrow-back-24px.svg"
-            icon.color: "transparent"
+        RowLayout {
+            anchors.fill: parent
+            spacing: 8
+
+            ToolButton {
+                id: backButton
+                icon.name: "back-icon"
+                icon.source: "/assets/arrow-back-24px.svg"
+                highlighted: true
+            }
         }
     }
 
@@ -57,6 +61,7 @@ Rectangle {
 
     Rectangle {
         id: userEmail
+        y: 299
         height: 48
         anchors.right: parent.right
         anchors.rightMargin: 16
@@ -81,9 +86,9 @@ Rectangle {
 
     TextField {
         id: passTextField
-        y: 501
+        y: 362
         font.pointSize: 16
-        anchors.bottom: createPassButton.top
+        anchors.bottom: loginButton.top
         anchors.bottomMargin: 16
         font.family: "Google Sans"
         Layout.fillWidth: true
diff --git a/pages/PasswordForm.ui.qml b/pages/PasswordForm.ui.qml
index a306c50..7b9ee46 100644
--- a/pages/PasswordForm.ui.qml
+++ b/pages/PasswordForm.ui.qml
@@ -13,26 +13,30 @@ Rectangle {
     property alias createPassButton: createPassButton
     property alias emailAddressLabel: emailAddressLabel
 
-    Rectangle {
-        id: appBar
+    ToolBar {
+        id: toolbar
         height: 56
-        color: "#ffffff"
+        font.family: "Google Sans"
         anchors.top: parent.top
         anchors.topMargin: 0
         anchors.right: parent.right
         anchors.rightMargin: 0
         anchors.left: parent.left
         anchors.leftMargin: 0
+        background: Rectangle {
+            color: "#FFF"
+        }
 
-        RoundButton {
-            id: backButton
-            flat: true
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.left: parent.left
-            display: AbstractButton.IconOnly
-            icon.name: "back-icon"
-            icon.source: "/assets/arrow-back-24px.svg"
-            icon.color: "transparent"
+        RowLayout {
+            anchors.fill: parent
+            spacing: 8
+
+            ToolButton {
+                id: backButton
+                icon.name: "back-icon"
+                icon.source: "/assets/arrow-back-24px.svg"
+                highlighted: true
+            }
         }
     }