feat: implement seed word phrase counter

- If the count matches the required amount a tick will be included next the count
- The format is "✓ 12 words"
- This commit also fixes the text color when in dark in the wallet add new account modal

ui/app/AppLayouts/Wallet/components/AddAccountWithSeed.qml

@@ -82,6 +82,12 @@ ModalPopup {
         validationError: popup.seedValidationError
     }
 
+    StyledText {
+        text: Utils.seedPhraseWordCountText(accountSeedInput.text)
+        anchors.right: parent.right
+        anchors.top: accountSeedInput.bottom
+    }
+
     Input {
         id: accountNameInput
         anchors.top: accountSeedInput.bottom

ui/imports/Utils.qml

@@ -147,4 +147,24 @@ QtObject {
     function isPunct(c) {
         return /(!|\@|#|\$|%|\^|&|\*|\(|\)|_|\+|\||-|=|\\|{|}|[|]|"|;|'|<|>|\?|,|\.|\/)/.test(c)
     }
+
+    function getTick(wordCount) {
+        return (wordCount === 12 || wordCount === 15 ||
+                wordCount === 18 || wordCount === 21 || wordCount === 24)
+                ? "✓ " : "";
+    }
+
+    function countWords(text) {
+        if (text.trim() === "")
+            return 0;
+        return text.trim().split(" ").length;
+    }
+
+    /**
+     * Returns text in the format "✓ 12 words" for seed phrases input boxes
+     */
+    function seedPhraseWordCountText(text) {
+        let wordCount = countWords(text);
+        return getTick(wordCount) + wordCount.toString() + " words";
+    }
 }

ui/onboarding/EnterSeedPhraseModal.qml

@@ -41,6 +41,12 @@ ModalPopup {
         KeyNavigation.tab: submitBtn
     }
 
+    StyledText {
+        text: Utils.seedPhraseWordCountText(mnemonicTextField.text)
+        anchors.right: parent.right
+        anchors.top: mnemonicTextField.bottom
+    }
+
     StyledText {
         id: errorText
         visible: !!text && text != ""

ui/shared/StyledTextArea.qml

@@ -58,6 +58,8 @@ Item {
             anchors.topMargin: Style.current.smallPadding
             anchors.fill: parent
             font.family: Style.current.fontRegular.name
+            color: Style.current.textColor
+            placeholderTextColor: Style.current.darkGrey
         }
 
         MouseArea {