feat: add need help section

Closes #844

ui/app/AppLayouts/Profile/Sections/HelpContainer.qml

@@ -7,33 +7,153 @@ import "../../../../shared/xss.js" as XSS
 
 Item {
     id: helpContainer
-    width: 200
-    height: 200
-    Layout.fillHeight: true
+    height: parent.height
     Layout.fillWidth: true
 
-    StyledText {
-        id: element8
-        //% "Help menus: FAQ, Glossary, etc."
-        text: qsTrId("help-menus:-faq,-glossary,-etc.")
-        anchors.left: parent.left
-        anchors.leftMargin: 24
-        anchors.top: parent.top
-        anchors.topMargin: 24
-        font.weight: Font.Bold
-        font.pixelSize: 20
+
+    ScrollView {
+        height: parent.height
+        width: parent.width
+        contentHeight: glossary.height + linksSection.height + Style.current.bigPadding * 4
+        clip: true
+        Item {
+            id: glossary
+            anchors.top: parent.top
+            anchors.topMargin: 24
+            anchors.right: parent.right
+            anchors.rightMargin: contentMargin
+            anchors.left: parent.left
+            anchors.leftMargin: contentMargin
+            height: this.childrenRect.height
+
+            StyledText {
+                id: glossaryTitle
+                text: qsTr("Glossary")
+                anchors.left: parent.left
+                anchors.top: parent.top
+                font.pixelSize: 15
+                color: Style.current.secondaryText
+            }
+
+            GlossaryEntry {
+                id: entryAccount
+                anchors.top: glossaryTitle.bottom
+                anchors.topMargin: Style.current.padding
+                name: qsTr("Account")
+                letter: qsTr("A")
+                description: qsTr("Your Status account, accessed by the seed phrase that you create or import during onboarding. A Status account can hold more than one Ethereum address, in addition to the one created during onboarding. We refer to these as additional accounts within the wallet")
+            }
+
+            GlossaryEntry {
+                id: entryChatKey
+                anchors.top: entryAccount.bottom
+                anchors.topMargin: Style.current.padding
+                name: qsTr("Chat Key")
+                letter: qsTr("C")
+                description: qsTr("Messages on the Status chat protocol are sent and received using encryption keys. The public chat key is a string of characters you share with others so they can send you messages in Status.")
+            }
+
+            GlossaryEntry {
+                id: entryChatName
+                anchors.top: entryChatKey.bottom
+                anchors.topMargin: Style.current.padding
+                name: qsTr("Chat Name")
+                description: qsTr("Three random words, derived algorithmically from your chat key and used as your default alias in chat. Chat names are completely unique; no other user can have the same three words.")
+            }
+
+            GlossaryEntry {
+                id: entryENSName
+                anchors.top: entryChatName.bottom
+                anchors.topMargin: Style.current.padding
+                name: qsTr("ENS Name")
+                letter: qsTr("E")
+                description: qsTr("Custom alias for your chat key that you can register using the Ethereum Name Service. ENS names are decentralized usernames.")
+            }
+
+            GlossaryEntry {
+                id: entryMailserver
+                letter: qsTr("M")
+                anchors.top: entryENSName.bottom
+                anchors.topMargin: Style.current.padding
+                name: qsTr("Mailserver")
+                description: qsTr("A node in the Status network that routes and stores messages, for up to 30 days.")
+            }
+
+            GlossaryEntry {
+                id: entryPeer
+                anchors.top: entryMailserver.bottom
+                anchors.topMargin: Style.current.padding
+                name: qsTr("Peer")
+                letter: qsTr("P")
+                description: qsTr("A device connected to the Status chat network. Each user can represent one or more peers, depending on their number of devices")
+            }
+
+            GlossaryEntry {
+                id: entrySeedPhrase
+                anchors.top: entryPeer.bottom
+                anchors.topMargin: Style.current.padding
+                name: qsTr("Seed Phrase")
+                letter: qsTr("S")
+                description: qsTr("A 64 character hex address based on the Ethereum standard and beginning with 0x. Public-facing, your wallet key is shared with others when you want to receive funds. Also referred to as an “Ethereum address” or “wallet address.")
+            }
+        }
+
+
+        Item {
+            id: linksSection
+            anchors.top: glossary.bottom
+            anchors.topMargin: Style.current.bigPadding * 2
+            anchors.left: parent.left
+            anchors.leftMargin: contentMargin
+            anchors.right: parent.left
+            anchors.rightMargin: contentMargin
+            height: this.childrenRect.height
+
+            StyledText {
+                id: faqLink
+                text: qsTr("<a href='https://status.im/docs/FAQs.html'>Frequently asked questions</a>")
+                font.pixelSize: 15
+                MouseArea {
+                    anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        mouse.accepted = false
+                        Qt.openUrlExternally("https://status.im/faq/")
+                    }
+                }
+            }
+
+            StyledText {
+                id: issueLink
+                text: qsTr("<a href='https://github.com/status-im/nim-status-client/issues/new'>Submit a bug</a>")
+                anchors.topMargin: Style.current.bigPadding
+                anchors.top: faqLink.bottom
+                font.pixelSize: 15
+                MouseArea {
+                    anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        mouse.accepted = false
+                        Qt.openUrlExternally("https://github.com/status-im/nim-status-client/issues/new")
+                    }
+                }
+            }
+
+            StyledText {
+                text: qsTr("<a href='https://discuss.status.im/c/features/51'>Request a feature</a>")
+                anchors.topMargin: Style.current.bigPadding
+                anchors.top: issueLink.bottom
+                font.pixelSize: 15
+                MouseArea {
+                    anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        mouse.accepted = false
+                        Qt.openUrlExternally("https://discuss.status.im/c/features/51")
+                    }
+                }
+            }
+        }
     }
