1 files changed, 72 insertions, 26 deletions

diff --git a/pages/EmailForm.ui.qml b/pages/EmailForm.ui.qml
index 498aa6a..4aa692c 100644
--- a/pages/EmailForm.ui.qml
+++ b/pages/EmailForm.ui.qml
@@ -3,43 +3,50 @@ import QtQuick.Layouts 1.3
 import QtQuick.Controls 2.12
 
 Rectangle {
+    id: rectangle
     width: 363
     height: 628
-    color: "#f44236"
+    color: "#fff"
     border.width: 0
 
-    property alias phoneTextField: phoneTextField
+    property alias emailTextField: emailTextField
     property alias passwordTextField: passwordTextField
     property alias loginButton: loginButton
     property alias laterButton: laterButton
 
     Label {
-        x: 124
-        y: 177
-        width: 116
-        height: 17
-        text: qsTr("E-mail")
-        anchors.horizontalCenter: parent.horizontalCenter
+        x: 16
+        y: 398
+        color: "#2b2626"
+        text: qsTr("Continue with E-Mail")
+        font.weight: Font.Bold
+        wrapMode: Text.WordWrap
+        anchors.bottom: buttonLayout.top
+        anchors.bottomMargin: 16
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+        anchors.right: parent.right
+        anchors.rightMargin: 88
+
+        font.family: "Google Sans"
+        font.pointSize: 34
     }
 
     RowLayout {
         x: 34
         y: 411
+        id: buttonLayout
         width: loginButton.width
         height: loginButton.height
         anchors.bottom: passwordTextField.top
+        anchors.bottomMargin: 16
         anchors.horizontalCenter: parent.horizontalCenter
 
-        Label {
-            id: prefixLabel
-            text: "+62"
-        }
-
         TextField {
-            id: phoneTextField
+            id: emailTextField
             width: 303
             Layout.fillWidth: true
-            placeholderText: "812345678"
+            placeholderText: "E-mail"
         }
     }
 
@@ -50,32 +57,71 @@ Rectangle {
         width: loginButton.width
         height: loginButton.height
         anchors.bottom: loginButton.top
+        anchors.bottomMargin: 16
         anchors.horizontalCenter: parent.horizontalCenter
         echoMode: TextInput.Password
-        placeholderText: qsTr("Kata Sandi")
+        placeholderText: qsTr("Password")
     }
 
     Button {
         id: loginButton
         x: 34
-        y: 525
+        y: 278
         width: 296
-        height: 57
+        height: 36
         text: qsTr("Masuk")
-        anchors.bottomMargin: -2
+        anchors.right: parent.right
+        anchors.rightMargin: 16
         anchors.bottom: laterButton.top
-        anchors.horizontalCenterOffset: 0
-        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottomMargin: 16
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+
+        contentItem: Text {
+            text: loginButton.text
+            color: "#FFF"
+            font.pointSize: 14
+            font.family: "Google Sans"
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            elide: Text.ElideRight
+        }
+
+        background: Rectangle {
+            opacity: enabled ? 1.0 : 0.3
+            color: laterButton.down ? "#6d22e9" : "#4F12DA"
+            radius: 6
+        }
     }
 
     Button {
         id: laterButton
-        x: 41
-        y: 580
-        text: qsTr("NANTI SAJA")
+        x: 16
+        y: 566
+        height: 36
+        text: qsTr("Nanti saja")
+        anchors.right: parent.right
+        anchors.rightMargin: 16
         anchors.bottom: parent.bottom
-        anchors.bottomMargin: 0
+        anchors.bottomMargin: 16
         anchors.left: parent.left
-        anchors.leftMargin: 41
+        anchors.leftMargin: 16
+
+        contentItem: Text {
+            text: laterButton.text
+            color: "#6d22e9"
+            font.pointSize: 14
+            font.family: "Google Sans"
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            elide: Text.ElideRight
+        }
+        background: Rectangle {
+            opacity: enabled ? 0.3 : 1.0
+            color: laterButton.down ? "#6d22e9" : "#fff"
+            border.color: "#6d22e9"
+            border.width: 1
+            radius: 6
+        }
     }
 }