feat(StatusQ.Controls): introduce `StatusWalletColorSelect` control

Usage:

```qml
StatusWalletColorSelect {
    model: Theme.palette.accountColors
}

```

Closes #467

sandbox/StatusWalletColorSelectPage.qml

@@ -0,0 +1,17 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+import Sandbox 0.1
+
+Column {
+    spacing: 8
+
+    StatusWalletColorSelect {
+        model: Theme.palette.accountColors
+    }
+}

sandbox/main.qml

@@ -188,6 +188,11 @@ StatusWindow {
                             selected: page.sourceComponent == statusWalletColorButtonPageComponent
                             onClicked: page.sourceComponent = statusWalletColorButtonPageComponent
                         }
+                        StatusNavigationListItem { 
+                            title: "StatusWalletColorSelect" 
+                            selected: page.sourceComponent == statusWalletColorSelectPageComponent
+                            onClicked: page.sourceComponent = statusWalletColorSelectPageComponent
+                        }
                         StatusListSectionHeadline { text: "StatusQ.Components" }
                         StatusNavigationListItem { 
                             title: "StatusAddress"
@@ -326,6 +331,11 @@ StatusWindow {
         StatusWalletColorButtonPage {}
     }
 
+    Component {
+        id: statusWalletColorSelectPageComponent
+        StatusWalletColorSelectPage {}
+    }
+
     Component {
         id: listItemsComponent
         ListItems {}

src/StatusQ/Controls/StatusWalletColorSelect.qml

@@ -0,0 +1,61 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Utils 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+Item {
+    id: control
+    property string selectedColor
+    property string label: "Account color"
+    property var model
+    property bool enabled: true
+
+    height: childrenRect.height
+    implicitWidth: 480
+
+    StatusBaseText {
+        id: label
+        text: control.label
+        anchors.left: parent.left
+        anchors.top: parent.top
+        font.pixelSize: 15
+        color: control.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
+    }
+
+    RowLayout {
+        id: colors
+        spacing: 6
+        anchors.top: label.bottom
+        anchors.topMargin: 8
+        anchors.left: parent.left
+        anchors.right: parent.right
+        Repeater {
+            model: control.model
+            StatusWalletColorButton {
+                id: colorBtn
+                icon.color: modelData
+                selected: {
+                    const upperCaseColor = control.selectedColor.toUpperCase()
+                    const upperCaseModelDataColor = modelData.toString().toUpperCase()
+                    if (upperCaseColor === upperCaseModelDataColor) {
+                        return true
+                    }
+                    // Check the colors in the other theme
+                    const currentColor = Utils.getThemeAccountColor(upperCaseColor, Theme.palette.accountColors)
+                    if (!currentColor) {
+                        return false
+                    }
+
+                    return currentColor === upperCaseModelDataColor
+                }
+                onClicked: {
+                    control.selectedColor = modelData.toUpperCase()
+                }
+            }
+        }
+    }
+}

src/StatusQ/Controls/qmldir

@@ -27,3 +27,4 @@ StatusSwitchTabButton 0.1 StatusSwitchTabButton.qml
 StatusSwitchTabBar 0.1 StatusSwitchTabBar.qml
 StatusSelectableText 0.1 StatusSelectableText.qml
 StatusWalletColorButton 0.1 StatusWalletColorButton.qml
+StatusWalletColorSelect 0.1 StatusWalletColorSelect.qml