-
-    // FIXME the link doesn't exist
-//    StyledText {
-//        anchors.centerIn: parent
-//        text: Utils.linkifyAndXSS(link)
-//        onLinkActivated: Qt.openUrlExternally(link)
-
-//        MouseArea {
-//            anchors.fill: parent
-//            acceptedButtons: Qt.NoButton // we don't want to eat clicks on the Text
-//            cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
-//        }
-//    }
 }
+

ui/shared/GlossaryEntry.qml

@@ -0,0 +1,45 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.13
+import "../imports"
+import "../shared"
+
+Item {
+    id: root
+    property string name: ""
+    property string description: ""
+    property string letter: ""
+    height: glossaryEntryTitle.height + Style.current.smallPadding + glossaryEntryDescription.height
+    width: parent.width
+
+    GlossaryLetter {
+        id: glossaryLetter
+        text: root.letter
+        anchors.left: parent.left
+        anchors.top: glossaryEntryTitle.top
+        visible: !!root.letter
+    }
+
+    StyledText {
+        id: glossaryEntryTitle
+        text: root.name
+        font.pixelSize: 17
+        color: Style.current.textColor
+        font.weight: Font.Bold
+        anchors.left: parent.left
+        anchors.leftMargin: Style.current.bigPadding
+    }
+
+    StyledText {
+        id: glossaryEntryDescription
+        text: root.description
+        color: Style.current.textColor
+        font.pixelSize: 15
+        anchors.top: glossaryEntryTitle.bottom
+        anchors.topMargin: Style.current.smallPadding
+        anchors.left: parent.left
+        anchors.leftMargin: Style.current.bigPadding
+        anchors.right: parent.right
+        wrapMode: Text.WordWrap
+    }
+}

ui/shared/GlossaryLetter.qml

@@ -0,0 +1,10 @@
+import QtQuick 2.13
+import "../imports"
+import "../shared"
+
+StyledText {
+    id: glossaryLetterA
+    font.pixelSize: 17
+    font.weight: Font.Bold
+    color: Style.current.blue
+}

ui/shared/qmldir

@@ -23,3 +23,5 @@ StatusSlider 1.0 StatusSlider.qml
 Timer 1.0 Timer.qml
 TransactionSigner 1.0 TransactionSigner.qml
 StatusToolTip 1.0 StatusToolTip.qml
+GlossaryEntry 1.0 GlossaryEntry.qml
+GlossaryLetter 1.0 GlossaryLetter.qml