feat: add very placeholder account settings modal

fef

ui/app/AppLayouts/Wallet/AccountSettingsModal.qml

@@ -0,0 +1,120 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+import "../../../imports"
+import "../../../shared"
+
+ModalPopup {
+    id: popup
+    // TODO add icon when we have that feature
+    title: qsTr("Status account settings")
+    height: 630
+
+    property int marginBetweenInputs: 35
+    property string selectedColor: Constants.accountColors[0] // TODO use old color
+
+    onOpened: {
+        accountNameInput.forceActiveFocus(Qt.MouseFocusReason)
+    }
+
+    Input {
+        id: accountNameInput
+        placeholderText: qsTr("Enter an account name...")
+        label: qsTr("Account name")
+        text: "Old name"
+    }
+
+    Select {
+        id: accountColorInput
+        anchors.top: accountNameInput.bottom
+        anchors.topMargin: marginBetweenInputs
+        bgColor: selectedColor
+        label: qsTr("Account color")
+        selectOptions: Constants.accountColors.map(color => {
+            return {
+                text: "",
+                bgColor: color,
+                height: 52,
+                onClicked: function () {
+                    selectedColor = color
+                }
+           }
+        })
+    }
+
+    TextWithLabel {
+        id: typeText
+        label: "Type"
+        text: "On Status"
+        anchors.top: accountColorInput.bottom
+        anchors.topMargin: marginBetweenInputs
+    }
+
+    TextWithLabel {
+        id: addressText
+        label: "Wallet address"
+        text: "0x0000"
+        anchors.top: typeText.bottom
+        anchors.topMargin: marginBetweenInputs
+    }
+
+    TextWithLabel {
+        id: pathText
+        label: "Derivation path"
+        text: "m/stuff"
+        anchors.top: addressText.bottom
+        anchors.topMargin: marginBetweenInputs
+    }
+
+    TextWithLabel {
+        id: storageText
+        label: "Storage"
+        text: "This device"
+        anchors.top: pathText.bottom
+        anchors.topMargin: marginBetweenInputs
+    }
+
+    footer: Item {
+        anchors.fill: parent
+        StyledButton {
+            anchors.top: parent.top
+            anchors.topMargin: Theme.padding
+            anchors.right: saveBtn.left
+            anchors.rightMargin: Theme.padding
+            label: "Delete account"
+            btnColor: Theme.white
+            textColor: Theme.red
+
+            onClicked : {
+                // TODO add a confirmation message
+                console.log('DELETE')
+                popup.close();
+            }
+        }
+        StyledButton {
+            id: saveBtn
+            anchors.top: parent.top
+            anchors.topMargin: Theme.padding
+            anchors.right: parent.right
+            anchors.rightMargin: Theme.padding
+            label: "Save changes"
+
+            disabled: accountNameInput.text === ""
+
+            onClicked : {
+                // TODO add message to show validation errors
+                if (accountNameInput.text === "") return;
+                console.log('SAVE')
+    //            walletModel.generateNewAccount(passwordInput.text, accountNameInput.text, selectedColor);
+                // TODO manage errors adding account
+                popup.close();
+            }
+        }
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;formeditorColor:"#ffffff";height:500;width:400}
+}
+##^##*/

ui/app/AppLayouts/Wallet/WalletHeader.qml

@@ -77,6 +77,10 @@ Item {
         id: tokenSettingsModal
     }
 
+    AccountSettingsModal {
+        id: accountSettingsModal
+    }
+
     Item {
         property int btnMargin: 8
         property int btnOuterMargin: 32
@@ -176,7 +180,7 @@ Item {
                         text: qsTr("Account Settings")
                         icon.source: "../../img/account_settings.svg"
                         onTriggered: {
-                            console.log("TODO: AccountSettings")
+                            accountSettingsModal.open()
                         }
                     }
                     QQC2.Action {

ui/imports/Theme.qml

@@ -14,6 +14,7 @@ QtObject {
     readonly property color lightBlueText: "#8f9fec"
     readonly property color darkBlue: "#3c55c9"
     readonly property color darkBlueBtn: "#5a70dd"
+    readonly property color red: "#FF2D55"
 
     readonly property int bigPadding: 24
     readonly property int padding: 16

ui/nim-status-client.pro

@@ -77,8 +77,10 @@ DISTFILES += \
     app/AppLayouts/Profile/LeftTab/Profile.qml \
     app/AppLayouts/Profile/LeftTab/qmldir \
     app/AppLayouts/Profile/ProfileLayout.qml \
+    app/AppLayouts/Wallet/AccountSettingsModal.qml \
     app/AppLayouts/Wallet/AssetsTab.qml \
     app/AppLayouts/Wallet/CollectiblesTab.qml \
+    app/AppLayouts/Wallet/Components/AccountSettingsModal.qml \
     app/AppLayouts/Wallet/Components/AddAccount.qml \
     app/AppLayouts/Wallet/Components/AddAccountWithPrivateKey.qml \
     app/AppLayouts/Wallet/Components/AddAccountWithSeed.qml \
@@ -171,4 +173,5 @@ DISTFILES += \
     shared/StyledButton.qml \
     shared/RoundedIcon.qml \
     shared/StyledTextArea.qml \
+    shared/TextWithLabel.qml \
     shared/qmldir

ui/shared/TextWithLabel.qml

@@ -0,0 +1,49 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+import QtGraphicalEffects 1.12
+import "../imports"
+
+Item {
+    property string text: "My Text"
+    property string label: "My Label"
+    readonly property int labelMargin: 7
+
+    id: inputBox
+    height: textItem.height + inputLabel.height + labelMargin
+    anchors.right: parent.right
+    anchors.left: parent.left
+
+    Text {
+        id: inputLabel
+        text: inputBox.label
+        font.weight: Font.Medium
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        anchors.top: parent.top
+        anchors.topMargin: 0
+        font.pixelSize: 13
+        color: Theme.darkGrey
+    }
+
+    TextEdit {
+        id: textItem
+        text: inputBox.text
+        selectByMouse: true
+        readOnly: true
+        font.weight: Font.Medium
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        anchors.top: inputLabel.bottom
+        anchors.topMargin: inputBox.labelMargin
+        font.pixelSize: 15
+        color: Theme.black
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;formeditorColor:"#ffffff";formeditorZoom:1.25}
+}
+##^##*/
+

ui/shared/qmldir

@@ -4,6 +4,7 @@ ModalPopup 1.0 ModalPopup.qml
 PopupMenu 1.0 PopupMenu.qml
 Separator 1.0 Separator.qml
 StatusTabButton 1.0 StatusTabButton.qml
+TextWithLabel 1.0 TextWithLabel.qml
 Input 1.0 Input.qml
 Select 1.0 Select.qml
 StyledTextArea 1.0 StyledTextArea.qml