ens section fixes

use the available dark image for ens section

add the image, ensure 624 widths and fix button

move common strings to constants and use number consts

ui/app/AppLayouts/Profile/Sections/Ens/Search.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.3
 import QtQuick.Controls 2.14
 import "../../../../../imports"
 import "../../../../../shared"
+import "../../../../../shared/status"
 
 Item {
     id: searchENS
@@ -65,14 +66,19 @@ Item {
         }
     }
 
+    Item {
+        id: ensContainer
+        anchors.top: parent.top
+        width: 624
+        anchors.horizontalCenter: parent.horizontalCenter
+
         StyledText {
             id: sectionTitle
-        //% "Your username"
+            text: ""
-        text: qsTrId("ens-your-username")
             anchors.left: parent.left
-        anchors.leftMargin: 24
+            anchors.leftMargin: Style.current.bigPadding
             anchors.top: parent.top
-        anchors.topMargin: 24
+            anchors.topMargin: Style.current.bigPadding
             font.weight: Font.Bold
             font.pixelSize: 20
         }
@@ -80,7 +86,7 @@ Item {
         Rectangle {
             id: circleAt
             anchors.top: sectionTitle.bottom
-        anchors.topMargin: 24
+            anchors.topMargin: Style.current.bigPadding
             anchors.horizontalCenter: parent.horizontalCenter
             width: 60
             height: 60
@@ -89,7 +95,7 @@ Item {
 
             SVGImage {
                 id: imgIcon
-            visible: ensStatus === "taken"
+                visible: ensStatus === Constants.ens_taken
                 fillMode: Image.PreserveAspectFit
                 source: "../../../../img/block-icon-white.svg"
                 width: 20
@@ -99,9 +105,11 @@ Item {
             }
 
             StyledText {
-            visible: ensStatus !== "taken"
+                visible: ensStatus !== Constants.ens_taken
                 text: {
-                if((ensStatus === "available" || ensStatus === "connected" || ensStatus === "connected-different-key")){
+                    if((ensStatus === Constants.ens_available || 
+                         ensStatus === Constants.ens_connected || 
+                         ensStatus === Constants.ens_connected_dkey)) {
                         return "✓"
                     } else {
                         return "@"
@@ -120,9 +128,9 @@ Item {
             id: ensUsername
             placeholderText: !isStatus ? "vitalik94.domain.eth" : "vitalik94"
             anchors.top: circleAt.bottom
-        anchors.topMargin: 24
+            anchors.topMargin: Style.current.bigPadding
             anchors.right: btnContinue.left
-        anchors.rightMargin: 24
+            anchors.rightMargin: Style.current.bigPadding
             Keys.onReleased: {
                 onKeyReleased(ensUsername.text);
             }
@@ -135,95 +143,77 @@ Item {
                     loading = false;
                     ensStatus = ensResult;
                     switch(ensResult){
-                    case "available": 
+                        case Constants.ens_available: 
+                        case Constants.ens_owned:
+                        case Constants.ens_connected:
+                        case Constants.ens_connected_dkey:
                             valid = true;
-                        //% "✓ Username available!"
+                            validationMessage = Constants.ensState[ensResult]
-                        validationMessage = qsTrId("ens-username-available");
                             break;
-                    case "owned":
+                        case Constants.ens_taken:
-                        valid = true;
+                            validationMessage = !isStatus ? Constants.ensState['taken_custom'] : Constants.ensState['taken'];
-                        //% "Continuing will connect this username with your chat key."
-                        validationMessage = qsTrId("ens-username-owned-continue");
                             break;
-                    case "taken":
+                        case Constants.already_connected: 
-                        validationMessage = !isStatus ? 
+                            validationMessage = Constants.ensState[ensResult]
-                                            //% "Username doesn’t belong to you :("
-                                            qsTrId("ens-custom-username-taken")
-                                            :
-                                            //% "Username already taken :("
-                                            qsTrId("ens-username-taken");
-                        break;
-                    case "already-connected":
-                        //% "Username is already connected with your chat key and can be used inside Status."
-                        validationMessage = qsTrId("ens-username-already-added");
-                        break;
-                    case "connected":
-                        valid = true;
-                        //% "This user name is owned by you and connected with your chat key. Continue to set `Show my ENS username in chats`."
-                        validationMessage = qsTrId("this-user-name-is-owned-by-you-and-connected-with-your-chat-key--continue-to-set--show-my-ens-username-in-chats--");
-                        break;
-                    case "connected-different-key":
-                        valid = true;
-                        //% "Continuing will require a transaction to connect the username with your current chat key."
-                        validationMessage = qsTrId("ens-username-connected-with-different-key");
                             break;
                     }
                 }
             }
         }
 
-    Button {
+        StatusRoundButton {
             id: btnContinue
             width: 44
             height: 44
             anchors.top: circleAt.bottom
-        anchors.topMargin: 24
+            anchors.topMargin: Style.current.bigPadding
             anchors.right: parent.right
-        SVGImage {
+            size: "medium"
-            source: !valid ? "../../../../img/arrow-button-inactive.svg" : "../../../../img/arrow-btn-active.svg"
+            type: "secondary"
-            width: 50
+            icon.name: "arrow-right"
-            height: 50
+            icon.width: 18
-        }
+            icon.height: 14
-        background: Rectangle {
+            visible: valid
-            color: "transparent"
+            onClicked: {
-        }
-        MouseArea {
-            cursorShape: Qt.PointingHandCursor
-            anchors.fill: parent
-            onClicked : {
                 if(!valid) return;
 
-                if(ensStatus === "connected"){
+                if(ensStatus === Constants.ens_connected){
                     profileModel.ens.connectOwnedUsername(ensUsername.text, isStatus);
                     continueClicked(ensStatus, ensUsername.text)
                     return;
                 }
 
-                if(ensStatus === "available"){
+                if(ensStatus === Constants.ens_available){
                     continueClicked(ensStatus, ensUsername.text);
                     return;
                 }
 
-                if(ensStatus === "connected-different-key" || ensStatus === "owned"){
+                if(ensStatus === Constants.ens_connected_dkey || ensStatus === Constants.ens_owned){
                     transactionDialog.open();
                     return;
                 }
             }
         }
-    }
-
 
         Rectangle {
             id: ensTypeRect
             anchors.top: ensUsername.bottom
-        anchors.topMargin: 24
+            anchors.topMargin: Style.current.bigPadding
             border.width: 1
             border.color: Style.current.border
             color: Style.current.background
             radius: 50
-        height: 20
+            height: 30
             width: 350
 
+            Item {
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.top: parent.top
+                anchors.topMargin: Style.current.halfPadding
+                anchors.leftMargin: Style.current.padding
+                height: 20
+
                 StyledText {
                     text: !isStatus ? 
                         //% "Custom domain"
@@ -260,12 +250,14 @@ Item {
                     }
                 }
             }
+        }
 
         StyledText {
             id: validationResult
             text: validationMessage
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.top: ensTypeRect.bottom
-        anchors.topMargin: 24
+            anchors.topMargin: Style.current.bigPadding
+        }
     }
 }

ui/app/AppLayouts/Profile/Sections/Ens/Welcome.qml

@@ -10,8 +10,7 @@ Item {
 
     StyledText {
         id: sectionTitle
-        //% "ENS usernames"
+        text: ""
-        text: qsTrId("ens-usernames")
         anchors.left: parent.left
         anchors.leftMargin: 24
         anchors.top: parent.top
@@ -34,15 +33,15 @@ Item {
 
         Item {
             id: contentItem
-            anchors.right: parent.right;
+            width: 624
-            anchors.left: parent.left;
+            anchors.horizontalCenter: parent.horizontalCenter
 
             Image {
                 id: image
                 anchors.top: parent.top
                 anchors.horizontalCenter: parent.horizontalCenter
                 fillMode: Image.PreserveAspectFit
-                source: "../../../../img/ens-header@2x.png"
+                source: `../../../../img/ens-header-${Style.current.name}@2x.png`
             }
 
             StyledText {

ui/imports/Constants.qml

@@ -126,6 +126,30 @@ QtObject {
     readonly property var acceptedImageExtensions: [".png", ".jpg", ".jpeg", ".svg", ".gif"]
     readonly property var acceptedDragNDropImageExtensions: [".png", ".jpg", ".jpeg", ".heif", "tif", ".tiff"]
 
-
     readonly property string mentionSpanTag: `<span style="color:${Style.current.mentionColor}; background-color: ${Style.current.mentionBgColor};">`
+
+    readonly property string ens_taken: "taken"
+    readonly property string ens_taken_custom: "taken-custom"
+    readonly property string ens_owned: "owned"
+    readonly property string ens_availabe: "available"
+    readonly property string ens_already_connected: "already-connected"
+    readonly property string ens_connected: "connected"
+    readonly property string ens_connected_dkey: "connected-different-key"
+
+    readonly property var ensState: {
+        //% "Username already taken :("
+        "taken": qsTrId("ens-username-taken"),
+        //% "Username doesn’t belong to you :("
+        "taken-custom": qsTrId("ens-custom-username-taken"),
+        //% "Continuing will connect this username with your chat key."
+        "owned": qsTrId("ens-username-owned-continue"),
+        //% "✓ Username available!"
+        "availabe": qsTrId("ens-username-available"),
+        //% "Username is already connected with your chat key and can be used inside Status."
+        "already-connected": qsTrId("ens-username-already-added"),
+        //% "This user name is owned by you and connected with your chat key. Continue to set `Show my ENS username in chats`."
+        "connected": qsTrId("this-user-name-is-owned-by-you-and-connected-with-your-chat-key--continue-to-set--show-my-ens-username-in-chats--"),
+        //% "Continuing will require a transaction to connect the username with your current chat key."
+        "connected-different-key": qsTrId("ens-username-connected-with-different-key"),
+    }
 }