fix(StatusSelect): Expose a property to make arrow in the select item visible/invisible

This component also has dependecy on BE and hence should be moved out.

BREAKING CHANGE:

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "vendor/SortFilterProxyModel"]
+	path = vendor/SortFilterProxyModel
+	url = https://github.com/status-im/SortFilterProxyModel.git

CMakeLists.txt

@@ -2,4 +2,22 @@ cmake_minimum_required(VERSION 3.19)
 
 project(StatusQ)
 
+if (APPLE)
+    set(MACOS_VERSION_MIN_FLAGS -mmacosx-version-min=10.14)
+    set(CMAKE_OSX_ARCHITECTURES "x86_64")
+endif()
+
+set(CMAKE_AUTOMOC ON)
+set(CMAKE_AUTORCC ON)
+
+set(CMAKE_CXX_STANDARD 17)
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+
+# https://doc.qt.io/qtcreator/creator-qml-modules-with-plugins.html#importing-qml-modules
+set(QML_IMPORT_PATH
+    ${CMAKE_SOURCE_DIR}/src;${QML_IMPORT_PATH}
+    CACHE STRING "")
+
+add_subdirectory(vendor/SortFilterProxyModel)
+add_subdirectory(sandbox)
 add_subdirectory(tests)

README.md

@@ -36,7 +36,7 @@ To make viewing and testing components easy, we've added a sandbox application t
 
 ### Using Qt Creator
 
-The easiest way to run the sandbox application is to simply open the provided `sandbox.pro` file using Qt Creator.
+The easiest way to run the sandbox application is to simply open the provided `CMakeLists.txt` file using Qt Creator.
 
 ### Using command line interface
 
@@ -44,14 +44,13 @@ To run the sandbox from within a command line interface, run the following comma
 
 ```
 $ git clone https://github.com/status-im/StatusQ
-$ cd StatusQ/sandbox
-$ ./scripts/build
+$ cd StatusQ
+$ git submodule update --init
+$ ./sandbox/scripts/build
 ```
 
 Once that is done, the sandbox can be started with the generated executable:
 
 ```
-$ ./bin/sandbox
+$ ./build/sandbox/Sandbox
 ```
-
-More Documentation available on the [wiki](https://hackmd.io/@status-desktop/B1naRjxh_/%2FwFtiXvOiQqCdw2lk6gbOLA)

doc/src/statusqcomponents.qdoc

@@ -20,6 +20,7 @@
        \li \l{StatusChatToolBar}
        \li \l{StatusContactRequestsIndicatorListItem}
        \li \l{StatusDescriptionListItem}
+       \li \l{StatusItemSelector}
        \li \l{StatusLetterIdenticon}
        \li \l{StatusListItem}
        \li \l{StatusListPicker}

doc/src/statusqcontrols.qdoc

@@ -15,6 +15,7 @@
        \li \l{StatusChatInfoButton}
        \li \l{StatusChatListCategoryItemButton}
        \li \l{StatusColorSelector}
+       \li \l{StatusDropdown}
        \li \l{StatusIconTabButton}
        \li \l{StatusNavBarTabButton}
        \li \l{StatusTabBarIconButton}
@@ -30,6 +31,7 @@
        \li \l{StatusSlider}
        \li \l{StatusSelect}
        \li \l{StatusBaseInput}
+       \li \l{StatusIconTextButton}
        \li \l{StatusIdenticonRing}
        \li \l{StatusInput}
        \li \l{StatusItemPicker}

doc/src/statusqcore.qdoc

@@ -12,6 +12,7 @@
    \list
        \li \l{StatusAppNavBarFilterModel}
        \li \l{StatusBaseText}
+       \li \l{StatusFontSettings}
        \li \l{StatusIcon}
        \li \l{StatusIconBackgroundSettings}
        \li \l{StatusIconSettings}

sandbox/CMakeLists.txt

@@ -0,0 +1,38 @@
+project(Sandbox)
+
+find_package(
+  Qt5
+  COMPONENTS Core Quick QuickControls2
+  REQUIRED)
+
+file(GLOB_RECURSE QML_FILES "../*.qml")
+file(GLOB_RECURSE JS_FILES "../*.js")
+file(GLOB_RECURSE HEADERS *.h)
+if(APPLE)
+  file(GLOB_RECURSE SOURCES *.cpp *.mm)
+else()
+  file(GLOB_RECURSE SOURCES *.cpp)
+endif()
+
+qt5_add_big_resources(QRC_FILES qml.qrc ../src/statusq.qrc ../src/assets.qrc)
+
+add_executable(
+  ${PROJECT_NAME}
+  ${HEADERS}
+  ${SOURCES}
+  ${QRC_FILES}
+  ${QML_FILES}
+  ${JS_FILES})
+
+target_compile_definitions(${PROJECT_NAME}
+                           PRIVATE SRC_DIR="${CMAKE_CURRENT_LIST_DIR}")
+target_link_libraries(
+  ${PROJECT_NAME} PRIVATE Qt5::Core Qt5::Quick Qt5::QuickControls2
+                          SortFilterProxyModel)
+
+if (APPLE)
+  find_library(AppKit AppKit)
+  find_library(Foundation Foundation)
+
+  target_link_libraries(${PROJECT_NAME} PRIVATE ${AppKit} ${Foundation})
+endif()

sandbox/DemoApp.qml

@@ -14,9 +14,9 @@ import "demoapp/data" 1.0
 
 Rectangle {
     id: demoApp
-    height: Theme.dp(602)
-    width: Theme.dp(1002)
-    border.width: Theme.dp(1)
+    height: 602
+    width: 1002
+    border.width: 1
     border.color: Theme.palette.baseColor2
 
     property string titleStyle: "osx"
@@ -50,7 +50,7 @@ Rectangle {
     StatusMacTrafficLights {
         anchors.left: parent.left
         anchors.top: parent.top
-        anchors.margins: Theme.dp(13)
+        anchors.margins: 13
         z: statusAppLayout.z + 1
         visible: titleStyle === "osx"
     }
@@ -112,7 +112,7 @@ Rectangle {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: Theme.dp(2)
+                badge.border.width: 2
                 onClicked: {
                     if(model.sectionType === appSectionType.chat)
                     {
@@ -143,7 +143,7 @@ Rectangle {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: Theme.dp(2)
+                badge.border.width: 2
                 onClicked: {
                     if(model.sectionType === appSectionType.community)
                     {
@@ -175,7 +175,7 @@ Rectangle {
                     StatusMenuItem {
                         text: qsTr("Leave Community")
                         icon.name: "arrow-right"
-                        icon.width: Theme.dp(14)
+                        icon.width: 14
                         iconRotation: 180
                         type: StatusMenuItem.Type.Danger
                     }

sandbox/ThemeSwitch.qml

@@ -2,7 +2,6 @@ import QtQuick 2.14
 import QtQuick.Controls 2.14
 
 import StatusQ.Controls 0.1
-import StatusQ.Core.Theme 0.1
 
 Item {
     id: themeSwitchWrapper
@@ -20,11 +19,11 @@ Item {
 
         Row {
             id: themeSwitch
-            spacing: Theme.dp(2)
+            spacing: 2
 
             Text {
                 text: "🌤"
-                font.pixelSize: Theme.dp(15)
+                font.pixelSize: 15
                 anchors.verticalCenter: parent.verticalCenter
             }
 
@@ -36,13 +35,13 @@ Item {
                     text: "Toggle Theme"
                     visible: sensor.containsMouse
                     orientation: StatusToolTip.Orientation.Bottom
-                    y: themeSwitchWrapper.y + Theme.dp(16)
+                    y: themeSwitchWrapper.y + 16
                 }
             }
 
             Text {
                 text: "🌙"
-                font.pixelSize: Theme.dp(15)
+                font.pixelSize: 15
                 anchors.verticalCenter: parent.verticalCenter
             }
         }

sandbox/controls/Buttons.qml

@@ -8,12 +8,12 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 
 Column {
-    spacing: Theme.dp(10)
+    spacing: 10
     Grid {
         id: buttonGridWidth
-        columns: Theme.dp(3)
-        columnSpacing: Theme.dp(38)
-        rowSpacing: Theme.dp(10)
+        columns: 3
+        columnSpacing: 38
+        rowSpacing: 10
 
         horizontalItemAlignment: Grid.AlignHCenter
 
@@ -196,22 +196,22 @@ Column {
         // Rounded blue
 
         StatusFlatRoundButton {
-            width: Theme.dp(44)
-            height: Theme.dp(44)
+            width: 44
+            height: 44
 
             icon.name: "info"
         }
 
         StatusFlatRoundButton {
-            width: Theme.dp(44)
-            height: Theme.dp(44)
+            width: 44
+            height: 44
             icon.name: "info"
             enabled: false
         }
 
         StatusFlatRoundButton {
-            width: Theme.dp(44)
-            height: Theme.dp(44)
+            width: 44
+            height: 44
             icon.name: "info"
             loading: true
         }
@@ -220,24 +220,24 @@ Column {
 
         StatusFlatRoundButton {
             type: StatusFlatRoundButton.Type.Secondary
-            width: Theme.dp(44)
-            height: Theme.dp(44)
+            width: 44
+            height: 44
 
             icon.name: "info"
         }
 
         StatusFlatRoundButton {
             type: StatusFlatRoundButton.Type.Secondary
-            width: Theme.dp(44)
-            height: Theme.dp(44)
+            width: 44
+            height: 44
             icon.name: "info"
             enabled: false
         }
 
         StatusFlatRoundButton {
             type: StatusFlatRoundButton.Type.Secondary
-            width: Theme.dp(44)
-            height: Theme.dp(44)
+            width: 44
+            height: 44
             icon.name: "info"
             loading: true
         }
@@ -343,4 +343,26 @@ Column {
         text: "Button with Emoji"
         icon.emoji: "🖼️️"
     }
+
+    RowLayout {
+        spacing: 20
+
+        StatusIconTextButton {
+            Layout.alignment: Qt.AlignVCenter
+            spacing: 0
+            statusIcon: "next"
+            icon.width: 24
+            icon.height: 24
+            iconRotation: 180
+            text: "Previous page"
+            font.pixelSize: 15
+            onClicked: testText.visible = !testText.visible
+        }
+        StatusBaseText {
+            id: testText
+            Layout.alignment: Qt.AlignVCenter
+            text: "Click and hide!"
+            font.pixelSize: 15
+        }
+    }
 }

sandbox/controls/Controls.qml

@@ -9,22 +9,22 @@ import Sandbox 0.1
 
 GridLayout {
     columns: 1
-    columnSpacing: Theme.dp(5)
-    rowSpacing: Theme.dp(5)
+    columnSpacing: 5
+    rowSpacing: 5
 
     StatusSelectableText {
         color: Theme.palette.baseColor1
         text: "This is a multiline paragraph that can be selected and copied. A paragraph is a group of words put together to form a group that is usually longer than a sentence. Paragraphs are often made up of several sentences. There are usually between three and eight sentences. Paragraphs can begin with an indentation (about five spaces), or by missing a line out, and then starting again."
-        font.pixelSize: Theme.dp(15)
-        width: Theme.dp(300)
+        font.pixelSize: 15
+        width: 300
         multiline: true
     }
 
     StatusSelectableText {
         color: Theme.palette.baseColor1
         text: "<p>This is a selectable link in rich text format to test <a href='www.google.com'>www.google.com</a></p>"
-        font.pixelSize: Theme.dp(15)
-        width: Theme.dp(200)
+        font.pixelSize: 15
+        width: 200
     }
 
     StatusIconTabButton {
@@ -32,14 +32,14 @@ GridLayout {
     }
 
     StatusIconTabButton {
-        icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        icon.source: "qrc:/demoapp/data/profile-image-1.jpeg"
     }
 
     StatusIconTabButton {
         icon.color: Theme.palette.miscColor9
         // This icon source is flawed and demonstrates the fallback case
         // when the image source can't be loaded
-        icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jp"
+        icon.source: "https://httpstat.us/404"
         name: "Pascal"
     }
 
@@ -57,21 +57,21 @@ GridLayout {
             visible: parent.hovered
             text: "Right"
             orientation: StatusToolTip.Orientation.Right
-            x: parent.width + Theme.dp(16)
+            x: parent.width + 16
             y: parent.height / 2 - height / 2 + 4
         }
         StatusToolTip {
             visible: parent.hovered
             text: "Bottom"
             orientation: StatusToolTip.Orientation.Bottom
-            y: parent.height + Theme.dp(12)
+            y: parent.height + 12
         }
         StatusToolTip {
             visible: parent.hovered
             text: "Left"
             orientation: StatusToolTip.Orientation.Left
-            x: -parent.width /2 - Theme.dp(8)
-            y: parent.height / 2 - height / 2 + Theme.dp(4)
+            x: -parent.width /2 -8
+            y: parent.height / 2 - height / 2 + 4
         }
     }
 
@@ -86,7 +86,7 @@ GridLayout {
     }
 
     StatusNavBarTabButton {
-        icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        icon.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         tooltip.text: "Some Community"
     }
 
@@ -95,7 +95,7 @@ GridLayout {
         tooltip.text: "Profile"
         badge.value: 0
         badge.visible: true
-        badge.anchors.leftMargin:-Theme.dp(16)
+        badge.anchors.leftMargin:-16
     }
 
     StatusNavBarTabButton {
@@ -124,39 +124,39 @@ GridLayout {
         title: "Iuri Matias"
         subTitle: "Contact"
         icon.color: Theme.palette.miscColor7
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         type: StatusChatInfoButton.Type.OneToOneChat
         muted: true
         pinnedMessagesCount: 1
     }
 
     Item {
-        implicitWidth: Theme.dp(100)
-        implicitHeight: Theme.dp(48)
+        implicitWidth: 100
+        implicitHeight: 48
         StatusChatInfoButton {
             title: "Iuri Matias elided"
             subTitle: "Contact"
             icon.color: Theme.palette.miscColor7
-            image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
             type: StatusChatInfoButton.Type.OneToOneChat
             muted: true
             pinnedMessagesCount: 1
-            width: Theme.dp(100)
+            width: 100
         }
     }
 
     Item {
-        implicitWidth: Theme.dp(100)
-        implicitHeight: Theme.dp(48)
+        implicitWidth: 100
+        implicitHeight: 48
         StatusChatInfoButton {
             title: "Iuri Matias big not elided"
             subTitle: "Contact"
             icon.color: Theme.palette.miscColor7
-            image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
             type: StatusChatInfoButton.Type.OneToOneChat
             muted: true
             pinnedMessagesCount: 1
-            width: Theme.dp(400)
+            width: 400
         }
     }
 
@@ -183,26 +183,26 @@ GridLayout {
     }
 
     StatusSlider {
-        width: Theme.dp(360)
+        width: 360
         from: 0
         to: 100
         value: 40
     }
 
     StatusLabeledSlider {
-        width: Theme.dp(360)
+        width: 360
         model: [ qsTr("XS"), qsTr("S"), qsTr("M"), qsTr("L"), qsTr("XL"), qsTr("XXL")]
     }
 
     StatusLabeledSlider {
-        width: Theme.dp(360)
+        width: 360
         model: [ qsTr("50%"), qsTr("100%"), qsTr("150%"), qsTr("200%")]
     }
 
     StatusBanner {
         id: banner
-        width: Theme.dp(360)
-        topPadding: Theme.dp(20)
+        width: 360
+        topPadding: 20
         type: StatusBanner.Type.Danger
         statusText: "Banner"
     }

sandbox/controls/Icons.qml

@@ -1,12 +1,11 @@
 import QtQuick 2.14
 import QtQuick.Layouts 1.14
 import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
 
 GridLayout {
     columns: 6
-    columnSpacing: Theme.dp(5)
-    rowSpacing: Theme.dp(5)
+    columnSpacing: 5
+    rowSpacing: 5
     property color iconColor
 
     Repeater {

sandbox/controls/Layout.qml

@@ -10,11 +10,11 @@ import StatusQ.Layout 0.1
 import StatusQ.Popups 0.1
 
 Column {
-    spacing: Theme.dp(10)
+    spacing: 10
 
     StatusChatToolBar {
         toolbarComponent: chatInfoButton1
-        width: Theme.dp(518)
+        width: 518
 
         Component {
             id: chatInfoButton1
@@ -31,7 +31,7 @@ Column {
 
     StatusChatToolBar {
         toolbarComponent: chatInfoButton2
-        width: Theme.dp(518)
+        width: 518
 
         Component {
             id: chatInfoButton2
@@ -51,7 +51,7 @@ Column {
     StatusChatToolBar {
         notificationCount: 1
         toolbarComponent: chatInfoButton3
-        width: Theme.dp(518)
+        width: 518
 
         Component {
             id: chatInfoButton3
@@ -70,7 +70,7 @@ Column {
     StatusChatToolBar {
         notificationCount: 1
         toolbarComponent: tagSelector
-        width: Theme.dp(518)
+        width: 518
 
         Component {
             id: tagSelector
@@ -107,8 +107,6 @@ Column {
         Button {
             id: btn
             text: "Append"
-            width: Theme.dp(100)
-            height: Theme.dp(40)
             onClicked: {
                 buttons.append({
                     name: "Test community",
@@ -144,7 +142,7 @@ Column {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: Theme.dp(2)
+                badge.border.width: 2
             }
         }
 
@@ -187,7 +185,7 @@ Column {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: Theme.dp(2)
+                badge.border.width: 2
             }
 
             communityNavBarButton: StatusNavBarTabButton {
@@ -201,7 +199,7 @@ Column {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: Theme.dp(2)
+                badge.border.width: 2
 
                 popupMenu: StatusPopupMenu {
 
@@ -226,7 +224,7 @@ Column {
                     StatusMenuItem {
                         text: qsTr("Leave Community")
                         icon.name: "arrow-right"
-                        icon.width: Theme.dp(14)
+                        icon.width: 14
                         iconRotation: 180
                         type: StatusMenuItem.Type.Danger
                     }
@@ -272,7 +270,7 @@ Column {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: Theme.dp(2)
+                badge.border.width: 2
             }
 
             communityNavBarButton: StatusNavBarTabButton {
@@ -286,7 +284,7 @@ Column {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: Theme.dp(2)
+                badge.border.width: 2
 
                 popupMenu: StatusPopupMenu {
 
@@ -311,8 +309,8 @@ Column {
                     StatusMenuItem {
                         text: qsTr("Leave Community")
                         icon.name: "arrow-right"
-                        icon.width: Theme.dp(14)
-                        iconRotation: Theme.dp(180)
+                        icon.width: 14
+                        iconRotation: 180
                         type: StatusMenuItem.Type.Danger
                     }
                 }
@@ -362,7 +360,7 @@ Column {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: Theme.dp(2)
+                badge.border.width: 2
             }
 
             communityNavBarButton: StatusNavBarTabButton {
@@ -376,7 +374,7 @@ Column {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: Theme.dp(2)
+                badge.border.width: 2
 
                 popupMenu: StatusPopupMenu {
 
@@ -401,8 +399,8 @@ Column {
                     StatusMenuItem {
                         text: qsTr("Leave Community")
                         icon.name: "arrow-right"
-                        icon.width: Theme.dp(14)
-                        iconRotation: Theme.dp(180)
+                        icon.width: 14
+                        iconRotation: 180
                         type: StatusMenuItem.Type.Danger
                     }
                 }
@@ -457,7 +455,7 @@ Column {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: Theme.dp(2)
+                badge.border.width: 2
             }
 
             communityNavBarButton: StatusNavBarTabButton {
@@ -471,7 +469,7 @@ Column {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: Theme.dp(2)
+                badge.border.width: 2
 
                 popupMenu: StatusPopupMenu {
 
@@ -496,13 +494,15 @@ Column {
                     StatusMenuItem {
                         text: qsTr("Leave Community")
                         icon.name: "arrow-right"
-                        icon.width: Theme.dp(14)
-                        iconRotation: Theme.dp(180)
+                        icon.width: 14
+                        iconRotation: 180
                         type: StatusMenuItem.Type.Danger
                     }
                 }
             }
         }
+
+
     }
 }
 

sandbox/controls/ListItems.qml

@@ -8,8 +8,8 @@ import StatusQ.Core.Utils 0.1
 
 GridLayout {
     columns: 1
-    columnSpacing: Theme.dp(5)
-    rowSpacing: Theme.dp(5)
+    columnSpacing: 5
+    rowSpacing: 5
 
     StatusNavigationListItem {
         title: "Menu Item"
@@ -73,13 +73,13 @@ GridLayout {
 
     StatusChatListItem {
         name: "community-channel-with-image"
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         type: StatusChatListItem.Type.CommunityChat
     }
 
     StatusChatListItem {
         name: "Weird Crazy Otter"
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         type: StatusChatListItem.Type.OneToOneChat
     }
 
@@ -156,7 +156,7 @@ GridLayout {
         subTitle: "Subtitle"
         tertiaryTitle: "Tertiary title"
 
-        statusListItemTitle.font.pixelSize: Theme.dp(17)
+        statusListItemTitle.font.pixelSize: 17
         statusListItemTitle.font.weight: Font.Bold
     }
 
@@ -166,7 +166,7 @@ GridLayout {
         tertiaryTitle: "Tertiary title"
         icon.name: "info"
 
-        statusListItemTitle.font.pixelSize: Theme.dp(17)
+        statusListItemTitle.font.pixelSize: 17
         statusListItemTitle.font.weight: Font.Bold
     }
 
@@ -179,7 +179,7 @@ GridLayout {
     StatusListItem {
         title: "Title"
         subTitle: "Subtitle"
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
     }
 
     StatusListItem {
@@ -314,7 +314,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
 CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
         image.isIdenticon: true
-        badge.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        badge.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         badge.primaryText: "CryptoKitties"
         badge.secondaryText: "#test"
     }
@@ -345,14 +345,14 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         tagsModel : 2
         tagsDelegate: StatusListItemTag {
             color: "blue"
-            height: Theme.dp(24)
-            radius: Theme.dp(6)
+            height: 24
+            radius: 6
             closeButtonVisible: false
             icon.emoji: "😁"
             icon.emojiSize: Emoji.size.verySmall
             icon.isLetterIdenticon: true
             title: "helloworld.eth"
-            titleText.font.pixelSize: Theme.dp(12)
+            titleText.font.pixelSize: 12
             titleText.color: Theme.palette.indirectColor1
         }
     }
@@ -362,7 +362,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         subTitle: "Emoji"
         icon.emoji: "😁"
         icon.color: "yellow"
-        icon.letterSize: Theme.dp(14)
+        icon.letterSize: 14
         icon.isLetterIdenticon: true
     }
 

sandbox/controls/Others.qml

@@ -10,8 +10,8 @@ ColumnLayout {
         Layout.fillHeight: true
 
         columns: 6
-        columnSpacing: Theme.dp(5)
-        rowSpacing: Theme.dp(5)
+        columnSpacing: 5
+        rowSpacing: 5
 
         StatusLoadingIndicator {
             color: Theme.palette.directColor4
@@ -22,7 +22,7 @@ ColumnLayout {
         }
 
         StatusRoundedImage {
-            image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         }
 
         StatusBadge {}
@@ -53,7 +53,7 @@ ColumnLayout {
             StatusLetterIdenticon {
                 name: "A"
                 color: Theme.palette.userCustomizationColors[index]
-                letterSize: Theme.dp(16)
+                letterSize: 16
             }
         }
     }

sandbox/controls/Popups.qml

@@ -5,11 +5,10 @@ import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
 import StatusQ.Components 0.1
-import StatusQ.Popups 0.1
 import StatusQ.Core.Utils 0.1
 
 Column {
-    spacing: Theme.dp(20)
+    spacing: 20
 
     StatusButton {
         text: "Simple modal"
@@ -110,7 +109,7 @@ Column {
         anchors.centerIn: parent
         header.title: "Some Title"
         header.subTitle: "Subtitle"
-        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        header.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
     }
 
     StatusModal {
@@ -118,7 +117,7 @@ Column {
         anchors.centerIn: parent
         header.title: "Some Title"
         header.subTitle: "Subtitle"
-        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        header.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         leftButtons: [
             StatusRoundButton {
                 icon.name: "arrow-right"
@@ -140,15 +139,15 @@ Column {
         anchors.centerIn: parent
         header.title: "Some Title"
         header.subTitle: "Subtitle"
-        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        header.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
 
         headerActionButton: StatusFlatRoundButton {
             type: StatusFlatRoundButton.Type.Secondary
-            width: Theme.dp(32)
-            height: Theme.dp(32)
+            width: 32
+            height: 32
 
-            icon.width: Theme.dp(20)
-            icon.height: Theme.dp(20)
+            icon.width: 20
+            icon.height: 20
             icon.name: "info"
         }
 
@@ -171,7 +170,7 @@ Column {
     StatusModal {
         id: modalExample
         anchors.centerIn: parent
-        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        header.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         header.title: "Header"
         header.subTitle: "SubTitle"
         rightButtons: [
@@ -193,17 +192,17 @@ Column {
         contentItem: StatusBaseText {
             anchors.centerIn: parent
             text: "Some text content"
-            font.pixelSize: Theme.dp(15)
+            font.pixelSize: 15
             color: Theme.palette.directColor1
         }
 
         headerActionButton: StatusFlatRoundButton {
             type: StatusFlatRoundButton.Type.Secondary
-            width: Theme.dp(32)
-            height: Theme.dp(32)
+            width: 32
+            height: 32
 
-            icon.width: Theme.dp(20)
-            icon.height: Theme.dp(20)
+            icon.width: 20
+            icon.height: 20
             icon.name: "info"
         }
     }
@@ -218,7 +217,7 @@ Column {
             id: text
             anchors.centerIn: parent
             text: "Some text content"
-            font.pixelSize: Theme.dp(15)
+            font.pixelSize: 15
             color: Theme.palette.directColor1
         }
 
@@ -243,7 +242,7 @@ Column {
         contentItem: StatusBaseText {
             anchors.centerIn: parent
             text: "Some text content"
-            font.pixelSize: Theme.dp(15)
+            font.pixelSize: 15
             color: Theme.palette.directColor1
         }
 
@@ -269,7 +268,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         contentItem: StatusBaseText {
             anchors.centerIn: parent
             text: "Some text content"
-            font.pixelSize: Theme.dp(15)
+            font.pixelSize: 15
             color: Theme.palette.directColor1
         }
 
@@ -296,7 +295,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         contentItem: StatusBaseText {
             anchors.centerIn: parent
             text: "Some text content"
-            font.pixelSize: Theme.dp(15)
+            font.pixelSize: 15
             color: Theme.palette.directColor1
         }
 
@@ -323,7 +322,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         contentItem: StatusBaseText {
             anchors.centerIn: parent
             text: "Some text content"
-            font.pixelSize: Theme.dp(15)
+            font.pixelSize: 15
             color: Theme.palette.directColor1
         }
 
@@ -374,29 +373,29 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         showFooter: false
         showAdvancedHeader: true
         showAdvancedFooter: true
-        height: Theme.dp(200)
+        height: 200
         advancedHeaderComponent: Rectangle {
             width: parent.width
-            height: Theme.dp(50)
+            height: 50
             color: Theme.palette.baseColor1
-            border.width: Theme.dp(1)
+            border.width: 1
             StatusBaseText {
                 anchors.centerIn: parent
                 text: "Add any header here"
-                font.pixelSize: Theme.dp(15)
+                font.pixelSize: 15
                 color: Theme.palette.directColor1
             }
 
         }
         advancedFooterComponent: Rectangle {
             width: parent.width
-            height: Theme.dp(50)
+            height: 50
             color: Theme.palette.baseColor1
-            border.width: Theme.dp(1)
+            border.width: 1
             StatusBaseText {
                 anchors.centerIn: parent
                 text: "Add any footer here"
-                font.pixelSize: Theme.dp(15)
+                font.pixelSize: 15
                 color: Theme.palette.directColor1
             }
 
@@ -406,7 +405,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
     StatusModal {
         id: floatingHeaderModal
         anchors.centerIn: parent
-        height: Theme.dp(200)
+        height: 200
         showHeader: false
         showFooter: false
         showAdvancedHeader: true
@@ -417,14 +416,15 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             delegate: Rectangle {
                 width: button.width
                 height: button.height
-                radius: Theme.dp(8)
+                radius: 8
                 visible: visibleIndices.includes(index)
+                color: Theme.palette.statusAppLayout.backgroundColor
                 StatusButton {
                     id: button
-                    topPadding: Theme.dp(8)
+                    topPadding: 8
                     bottomPadding: 0
-                    implicitHeight: Theme.dp(32)
-                    defaultLeftPadding: Theme.dp(4)
+                    implicitHeight: 32
+                    defaultLeftPadding: 4
                     text: name
                     icon.emoji: !!emoji ? emoji: ""
                     icon.emojiSize: Emoji.size.middle
@@ -437,7 +437,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                 }
             }
             popupMenuDelegate: StatusListItem {
-                implicitWidth: Theme.dp(272)
+                implicitWidth: 272
                 title: name
                 onClicked: floatingHeader.itemSelected(index)
                 visible: !visibleIndices.includes(index)

sandbox/demoapp/ChatChannelView.qml

@@ -12,7 +12,7 @@ import StatusQ.Core.Theme 0.1
 ListView {
     id: messageList
     anchors.fill: parent
-    anchors.margins: Theme.dp(15)
+    anchors.margins: 15
     clip: true
     delegate: StatusMessage {
         id: delegate
@@ -34,14 +34,14 @@ ListView {
             secondaryName: model.localName !== "" && model.ensName.startsWith("@") ? model.ensName: ""
             chatID: model.chatKey
             profileImage: StatusImageSettings {
-                width: Theme.dp(40)
-                height: Theme.dp(40)
+                width: 40
+                height: 40
                 source: model.profileImage
                 isIdenticon: model.isIdenticon
             }
             messageText: model.message
             hasMention: model.hasMention
-            isMutualContact: model.isMutualContact
+            isContact: model.isContact
             trustIndicator: model.trustIndicator
             isPinned: model.isPinned
             pinnedBy: model.pinnedBy
@@ -55,8 +55,8 @@ ListView {
             amISender:  model.isReply ? model.replyAmISender : ""
             displayName:  model.isReply ? model.replySenderName: ""
             profileImage: StatusImageSettings {
-                width: Theme.dp(20)
-                height: Theme.dp(20)
+                width: 20
+                height: 20
                 source:  model.isReply ? model.replyProfileImage: ""
                 isIdenticon:  model.isReply ? model.replyIsIdenticon: ""
             }
@@ -67,23 +67,23 @@ ListView {
         quickActions: [
             StatusFlatRoundButton {
                 id: emojiBtn
-                width: Theme.dp(32)
-                height: Theme.dp(32)
+                width: 32
+                height: 32
                 icon.name: "reaction-b"
                 type: StatusFlatRoundButton.Type.Tertiary
                 tooltip.text: "Add reaction"
             },
             StatusFlatRoundButton {
                 id: replyBtn
-                width: Theme.dp(32)
-                height: Theme.dp(32)
+                width: 32
+                height: 32
                 icon.name: "reply"
                 type: StatusFlatRoundButton.Type.Tertiary
                 tooltip.text: "Reply"
             },
             StatusFlatRoundButton {
-                width: Theme.dp(32)
-                height: Theme.dp(32)
+                width: 32
+                height: 32
                 icon.name: "tiny/edit"
                 type: StatusFlatRoundButton.Type.Tertiary
                 tooltip.text: "Edit"
@@ -93,8 +93,8 @@ ListView {
             },
             StatusFlatRoundButton {
                 id: otherBtn
-                width: Theme.dp(32)
-                height: Theme.dp(32)
+                width: 32
+                height: 32
                 icon.name: "more"
                 type: StatusFlatRoundButton.Type.Tertiary
                 tooltip.text: "More"

sandbox/demoapp/CreateChatView.qml

@@ -10,7 +10,7 @@ import StatusQ.Core.Theme 0.1
 Page {
     id: root
     anchors.fill: parent
-    anchors.margins: Theme.dp(16)
+    anchors.margins: 16
     property ListModel contactsModel: null
     background: null
 
@@ -19,13 +19,14 @@ Page {
         width: parent.width
         height: tagSelector.height
         anchors.right: parent.right
-        anchors.rightMargin: Theme.dp(8)
+        anchors.rightMargin: 8
+        spacing: 16
 
         StatusTagSelector {
             id: tagSelector
             Layout.fillWidth: true
             Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
-            Layout.leftMargin: Theme.dp(17)
+            Layout.leftMargin: 17
             maxHeight: root.height
             toLabelText: qsTr("To: ")
             warningText: qsTr("USER LIMIT REACHED")
@@ -73,27 +74,43 @@ Page {
         }
 
         StatusButton {
-            implicitHeight: Theme.dp(44)
+            implicitWidth: 106
+            implicitHeight: 44
             Layout.alignment: Qt.AlignTop
             enabled: (tagSelector.namesModel.count > 0)
             text: "Confirm"
         }
+
+        Item {
+            implicitHeight: 32
+            implicitWidth: 32
+            Layout.alignment: Qt.AlignTop
+
+            StatusActivityCenterButton {
+                id: notificationButton
+                anchors.right: parent.right
+                unreadNotificationsCount: 3
+            }
+        }
     }
 
     contentItem: Item {
         anchors.fill: parent
-        anchors.topMargin: Theme.dp(68)
 
         StatusBaseText {
-            visible: (contactsModel.count === 0)
-            anchors.centerIn: parent
+            anchors.left: parent.left
+            anchors.leftMargin: 252
+            anchors.right: parent.right
+            anchors.rightMargin: 252
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.verticalCenterOffset: -(headerRow.height/2)
             horizontalAlignment: Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter
-            font.pixelSize: Theme.dp(15)
+            visible: contactsModel.count === 0
+            wrapMode: Text.WordWrap
             color: Theme.palette.baseColor1
-            text: qsTr("You can only send direct messages to your Contacts. \n\n
-Send a contact request to the person you would like to chat with, you will be\n able to
-chat with them once they have accepted your contact request.")
+            text: qsTr("You can only send direct messages to your Contacts.\n
+Send a contact request to the person you would like to chat with, you will be able to chat with them once they have accepted your contact request.")
             Component.onCompleted: {
                 if (visible) {
                     tagSelector.enabled = false;

sandbox/demoapp/DemoCommunityDetailModal.qml

@@ -13,30 +13,30 @@ StatusModal {
 
     header.title: "Cryptokitties"
     header.subTitle: "Public Community"
-    header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+    header.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
 
     contentItem: Column {
         width: root.width
 
         StatusModalDivider {
-            bottomPadding: Theme.dp(8)
+            bottomPadding: 8
         }
 
         StatusBaseText {
             text: "A community of cat lovers, meow!"
             verticalAlignment: Text.AlignVCenter
-            font.pixelSize: Theme.dp(15)
-            height: Theme.dp(46)
+            font.pixelSize: 15
+            height: 46
             color: Theme.palette.directColor1
             anchors.left: parent.left
             anchors.right: parent.right
-            anchors.leftMargin: Theme.dp(16)
-            anchors.rightMargin: Theme.dp(16)
+            anchors.leftMargin: 16
+            anchors.rightMargin: 16
         }
 
         StatusModalDivider {
-            topPadding: Theme.dp(8)
-            bottomPadding: Theme.dp(8)
+            topPadding: 8
+            bottomPadding: 8
         }
 
         StatusDescriptionListItem {
@@ -49,13 +49,13 @@ StatusModal {
         }
 
         StatusModalDivider {
-            topPadding: Theme.dp(8)
-            bottomPadding: Theme.dp(8)
+            topPadding: 8
+            bottomPadding: 8
         }
 
         StatusListItem {
             anchors.horizontalCenter: parent.horizontalCenter
-            statusListItemTitle.font.pixelSize: Theme.dp(17)
+            statusListItemTitle.font.pixelSize: 17
             title: "Members"
             icon.name: "group-chat"
             label: "184"
@@ -79,13 +79,13 @@ StatusModal {
         }
 
         StatusModalDivider {
-            topPadding: Theme.dp(8)
-            bottomPadding: Theme.dp(8)
+            topPadding: 8
+            bottomPadding: 8
         }
 
         StatusListItem {
             anchors.horizontalCenter: parent.horizontalCenter
-            statusListItemTitle.font.pixelSize: Theme.dp(17)
+            statusListItemTitle.font.pixelSize: 17
             title: "Edit community"
             icon.name: "edit"
             type: StatusListItem.Type.Secondary
@@ -93,7 +93,7 @@ StatusModal {
 
         StatusListItem {
             anchors.horizontalCenter: parent.horizontalCenter
-            statusListItemTitle.font.pixelSize: Theme.dp(17)
+            statusListItemTitle.font.pixelSize: 17
             title: "Transfer ownership"
             icon.name: "exchange"
             type: StatusListItem.Type.Secondary
@@ -101,7 +101,7 @@ StatusModal {
 
         StatusListItem {
             anchors.horizontalCenter: parent.horizontalCenter
-            statusListItemTitle.font.pixelSize: Theme.dp(17)
+            statusListItemTitle.font.pixelSize: 17
             title: "Leave community"
             icon.name: "arrow-right"
             icon.rotation: 180

sandbox/demoapp/DemoContactRequestsModal.qml

@@ -11,18 +11,18 @@ StatusModal {
     header.title: "Contact Requests"
     headerActionButton: StatusFlatRoundButton {
         type: StatusFlatRoundButton.Type.Secondary
-        width: Theme.dp(32)
-        height: Theme.dp(32)
+        width: 32
+        height: 32
 
-        icon.width: Theme.dp(20)
-        icon.height: Theme.dp(20)
+        icon.width: 20
+        icon.height: 20
         icon.name: "notification"
     }
 
     contentItem: StatusBaseText {
         anchors.centerIn: parent
         text: "Contact request will be shown here"
-        font.pixelSize: Theme.dp(15)
+        font.pixelSize: 15
         color: Theme.palette.directColor1
     }
 

sandbox/demoapp/StatusAppChatView.qml

@@ -16,53 +16,78 @@ StatusAppThreePanelLayout {
 
     leftPanel: Item {
         anchors.fill: parent
-
-        StatusNavigationPanelHeadline {
-            id: headline
-            anchors.top: parent.top
-            anchors.topMargin: Theme.dp(16)
-            anchors.horizontalCenter: parent.horizontalCenter
-            text: "Chat"
-        }
-
+        anchors.margins: 16
         RowLayout {
             id: searchInputWrapper
-            width: Theme.dp(288)
-            height: searchInput.height
-            anchors.top: headline.bottom
-            anchors.topMargin: Theme.dp(16)
-            anchors.horizontalCenter: parent.horizontalCenter
+            width: parent.width
 
-            StatusBaseInput {
-                id: searchInput
-                Layout.fillWidth: true
+            StatusNavigationPanelHeadline {
+                id: headline
                 Layout.alignment: Qt.AlignVCenter
-                implicitHeight: Theme.dp(36)
-                topPadding: Theme.dp(8)
-                bottomPadding: Theme.dp(8)
-                placeholderText: "Search"
-                icon.name: "search"
+                text: "Chat"
             }
 
-            StatusIconTabButton {
+            Item {
+                Layout.fillWidth: true
+            }
+
+
+            StatusRoundButton {
+                Layout.alignment: Qt.AlignVCenter
                 icon.name: "public-chat"
+                icon.color: Theme.palette.directColor1
+                icon.height: editBtn.icon.height
+                icon.width: editBtn.icon.width
+                implicitWidth: editBtn.implicitWidth
+                implicitHeight: editBtn.implicitHeight
+                type: StatusRoundButton.Type.Tertiary
+                StatusToolTip {
+                    text: qsTr("Join public chats")
+                    visible: parent.hovered
+                    orientation: StatusToolTip.Orientation.Bottom
+                    y: parent.height + 12
+                }
             }
 
             StatusIconTabButton {
+                id: editBtn
                 icon.name: "edit"
+                icon.color: Theme.palette.directColor1
+                checked: root.createChat
+                highlighted: checked
                 onClicked: {
                     root.createChat = !root.createChat;
                 }
+                StatusToolTip {
+                    text: qsTr("Start chat")
+                    visible: parent.hovered
+                    orientation: StatusToolTip.Orientation.Bottom
+                    y: parent.height + 12
+                }
             }
         }
 
-        Column {
+        StatusInput {
+            id: searchInput
             anchors.top: searchInputWrapper.bottom
-            anchors.topMargin: Theme.dp(16)
+            anchors.topMargin: 16
+            width: parent.width
+            maximumHeight: 36
+            topPadding: 8
+            bottomPadding: 8
+            placeholderText: "Search"
+            input.icon.name: "search"
+        }
+
+        Column {
+            width: parent.width
+            anchors.top: searchInput.bottom
+            anchors.topMargin: 16
             anchors.horizontalCenter: parent.horizontalCenter
-            spacing: Theme.dp(8)
+            spacing: 8
 
             StatusContactRequestsIndicatorListItem {
+                width: parent.width
                 anchors.horizontalCenter: parent.horizontalCenter
                 title: "Contact requests"
                 requestsCount: 3
@@ -70,6 +95,7 @@ StatusAppThreePanelLayout {
             }
 
             StatusChatList {
+                width: parent.width
                 model: Models.demoChatListItems
                 highlightItem: !root.createChat
                 onChatItemUnmuted: {
@@ -174,7 +200,7 @@ StatusAppThreePanelLayout {
                 StatusMenuItem {
                     text: "Leave Chat"
                     icon.name: "arrow-right"
-                    icon.width: Theme.dp(14)
+                    icon.width: 14
                     iconRotation: 180
                     type: StatusMenuItem.Type.Danger
                 }

sandbox/demoapp/StatusAppCommunitiesPortalView.qml

@@ -10,7 +10,7 @@ import StatusQ.Components 0.1
 import "../demoapp/data" 1.0
 
 
-ScrollView {
+StatusScrollView {
     id: root
 
     QtObject {
@@ -21,11 +21,11 @@ ScrollView {
         property ListModel tagsModel: Models.tagsModel
 
         property string searchText: ""
-        property int layoutVMargin: Theme.dp(70)
-        property int layoutHMargin: Theme.dp(64)
-        property int titlePixelSize: Theme.dp(28)
-        property int subtitlePixelSize: Theme.dp(17)
-        property int stylePadding: Theme.dp(16)
+        property int layoutVMargin: 70
+        property int layoutHMargin: 64
+        property int titlePixelSize: 28
+        property int subtitlePixelSize: 17
+        property int stylePadding: 16
 
         function navigateToCommunity(communityId) {
             console.info("Clicked community ID: " + communityId)
@@ -38,7 +38,7 @@ ScrollView {
 
     ColumnLayout {
         id: column
-        spacing: Theme.dp(18)
+        spacing: 18
 
         StatusBaseText {
             Layout.topMargin: d.layoutVMargin
@@ -55,7 +55,7 @@ ScrollView {
             visible: d.tagsModel.count > 0
             Layout.leftMargin: d.layoutHMargin
             Layout.rightMargin: d.layoutHMargin
-            width: Theme.dp(1234) // by design
+            width: 1234 // by design
             spacing: d.stylePadding/2
 
             Repeater {
@@ -63,16 +63,16 @@ ScrollView {
                 delegate: StatusListItemTag {
                     border.color: Theme.palette.baseColor2
                     color: "transparent"
-                    height: Theme.dp(32)
-                    radius: Theme.dp(36)
+                    height: 32
+                    radius: 36
                     closeButtonVisible: false
                     icon.emoji: model.emoji
-                    icon.height: Theme.dp(32)
-                    icon.width: icon.heights
+                    icon.height: 32
+                    icon.width: icon.height
                     icon.color: "transparent"
                     icon.isLetterIdenticon: true
                     title: model.name
-                    titleText.font.pixelSize: Theme.dp(15)
+                    titleText.font.pixelSize: 15
                     titleText.color: Theme.palette.primaryColor1
                 }
             }
@@ -80,7 +80,7 @@ ScrollView {
 
         StatusBaseText {
             Layout.leftMargin: d.layoutHMargin
-            Layout.topMargin: Theme.dp(20)
+            Layout.topMargin: 20
             text: qsTr("Featured")
             font.weight: Font.Bold
             font.pixelSize: d.subtitlePixelSize
@@ -119,7 +119,7 @@ ScrollView {
 
         StatusBaseText {
             Layout.leftMargin: d.layoutHMargin
-            Layout.topMargin: Theme.dp(20)
+            Layout.topMargin: 20
             text: qsTr("Popular")
             font.weight: Font.Bold
             font.pixelSize: d.subtitlePixelSize

sandbox/demoapp/StatusAppCommunityView.qml

@@ -33,7 +33,7 @@ StatusAppThreePanelLayout {
 
             chatInfoButton.title: "CryptoKitties"
             chatInfoButton.subTitle: "128 Members"
-            chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            chatInfoButton.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
             chatInfoButton.icon.color: Theme.palette.miscColor6
             chatInfoButton.onClicked:  { chatInfoButtonClicked(); }
 
@@ -59,11 +59,11 @@ StatusAppThreePanelLayout {
             }
         }
 
-        ScrollView {
+        StatusScrollView {
             id: scrollView
 
             anchors.top: statusChatInfoToolBar.bottom
-            anchors.topMargin: Theme.dp(8)
+            anchors.topMargin: 8
             anchors.bottom: parent.bottom
             width: leftPanel.width
 
@@ -73,7 +73,7 @@ StatusAppThreePanelLayout {
             StatusChatListAndCategories {
                 id: communityCategories
                 width: leftPanel.width
-                height: implicitHeight > (leftPanel.height - Theme.dp(64)) ? implicitHeight + Theme.dp(8) : leftPanel.height - Theme.dp(64)
+                height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
 
                 draggableItems: true
                 draggableCategories: false
@@ -248,21 +248,21 @@ StatusAppThreePanelLayout {
             anchors.topMargin:16
             anchors.left: parent.left
             anchors.leftMargin: 16
-            opacity: (rightPanel.width > Theme.dp(50)) ? 1.0 : 0.0
+            opacity: (rightPanel.width > 50) ? 1.0 : 0.0
             visible: (opacity > 0.1)
-            font.pixelSize: Theme.dp(15)
+            font.pixelSize: 15
             text: qsTr("Members")
         }
 
         ListView {
             anchors.top: titleText.bottom
-            anchors.topMargin: Theme.dp(16)
+            anchors.topMargin: 16
             anchors.left: parent.left
-            anchors.leftMargin: Theme.dp(8)
+            anchors.leftMargin: 8
             anchors.right: parent.right
-            anchors.rightMargin: Theme.dp(8)
+            anchors.rightMargin: 8
             anchors.bottom: parent.bottom
-            anchors.bottomMargin: Theme.dp(16)
+            anchors.bottomMargin: 16
             boundsBehavior: Flickable.StopAtBounds
             model: Models.membersListModel
             delegate: StatusMemberListItem {

sandbox/demoapp/StatusAppProfileSettingsView.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.14
 
 import StatusQ.Components 0.1
 import StatusQ.Layout 0.1
+import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 
 import "data" 1.0
@@ -16,14 +17,14 @@ StatusAppTwoPanelLayout {
         StatusNavigationPanelHeadline {
             id: profileHeadline
             anchors.top: parent.top
-            anchors.topMargin: Theme.dp(16)
+            anchors.topMargin: 16
             anchors.horizontalCenter: parent.horizontalCenter
             text: "Profile"
         }
 
-        ScrollView {
+        StatusScrollView {
             anchors.top: profileHeadline.bottom
-            anchors.topMargin: Theme.dp(16)
+            anchors.topMargin: 16
             anchors.bottom: parent.bottom
             width: parent.width
 
@@ -34,7 +35,7 @@ StatusAppTwoPanelLayout {
             Column {
                 id: profileMenuItems
                 anchors.horizontalCenter: parent.horizontalCenter
-                spacing: Theme.dp(4)
+                spacing: 4
 
                 Repeater {
                     model: Models.demoProfileGeneralMenuItems
@@ -56,7 +57,7 @@ StatusAppTwoPanelLayout {
 
                 Item {
                     id: invisibleSeparator
-                    height: Theme.dp(16)
+                    height: 16
                     width: parent.width
                 }
 

sandbox/demoapp/data/Models.qml

@@ -316,9 +316,9 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
     //dummy search popup models
     property var searchResultsA: ListModel {
         ListElement { itemId: "i1"; titleId: "t1"; title: "@Flea"; sectionName: "Messages"; time: "18:55 AM"; content: "lorem ipsum <font color='#4360DF'>@Nick</font> dolor sit amet";
-            image: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg";
+            image: "qrc:/demoapp/data/profile-image-1.jpeg";
             color: "orange";
-            badgeImage: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg";
+            badgeImage: "qrc:/demoapp/data/profile-image-1.jpeg";
             badgePrimaryText: "CryptoKities";
             badgeSecondaryText: "";
             badgeIconColor: "";
@@ -361,7 +361,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                 ListElement {
                     value: "sub_item_1_1"
                     text: "Profile image item"
-                    imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+                    imageSource: "qrc:/demoapp/data/profile-image-1.jpeg"
                     iconName: ""
                     iconColor: ""
                 },
@@ -375,7 +375,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         ListElement {
             value: "item_2"
             title: "Community item";
-            imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            imageSource: "qrc:/demoapp/data/profile-image-1.jpeg"
             iconName: ""
             iconColor: ""
             subItems: [
@@ -446,7 +446,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
  CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f5789"
-            isMutualContact: true
+            isContact: true
             trustIndicator: StatusContactVerificationIcons.TrustedType.None
             hasMention: false
             editMode: false
@@ -475,7 +475,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
  CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f2333"
-            isMutualContact: true
+            isContact: true
             trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
             hasMention: false
             editMode: false
@@ -503,7 +503,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAkUlEQVR4nOzYwQmDQBQG4SSkl3SQyizDyuzAavTi0cPK8sPwM9/Rw8rw4KH7eZUwhMYQGkNoDKGpCfmmDl63/bh7vvx/78T7aiZiCI0hNMMbJL2FZs+vmYghNIbQTG+cp9smtf1qJmIIjSEKqZmIITSG0Azfa6W/qfxDvBhCY4hCaiZiCI0hNIbQGEJzBgAA///3pSBjX42sYAAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f2333"
-            isMutualContact: true
+            isContact: true
             trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
             hasMention: false
             editMode: false
@@ -531,7 +531,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage:  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f6789"
-            isMutualContact: false
+            isContact: false
             trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: false
             editMode: false
@@ -560,7 +560,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: true
+            isContact: true
             trustIndicator: StatusContactVerificationIcons.TrustedType.None
             hasMention: false
             editMode: false
@@ -589,7 +589,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
+            isContact: false
             trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: false
             editMode: false
@@ -618,7 +618,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
+            isContact: false
             trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: true
             editMode: false
@@ -648,7 +648,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
+            isContact: false
             trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: false
             editMode: false
@@ -678,7 +678,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
+            isContact: false
             trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: false
             editMode: false
@@ -708,7 +708,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
+            isContact: false
             trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: false
             editMode: false
@@ -738,7 +738,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
+            isContact: false
             trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: false
             editMode: false
@@ -767,7 +767,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
+            isContact: false
             trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
             hasMention: false
             editMode: false
@@ -795,7 +795,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: true
+            isContact: true
             trustIndicator: StatusContactVerificationIcons.TrustedType.None
             hasMention: false
             editMode: false
@@ -823,7 +823,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: true
+            isContact: true
             trustIndicator: StatusContactVerificationIcons.TrustedType.None
             hasMention: false
             editMode: false
@@ -913,8 +913,19 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             notificationsCount: 0
         }
         ListElement {
-            sectionId: "demoApp"
+            sectionId: "examples"
             sectionType: 101
+            name: "Examples"
+            active: false
+            image: ""
+            icon: "show"
+            color: ""
+            hasNotification: false
+            notificationsCount: 0
+        }
+        ListElement {
+            sectionId: "demoApp"
+            sectionType: 102
             name: "Demo Application"
             active: false
             image: ""
@@ -1000,7 +1011,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "United States Dollar"
             shortName: "USD"
             symbol: "$"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
+            imageSource: "../../assets/twemoji/svg/1f4b4.svg"
             category: ""
             selected: false
         }
@@ -1009,7 +1020,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "British Pound"
             shortName: "GBP"
             symbol: "£"
-            imageSource: "../../assets/twemoji/26x26/1f4b5.png"
+            imageSource: "../../assets/twemoji/svg/1f4b5.svg"
             category: ""
             selected: false
         }
@@ -1018,7 +1029,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Euro"
             shortName: "EUR"
             symbol: "€"
-            imageSource: "../../assets/twemoji/26x26/1f4b6.png"
+            imageSource: "../../assets/twemoji/svg/1f4b6.svg"
             category: ""
             selected: true
         }
@@ -1027,7 +1038,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Shout Korean Won"
             shortName: "KRW"
             symbol: "₩"
-            imageSource: "../../assets/twemoji/26x26/1f4b8.png"
+            imageSource: "../../assets/twemoji/svg/1f4b8.svg"
             category: ""
             selected: false
         }
@@ -1036,7 +1047,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Ethereum"
             shortName: "ETH"
             symbol: "Ξ"
-            imageSource: "../../assets/twemoji/26x26/1f4b7.png"
+            imageSource: "../../assets/twemoji/svg/1f4b7.svg"
             category: "Tokens"
             selected: true
         }
@@ -1045,7 +1056,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Bitcoin"
             shortName: "BTC"
             symbol: "฿"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
+            imageSource: "../../assets/twemoji/svg/1f4b4.svg"
             category: "Tokens"
             selected: false
         }
@@ -1054,7 +1065,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Status Network Token"
             shortName: "SNT"
             symbol: ""
-            imageSource: "../../assets/twemoji/26x26/1f4b8.png"
+            imageSource: "../../assets/twemoji/svg/1f4b8.svg"
             category: "Tokens"
             selected: false
         }
@@ -1064,7 +1075,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Emirati Dirham"
             shortName: "AED"
             symbol: "د.إ"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
+            imageSource: "../../assets/twemoji/svg/1f4b4.svg"
             category: "Other Fiat"
             selected: false
         }
@@ -1073,7 +1084,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Afghani"
             shortName: "AFN"
             symbol: "؋"
-            imageSource: "../../assets/twemoji/26x26/1f4b7.png"
+            imageSource: "../../assets/twemoji/svg/1f4b7.svg"
             category: "Other Fiat"
             selected: false
         }
@@ -1082,7 +1093,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Argentine Peso"
             shortName: "AFN"
             symbol: "$"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
+            imageSource: "../../assets/twemoji/svg/1f4b4.svg"
             category: "Other Fiat"
             selected: false
         }
@@ -1094,7 +1105,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "United States Dollar"
             shortName: "USD"
             symbol: "$"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
+            imageSource: "../../assets/twemoji/svg/1f4b4.svg"
             category: ""
             selected: false
         }
@@ -1103,7 +1114,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "British Pound"
             shortName: "GBP"
             symbol: "£"
-            imageSource: "../../assets/twemoji/26x26/1f4b5.png"
+            imageSource: "../../assets/twemoji/svg/1f4b5.svg"
             category: ""
             selected: false
         }
@@ -1112,7 +1123,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Euro"
             shortName: "EUR"
             symbol: "€"
-            imageSource: "../../assets/twemoji/26x26/1f4b6.png"
+            imageSource: "../../assets/twemoji/svg/1f4b6.svg"
             category: ""
             selected: true
         }
@@ -1121,7 +1132,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Shout Korean Won"
             shortName: "KRW"
             symbol: "₩"
-            imageSource: "../../assets/twemoji/26x26/1f4b8.png"
+            imageSource: "../../assets/twemoji/svg/1f4b8.svg"
             category: ""
             selected: false
         }
@@ -1130,7 +1141,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Ethereum"
             shortName: "ETH"
             symbol: "Ξ"
-            imageSource: "../../assets/twemoji/26x26/1f4b7.png"
+            imageSource: "../../assets/twemoji/svg/1f4b7.svg"
             category: "Tokens"
             selected: true
         }
@@ -1139,7 +1150,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Bitcoin"
             shortName: "BTC"
             symbol: "฿"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
+            imageSource: "../../assets/twemoji/svg/1f4b4.svg"
             category: "Tokens"
             selected: false
         }
@@ -1148,7 +1159,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Status Network Token"
             shortName: "SNT"
             symbol: ""
-            imageSource: "../../assets/twemoji/26x26/1f4b8.png"
+            imageSource: "../../assets/twemoji/svg/1f4b8.svg"
             category: "Tokens"
             selected: false
         }
@@ -1158,7 +1169,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Emirati Dirham"
             shortName: "AED"
             symbol: "د.إ"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
+            imageSource: "../../assets/twemoji/svg/1f4b4.svg"
             category: "Other Fiat"
             selected: false
         }
@@ -1167,7 +1178,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Afghani"
             shortName: "AFN"
             symbol: "؋"
-            imageSource: "../../assets/twemoji/26x26/1f4b7.png"
+            imageSource: "../../assets/twemoji/svg/1f4b7.svg"
             category: "Other Fiat"
             selected: false
         }
@@ -1176,7 +1187,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Argentine Peso"
             shortName: "AFN"
             symbol: "$"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
+            imageSource: "../../assets/twemoji/svg/1f4b4.svg"
             category: "Other Fiat"
             selected: false
         }
@@ -1187,7 +1198,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             key: 0
             name: "English"
             shortName: "English"
-            imageSource: "../../assets/twemoji/26x26/1f1ec-1f1e7.png"
+            imageSource: "../../assets/twemoji/svg/1f1ec-1f1e7.svg"
             category: ""
             selected: false
         }
@@ -1195,7 +1206,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             key: 1
             name: "Korean"
             shortName: "한국어"
-            imageSource: "../../assets/twemoji/26x26/1f1f0-1f1f7.png"
+            imageSource: "../../assets/twemoji/svg/1f1f0-1f1f7.svg"
             category: ""
             selected: false
         }
@@ -1203,7 +1214,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             key: 2
             name: "Portuguese (Brazilian)"
             shortName: "Português"
-            imageSource: "../../assets/twemoji/26x26/1f1e7-1f1f7.png"
+            imageSource: "../../assets/twemoji/svg/1f1e7-1f1f7.svg"
             category: ""
             selected: true
         }
@@ -1211,7 +1222,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             key: 3
             name: "Dutch"
             shortName: "Nederlands"
-            imageSource: "../../assets/twemoji/26x26/1f1f3-1f1f1.png"
+            imageSource: "../../assets/twemoji/svg/1f1f3-1f1f1.svg"
             category: "Beta Languages"
             selected: false
         }
@@ -1219,7 +1230,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             key: 4
             name: "Indonesian"
             shortName: "Bahasa Indonesia"
-            imageSource: "../../assets/twemoji/26x26/1f1ee-1f1e9.png"
+            imageSource: "../../assets/twemoji/svg/1f1ee-1f1e9.svg"
             category: "Beta Languages"
             selected: false
         }
@@ -1227,7 +1238,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             key: 5
             name: "Spanish"
             shortName: "Español"
-            imageSource: "../../assets/twemoji/26x26/1f1ea-1f1e6.png"
+            imageSource: "../../assets/twemoji/svg/1f1ea-1f1e6.svg"
             category: "Beta Languages"
             selected: false
         }

sandbox/examples/FilteringSorting.qml

@@ -0,0 +1,154 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core.Utils 0.1
+
+import SortFilterProxyModel 0.2
+
+ColumnLayout {
+    id: root
+
+    RowLayout {
+        Layout.fillWidth: true
+
+        StatusIconTextButton {
+            id: sortBtn
+
+            property int sortOrder: -1
+            statusIcon: {
+                if (sortOrder == Qt.AscendingOrder) return "chevron-down"
+                if (sortOrder == Qt.DescendingOrder) return "chevron-up"
+                return "remove"
+            }
+
+            onClicked: {
+                var st = sortOrder + 1
+                sortOrder = st > 1 ? -1 : st
+            }
+        }
+
+        StatusInput {
+            id: searchInput
+
+            Layout.fillWidth: true
+            input.icon.name: "search"
+            placeholderText: "nickname.."
+        }
+
+        StatusIconTabButton {
+            id: contactBtn
+
+            icon.name: "tiny/tiny-contact"
+            identicon.icon.color: Theme.palette.primaryColor1
+            onClicked: highlighted = !highlighted
+        }
+
+        StatusIconTabButton {
+            id: verifiedBtn
+
+            icon.name: "tiny/tiny-checkmark"
+            identicon.icon.color: Theme.palette.primaryColor1
+            onClicked: highlighted = !highlighted
+        }
+    }
+
+    ListView {
+        Layout.fillWidth: true
+        implicitHeight: contentItem.childrenRect.height
+        spacing: 4
+
+        model: SortFilterProxyModel {
+            sourceModel: d.users
+            sorters: StringSorter {
+                enabled: sortBtn.sortOrder !== -1
+                roleName: "nick"
+                sortOrder: sortBtn.sortOrder
+            }
+            filters: [
+                ExpressionFilter {
+                    expression: model.nick.startsWith(searchInput.text)
+                },
+                AllOf {
+                    enabled: contactBtn.highlighted || verifiedBtn.highlighted
+                    ValueFilter {
+                        enabled: contactBtn.highlighted
+                        roleName: "isContact"
+                        value: true
+                    }
+                    ValueFilter {
+                        enabled: verifiedBtn.highlighted
+                        roleName: "isVerified"
+                        value: true
+                    }
+                }
+            ]
+        }
+
+        delegate: StatusMemberListItem {
+            width: parent.width
+            userName: model.name
+            nickName: model.nick
+            isVerified: model.isVerified
+            isContact: model.isContact
+        }
+    }
+
+    QtObject {
+        id: d
+
+        readonly property ListModel users: ListModel {
+            ListElement {
+                name: "Richard"
+                nick: "Ricky"
+                isVerified: true
+                isContact: true
+            }
+            ListElement {
+                name: "Susan"
+                nick: "Sue"
+                isVerified: false
+                isContact: false
+            }
+            ListElement {
+                name: "Edward"
+                nick: "Ed"
+                isVerified: true
+                isContact: false
+            }
+            ListElement {
+                name: "Toomas"
+                nick: "Tommy"
+                isVerified: false
+                isContact: false
+            }
+            ListElement {
+                name: "Elizabeth"
+                nick: "Bess"
+                isVerified: true
+                isContact: true
+            }
+            ListElement {
+                name: "Thomas"
+                nick: "Tom"
+                isVerified: false
+                isContact: true
+            }
+            ListElement {
+                name: "Fernando"
+                nick: "Alonso"
+                isVerified: false
+                isContact: true
+            }
+            ListElement {
+                name: "Alexander"
+                nick: "Alex"
+                isVerified: true
+                isContact: false
+            }
+        }
+    }
+}

sandbox/main.cpp

@@ -4,6 +4,8 @@
 
 #include "sandboxapp.h"
 
+#include <qqmlsortfilterproxymodeltypes.h>
+
 int main(int argc, char *argv[])
 {
 #if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
@@ -12,6 +14,10 @@ int main(int argc, char *argv[])
 
     SandboxApp app(argc, argv);
 
+    qqsfpm::registerTypes();
+
+    qputenv("QT_QUICK_CONTROLS_HOVER_ENABLED", QByteArrayLiteral("1"));
+
     app.setOrganizationName("Status");
     app.setOrganizationDomain("status.im");
     app.setApplicationName("Sandbox");

sandbox/main.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls 2.14
 import QtGraphicalEffects 1.13
 import QtQuick.Layouts 1.14
 import Qt.labs.settings 1.0
+import QtQml.Models 2.14
 
 import Sandbox 0.1
 
@@ -13,14 +14,17 @@ import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
 import StatusQ.Layout 0.1
 import StatusQ.Platform 0.1
-import StatusQ.Core.Utils 0.1
+
+import SortFilterProxyModel 0.2
 
 import "demoapp/data" 1.0
 
 StatusWindow {
     id: rootWindow
-    width: Theme.screenWidth
-    height: Theme.screenHeight
+    width: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width
+                                                                  :  1224
+    height: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.height
+                                                                   :840
     visible: true
     title: qsTr("StatusQ Documentation App")
 
@@ -43,7 +47,8 @@ StatusWindow {
         readonly property int nodeManagement: 4
         readonly property int profileSettings: 5
         readonly property int apiDocumentation: 100
-        readonly property int demoApp: 101
+        readonly property int examples: 101
+        readonly property int demoApp: 102
     }
 
     function setActiveItem(sectionId) {
@@ -58,11 +63,6 @@ StatusWindow {
         }
     }
 
-    readonly property real scaleRatio: Math.min(rootWindow.width / Theme.screenWidth, rootWindow.height / Theme.screenHeight)
-    onScaleRatioChanged: {
-        Theme.scaleFactor = scaleRatio;
-    }
-
     StatusAppLayout {
         id: appLayout
         anchors.fill: parent
@@ -85,19 +85,22 @@ StatusWindow {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: Theme.dp(2)
+                badge.border.width: 2
                 onClicked: {
                     stackView.clear()
                     if(model.sectionType === appSectionType.apiDocumentation)
                     {
                         stackView.push(libraryDocumentationCmp)
-                        rootWindow.setActiveItem(sectionId)
+                    }
+                    else if(model.sectionType === appSectionType.examples)
+                    {
+                        stackView.push(examplesCmp)
                     }
                     else if(model.sectionType === appSectionType.demoApp)
                     {
                         stackView.push(demoAppCmp)
-                        rootWindow.setActiveItem(model.sectionId)
                     }
+                    rootWindow.setActiveItem(model.sectionId)
                 }
             }
         }
@@ -110,9 +113,9 @@ StatusWindow {
 
         ThemeSwitch {
             anchors.top: parent.top
-            anchors.topMargin: Theme.dp(32)
+            anchors.topMargin: 32
             anchors.right: parent.right
-            anchors.rightMargin: Theme.dp(32)
+            anchors.rightMargin: 32
             lightThemeEnabled: storeSettings.lightTheme
             onLightThemeEnabledChanged: {
                 Theme.palette = lightThemeEnabled ? rootWindow.darkTheme : rootWindow.lightTheme
@@ -136,201 +139,196 @@ StatusWindow {
                 storeSettings.fillPage = false
             }
 
-            leftPanel: Item {
+            leftPanel: StatusScrollView {
                 anchors.fill: parent
-                ScrollView {
-                    anchors.top: parent.top
-                    anchors.bottom: parent.bottom
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    contentHeight: navigation.height + Theme.dp(56)
-                    contentWidth: navigation.width
-                    clip: true
-                    Column {
-                        id: navigation
-                        anchors.top: parent.top
-                        anchors.topMargin: Theme.dp(48)
-                        anchors.horizontalCenter: parent.horizontalCenter
-                        spacing: 0
+                anchors.topMargin: 48
 
-                        StatusListSectionHeadline { text: "StatusQ.Core" }
-                        StatusNavigationListItem {
-                            title: "Icons"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.control(title);
-                        }
+                Column {
+                    id: navigation
+                    spacing: 0
 
-                        StatusListSectionHeadline { text: "StatusQ.Layout" }
-                        StatusNavigationListItem {
-                            title: "Layouts"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.control(title.substring(0, title.length - 1));
-                        }
+                    StatusListSectionHeadline { text: "StatusQ.Core" }
+                    StatusNavigationListItem {
+                        title: "Icons"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.control(title);
+                    }
 
-                        StatusListSectionHeadline { text: "StatusQ.Controls" }
-                        StatusNavigationListItem {
-                            title: "Buttons"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.control(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusSwitchTab"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page("StatusTabSwitch");
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusChatCommandButton"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "Controls"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.control(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusTabBarButton"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusTabBarIconButton"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusInput"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusSelect"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusAccountSelector"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusAssetSelector"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusColorSelector"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusWalletColorButton"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusWalletColorSelect"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusPasswordStrengthIndicator"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusPinInput"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusListSectionHeadline { text: "StatusQ.Components" }
-                        StatusNavigationListItem {
-                            title: "StatusAddress"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "List Items"
-                            selected: viewLoader.source.toString().includes(title.replace(/\s+/g, ''))
-                            onClicked: mainPageView.control(title.replace(/\s+/g, ''));
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusChatInfoToolBar"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "Others"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.control(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusExpandableItem"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page("StatusExpandableSettingsItem");
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusTagSelector"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusToastMessage"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusWizardStepper"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusListPicker"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusCommunityCard"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusCommunityTags"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusListSectionHeadline { text: "StatusQ.Popup" }
-                        StatusNavigationListItem {
-                            title: "StatusPopupMenu"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
+                    StatusListSectionHeadline { text: "StatusQ.Layout" }
+                    StatusNavigationListItem {
+                        title: "Layouts"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.control(title.substring(0, title.length - 1));
+                    }
 
-                        StatusNavigationListItem {
-                            title: "StatusModal"
-                            selected: viewLoader.source.toString().includes("Popups")
-                            onClicked: mainPageView.control("Popups");
-                        }
-                        StatusListSectionHeadline { text: "StatusQ.Platform" }
-                        StatusNavigationListItem {
-                            title: "StatusMacNotification"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusColorSelectorGrid"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusImageCropPanel"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title, true);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusColorSpace"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title, true);
-                        }
+                    StatusListSectionHeadline { text: "StatusQ.Controls" }
+                    StatusNavigationListItem {
+                        title: "Buttons"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.control(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusSwitchTab"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page("StatusTabSwitch");
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusChatCommandButton"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "Controls"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.control(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusTabBarButton"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusTabBarIconButton"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusInput"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusSelect"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusAccountSelector"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusColorSelector"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusWalletColorButton"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusWalletColorSelect"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusPasswordStrengthIndicator"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusPinInput"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusListSectionHeadline { text: "StatusQ.Components" }
+                    StatusNavigationListItem {
+                        title: "StatusAddress"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "List Items"
+                        selected: viewLoader.source.toString().includes(title.replace(/\s+/g, ''))
+                        onClicked: mainPageView.control(title.replace(/\s+/g, ''));
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusChatInfoToolBar"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "Others"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.control(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusExpandableItem"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page("StatusExpandableSettingsItem");
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusTagSelector"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusToastMessage"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusWizardStepper"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusListPicker"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusCommunityCard"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusCommunityTags"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusListSectionHeadline { text: "StatusQ.Popup" }
+                    StatusNavigationListItem {
+                        title: "StatusPopupMenu"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusModal"
+                        selected: viewLoader.source.toString().includes("Popups")
+                        onClicked: mainPageView.control("Popups");
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusDialog"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusListSectionHeadline { text: "StatusQ.Platform" }
+                    StatusNavigationListItem {
+                        title: "StatusMacNotification"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusColorSelectorGrid"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusImageCropPanel"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title, true);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusColorSpace"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title, true);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusCard"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title, true);
                     }
                 }
             }
@@ -339,10 +337,10 @@ StatusWindow {
                 id: rightPanel
                 anchors.fill: parent
 
-                ScrollView {
+                StatusScrollView {
                     visible: !storeSettings.fillPage
                     anchors.fill: parent
-                    anchors.topMargin: Theme.dp(64)
+                    anchors.topMargin: 64
                     contentHeight: (pageWrapper.height + pageWrapper.anchors.topMargin) * rootWindow.factor
                     contentWidth: (pageWrapper.width * rootWindow.factor)
                     clip: true
@@ -371,7 +369,7 @@ StatusWindow {
                 Loader {
                     active: storeSettings.fillPage
                     anchors.fill: parent
-                    anchors.topMargin: Theme.dp(64)
+                    anchors.topMargin: 64
                     visible: storeSettings.fillPage
                     clip: true
 
@@ -404,6 +402,53 @@ StatusWindow {
         }
     }
 
+    Component {
+        id: examplesCmp
+
+        StatusAppTwoPanelLayout {
+            id: examplesView
+
+            function example(name) {
+                examplesLoader.source = Qt.resolvedUrl("./examples/" + name + ".qml")
+                storeSettings.selectedExample = examplesLoader.source
+            }
+
+            readonly property string defaultExampleSource: example("FilteringSorting")
+
+            leftPanel: StatusScrollView {
+                id: examplesLeftPanel
+
+                anchors.fill: parent
+                anchors.topMargin: 48
+
+                ColumnLayout {
+                    width: examplesLeftPanel.availableWidth
+                    spacing: 0
+
+                    StatusNavigationListItem {
+                        Layout.fillWidth: true
+                        title: "FilteringSorting"
+                        selected: examplesLoader.source.toString().includes(title)
+                        onClicked: examplesView.example(title)
+                    }
+                }
+            }
+
+            rightPanel: StatusScrollView {
+                id: examplesRightPanel
+                anchors.fill: parent
+                anchors.margins: 64
+                anchors.topMargin: anchors.margins + 32
+
+                Loader {
+                    id: examplesLoader
+                    width: examplesRightPanel.availableWidth
+                    source: storeSettings.selectedExample !== "" ? storeSettings.selectedExample : examplesView.defaultExampleSource
+                }
+            }
+        }
+    }
+
     Component {
         id: demoAppCmp
 
@@ -415,12 +460,12 @@ StatusWindow {
                 id: platformSwitch
                 anchors.left: demoApp.left
                 anchors.bottom: demoApp.top
-                anchors.bottomMargin: Theme.dp(20)
-                spacing: Theme.dp(2)
+                anchors.bottomMargin: 20
+                spacing: 2
 
                 Text {
                     text: "OSX"
-                    font.pixelSize: Theme.dp(15)
+                    font.pixelSize: 15
                     anchors.verticalCenter: parent.verticalCenter
                 }
 
@@ -436,7 +481,7 @@ StatusWindow {
 
                 Text {
                     text: "Win"
-                    font.pixelSize: Theme.dp(15)
+                    font.pixelSize: 15
                     anchors.verticalCenter: parent.verticalCenter
                 }
             }
@@ -448,8 +493,8 @@ StatusWindow {
                 anchors.fill: demoApp
                 source: demoApp
                 horizontalOffset: 0
-                verticalOffset: Theme.dp(5)
-                radius: Theme.dp(20)
+                verticalOffset: 5
+                radius: 20
                 samples: 20
                 color: "#22000000"
             }
@@ -459,7 +504,7 @@ StatusWindow {
     StatusMacTrafficLights {
         anchors.left: parent.left
         anchors.top: parent.top
-        anchors.margins: Theme.dp(13)
+        anchors.margins: 13
 
         visible: Qt.platform.os == "osx"
 
@@ -498,6 +543,7 @@ StatusWindow {
     Settings {
         id: storeSettings
         property string selected: ""
+        property string selectedExample: ""
         property bool lightTheme: true
         property bool fillPage: false
     }

sandbox/pages/StatusAccountSelectorPage.qml

@@ -7,10 +7,10 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
-import StatusQ.Core.Utils 0.1
+
 
 Column {
-    spacing: Theme.dp(8)
+    spacing: 8
 
     StatusAccountSelector {
         id: accountSelector

sandbox/pages/StatusAddressPage.qml

@@ -2,7 +2,6 @@ import QtQuick 2.14
 import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14
 
-import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
 
 import Sandbox 0.1
@@ -15,7 +14,7 @@ Column {
     }
 
     Item {
-        width: Theme.dp(200)
+        width: 200
         height: childrenRect.height
         StatusAddress {
             text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"

sandbox/pages/StatusAssetSelectorPage.qml

@@ -1,40 +0,0 @@
-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 StatusQ.Popups 0.1
-
-import Sandbox 0.1
-
-Column {
-    spacing: 8
-
-    StatusAssetSelector {
-        getCurrencyBalanceString: function (currencyBalance) {
-            return currencyBalance.toFixed(2) + " USD"
-        }
-        tokenAssetSourceFn: function (symbol) {
-            return "../../assets/img/icons/snt.svg"
-        }
-        assets: ListModel {
-            ListElement {
-                address: "0x1234"
-                name: "Status Network Token"
-                balance: "20"
-                symbol: "SNT"
-                currencyBalance: 9992.01
-            }
-            ListElement {
-                address: "0x1234"
-                name: "DAI Token"
-                balance: "15"
-                symbol: "DAI"
-                currencyBalance: 20.00001
-            }
-        }
-    }
-}
-

sandbox/pages/StatusCardPage.qml

@@ -0,0 +1,253 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import Sandbox 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Utils 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Components 0.1
+
+Item {
+
+    ColumnLayout {
+        id: layout
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: parent.top
+        spacing: 20
+
+        RowLayout {
+            StatusSelect {
+                id: select
+                label: "Select Card State"
+                model: ListModel {
+                    ListElement {
+                        name: "default"
+                    }
+                    ListElement {
+                        name: "unavailable"
+                    }
+                    ListElement {
+                        name: "error"
+                    }
+                    ListElement {
+                        name: "unpreferred"
+                    }
+                }
+                selectMenu.delegate: StatusMenuItemDelegate {
+                    statusPopupMenu: select
+                    action: StatusMenuItem {
+                        text: name
+                        onTriggered: {
+                            selectedItem.text = name
+                            card.state = name
+                        }
+                    }
+                }
+                selectedItemComponent: Item {
+                    id: selectedItem
+                    anchors.fill: parent
+                    property string text: "default"
+
+                    StatusBaseText {
+                        text: selectedItem.text
+                        anchors.centerIn: parent
+                        color: Theme.palette.directColor1
+                    }
+                }
+            }
+
+            StatusCheckBox {
+                text: "advancedMode"
+                onClicked: {
+                    card.advancedMode = checked
+                }
+            }
+        }
+
+        StatusCard {
+            id: card
+            primaryText: "Mainnet"
+            secondaryText: state === "unavailable" ? "No Gas" : "75"
+            tertiaryText: state === "unpreferred"  ? "UNPREFERRED" : "BALANCE: " + 250
+            cardIconName: "status"
+            advancedInputText: "75"
+            disabledText: "Disabled"
+        }
+
+        Rectangle {
+            height: 1
+            width: 700
+            color: "black"
+        }
+
+        // Below is an example on how to implement the network routing using StatusCard and Canvas, also the function in Utils to draw an arrow
+        Row {
+            id: cards
+            spacing: 200
+            Column {
+                id: leftColumn
+                spacing: 20
+                Repeater {
+                    model: fromNetworksList
+                    StatusCard {
+                        primaryText: name
+                        secondaryText: balance === 0 ? "No Balance" : !hasGas ? "No Gas" : tokensToSend
+                        tertiaryText: "BALANCE: " + balance
+                        state: balance === 0 || !hasGas ? "unavailable" :  "default"
+                        cardIconName: iconName
+                        advancedMode: card.advancedMode
+                        advancedInputText: tokensToSend
+                        disabledText: "Disabled"
+                    }
+                }
+            }
+
+            Column {
+                id: rightColumn
+                spacing: 20
+                Repeater {
+                    model: toNetworksList
+                    StatusCard {
+                        primaryText: name
+                        secondaryText: tokensToReceive
+                        tertiaryText: ""
+                        state: preferred ? "default" : "unprefeered"
+                        cardIconName: iconName
+                        opacity: preferred ? 1 : 0
+                        advancedMode: card.advancedMode
+                        advancedInputText: tokensToReceive
+                        disabledText: "Disabled"
+                    }
+                }
+            }
+        }
+    }
+
+    Canvas {
+        id: canvas
+        x: layout.x + leftColumn.x
+        y: cards.y
+        width: cards.width
+        height: cards.height
+
+        function clear() {
+            var ctx = getContext("2d");
+            ctx.reset()
+        }
+
+        onPaint: {
+            // Get the canvas context
+            var ctx = getContext("2d");
+
+            for(var i = 0; i< fromNetworksList.count; i++) {
+                if(fromNetworksList.get(i).routedTo !== "") {
+                    for(var j = 0; j< toNetworksList.count; j++) {
+                        if(fromNetworksList.get(i).routedTo === toNetworksList.get(j).name) {
+                            Utils.drawArrow(ctx, leftColumn.children[i].x + leftColumn.children[i].width,
+                                            leftColumn.children[i].y + leftColumn.children[i].height/2,
+                                            rightColumn.x + rightColumn.children[j].x,
+                                            rightColumn.children[j].y + rightColumn.children[j].height/2,
+                                            '#627EEA')
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+
+    ListModel {
+        id: toNetworksList
+        ListElement {
+            name: "Mainnet"
+            iconName: "status"
+            tokensToReceive: 75
+            preferred: true
+        }
+        ListElement {
+            name: "Aztec"
+            iconName: "status"
+            tokensToReceive: 0
+            preferred: false
+        }
+        ListElement {
+            name: "Hermez"
+            iconName: "status"
+            tokensToReceive: 75
+            preferred: true
+        }
+        ListElement {
+            name: "Loppring"
+            iconName: "status"
+            tokensToReceive: 0
+            preferred: true
+        }
+        ListElement {
+            name: "Optimism"
+            iconName: "status"
+            tokensToReceive: 100
+            preferred: true
+        }
+        ListElement {
+            name: "zkSync"
+            iconName: "status"
+            tokensToReceive: 0
+            preferred: false
+        }
+    }
+
+    ListModel {
+        id: fromNetworksList
+        ListElement {
+            name: "Mainnet"
+            iconName: "status"
+            tokensToSend: 75
+            balance: 75
+            routedTo: "Mainnet"
+            hasGas: true
+        }
+        ListElement {
+            name: "Aztec"
+            iconName: "status"
+            tokensToSend: 0
+            balance: 75
+            routedTo: ""
+            hasGas: false
+        }
+        ListElement {
+            name: "Hermez"
+            iconName: "status"
+            tokensToSend: 75
+            balance: 75
+            routedTo: "Hermez"
+            hasGas: true
+        }
+        ListElement {
+            name: "Loppring"
+            iconName: "status"
+            tokensToSend: 0
+            balance: 0
+            routedTo: ""
+            hasGas: false
+        }
+        ListElement {
+            name: "Optimism"
+            iconName: "status"
+            tokensToSend: 75
+            balance: 75
+            routedTo: "Optimism"
+            hasGas: true
+        }
+        ListElement {
+            name: "zkSync"
+            iconName: "status"
+            tokensToSend: 25
+            balance: 25
+            routedTo: "Optimism"
+            hasGas: true
+        }
+    }
+}

sandbox/pages/StatusChatInfoToolBarPage.qml

@@ -8,13 +8,13 @@ import StatusQ.Popups 0.1
 
 GridLayout {
     columns: 1
-    columnSpacing: Theme.dp(5)
-    rowSpacing: Theme.dp(5)
+    columnSpacing: 5
+    rowSpacing: 5
 
     StatusChatInfoToolBar {
         chatInfoButton.title: "Cryptokitties"        
         chatInfoButton.subTitle: "128 Members"
-        chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        chatInfoButton.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         chatInfoButton.icon.color: Theme.palette.miscColor6
 
         popupMenu: StatusPopupMenu {

sandbox/pages/StatusColorSelectorGridPage.qml

@@ -6,20 +6,20 @@ import StatusQ.Core.Theme 0.1
 
 Item {
     id: root
-    width: Theme.dp(800)
-    height: Theme.dp(100)
+    width: 800
+    height: 100
 
     Row {
         id: selectedColor
         anchors.top: parent.top
         anchors.left: colorSelectionGrid.left
-        spacing: Theme.dp(10)
+        spacing: 10
         StatusBaseText {
             text: "SelectedColor is"
         }
         Rectangle {
-            width: Theme.dp(100)
-            height: Theme.dp(20)
+            width: 100
+            height: 20
             radius: width/2
             color: colorSelectionGrid.selectedColor
         }
@@ -28,7 +28,7 @@ Item {
     StatusColorSelectorGrid {
         id: colorSelectionGrid
         anchors.top: selectedColor.bottom
-        anchors.topMargin: Theme.dp(10)
+        anchors.topMargin: 10
         anchors.horizontalCenter: parent.horizontalCenter
         titleText: "COLOR"
         selectedColorIndex: 2

sandbox/pages/StatusColorSelectorPage.qml

@@ -9,7 +9,7 @@ import StatusQ.Controls 0.1
 import Sandbox 0.1
 
 Column {
-    spacing: Theme.dp(8)
+    spacing: 8
 
     StatusColorSelector {
         model: ["red", "blue", "green"]

sandbox/pages/StatusColorSpacePage.qml

@@ -90,14 +90,14 @@ Item {
 
         Rectangle {
             color: colorSpace.color
-            implicitHeight: Theme.dp(48)
-            radius: Theme.dp(10)
+            implicitHeight: 48
+            radius: 10
             Layout.fillWidth: true
 
             StatusBaseText {
                 anchors.centerIn: parent
                 color: Theme.palette.white
-                font.pixelSize: Theme.dp(15)
+                font.pixelSize: 15
                 text: "Quick brown fox jumps over the lazy dog"
             }
         }

sandbox/pages/StatusCommunityCardPage.qml

@@ -2,7 +2,6 @@ import QtQuick 2.0
 import QtQuick.Layouts 1.13
 
 import StatusQ.Components 0.1
-import StatusQ.Core.Theme 0.1
 
 import "../demoapp/data" 1.0
 
@@ -18,8 +17,8 @@ GridLayout {
 
     Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
     columns: 2
-    columnSpacing: Theme.dp(28)
-    rowSpacing: Theme.dp(28)
+    columnSpacing: 28
+    rowSpacing: 28
 
     Repeater {
         model: Models.curatedCommunitiesModel

sandbox/pages/StatusCommunityTagsPage.qml

@@ -27,9 +27,9 @@ Item {
     ColumnLayout {
         id: column
         anchors.centerIn: parent
-        width: Theme.dp(600)
-        height: Theme.dp(500)
-        spacing: Theme.dp(20)
+        width: 600
+        height: 500
+        spacing: 20
 
         StatusInput {
             id: tagsFilter
@@ -37,7 +37,7 @@ Item {
             rightPadding: 0
             label: qsTr("Select tags that will fit your Community")
             input.icon.name: "search"
-            input.placeholderText: qsTr("Search tags")
+            placeholderText: qsTr("Search tags")
             Layout.fillWidth: true
         }
 
@@ -55,14 +55,14 @@ Item {
         RowLayout {
             StatusBaseText {
                 text: qsTr("Selected tags")
-                font.pixelSize: Theme.dp(15)
+                font.pixelSize: 15
                 Layout.fillWidth: true
             }
 
             StatusBaseText {
                 text: cntSelectedTags + "/" + maxSelectedTags
                 color: Theme.palette.baseColor1
-                font.pixelSize: Theme.dp(13)
+                font.pixelSize: 13
             }
         }
 

sandbox/pages/StatusDialogPage.qml

@@ -0,0 +1,282 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+import QtQml.Models 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups.Dialog 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+ColumnLayout {
+    id: root
+
+    StatusButton {
+        text: "Content"
+        onClicked: contentDialog.open()
+
+        StatusDialog {
+            id: contentDialog
+
+            standardButtons: Dialog.ApplyRole
+
+            StatusBaseText {
+                anchors.fill: parent
+                text: "Content"
+            }
+        }
+    }
+
+    StatusButton {
+        text: "Title and content"
+        onClicked: titleContentDialog.open()
+
+        StatusDialog {
+            id: titleContentDialog
+            title: "Title"
+
+            StatusBaseText {
+                anchors.fill: parent
+                text: "Content"
+            }
+        }
+    }
+
+    StatusButton {
+        text: "No buttons"
+        onClicked: noButtonsDialog.open()
+
+        StatusDialog {
+            id: noButtonsDialog
+            title: "No buttons"
+
+            standardButtons: Dialog.NoButton
+
+            StatusBaseText {
+                anchors.fill: parent
+                text: "Content"
+            }
+        }
+    }
+
+    StatusButton {
+        text: "Long title"
+        onClicked: longTitleDialog.open()
+
+        StatusDialog {
+            id: longTitleDialog
+            title: "Long title long title Long title long title Long title long title"
+
+            StatusBaseText {
+                anchors.fill: parent
+                text: "Content"
+            }
+        }
+    }
+
+    StatusButton {
+        text: "Long title elided"
+        onClicked: longTitleElidedDialog.open()
+
+        StatusDialog {
+            id: longTitleElidedDialog
+            title: "Long title long title Long title long title Long title long title"
+
+            width: 400
+
+            StatusBaseText {
+                anchors.fill: parent
+                text: "Content"
+            }
+        }
+    }
+
+    StatusButton {
+        text: "Title subtitle"
+        onClicked: titleSubtitleDialog.open()
+
+        StatusDialog {
+            id: titleSubtitleDialog
+            title: "This title will be ignored"
+
+            header: StatusDialogHeader {
+                headline.title: "Title"
+                headline.subtitle: "Subtitle"
+
+                actions.closeButton.onClicked: titleSubtitleDialog.close()
+            }
+
+            StatusBaseText {
+                anchors.fill: parent
+                text: "Content"
+            }
+        }
+    }
+
+    StatusButton {
+        text: "Auto adjustable"
+        onClicked: autoAdjustableDialog.open()
+
+        StatusDialog {
+            id: autoAdjustableDialog
+
+            header: StatusDialogHeader {
+                headline.title: "Dialog size will auto adapt"
+                headline.subtitle: "To conent size"
+
+                actions.closeButton.onClicked: autoAdjustableDialog.close()
+            }
+
+            footer: StatusDialogFooter {
+                leftButtons: ObjectModel {
+                    StatusRoundButton {
+                        icon.name: "arrow-left"
+                        onClicked: autoAdjustableDialogContent.implicitWidth -= 100
+                    }
+                    StatusRoundButton {
+                        icon.name: "arrow-right"
+                        onClicked: autoAdjustableDialogContent.implicitWidth += 100
+                    }
+                }
+                rightButtons: ObjectModel {
+                    StatusRoundButton {
+                        icon.name: "arrow-down"
+                        onClicked: autoAdjustableDialogContent.implicitHeight -= 100
+                    }
+                    StatusRoundButton {
+                        icon.name: "arrow-up"
+                        onClicked: autoAdjustableDialogContent.implicitHeight += 100
+                    }
+                }
+            }
+
+            Rectangle {
+                id: autoAdjustableDialogContent
+
+                anchors.fill: parent
+
+                implicitWidth: 200
+                implicitHeight: 200
+
+                color: Theme.palette.primaryColor3
+
+                StatusBaseText {
+                    anchors.centerIn: parent
+                    text: "W: %1 H: %2\nIW: %3 IH: %4".arg(parent.width).arg(parent.height).arg(parent.implicitWidth).arg(parent.implicitHeight)
+                }
+            }
+        }
+    }
+
+    StatusButton {
+        text: "Complex dialog"
+        onClicked: complexDialog.open()
+
+        StatusDialog {
+            id: complexDialog
+
+            header: StatusDialogHeader {
+                id: dialogHeader
+
+                headline.title: "Complex dialog"
+                headline.subtitle: "identicon, title subtitle, custom actions"
+
+                leftComponent: StatusLetterIdenticon {
+                    name: dialogHeader.headline.title
+                }
+
+                actions {
+                    infoButton.visible: true
+
+                    customButtons: ObjectModel {
+                        StatusFlatRoundButton {
+                            icon.name: "warning"
+                            icon.width: 20
+                            icon.height: 20
+                        }
+                    }
+
+                    closeButton.onClicked: complexDialog.close()
+                }
+            }
+
+            footer: StatusDialogFooter {
+                leftButtons: ObjectModel {
+                    StatusRoundButton {
+                        icon.name: "arrow-left"
+                    }
+                }
+                rightButtons: ObjectModel {
+                    StatusButton {
+                        text: "Custom cancel action"
+                        type: StatusButton.Danger
+                    }
+                    StatusButton {
+                        text: "Custom approve action"
+                    }
+                }
+            }
+
+            ColumnLayout {
+                anchors.fill: parent
+
+                StatusBaseText {
+                    text: "Content A"
+                }
+
+                StatusBaseText {
+                    text: "Content B"
+                }
+
+                StatusBaseText {
+                    text: "Content C"
+                }
+            }
+        }
+    }
+
+    StatusButton {
+        text: "Custom header/footer"
+        onClicked: customHeaderAndFooter.open()
+
+        StatusDialog {
+            id: customHeaderAndFooter
+            title: "No buttons"
+
+            header: Rectangle {
+                implicitHeight: customHeaderText.height * 2
+                implicitWidth: customHeaderText.width * 2
+
+                border.width: 2
+                color: Theme.palette.statusPopupMenu.hoverBackgroundColor
+
+                StatusBaseText {
+                    id: customHeaderText
+                    anchors.centerIn: parent
+                    text: "Custom header"
+                }
+            }
+
+            footer: Rectangle {
+                implicitHeight: customHeaderText.height * 2
+                implicitWidth: customHeaderText.width * 2
+
+                border.width: 2
+                color: Theme.palette.statusPopupMenu.hoverBackgroundColor
+
+                StatusBaseText {
+                    id: customFooter
+                    anchors.centerIn: parent
+                    text: "Custom footer"
+                }
+            }
+
+
+            StatusBaseText {
+                anchors.fill: parent
+                text: "Content"
+            }
+        }
+    }
+}

sandbox/pages/StatusExpandableSettingsItemPage.qml

@@ -5,15 +5,15 @@ import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
 
 Column {
-    spacing: Theme.dp(12)
-    width: Theme.dp(800)
+    spacing: 12
+    width: 800
     anchors.top:parent.top
-    leftPadding: Theme.dp(20)
-    rightPadding: Theme.dp(20)
+    leftPadding: 20
+    rightPadding: 20
 
     Rectangle {
         width: parent.width
-        height: Theme.dp(30)
+        height: 30
         color: Theme.palette.baseColor2
         StatusBaseText {
             anchors.verticalCenter: parent.verticalCenter
@@ -60,7 +60,7 @@ Column {
 
     Rectangle {
         width: parent.width
-        height: Theme.dp(30)
+        height: 30
         color:  Theme.palette.baseColor2
         StatusBaseText {
             anchors.verticalCenter: parent.verticalCenter
@@ -74,7 +74,7 @@ Column {
 
         type: StatusExpandableItem.Type.Secondary
         expandable: true
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         primaryText: "CryptoKitties"
         additionalText: "1456 USD"
         expandableComponent: notImplemented
@@ -85,7 +85,7 @@ Column {
 
         type: StatusExpandableItem.Type.Secondary
         expandable: true
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         primaryText: "Adding Really long text to test scenario of having very long text along with tertiary text"
         additionalText: "564.90 USD"
         expandableComponent: notImplemented
@@ -103,7 +103,7 @@ Column {
 
     Rectangle {
         width: parent.width
-        height: Theme.dp(30)
+        height: 30
         color:  Theme.palette.baseColor2
         StatusBaseText {
             anchors.verticalCenter: parent.verticalCenter
@@ -134,15 +134,15 @@ Column {
         id: notImplemented
         Rectangle {
             anchors.centerIn: parent
-            width: Theme.dp(654)
+            width: 654
             height: infoText.implicitHeight
             color: Theme.palette.baseColor5
             StatusBaseText {
                 id: infoText
                 anchors.centerIn: parent
                 color: Theme.palette.directColor4
-                font.pixelSize: Theme.dp(15)
-                lineHeight: Theme.dp(22)
+                font.pixelSize: 15
+                lineHeight: 22
                 lineHeightMode: Text.FixedHeight
                 font.weight: Font.Medium
                 text: qsTr("Not Implemented")

sandbox/pages/StatusInputPage.qml

@@ -9,25 +9,25 @@ import StatusQ.Controls.Validators 0.1
 import Sandbox 0.1
 
 Column {
-    spacing: Theme.dp(8)
+    spacing: 8
 
     StatusInput {
-        input.placeholderText: "Placeholder"
+        placeholderText: "Placeholder"
     }
 
     StatusInput {
         label: "Label"
-        input.placeholderText: "Disabled"
+        placeholderText: "Disabled"
         input.enabled: false
     }
 
     StatusInput {
-        input.placeholderText: "Clearable"
+        placeholderText: "Clearable"
         input.clearable: true
     }
 
     StatusInput {
-        input.placeholderText: "Invalid"
+        placeholderText: "Invalid"
         input.valid: false
     }
 
@@ -35,40 +35,40 @@ Column {
         label: "Label"
 
         input.icon.name: "search"
-        input.placeholderText: "Input with icon"
+        placeholderText: "Input with icon"
     }
 
     StatusInput {
         label: "Label"
-        input.placeholderText: "Placeholder"
+        placeholderText: "Placeholder"
         input.clearable: true
     }
 
     StatusInput {
         charLimit: 30
-        input.placeholderText: "Placeholder"
+        placeholderText: "Placeholder"
         input.clearable: true
     }
 
     StatusInput {
         label: "Label"
         charLimit: 30
-        input.placeholderText: "Placeholder"
+        placeholderText: "Placeholder"
         input.clearable: true
     }
 
     Item {
-        implicitWidth: Theme.dp(480)
-        implicitHeight: Theme.dp(82)
+        implicitWidth: 480
+        implicitHeight: 82
         z: 100000
         StatusSeedPhraseInput {
             id: statusSeedInput
             anchors.left: parent.left
             anchors.right: parent.right
             height: parent.height
-            textEdit.input.anchors.leftMargin: Theme.dp(16)
-            textEdit.input.anchors.rightMargin: Theme.dp(16)
-            textEdit.input.anchors.topMargin: Theme.dp(11)
+            textEdit.input.anchors.leftMargin: 16
+            textEdit.input.anchors.rightMargin: 16
+            textEdit.input.anchors.topMargin: 11
             textEdit.label: "Input with drop down selection list"
             leftComponentText: "1"
             inputList: ListModel {
@@ -91,14 +91,14 @@ Column {
         errorMessage: "Error message"
         input.clearable: true
         input.valid: false
-        input.placeholderText: "Placeholder"
+        placeholderText: "Placeholder"
     }
 
     StatusInput {
         label: "StatusInput"
         secondaryLabel: "with right icon"
-        input.icon.width: Theme.dp(15)
-        input.icon.height: Theme.dp(11)
+        input.icon.width: 15
+        input.icon.height: 11
         input.icon.name: text !== "" ? "checkmark" : ""
         input.leftIcon: false
     }
@@ -106,15 +106,15 @@ Column {
     StatusInput {
         label: "Label"
         secondaryLabel: "secondary label"
-        input.placeholderText: "Placeholder"
-        input.implicitHeight: Theme.dp(56)
+        placeholderText: "Placeholder"
+        input.implicitHeight: 56
     }
 
     StatusInput {
         id: input
         label: "Label"
         charLimit: 30
-        input.placeholderText: "Input with validator"
+        placeholderText: "Input with validator"
 
         validators: [
             StatusMinLengthValidator {
@@ -132,7 +132,7 @@ Column {
     StatusInput {
         label: "Input with <i>StatusRegularExpressionValidator</i>"
         charLimit: 30
-        input.placeholderText: `Must match regex(${validators[0].regularExpression.toString()}) and <= 30 chars`
+        placeholderText: `Must match regex(${validators[0].regularExpression.toString()}) and <= 30 chars`
         validationMode: StatusInput.ValidationMode.IgnoreInvalidInput
 
         validators: [
@@ -145,10 +145,10 @@ Column {
 
     StatusInput {
         label: "Label"
-        input.placeholderText: "Input width component (right side)"
+        placeholderText: "Input width component (right side)"
         input.rightComponent: StatusIcon {
             icon: "cancel"
-            height: Theme.dp(16)
+            height: 16
             color: Theme.palette.dangerColor1
         }
     }
@@ -156,26 +156,26 @@ Column {
 
     StatusInput {
         input.multiline: true
-        input.placeholderText: "Multiline"
+        placeholderText: "Multiline"
     }
 
     StatusInput {
         input.multiline: true
-        input.placeholderText: "Multiline with static height"
-        input.implicitHeight: Theme.dp(100)
+        placeholderText: "Multiline with static height"
+        input.implicitHeight: 100
     }
 
     StatusInput {
         input.multiline: true
-        input.placeholderText: "Multiline with max/min"
-        input.minimumHeight: Theme.dp(80)
-        input.maximumHeight: Theme.dp(200)
+        placeholderText: "Multiline with max/min"
+        minimumHeight: 80
+        maximumHeight: 200
     }
 
     StatusInput {
         property bool toggled: true
         label: "Input with emoji icon"
-        input.placeholderText: "Enter Name"
+        placeholderText: "Enter Name"
         input.icon.emoji: toggled ? "😁" : "🧸"
         input.icon.color: "blue"
         input.isIconSelectable: true
@@ -187,7 +187,7 @@ Column {
     StatusInput {
         property bool toggled: true
         label: "Input with selectable icon which is not an emoji"
-        input.placeholderText: "Enter Name"
+        placeholderText: "Enter Name"
         input.icon.emoji: ""
         input.icon.name: toggled ? "filled-account" : "image"
         input.icon.color: "blue"
@@ -200,7 +200,6 @@ Column {
     StatusInput {
         label: "Input with inline token selector"
         input.leftComponent: StatusTokenInlineSelector {
-            anchors.verticalCenter: parent.verticalCenter
             tokens: [{amount: 0.1, token: "ETH"},
                      {amount: 10, token: "SNT"},
                      {amount: 15, token: "MANA"}]

sandbox/pages/StatusItemSelectorPage.qml

@@ -0,0 +1,44 @@
+import QtQuick 2.0
+import QtQuick.Layouts 1.14
+
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Core.Utils 0.1
+
+ColumnLayout {
+    spacing: 20
+    StatusItemSelector {
+        id: selector
+        icon: "qrc:/images/SNT.png"
+        iconSize: 24
+        title: "Item Selector Title"
+        defaultItemText: "Example: Empty items"
+        andOperatorText: "and"
+        orOperatorText: "or"
+        popupItem: StatusDropdown {
+            id: dropdown
+            width: 200
+            contentItem: ColumnLayout {
+                spacing: 10
+                StatusInput {
+                    id: input
+                    Layout.fillWidth: true
+                }
+                StatusButton {
+                    Layout.alignment: Qt.AlignHCenter
+                    text: "Add element"
+                    onClicked: {
+                        selector.addItem(input.text, "qrc:/images/SNT.png", selector.itemsModel.count > 0 ? Utils.Operators.Or : Utils.Operators.None)
+                        dropdown.close()
+                    }
+                }
+            }
+        }
+    }
+
+    StatusButton {
+        Layout.alignment: Qt.AlignHCenter
+        text: "Clear list"
+        onClicked: { selector.itemsModel.clear() }
+    }
+}

sandbox/pages/StatusListPickerPage.qml

@@ -11,14 +11,14 @@ import "../demoapp/data" 1.0
 GridLayout {
     id: root
     columns: 1
-    rowSpacing: Theme.dp(150)
+    rowSpacing: 150
 
     GridLayout {
         Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
         rows: 4
         columns: 2
-        rowSpacing: Theme.dp(170)
-        columnSpacing: Theme.dp(150)
+        rowSpacing: 170
+        columnSpacing: 150
         z: 100
         StatusListPicker {
             id: languagePicker
@@ -56,15 +56,15 @@ GridLayout {
     StatusBaseText {
         id: pageDesc
         Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-        height: Theme.dp(100)
-        width: Theme.dp(500)
+        height: 100
+        width: 500
         text: "4 different configurations for the `StatusListPicker` component:\n
     * Single selection. \n
     * Single selection but dynamically changed to multiple selection (model provides multiple selected items).\n
     * Multiple selection.\n
     * Multiple selection and displayed name is the symbol + shortName\n"
         color: Theme.palette.baseColor1
-        font.pixelSize: Theme.dp(15)
+        font.pixelSize: 15
     }
 
     // Outsite area

sandbox/pages/StatusMacNotificationPage.qml

@@ -3,12 +3,11 @@ import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14
 
 import StatusQ.Platform 0.1
-import StatusQ.Core.Theme 0.1
 
 import Sandbox 0.1
 
 Column {
-    spacing: Theme.dp(8)
+    spacing: 8
 
     StatusMacNotification {
         name: "Some name"

sandbox/pages/StatusPasswordStrengthIndicatorPage.qml

@@ -1,11 +1,10 @@
 import QtQuick.Layouts 1.14
 import StatusQ.Controls 0.1
-import StatusQ.Core.Theme 0.1
 
 GridLayout {
     columns: 1
-    columnSpacing: Theme.dp(5)
-    rowSpacing: Theme.dp(5)
+    columnSpacing: 5
+    rowSpacing: 5
 
     StatusPasswordStrengthIndicator {
         id: veryweakPw

sandbox/pages/StatusPinInputPage.qml

@@ -8,7 +8,7 @@ import StatusQ.Controls.Validators 0.1
 
 Column {
     id: root
-    spacing: Theme.dp(25)
+    spacing: 25
     Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
 
     // PIN input that accepts only numbers
@@ -16,7 +16,7 @@ Column {
         anchors.horizontalCenter: parent.horizontalCenter
         color: Theme.palette.directColor1
         text: "Enter Keycard PIN"
-        font.pixelSize: Theme.dp(30)
+        font.pixelSize: 30
         font.bold: true
     }
 
@@ -30,23 +30,23 @@ Column {
         anchors.horizontalCenter: parent.horizontalCenter
         color: Theme.palette.dangerColor1
         text: "Only numbers allowed"
-        font.pixelSize: Theme.dp(16)
+        font.pixelSize: 16
     }
 
     StatusBaseText {
         anchors.horizontalCenter: parent.horizontalCenter
         color: Theme.palette.directColor1
         text: "Introduced PIN: " + numbersPinInput.pinInput
-        font.pixelSize: Theme.dp(12)
+        font.pixelSize: 12
     }
 
     // PIN input that accepts input depending on the regular expression definition
     StatusBaseText {
-        topPadding: Theme.dp(100)
+        topPadding: 100
         anchors.horizontalCenter: parent.horizontalCenter
         color: Theme.palette.directColor1
         text: "Enter another Keycard PIN"
-        font.pixelSize: Theme.dp(30)
+        font.pixelSize: 30
         font.bold: true
     }
 
@@ -54,8 +54,8 @@ Column {
         id: regexPinInput
         anchors.horizontalCenter: parent.horizontalCenter
         validator: StatusRegularExpressionValidator { regularExpression: /[0-9A-Za-z@]+/ }
-        circleDiameter: Theme.dp(22)
-        circleSpacing: Theme.dp(22)
+        circleDiameter: 22
+        circleSpacing: 22
         pinLen: 7
     }
 
@@ -63,13 +63,13 @@ Column {
         anchors.horizontalCenter: parent.horizontalCenter
         color: Theme.palette.dangerColor1
         text: "Only alphanumeric characters and '@' allowed"
-        font.pixelSize: Theme.dp(16)
+        font.pixelSize: 16
     }
 
     StatusBaseText {
         anchors.horizontalCenter: parent.horizontalCenter
         color: Theme.palette.directColor1
         text: "Introduced PIN: " + regexPinInput.pinInput
-        font.pixelSize: Theme.dp(12)
+        font.pixelSize: 12
     }
 }

sandbox/pages/StatusPopupMenuPage.qml

@@ -9,8 +9,8 @@ import StatusQ.Popups 0.1
 
 GridLayout {
     columns: 1
-    columnSpacing: Theme.dp(5)
-    rowSpacing: Theme.dp(5)
+    columnSpacing: 5
+    rowSpacing: 5
 
     StatusButton {
         text: "Simple"
@@ -28,6 +28,11 @@ GridLayout {
         onClicked: customMenu.popup()
     }
 
+    StatusButton {
+        text: "Menu with custom font settings"
+        onClicked: differentFontMenu.popup()
+    }
+
 
     StatusPopupMenu {
         id: simpleMenu
@@ -84,7 +89,7 @@ GridLayout {
         subMenuItemIcons: [
             { icon: "chat" },
             { 
-                source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" 
+                source: "qrc:/demoapp/data/profile-image-1.jpeg"
             },
             { 
                 isLetterIdenticon: true, 
@@ -110,7 +115,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
 
             StatusMenuItem { 
                 text: "Pascal"
-                image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+                image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
             }
         }
 
@@ -147,4 +152,22 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             }
         }
     }
+
+    StatusPopupMenu {
+        id: differentFontMenu
+        StatusMenuItem {
+            text: "Bold"
+            fontSettings.bold: true
+        }
+
+        StatusMenuItem {
+            text: "Italic"
+            fontSettings.italic: true
+        }
+
+        StatusMenuItem {
+            text: "16px"
+            fontSettings.pixelSize: 16
+        }
+    }
 }

sandbox/pages/StatusSelectPage.qml

@@ -9,7 +9,7 @@ import StatusQ.Popups 0.1
 
 import Sandbox 0.1
 Column {
-    spacing: Theme.dp(8)
+    spacing: 8
 
     StatusSelect {
         id: select

sandbox/pages/StatusTabBarButtonPage.qml

@@ -7,7 +7,7 @@ import StatusQ.Controls 0.1
 import Sandbox 0.1
 
 Column {
-    spacing: Theme.dp(8)
+    spacing: 8
 
     StatusTabBar {
         StatusTabButton {

sandbox/pages/StatusTabBarIconButtonPage.qml

@@ -9,7 +9,7 @@ import StatusQ.Controls 0.1
 import Sandbox 0.1
 
 Column {
-    spacing: Theme.dp(8)
+    spacing: 8
 
     Row {
         StatusTabBarIconButton {

sandbox/pages/StatusTabSwitchPage.qml

@@ -3,12 +3,11 @@ import QtQuick.Layouts 1.14
 import QtQuick.Controls 2.13
 
 import StatusQ.Controls 0.1
-import StatusQ.Core.Theme 0.1
 
 GridLayout {
     columns: 1
-    columnSpacing: Theme.dp(5)
-    rowSpacing: Theme.dp(5)
+    columnSpacing: 5
+    rowSpacing: 5
 
     StatusSwitchTabBar {
         StatusSwitchTabButton {

sandbox/pages/StatusTagSelectorPage.qml

@@ -1,7 +1,6 @@
 import QtQuick 2.14
 
 import StatusQ.Components 0.1
-import StatusQ.Core.Theme 0.1
 
 Item {
     id: root
@@ -20,7 +19,7 @@ Item {
         ListElement {
             publicId: "0x1"
             name: "vitalikbuterin"
-            icon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            icon: "qrc:/demoapp/data/profile-image-1.jpeg"
             isIdenticon: false
             onlineStatus: 1
             isReadonly: false
@@ -57,8 +56,8 @@ Item {
 
     StatusTagSelector {
         id: tagSelector
-        width: Theme.dp(650)
-        height: Theme.dp(44)
+        width: 650
+        height: 44
         anchors.centerIn: parent
         namesModel: root.asortedContacts
         toLabelText: qsTr("To: ")

sandbox/pages/StatusToastMessagePage.qml

@@ -1,7 +1,6 @@
 import QtQuick 2.14
 
 import StatusQ.Components 0.1
-import StatusQ.Core.Theme 0.1
 
 Item {
     id: root
@@ -10,7 +9,7 @@ Item {
     Column {
         id: toastArea
         anchors.centerIn: parent
-        spacing: Theme.dp(8)
+        spacing: 8
         Repeater {
             id: toastRepeater
             width: parent.width

sandbox/pages/StatusWalletColorButtonPage.qml

@@ -11,7 +11,7 @@ Column {
     spacing: 8
 
     Row {
-        spacing: Theme.dp(4)
+        spacing: 4
         StatusWalletColorButton {
             icon.color: Theme.palette.miscColor1
             selected: true

sandbox/pages/StatusWalletColorSelectPage.qml

@@ -9,7 +9,7 @@ import StatusQ.Controls 0.1
 import Sandbox 0.1
 
 Column {
-    spacing: Theme.dp(8)
+    spacing: 8
 
     StatusWalletColorSelect {
         model: Theme.palette.userCustomizationColors

sandbox/pages/StatusWizardStepperPage.qml

@@ -6,8 +6,8 @@ import StatusQ.Core.Theme 0.1
 
 Item {
     id: root
-    width: Theme.dp(800)
-    height: Theme.dp(100)
+    width: 800
+    height: 100
 
     //Simulate animation between steps
     property bool stepsCompleted: false
@@ -44,7 +44,7 @@ Item {
         anchors.horizontalCenter: parent.horizontalCenter
         color: Theme.palette.directColor1
         text: "Press Ctrl+R to run the animation"
-        font.pixelSize: Theme.dp(17)
+        font.pixelSize: 17
     }
 
     SequentialAnimation {
@@ -91,9 +91,9 @@ Item {
 
     StatusWizardStepper {
         id: wizardStepper
-        width: (parent.width - Theme.dp(50))
+        width: (parent.width - 50)
         anchors.top: indicLabel.bottom
-        anchors.topMargin: Theme.dp(16)
+        anchors.topMargin: 16
         anchors.horizontalCenter: parent.horizontalCenter
         stepsModel: stepsListModel
     }

sandbox/qml.qrc

@@ -1,22 +1,5 @@
 <RCC>
     <qresource prefix="/">
-        <file>main.qml</file>
-        <file>pages/StatusAccountSelectorPage.qml</file>
-        <file>pages/StatusAddressPage.qml</file>
-        <file>pages/StatusAssetSelectorPage.qml</file>
-        <file>pages/StatusChatCommandButtonPage.qml</file>
-        <file>pages/StatusChatInfoToolBarPage.qml</file>
-        <file>pages/StatusColorSelectorPage.qml</file>
-        <file>pages/StatusExpandableSettingsItemPage.qml</file>
-        <file>pages/StatusInputPage.qml</file>
-        <file>pages/StatusMacNotificationPage.qml</file>
-        <file>pages/StatusPopupMenuPage.qml</file>
-        <file>pages/StatusSelectPage.qml</file>
-        <file>pages/StatusTabBarIconButtonPage.qml</file>
-        <file>pages/StatusTabSwitchPage.qml</file>
-        <file>pages/StatusWalletColorButtonPage.qml</file>
-        <file>pages/StatusWalletColorSelectPage.qml</file>
-        <file>pages/StatusPasswordStrengthIndicatorPage.qml</file>
         <file>controls/Buttons.qml</file>
         <file>controls/Controls.qml</file>
         <file>controls/Icons.qml</file>
@@ -24,49 +7,78 @@
         <file>controls/ListItems.qml</file>
         <file>controls/Others.qml</file>
         <file>controls/Popups.qml</file>
+        <file>demoapp/data/logo-test-image.png</file>
+        <file>demoapp/data/Models.qml</file>
+        <file>demoapp/data/qmldir</file>
         <file>demoapp/ChatChannelView.qml</file>
         <file>demoapp/CreateChatView.qml</file>
         <file>demoapp/DemoCommunityDetailModal.qml</file>
         <file>demoapp/DemoContactRequestsModal.qml</file>
         <file>demoapp/StatusAppChatView.qml</file>
+        <file>demoapp/StatusAppCommunitiesPortalView.qml</file>
         <file>demoapp/StatusAppCommunityView.qml</file>
         <file>demoapp/StatusAppProfileSettingsView.qml</file>
-        <file>demoapp/data/Models.qml</file>
-        <file>demoapp/data/qmldir</file>
-        <file>demoapp/data/logo-test-image.png</file>
-        <file>DemoApp.qml</file>
-        <file>ThemeSwitch.qml</file>
-        <file>pages/StatusColorSelectorGridPage.qml</file>
-        <file>pages/StatusListPickerPage.qml</file>
-        <file>pages/StatusPinInputPage.qml</file>
-        <file>pages/StatusTagSelectorPage.qml</file>
-        <file>pages/StatusToastMessagePage.qml</file>
-        <file>pages/StatusWizardStepperPage.qml</file>
-        <file>pages/StatusTabBarButtonPage.qml</file>
-        <file>pages/StatusColorSpacePage.qml</file>
+        <file>images/Coinbase.png</file>
+        <file>images/CoinBaseCommunityBanner.png</file>
+        <file>images/CommunityBanner1.png</file>
         <file>images/CryptoKitties.png</file>
         <file>images/CryptoPunks.png</file>
         <file>images/Dragonerum.png</file>
-        <file>images/FriendsBenefits.png</file>
-        <file>images/logo-test-image.png</file>
-        <file>images/P2PCrypto.png</file>
-        <file>images/SNT.png</file>
-        <file>images/Socks.png</file>
-        <file>images/StatusPunks.png</file>
-        <file>images/CommunityBanner1.png</file>
-        <file>images/Coinbase.png</file>
-        <file>images/CoinBaseCommunityBanner.png</file>
         <file>images/DribbbleCommunityBanner.png</file>
         <file>images/Ethereum.png</file>
         <file>images/EthereumCommunityBanner.png</file>
         <file>images/Fluff.png</file>
+        <file>images/FriendsBenefits.png</file>
+        <file>images/logo-test-image.png</file>
+        <file>images/P2PCrypto.png</file>
+        <file>images/RARI.png</file>
         <file>images/Rarible.png</file>
         <file>images/RaribleCommunityBanner.png</file>
+        <file>images/SNT.png</file>
+        <file>images/Socks.png</file>
         <file>images/Spotify.png</file>
         <file>images/SpotifyCommunityBanner.png</file>
         <file>images/SR.png</file>
+        <file>images/SRToken.png</file>
+        <file>images/StatusPunks.png</file>
         <file>images/SuperRareCommunityBanner.png</file>
+        <file>pages/StatusAccountSelectorPage.qml</file>
+        <file>pages/StatusAddressPage.qml</file>
+        <file>pages/StatusAssetSelectorPage.qml</file>
+        <file>pages/StatusCardPage.qml</file>
+        <file>pages/StatusChatCommandButtonPage.qml</file>
+        <file>pages/StatusChatInfoToolBarPage.qml</file>
+        <file>pages/StatusColorSelectorGridPage.qml</file>
+        <file>pages/StatusColorSelectorPage.qml</file>
+        <file>pages/StatusColorSpacePage.qml</file>
+        <file>pages/StatusCommunityCardPage.qml</file>
+        <file>pages/StatusCommunityTagsPage.qml</file>
+        <file>pages/StatusDialogPage.qml</file>
+        <file>pages/StatusExpandableSettingsItemPage.qml</file>
+        <file>pages/StatusImageCropPanelPage.qml</file>
+        <file>pages/StatusInputPage.qml</file>
+        <file>pages/StatusItemSelectorPage.qml</file>
+        <file>pages/StatusListPickerPage.qml</file>
+        <file>pages/StatusMacNotificationPage.qml</file>
+        <file>pages/StatusPasswordStrengthIndicatorPage.qml</file>
+        <file>pages/StatusPinInputPage.qml</file>
+        <file>pages/StatusPopupMenuPage.qml</file>
+        <file>pages/StatusSelectPage.qml</file>
+        <file>pages/StatusTabBarButtonPage.qml</file>
+        <file>pages/StatusTabBarIconButtonPage.qml</file>
+        <file>pages/StatusTabSwitchPage.qml</file>
+        <file>pages/StatusTagSelectorPage.qml</file>
+        <file>pages/StatusToastMessagePage.qml</file>
+        <file>pages/StatusWalletColorButtonPage.qml</file>
+        <file>pages/StatusWalletColorSelectPage.qml</file>
+        <file>pages/StatusWizardStepperPage.qml</file>
+        <file>DemoApp.qml</file>
+        <file>main.qml</file>
+        <file>ThemeSwitch.qml</file>
+        <file>examples/FilteringSorting.qml</file>
         <file>images/RARI.png</file>
         <file>images/SRToken.png</file>
+        <file>demoapp/data/profile-image-1.jpeg</file>
+        <file>demoapp/data/profile-image-2.jpeg</file>
     </qresource>
 </RCC>

sandbox/sandbox.pro

@@ -1,96 +0,0 @@
-QT += quick svg
-
-CONFIG += c++11 warn_on qtquickcompiler
-
-QML_IMPORT_PATH= $$PWD/../src
-
-DEFINES += QT_DEPRECATED_WARNINGS
-
-
-# You can make your code fail to compile if it uses deprecated APIs.
-# In order to do so, uncomment the following line.
-#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0
-
-SOURCES += \
-        handler.cpp \
-        main.cpp \
-        sandboxapp.cpp \
-        spellchecker.cpp \
-
-!macx {
-    SOURCES += statuswindow.cpp
-}
-
-TARGET = sandboxapp
-DESTDIR = $$PWD/bin
-
-DESTDIR = $$PWD/bin
-
-macx {
-    CONFIG -= app_bundle
-    OBJECTIVE_SOURCES += \
-        statuswindow_mac.mm
-
-    hunspellTarget.depends = FORCE
-    hunspellTarget.commands = brew install hunspell
-    QMAKE_EXTRA_TARGETS += hunspellTarget
-
-    exists (/usr/local/lib/libhunspell-1.7.a) {
-        LIBS += -L"/usr/local/lib" -lhunspell-1.7
-        INCLUDEPATH += /usr/local/include/hunspell
-        DEFINES += USE_HUNSPELL
-        message("hunspell exists in /usr/local/lib")
-    }
-
-    copydata.commands = $(COPY_DIR) $$PWD/dictionaries $$DESTDIR
-    first.depends = $(first) copydata
-    export(first.depends)
-    export(copydata.commands)
-    QMAKE_EXTRA_TARGETS += first copydata
-}
-
-ios {
-   LIBS += -framework UIKit
-
-   QMAKE_TARGET_BUNDLE_PREFIX = "im.status"
-   #QMAKE_XCODE_CODE_SIGN_IDENTITY = "iPhone Developer"
-   MY_DEVELOPMENT_TEAM.name = "STATUS HOLDINGS PTE.LTD"
-   MY_DEVELOPMENT_TEAM.value = "DTX7Z4U3YA"
-   QMAKE_MAC_XCODE_SETTINGS += MY_DEVELOPMENT_TEAM
-
-}
-
-RESOURCES += qml.qrc \
-            $$PWD/../statusq.qrc
-
-# Default rules for deployment.
-qnx: target.path = /tmp/$${TARGET}/bin
-else: unix:!android: target.path = /opt/$${TARGET}/bin
-!isEmpty(target.path): INSTALLS += target
-#OTHER_FILES += $$files($$PWD/../src/*, true)
-
-HEADERS += \
-    handler.h \
-    sandboxapp.h \
-    statuswindow.h \
-    spellchecker.h
-
-OTHER_FILES += $$files($$PWD/../*.qml, true)
-OTHER_FILES += $$files($$PWD/*.qml, true)
-
-android {
-
-DISTFILES += \
-    android/AndroidManifest.xml \
-    android/build.gradle \
-    android/gradle/wrapper/gradle-wrapper.jar \
-    android/gradle/wrapper/gradle-wrapper.properties \
-    android/gradlew \
-    android/gradlew.bat \
-    android/res/values/libs.xml
-
-    contains(ANDROID_TARGET_ARCH,armeabi-v7a) {
-        ANDROID_PACKAGE_SOURCE_DIR = \
-            $$PWD/android
-    }
-}

sandbox/sandboxapp.cpp

@@ -20,7 +20,7 @@ void SandboxApp::startEngine()
     qmlRegisterType<SpellChecker>("Sandbox", 0, 1, "Spellchecker");
 
 #ifdef QT_DEBUG
-    const QUrl url = QUrl::fromLocalFile(applicationDirPath() + "/../main.qml");
+    const QUrl url = QUrl::fromLocalFile(SRC_DIR + QStringLiteral("/main.qml"));
 #else
     const QUrl url(QStringLiteral("qrc:/main.qml"));
 #endif
@@ -29,9 +29,9 @@ void SandboxApp::startEngine()
 
 
 #ifdef QT_DEBUG
-    m_engine.addImportPath(applicationDirPath() + "/../../src");
+    m_engine.addImportPath(SRC_DIR + QStringLiteral("/../src"));
 #else
-    m_engine.addImportPath(QStringLiteral("qrc:/src"));
+    m_engine.addImportPath(QStringLiteral(":/"));
 #endif
     qDebug() << m_engine.importPathList();
     QObject::connect(&m_engine, &QQmlApplicationEngine::objectCreated,

sandbox/scripts/build

@@ -1,10 +1,4 @@
 #!/bin/bash
 
-make clean
-if [[ $OSTYPE == 'darwin'* ]]
-then
-  qmake sandbox.pro -spec macx-clang CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
-else
-  qmake sandbox.pro CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
-fi
-make
+cmake -B build
+cmake --build build

sandbox/spellchecker.cpp

@@ -9,7 +9,7 @@
 #include <QLocale>
 
 #include <QRegularExpression>
-#include <QApplication>
+#include <QGuiApplication>
 #include <QDir>
 
 SpellChecker::SpellChecker(QObject *parent)
@@ -53,8 +53,8 @@ void SpellChecker::initHunspell()
         delete m_hunspell;
     }
 
-    QString dictFile = QApplication::applicationDirPath() + "/dictionaries/" + m_lang  + "/index.dic";
-    QString affixFile = QApplication::applicationDirPath() + "/dictionaries/" + m_lang  + "/index.aff";
+    QString dictFile = QGuiApplication::applicationDirPath() + "/dictionaries/" + m_lang  + "/index.dic";
+    QString affixFile = QGuiApplication::applicationDirPath() + "/dictionaries/" + m_lang  + "/index.aff";
     QByteArray dictFilePathBA = dictFile.toLocal8Bit();
     QByteArray affixFilePathBA = affixFile.toLocal8Bit();
     m_hunspell = new Hunspell(affixFilePathBA.constData(),

sandbox/statuswindow.cpp

@@ -1,5 +1,33 @@
 #include "statuswindow.h"
 
+StatusWindow::StatusWindow(QQuickWindow *parent)
+    : QQuickWindow(parent)
+    , m_isFullScreen(false)
+{
+    removeTitleBar();
+
+    connect(this, &QQuickWindow::windowStateChanged, [&](Qt::WindowState windowState) {
+        if (windowState == Qt::WindowNoState) {
+            removeTitleBar();
+            m_isFullScreen = false;
+            emit isFullScreenChanged();
+        } else if (windowState == Qt::WindowFullScreen) {
+            m_isFullScreen = true;
+            emit isFullScreenChanged();
+            showTitleBar();
+        }
+    });
+}
+
+void StatusWindow::updatePosition()
+{
+    auto point = QPoint(screen()->geometry().center().x() - geometry().width() / 2,
+                        screen()->geometry().center().y() - geometry().height() / 2);
+    if (point != this->position()) {
+        this->setPosition(point);
+    }
+}
+
 void StatusWindow::toggleFullScreen()
 {
     if (m_isFullScreen) {
@@ -16,10 +44,26 @@ bool StatusWindow::isFullScreen() const
 
 void StatusWindow::removeTitleBar()
 {
-
+#ifdef Q_OS_WIN
+    removeTitleBarWin();
+#elif defined Q_OS_MACOS
+    removeTitleBarMac();
+#endif
 }
 
 void StatusWindow::showTitleBar()
 {
-
+#ifdef Q_OS_WIN
+    showTitleBarWin();
+#elif defined Q_OS_MACOS
+    showTitleBarMac();
+#endif
 }
+
+#ifdef Q_OS_WIN
+void StatusWindow::removeTitleBarWin()
+{}
+
+void StatusWindow::showTitleBarWin()
+{}
+#endif

sandbox/statuswindow.h

@@ -11,40 +11,11 @@ class StatusWindow: public QQuickWindow
     Q_PROPERTY(bool isFullScreen READ isFullScreen NOTIFY isFullScreenChanged)
 
 public:
-    struct EventCallbacks {
-        std::function<void()> onResize;
-        std::function<void()> willExitFullScreen;
-        std::function<void()> didExitFullScreen;
-    };
-
-    explicit StatusWindow(QWindow *parent = nullptr)
-        : QQuickWindow(parent),
-          m_isFullScreen(false)
-    {
-        removeTitleBar();
-
-        connect(this, &QQuickWindow::windowStateChanged, [&](Qt::WindowState windowState) {
-            if (windowState == Qt::WindowNoState) {
-                removeTitleBar();
-                m_isFullScreen = false;
-                emit isFullScreenChanged();
-            } else if (windowState == Qt::WindowFullScreen) {
-                m_isFullScreen = true;
-                emit isFullScreenChanged();
-                showTitleBar();
-            }
-        });
-
-    }
+    explicit StatusWindow(QQuickWindow *parent = nullptr);
 
     Q_INVOKABLE void toggleFullScreen();
 
-    Q_INVOKABLE void updatePosition() {
-        auto point = QPoint(screen()->geometry().center().x() - geometry().width() / 2, screen()->geometry().center().y() - geometry().height() / 2);
-        if (point != this->position()) {
-            this->setPosition(point);
-        }
-    }
+    Q_INVOKABLE void updatePosition();
 
     bool isFullScreen() const;
 
@@ -54,10 +25,15 @@ signals:
 private:
     void removeTitleBar();
     void showTitleBar();
-    void initCallbacks();
+#ifdef Q_OS_WIN
+    void removeTitleBarWin();
+    void showTitleBarWin();
+#elif defined Q_OS_MACOS
+    void removeTitleBarMac();
+    void showTitleBarMac();
+#endif
 
 private:
-    EventCallbacks m_callbacks;
     bool m_isFullScreen;
 };
 

sandbox/statuswindow_mac.mm

@@ -12,21 +12,7 @@
 #include <AppKit/NSButton.h>
 #include <AppKit/AppKit.h>
 
-void StatusWindow::toggleFullScreen()
-{
-    if (m_isFullScreen) {
-        showNormal();
-    } else {
-        showFullScreen();
-    }
-}
-
-bool StatusWindow::isFullScreen() const
-{
-    return m_isFullScreen;
-}
-
-void StatusWindow::removeTitleBar()
+void StatusWindow::removeTitleBarMac()
 {
     NSView *nsView = reinterpret_cast<NSView*>(this->winId());
     NSWindow *window = [nsView window];
@@ -39,7 +25,7 @@ void StatusWindow::removeTitleBar()
     [titleBarContainerView setHidden:YES];
 }
 
-void StatusWindow::showTitleBar()
+void StatusWindow::showTitleBarMac()
 {
     NSView *nsView = reinterpret_cast<NSView*>(this->winId());
     NSWindow *window = [nsView window];

src/StatusQ/Animations/SkeletonGradientStop.qml

@@ -16,6 +16,7 @@ GradientStop {
     NumberAnimation on position {
         easing.type: Easing.Linear
         loops: Animation.Infinite
+        running: visible
         from: root.from
         to: from + 4
         duration: 2000

src/StatusQ/Components/StatusAddress.qml

@@ -13,7 +13,7 @@ StatusBaseText {
     property real maxWidth: width
 
     font.family: Theme.palette.monoFont.name
-    font.pixelSize: Theme.dp(13)
+    font.pixelSize: 13
     elide: Text.ElideMiddle
     color: Theme.palette.baseColor1
 

src/StatusQ/Components/StatusBadge.qml

@@ -7,18 +7,18 @@ Rectangle {
 
     property int value
 
-    implicitHeight: statusBadge.value > 0 ? Theme.dp(18) + statusBadge.border.width : Theme.dp(10) + statusBadge.border.width
+    implicitHeight: statusBadge.value > 0 ? 18 + statusBadge.border.width : 10 + statusBadge.border.width
     implicitWidth: {
-        if (statusBadge.value > Theme.dp(99)) {
-            return Theme.dp(28) + statusBadge.border.width
+        if (statusBadge.value > 99) {
+            return 28 + statusBadge.border.width
         }
-        if (statusBadge.value > Theme.dp(9)) {
-            return Theme.dp(26) + statusBadge.border.width
+        if (statusBadge.value > 9) {
+            return 26 + statusBadge.border.width
         }
         if (statusBadge.value > 0) {
-            return Theme.dp(18) + statusBadge.border.width
+            return 18 + statusBadge.border.width
         }
-        return Theme.dp(10) + statusBadge.border.width
+        return 10 + statusBadge.border.width
     }
     radius: height / 2
     color: Theme.palette.primaryColor1
@@ -26,10 +26,12 @@ Rectangle {
     StatusBaseText {
         id: value
         visible: statusBadge.value > 0
-        font.pixelSize: statusBadge.value > Theme.dp(99) ? Theme.dp(10) : Theme.dp(12)
+        font.pixelSize: statusBadge.value > 99 ? 10 : 12
         font.weight: Font.Medium
         color: Theme.palette.statusBadge.foregroundColor
         anchors.centerIn: parent
+        anchors.verticalCenterOffset: statusBadge.border.width/4
+        anchors.horizontalCenterOffset: statusBadge.border.width/4
         text: {
             if (statusBadge.value > 99) {
                 return qsTr("99+");

src/StatusQ/Components/StatusCard.qml

@@ -0,0 +1,498 @@
+import QtQuick 2.13
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+/*!
+   \qmltype StatusCard
+   \inherits Rectangle
+   \inqmlmodule StatusQ.Components
+   \since StatusQ.Components 0.1
+   \brief This component represents a StatusCard as defined in design under https://www.figma.com/file/FkFClTCYKf83RJWoifWgoX/Wallet-v2?node-id=3161%3A171040
+
+   There is an advanced mode available where a StatusInput is provided for the user to be able to change values.
+
+   Example of how the component looks like:
+   \image status_card.png
+
+   Example of how to use it:
+   \qml
+        StatusCard {
+            id: card
+            primaryText: "Mainnet"
+            secondaryText: "75"
+            tertiaryText: "BALANCE: " + 250
+            cardIconName: "status"
+            advancedMode: false
+        }
+   \endqml
+   For a list of components available see StatusQ.
+*/
+
+Rectangle {
+    id: root
+
+    /*!
+       \qmlproperty string StatusCard::disabledText
+       This property is the text to be shown when the card is disabled
+    */
+    property string disabledText: ""
+    /*!
+       \qmlproperty bool StatusCard::disabled
+        This property holds if the card is disbaled
+    */
+    property bool disabled: false
+
+    /*!
+       \qmlproperty bool StatusCard::clickable
+        This property holds if the card is clickable
+    */
+    property bool clickable: true
+
+    /*!
+       \qmlproperty bool StatusCard::advancedMode
+       This property holds if advanced mode is on for the StatusCard component
+    */
+    property bool advancedMode: false
+    /*!
+       \qmlproperty int StatusCard::lockTimeout
+       This property enables user to customise the amount of time given to the user to enter a new value in
+       advanced mode before it locked for any new changes
+    */
+    property int lockTimeout: 1500
+
+    /*!
+       \qmlproperty alias StatusCard::primaryText
+       Used to set Primary text in the StatusCard
+    */
+    property alias primaryText: primaryText.text
+    /*!
+       \qmlproperty string StatusCard::secondaryText
+       Used to set Secondary text in the StatusCard
+    */
+    property string secondaryText: ""
+    /*!
+       \qmlproperty alias StatusCard::tertiaryText
+       Used to set Tertiary text in the StatusCard
+    */
+    property alias tertiaryText: tertiaryText.text
+    /*!
+       \qmlproperty alias StatusCard::advancedInputText
+       Used to set text in the StatusInput in advancedMode
+    */
+    property alias advancedInputText: advancedInput.text
+    /*!
+       \qmlproperty alias StatusCard::errorIconName
+       Used to assign an icon to the error icon in StatusCard
+    */
+    property alias errorIconName: errorIcon.icon
+    /*!
+       \qmlproperty alias StatusCard::cardIconName
+       Used to assign an icon to the card icon in StatusCard
+    */
+    property alias cardIconName: cardIcon.icon
+
+    /*!
+       \qmlproperty alias StatusCard::primaryLabel
+       This property allows user to customize the primary label in the StatusCard
+    */
+    property alias primaryLabel: primaryText
+    /*!
+       \qmlproperty alias StatusCard::secondaryLabel
+       This property allows user to customize the secondary label in the StatusCard
+    */
+    property alias secondaryLabel: secondaryLabel
+    /*!
+       \qmlproperty alias StatusCard::tertiaryLabel
+       This property allows user to customize the tertiary label in the StatusCard
+    */
+    property alias tertiaryLabel: tertiaryText
+    /*!
+       \qmlproperty alias StatusCard::advancedInput
+       This property allows user to customize the StatusInput in advanced mode
+    */
+    property alias advancedInput: advancedInput
+    /*!
+       \qmlproperty alias StatusCard::errorIcon
+       This property allows user to customize the error icon in the StatusCard
+    */
+    property alias errorIcon: errorIcon
+    /*!
+       \qmlproperty alias StatusCard::cardIcon
+       This property allows user to customize the card icon in the StatusCard
+    */
+    property alias cardIcon: cardIcon
+
+    /*!
+        \qmlsignal StatusCard::clicked
+        This signal is emitted when the card is clicked
+    */
+    signal clicked()
+
+    /*!
+       \qmlproperty string StatusCard::state
+       This property holds the states of the StatusCard.
+       Possible values are:
+        \ "default" : Normal state
+        \ "unavailable" : Unavailable state
+        \ "unpreferred": Not preffered state
+        \ "error" : Error state
+    */
+    state: "default"
+
+    implicitHeight: advancedInput.visible ? 90 : 76
+    implicitWidth: 128
+    radius: 8
+
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        acceptedButtons: Qt.LeftButton
+        enabled: root.clickable && root.state !== "unavailable"
+        onClicked: {
+            disabled = !disabled
+            root.clicked()
+        }
+    }
+
+    RowLayout {
+        id: layout
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.leftMargin: 8
+        anchors.rightMargin: 8
+        anchors.topMargin: 8
+        ColumnLayout {
+            Layout.maximumWidth: root.width - cardIcon.width - 24
+            StatusBaseText {
+                id: primaryText
+                Layout.maximumWidth: parent.width
+                font.pixelSize: 15
+                font.weight: Font.Medium
+                elide: Text.ElideRight
+            }
+            RowLayout {
+                id: basicInput
+                StatusBaseText {
+                    id: secondaryLabel
+                    font.pixelSize: 13
+                    font.weight: Font.Medium
+                }
+                StatusIcon {
+                    id: errorIcon
+                    width: 14
+                    height: 14
+                    Layout.alignment: Qt.AlignTop
+                    icon: "tiny/warning"
+                    color: Theme.palette.pinColor1
+                }
+            }
+
+            StatusInput {
+                id: advancedInput
+                property bool locked: false
+                implicitWidth: 80
+                maximumHeight: 32
+                topPadding: 0
+                bottomPadding: 0
+                leftPadding: 8
+                rightPadding: 5
+                input.edit.font.pixelSize: 13
+                input.edit.readOnly: locked || disabled
+                input.rightComponent: Row {
+                    width: implicitWidth
+                    spacing: 4
+                    StatusFlatRoundButton {
+                        anchors.verticalCenter: parent.verticalCenter
+                        width: 12
+                        height: 12
+                        icon.name: advancedInput.locked ? "lock" : "unlock"
+                        icon.width: 12
+                        icon.height: 12
+                        icon.color: advancedInput.locked ? Theme.palette.primaryColor1 : Theme.palette.baseColor1
+                        type: StatusFlatRoundButton.Type.Secondary
+                        enabled: !disabled
+                        onClicked: {
+                            advancedInput.locked = !advancedInput.locked
+                            waitTimer.restart()
+                        }
+                    }
+                    StatusFlatRoundButton {
+                        width: 14
+                        height: 14
+                        icon.name: "clear"
+                        icon.width: 14
+                        icon.height: 14
+                        icon.color: Theme.palette.baseColor1
+                        type: StatusFlatRoundButton.Type.Secondary
+                        onClicked: advancedInput.edit.clear()
+                    }
+                }
+                onTextChanged: {
+                    locked = false
+                    waitTimer.restart()
+                }
+                Timer {
+                    id: waitTimer
+                    interval: lockTimeout
+                    onTriggered: {
+                        if(advancedInput.edit.text)
+                            advancedInput.locked = true
+                    }
+                }
+            }
+            StatusBaseText {
+                id: tertiaryText
+                font.pixelSize: 10
+            }
+        }
+        StatusIcon {
+            id: cardIcon
+            Layout.alignment: Qt.AlignTop | Qt.AlignRight
+            Layout.preferredHeight: 32
+            Layout.preferredWidth: 32
+            mipmap: true
+        }
+    }
+
+    states: [
+        State {
+            name: "default"
+            PropertyChanges {
+                target: root
+                color: disabled ? Theme.palette.baseColor4 : "transparent"
+            }
+            PropertyChanges {
+                target: root
+                border.color: disabled ? "transparent" : Theme.palette.primaryColor2
+            }
+            PropertyChanges {
+                target: primaryText
+                color: Theme.palette.directColor1
+            }
+            PropertyChanges {
+                target: primaryText
+                visible: primaryText.text
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                color: disabled ? Theme.palette.directColor5: Theme.palette.primaryColor1
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                visible: !advancedMode && secondaryLabel.text
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                text: disabled ? disabledText : secondaryText
+            }
+            PropertyChanges {
+                target: tertiaryText
+                color: Theme.palette.directColor5
+            }
+            PropertyChanges {
+                target: tertiaryText
+                visible: tertiaryText.text
+            }
+            PropertyChanges {
+                target: cardIcon
+                opacity: disabled ?  0.4 : 1
+            }
+            PropertyChanges {
+                target: errorIcon
+                visible: false
+            }
+            PropertyChanges {
+                target: advancedInput
+                visible: advancedMode
+            }
+            PropertyChanges {
+                target: advancedInput
+                edit.color: Theme.palette.directColor1
+            }
+            PropertyChanges {
+                target: basicInput
+                visible: !advancedMode
+            }
+        },
+        State {
+            name: "error"
+            PropertyChanges {
+                target: root
+                color: disabled ? Theme.palette.baseColor4 : "transparent"
+            }
+            PropertyChanges {
+                target: root
+                border.color: disabled ? "transparent" : Theme.palette.primaryColor2
+            }
+            PropertyChanges {
+                target: primaryText
+                color: Theme.palette.directColor1
+            }
+            PropertyChanges {
+                target: primaryText
+                visible: primaryText.text
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                color: disabled ? Theme.palette.directColor5: Theme.palette.dangerColor1
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                visible: !advancedMode && secondaryLabel.text
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                text: disabled ? disabledText : secondaryText
+            }
+            PropertyChanges {
+                target: tertiaryText
+                color: disabled ? Theme.palette.directColor5 : Theme.palette.dangerColor1
+            }
+            PropertyChanges {
+                target: tertiaryText
+                visible: tertiaryText.text
+            }
+            PropertyChanges {
+                target: cardIcon
+                opacity: disabled ?  0.4 : 1
+            }
+            PropertyChanges {
+                target: errorIcon
+                visible: false
+            }
+            PropertyChanges {
+                target: advancedInput
+                visible: advancedMode
+            }
+            PropertyChanges {
+                target: advancedInput
+                edit.color: disabled ? Theme.palette.directColor5 : Theme.palette.dangerColor1
+            }
+            PropertyChanges {
+                target: basicInput
+                visible: !advancedMode
+            }
+        },
+        State {
+            name: "unpreferred"
+            PropertyChanges {
+                target: root
+                color: disabled ? Theme.palette.baseColor4 : "transparent"
+            }
+            PropertyChanges {
+                target: root
+                border.color: disabled ? "transparent": Theme.palette.pinColor2
+            }
+            PropertyChanges {
+                target: primaryText
+                color: Theme.palette.directColor1
+            }
+            PropertyChanges {
+                target: primaryText
+                visible: primaryText.text
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                color: disabled ? Theme.palette.directColor5 : Theme.palette.pinColor1
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                visible: !advancedMode && secondaryLabel.text
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                text: disabled ? disabledText : secondaryText
+            }
+            PropertyChanges {
+                target: tertiaryText
+                color: disabled ? Theme.palette.directColor5 : Theme.palette.pinColor1
+            }
+            PropertyChanges {
+                target: tertiaryText
+                visible: tertiaryText.text
+            }
+            PropertyChanges {
+                target: cardIcon
+                opacity: disabled ? 0.4 : 1
+            }
+            PropertyChanges {
+                target: errorIcon
+                visible: !disabled && !advancedMode
+            }
+            PropertyChanges {
+                target: advancedInput
+                visible: advancedMode
+            }
+            PropertyChanges {
+                target: advancedInput
+                edit.color: Theme.palette.directColor1
+            }
+            PropertyChanges {
+                target: basicInput
+                visible: !advancedMode
+            }
+        },
+        State {
+            name: "unavailable"
+            PropertyChanges {
+                target: root
+                color: "transparent"
+            }
+            PropertyChanges {
+                target: root
+                border.color: "transparent"
+            }
+            PropertyChanges {
+                target: primaryText
+                color: Theme.palette.directColor5
+            }
+            PropertyChanges {
+                target: primaryText
+                visible: primaryText.text
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                color: Theme.palette.directColor5
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                visible: secondaryLabel.text
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                text: secondaryText
+            }
+            PropertyChanges {
+                target: tertiaryText
+                color: Theme.palette.directColor5
+            }
+            PropertyChanges {
+                target: tertiaryText
+                visible: tertiaryText.text
+            }
+            PropertyChanges {
+                target: cardIcon
+                opacity: 0.4
+            }
+            PropertyChanges {
+                target: errorIcon
+                visible: false
+            }
+            PropertyChanges {
+                target: advancedInput
+                visible: false
+            }
+            PropertyChanges {
+                target: advancedInput
+                edit.color: Theme.palette.directColor1
+            }
+            PropertyChanges {
+                target: basicInput
+                visible: true
+            }
+        }
+    ]}

src/StatusQ/Components/StatusChatInfoToolBar.qml

@@ -3,13 +3,12 @@ import QtGraphicalEffects 1.13
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
-import StatusQ.Core.Theme 0.1
 
 Item {
     id: statusChatInfoToolBar
 
-    implicitWidth: Theme.dp(288)
-    implicitHeight: Theme.dp(56)
+    implicitWidth: 288
+    implicitHeight: 56
 
     property alias chatInfoButton: statusChatInfoButton
     property alias menuButton: statusMenuButton
@@ -28,7 +27,7 @@ Item {
         id: statusChatInfoButton
         anchors.verticalCenter: parent.verticalCenter
         anchors.left: parent.left
-        anchors.right: (implicitWidth > parent.width - Theme.dp(50)) ? statusMenuButton.left : undefined
+        anchors.right: (implicitWidth > parent.width - 50) ? statusMenuButton.left : undefined
         anchors.rightMargin: 5
         type: StatusChatInfoButton.Type.OneToOneChat
         onClicked: statusChatInfoToolBar.chatInfoButtonClicked()
@@ -40,8 +39,8 @@ Item {
         anchors.verticalCenter: parent.verticalCenter
 
         visible: popupMenuSlot.active
-        width: visible ? Theme.dp(32) : 0
-        height: Theme.dp(32)
+        width: visible ? 32 : 0
+        height: 32
 
         type: StatusRoundButton.Type.Secondary
         icon.name: "add"
@@ -74,6 +73,7 @@ Item {
                     duration: 150
                     direction: RotationAnimation.Clockwise
                     easing.type: Easing.InCubic
+                    running: visible
                 }
             },
             Transition {
@@ -83,6 +83,7 @@ Item {
 										duration: 150
 										direction: RotationAnimation.Counterclockwise
 										easing.type: Easing.OutCubic
+										running: visible
 								}
         		}
         ]
@@ -90,7 +91,7 @@ Item {
         onClicked: {
             statusChatInfoToolBar.addButtonClicked(mouse)
             statusMenuButton.state = "pressed"
-            popupMenuSlot.item.popup(statusMenuButton.width-popupMenuSlot.item.width, statusMenuButton.height + Theme.dp(4))
+            popupMenuSlot.item.popup(statusMenuButton.width-popupMenuSlot.item.width, statusMenuButton.height + 4)
         }
 
         Loader {

src/StatusQ/Components/StatusChatList.qml

@@ -11,8 +11,8 @@ import StatusQ.Controls 0.1
 Column {
     id: statusChatList
 
-    spacing: Theme.dp(4)
-    width: Theme.dp(288)
+    spacing: 4
+    width: 288
 
     property string categoryId: ""
     property var model: null
@@ -40,7 +40,7 @@ Column {
         model: statusChatList.model
         delegate: Item {
             id: draggable
-            width: statusChatListItem.width
+            width: statusChatList.width
             height: statusChatListItem.height
             property alias chatListItem: statusChatListItem
 
@@ -93,6 +93,7 @@ Column {
                 StatusChatListItem {
                     id: statusChatListItem
 
+                    width: parent.width
                     opacity: dragSensor.active ? 0.0 : 1.0
                     originalOrder: model.position
                     chatId: model.itemId

src/StatusQ/Components/StatusChatListAndCategories.qml

@@ -6,7 +6,6 @@ import StatusQ.Core.Utils 0.1
 import StatusQ.Components 0.1
 import StatusQ.Popups 0.1
 import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
 
 Item {
     id: statusChatListAndCategories
@@ -14,6 +13,8 @@ Item {
     implicitHeight: chatListsAndCategories.height
     implicitWidth: chatListsAndCategories.width
 
+    property alias highlightItem: statusChatList.highlightItem
+
     property StatusTooltipSettings categoryAddButtonToolTip: StatusTooltipSettings {
         text: qsTr("Add channel inside category")
     }
@@ -65,7 +66,7 @@ Item {
 
             anchors.top: parent.top
             anchors.horizontalCenter: parent.horizontalCenter
-            spacing: Theme.dp(4)
+            spacing: 4
 
             StatusChatList {
                 id: statusChatList

src/StatusQ/Components/StatusChatListCategoryItem.qml

@@ -8,11 +8,11 @@ import StatusQ.Components 0.1
 StatusListItem {
     id: statusChatListCategoryItem
 
-    implicitWidth: Theme.dp(288)
-    implicitHeight: Theme.dp(28)
+    implicitWidth: 288
+    implicitHeight: 28
 
-    leftPadding: Theme.dp(8)
-    rightPadding: Theme.dp(8)
+    leftPadding: 8
+    rightPadding: 8
 
     property bool opened: true
     property bool highlighted: false
@@ -32,13 +32,13 @@ StatusListItem {
     statusListItemTitle.color: Theme.palette.directColor4
     statusListItemTitle.font.weight: Font.Medium
 
-    statusListItemComponentsSlot.spacing: Theme.dp(1)
+    statusListItemComponentsSlot.spacing: 1
 
     components: [
         StatusChatListCategoryItemButton {
             id: addButton
             icon.name: "add"
-            icon.width: Theme.dp(20)
+            icon.width: 20
             visible: statusChatListCategoryItem.showAddButton &&
                 (statusChatListCategoryItem.highlighted ||
                 statusChatListCategoryItem.sensor.containsMouse)
@@ -48,7 +48,7 @@ StatusListItem {
         StatusChatListCategoryItemButton {
             id: menuButton
             icon.name: "more"
-            icon.width: Theme.dp(21)
+            icon.width: 21
             visible: statusChatListCategoryItem.showMenuButton &&
                 (statusChatListCategoryItem.highlighted ||
                 statusChatListCategoryItem.sensor.containsMouse)
@@ -58,7 +58,7 @@ StatusListItem {
         StatusChatListCategoryItemButton {
             id: toggleButton
             icon.name: "chevron-down"
-            icon.width: Theme.dp(18)
+            icon.width: 18
             icon.rotation: statusChatListCategoryItem.opened ? 0 : 270
             onPressed: {
                 sensor.enabled = false;

src/StatusQ/Components/StatusChatListItem.qml

@@ -22,12 +22,12 @@ Rectangle {
     property int notificationsCount: 0
     property bool muted: false
     property StatusImageSettings image: StatusImageSettings {
-        width: Theme.dp(24)
-        height: Theme.dp(24)
+        width: 24
+        height: 24
     }
     property StatusIconSettings icon: StatusIconSettings {
-        width: Theme.dp(24)
-        height: Theme.dp(24)
+        width: 24
+        height: 24
         color: Theme.palette.miscColor5
         emoji: ""
         charactersLen: root.type === StatusChatListItem.Type.OneToOneChat ? 2 : 1
@@ -53,10 +53,10 @@ Rectangle {
         CommunityChat // 6
     }
 
-    implicitWidth: Theme.dp(288)
-    implicitHeight: Theme.dp(40)
+    implicitWidth: 288
+    implicitHeight: 40
 
-    radius: Theme.dp(8)
+    radius: 8
 
     color: {
         if (selected) {
@@ -93,10 +93,10 @@ Rectangle {
         StatusIcon {
             id: statusIcon
             anchors.left: identicon.right
-            anchors.leftMargin: Theme.dp(8)
+            anchors.leftMargin: 8
             anchors.verticalCenter: parent.verticalCenter
 
-            width: Theme.dp(14)
+            width: 14
             visible: root.type !== StatusChatListItem.Type.OneToOneChat
             opacity: {
                 if (root.muted && !hoverHander.hovered && !root.highlighted) {
@@ -133,7 +133,7 @@ Rectangle {
             anchors.leftMargin: statusIcon.visible ? 1 : 8
             anchors.right: mutedIcon.visible ? mutedIcon.left :
                                                statusBadge.visible ? statusBadge.left : parent.right
-            anchors.rightMargin: Theme.dp(6)
+            anchors.rightMargin: 6
             anchors.verticalCenter: parent.verticalCenter
 
             text: (root.type === StatusChatListItem.Type.PublicChat &&
@@ -158,7 +158,7 @@ Rectangle {
                           root.notificationsCount > 0 ||
                           root.highlightWhenCreated ||
                           statusBadge.visible) ? Font.Bold : Font.Medium
-            font.pixelSize: Theme.dp(15)
+            font.pixelSize: 15
         }
 
         StatusIcon {
@@ -166,7 +166,7 @@ Rectangle {
             anchors.right: statusBadge.visible ? statusBadge.left : parent.right
             anchors.rightMargin: 8
             anchors.verticalCenter: parent.verticalCenter
-            width: Theme.dp(14)
+            width: 14
             opacity: mutedIconSensor.containsMouse ? 1.0 : 0.2
             icon: Theme.palette.name === "light" ? "tiny/muted" : "tiny/muted-white"
             visible: root.muted
@@ -190,10 +190,10 @@ Rectangle {
 
             anchors.verticalCenter: parent.verticalCenter
             anchors.right: parent.right
-            anchors.rightMargin: Theme.dp(8)
+            anchors.rightMargin: 8
 
             color: root.muted ? Theme.palette.primaryColor2 : Theme.palette.primaryColor1
-            border.width: Theme.dp(4)
+            border.width: 4
             border.color: color
             value: root.notificationsCount
             visible: root.notificationsCount > 0

src/StatusQ/Components/StatusChatToolBar.qml

@@ -13,7 +13,7 @@ Item {
     property alias membersButton: membersButton
     property alias searchButton: searchButton
 
-    property int padding: Theme.dp(8)
+    property int padding: 8
     property int notificationCount: 0
     property Component popupMenu
     property var toolbarComponent
@@ -24,8 +24,8 @@ Item {
     signal membersButtonClicked()
     signal searchButtonClicked()
 
-    implicitWidth: Theme.dp(518)
-    implicitHeight: Theme.dp(60)
+    implicitWidth: 518
+    implicitHeight: 60
 
     onPopupMenuChanged: {
         if (!!popupMenu) {
@@ -55,8 +55,8 @@ Item {
 
             StatusFlatRoundButton {
                 id: searchButton
-                width: Theme.dp(32)
-                height: Theme.dp(32)
+                width: 32
+                height: 32
                 icon.name: "search"
                 type: StatusFlatRoundButton.Type.Secondary
                 onClicked: statusChatToolBar.searchButtonClicked()
@@ -64,13 +64,13 @@ Item {
                 // initializing the tooltip
                 tooltip.text: qsTr("Search")
                 tooltip.orientation: StatusToolTip.Orientation.Bottom
-                tooltip.y: parent.height + Theme.dp(12)
+                tooltip.y: parent.height + 12
             }
 
             StatusFlatRoundButton {
                 id: membersButton
-                width: Theme.dp(32)
-                height: Theme.dp(32)
+                width: 32
+                height: 32
                 icon.name: "group-chat"
                 type: StatusFlatRoundButton.Type.Secondary
                 onClicked: statusChatToolBar.membersButtonClicked()
@@ -83,8 +83,9 @@ Item {
 
             StatusFlatRoundButton {
                 id: menuButton
-                width: Theme.dp(32)
-                height: Theme.dp(32)
+                objectName: "chatToolbarMoreOptionsButton"
+                width: 32
+                height: 32
                 icon.name: "more"
                 type: StatusFlatRoundButton.Type.Secondary
                 visible: !!statusChatToolBar.popupMenu
@@ -93,7 +94,7 @@ Item {
                 tooltip.visible: !!tooltip.text && menuButton.hovered && !popupMenuSlot.item.opened
                 tooltip.text: qsTr("More")
                 tooltip.orientation: StatusToolTip.Orientation.Bottom
-                tooltip.y: parent.height + Theme.dp(12)
+                tooltip.y: parent.height + 12
 
                 property bool showMoreMenu: false
                 onClicked: {
@@ -127,8 +128,8 @@ Item {
             }
 
             Rectangle {
-                height: Theme.dp(24)
-                width: Theme.dp(1)
+                height: 24
+                width: 1
                 color: Theme.palette.directColor7
                 Layout.alignment: Qt.AlignVCenter
                 visible: notificationButton.visible &&

src/StatusQ/Components/StatusColorSpace.qml

@@ -54,8 +54,8 @@ Item {
             rootColor = Qt.hsva(color.hsvHue, 1, 1, 1)
     }
 
-    implicitWidth: Theme.dp(340)
-    implicitHeight: Theme.dp(340)
+    implicitWidth: 340
+    implicitHeight: 340
 
     QtObject {
         id: d

src/StatusQ/Components/StatusCommunityCard.qml

@@ -130,13 +130,13 @@ Rectangle {
 
     QtObject {
         id: d
-        property int cardWidth: Theme.dp(335)
-        property int bannerHeigth: Theme.dp(64)
-        property int cardHeigth: Theme.dp(190)
-        property int totalHeigth: Theme.dp(230)
-        property int margins: Theme.dp(12)
-        property int bannerRadius: Theme.dp(20)
-        property int cardRadius: Theme.dp(16)
+        property int cardWidth: 335
+        property int bannerHeigth: 64
+        property int cardHeigth: 190
+        property int totalHeigth: 230
+        property int margins: 12
+        property int bannerRadius: 20
+        property int cardRadius: 16
         property color cardColor: Theme.palette.indirectColor1
         property color fontColor: Theme.palette.directColor1
         property color loadingColor1: Theme.palette.baseColor5
@@ -168,8 +168,8 @@ Rectangle {
     layer.effect: DropShadow {
         source: root
         horizontalOffset: 0
-        verticalOffset: Theme.dp(2)
-        radius: sensor.containsMouse ? Theme.dp(30) : d.bannerRadius
+        verticalOffset: 2
+        radius: sensor.containsMouse ? 30 : d.bannerRadius
         samples: 25
         spread: 0
         color: sensor.containsMouse ? Theme.palette.backdropColor : Theme.palette.dropShadow
@@ -207,10 +207,10 @@ Rectangle {
     Rectangle {
         z: content.z + 1
         anchors.top: parent.top
-        anchors.topMargin: Theme.dp(16)
+        anchors.topMargin: 16
         anchors.left: parent.left
-        anchors.leftMargin: Theme.dp(12)
-        width: Theme.dp(48)
+        anchors.leftMargin: 12
+        width: 48
         height: width
         radius: width / 2
         color: root.loaded ? d.cardColor : d.loadingColor1
@@ -218,7 +218,7 @@ Rectangle {
         StatusRoundedImage {
             visible: root.loaded
             anchors.centerIn: parent
-            width: parent.width - Theme.dp(4)
+            width: parent.width - 4
             height: width
             image.source: root.logo
             color: "transparent"
@@ -231,7 +231,7 @@ Rectangle {
         z: banner.z + 1
         visible: root.loaded
         anchors.top: parent.top
-        anchors.topMargin: Theme.dp(40)
+        anchors.topMargin: 40
         width: d.cardWidth
         height: d.cardHeigth
         color: d.cardColor
@@ -241,27 +241,27 @@ Rectangle {
         Rectangle {
             visible: root.isPrivate
             anchors.top: parent.top
-            anchors.topMargin: Theme.dp(8)
+            anchors.topMargin: 8
             anchors.right: parent.right
             anchors.rightMargin: anchors.topMargin
-            width: Theme.dp(48)
-            height: Theme.dp(24)
+            width: 48
+            height: 24
             color: d.loadingColor2
-            radius: Theme.dp(200)
+            radius: 200
             StatusIcon {
                 anchors.verticalCenter: parent.verticalCenter
                 anchors.leftMargin: 6
                 anchors.left: parent.left
                 icon: "tiny/unlocked"
-                width: Theme.dp(16)
-                height: Theme.dp(16)
+                width: 16
+                height: 16
                 color: Theme.palette.baseColor1
             }
             StatusRoundedImage {
-                anchors.rightMargin: Theme.dp(2)
+                anchors.rightMargin: 2
                 anchors.right: parent.right
                 anchors.verticalCenter: parent.verticalCenter
-                width: Theme.dp(20)
+                width: 20
                 height: width
                 image.source: root.tokenLogo
                 color: "transparent"
@@ -270,24 +270,24 @@ Rectangle {
         // Community info
         ColumnLayout {
             anchors.fill: parent
-            anchors.topMargin: Theme.dp(32)
+            anchors.topMargin: 32
             anchors.leftMargin: d.margins
             anchors.rightMargin: d.margins
             anchors.bottomMargin: d.margins
             clip: true
-            spacing: Theme.dp(6)
+            spacing: 6
             StatusBaseText {
                 Layout.alignment: Qt.AlignVCenter
                 text: root.name
                 font.weight: Font.Bold
-                font.pixelSize: Theme.dp(19)
+                font.pixelSize: 19
                 color: d.fontColor
             }
             StatusBaseText {
                 Layout.fillWidth: true
                 Layout.fillHeight: true
                 text: root.description
-                font.pixelSize: Theme.dp(15)
+                font.pixelSize: 15
                 lineHeight: 1.2
                 color: d.fontColor
                 maximumLineCount: 2
@@ -298,48 +298,48 @@ Rectangle {
         }
         ColumnLayout {
             anchors.fill: parent
-            anchors.topMargin: Theme.dp(116)
+            anchors.topMargin: 116
             anchors.leftMargin: d.margins
             anchors.rightMargin: d.margins
             anchors.bottomMargin: d.margins
             clip: true
-            spacing: Theme.dp(18)
+            spacing: 18
             Row {
                 Layout.alignment: Qt.AlignVCenter
-                spacing: Theme.dp(20)
+                spacing: 20
                 // Members
                 Row {
                     height: membersTxt.height
-                    spacing: Theme.dp(4)
+                    spacing: 4
                     StatusIcon {
                         anchors.verticalCenter: parent.verticalCenter
                         icon: "tiny/members"
-                        width: Theme.dp(16)
-                        height: Theme.dp(16)
+                        width: 16
+                        height: 16
                     }
                     StatusBaseText {
                         id: membersTxt
                         Layout.alignment: Qt.AlignVCenter
                         text: d.numberFormat(root.members)
-                        font.pixelSize: Theme.dp(15)
+                        font.pixelSize: 15
                         color: d.fontColor
                     }
                 }
                 // Active users:
                 Row {
                     height: activeUsersTxt.height
-                    spacing: Theme.dp(4)
+                    spacing: 4
                     StatusIcon {
                         anchors.verticalCenter: parent.verticalCenter
                         icon: "tiny/flash"
-                        width: Theme.dp(14)
-                        height: Theme.dp(14)
+                        width: 14
+                        height: 14
                     }
                     StatusBaseText {
                         id: activeUsersTxt
                         Layout.alignment: Qt.AlignVCenter
                         text: d.numberFormat(root.activeUsers)
-                        font.pixelSize: Theme.dp(15)
+                        font.pixelSize: 15
                         color: d.fontColor
                     }
                 }
@@ -349,7 +349,7 @@ Rectangle {
                 visible: root.categories.count > 0
                 Layout.alignment: Qt.AlignVCenter
                 Layout.fillWidth: true
-                spacing: Theme.dp(8)
+                spacing: 8
                 clip: true
 
                 Repeater {
@@ -357,16 +357,16 @@ Rectangle {
                     delegate: StatusListItemTag {
                         border.color: Theme.palette.baseColor2
                         color: "transparent"
-                        height: Theme.dp(24)
-                        radius: Theme.dp(20)
+                        height: 24
+                        radius: 20
                         closeButtonVisible: false
                         icon.emoji: model.emoji
-                        icon.height: Theme.dp(24)
+                        icon.height: 24
                         icon.width: icon.height
                         icon.color: "transparent"
                         icon.isLetterIdenticon: true
                         title: model.name
-                        titleText.font.pixelSize: Theme.dp(13)
+                        titleText.font.pixelSize: 13
                         titleText.color: d.fontColor
                     }
                 }
@@ -378,7 +378,7 @@ Rectangle {
     Rectangle {
         visible: !root.loaded
         anchors.top: parent.top
-        anchors.topMargin: Theme.dp(40)
+        anchors.topMargin: 40
         width: d.cardWidth
         height: d.cardHeigth
         color: d.cardColor
@@ -386,48 +386,48 @@ Rectangle {
         clip: true
         Rectangle {
             anchors.top: parent.top
-            anchors.topMargin: Theme.dp(8)
+            anchors.topMargin: 8
             anchors.right: parent.right
             anchors.rightMargin: anchors.topMargin
-            width: Theme.dp(48)
-            height: Theme.dp(24)
+            width: 48
+            height: 24
             color: d.loadingColor2
-            radius: Theme.dp(200)
+            radius: 200
         }
         ColumnLayout {
             anchors.fill: parent
-            anchors.topMargin: Theme.dp(32)
+            anchors.topMargin: 32
             anchors.margins: d.margins
             clip: true
-            spacing: Theme.dp(9)
+            spacing: 9
             Rectangle {
-                width: Theme.dp(84)
-                height: Theme.dp(16)
+                width: 84
+                height: 16
                 color: d.loadingColor1
-                radius: Theme.dp(5)
+                radius: 5
             }
             Rectangle {
-                width: Theme.dp(311)
-                height: Theme.dp(16)
+                width: 311
+                height: 16
                 color: d.loadingColor1
-                radius: Theme.dp(5)
+                radius: 5
             }
             Rectangle {
-                width: Theme.dp(271)
-                height: Theme.dp(16)
+                width: 271
+                height: 16
                 color: d.loadingColor1
-                radius: Theme.dp(5)
+                radius: 5
             }
             Row {
-                Layout.topMargin: Theme.dp(13)
-                spacing: Theme.dp(16)
+                Layout.topMargin: 22 - 9
+                spacing: 16
                 Repeater {
                     model: 2
                     delegate: Row {
-                        spacing: Theme.dp(4)
+                        spacing: 4
                         Rectangle {
-                            width: Theme.dp(14)
-                            height: Theme.dp(14)
+                            width: 14
+                            height: 14
                             color: d.loadingColor1
                             radius: width / 2
                         }
@@ -441,16 +441,16 @@ Rectangle {
                 }
             }
             Row {
-                Layout.topMargin: Theme.dp(12)
-                spacing: Theme.dp(8)
+                Layout.topMargin: 21 - 9
+                spacing: 8
                 Repeater {
                     model: 3
                     delegate:
                     Rectangle {
-                        width: Theme.dp(76)
-                        height: Theme.dp(24)
+                        width: 76
+                        height: 24
                         color: d.loadingColor2
-                        radius: Theme.dp(20)
+                        radius: 20
                     }
                 }
             }

src/StatusQ/Components/StatusCommunityTags.qml

@@ -2,7 +2,6 @@ import QtQuick 2.14
 
 import StatusQ.Core 0.1
 import StatusQ.Controls 0.1
-import StatusQ.Core.Theme 0.1
 
 Item {
     id: root
@@ -29,7 +28,7 @@ Item {
             }
             return Math.min(parent.width, itemsWidth);
         }
-        spacing: Theme.dp(10)
+        spacing: 10
 
         Repeater {
             id: repeater
@@ -39,11 +38,11 @@ Item {
                 name: model.name
                 visible: (root.showOnlySelected ? model.selected : !model.selected) &&
                          (filterString == 0 || name.toUpperCase().indexOf(filterString.toUpperCase()) !== -1)
-                width: visible ? implicitWidth : -Theme.dp(10)
+                width: visible ? implicitWidth : -10
                 height: visible ? implicitHeight : 0
                 removable: root.showOnlySelected && root.active
                 onClicked: root.clicked(model)
             }
         }
     }
-}
+}

src/StatusQ/Components/StatusContactRequestsIndicatorListItem.qml

@@ -5,8 +5,8 @@ import StatusQ.Components 0.1
 StatusListItem {
     id: statusContactRequestsListItem
 
-    implicitHeight: Theme.dp(64)
-    implicitWidth: Theme.dp(288)
+    implicitHeight: 64
+    implicitWidth: 288
 
     color: sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
 
@@ -17,7 +17,7 @@ StatusListItem {
             visible:  statusContactRequestsListItem.requestsCount > 0
             value: statusContactRequestsListItem.requestsCount
             anchors.verticalCenter: parent.verticalCenter
-            border.width: Theme.dp(4)
+            border.width: 4
             border.color: color
         },
         StatusIcon {

src/StatusQ/Components/StatusContactVerificationIcons.qml

@@ -6,7 +6,7 @@ import StatusQ.Core.Theme 0.1
 Row {
     id: root
 
-    property bool isMutualContact: false
+    property bool isContact: false
     property var trustIndicator: StatusContactVerificationIcons.TrustedType.None
 
     property StatusIconSettings mutualConnectionIcon: StatusIconSettings {
@@ -15,8 +15,8 @@ Row {
         width: dummyImage.width
         height: dummyImage.height
         background: StatusIconBackgroundSettings {
-            width: Theme.dp(10)
-            height: Theme.dp(10)
+            width: 10
+            height: 10
             color: Theme.palette.primaryColor1
         }
         // Only used to get implicit width and height from the actual image
@@ -33,8 +33,8 @@ Row {
         width: dummyImage.width
         height: dummyImage.height
         background: StatusIconBackgroundSettings {
-            width: Theme.dp(10)
-            height: Theme.dp(10)
+            width: 10
+            height: 10
             color: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? Theme.palette.primaryColor1 : Theme.palette.dangerColor1
         }
         // Only used to get implicit width and height from the actual image
@@ -50,11 +50,11 @@ Row {
         Untrustworthy //2
     }
 
-    spacing: Theme.dp(4)
-    visible: root.isMutualContact || (root.trustIndicator !== StatusContactVerificationIcons.TrustedType.None)
+    spacing: 4
+    visible: root.isContact || (root.trustIndicator !== StatusContactVerificationIcons.TrustedType.None)
 
     StatusRoundIcon {
-        visible: root.isMutualContact
+        visible: root.isContact
         icon.name: root.mutualConnectionIcon.name
         icon.width: root.mutualConnectionIcon.width
         icon.height: root.mutualConnectionIcon.height

src/StatusQ/Components/StatusDescriptionListItem.qml

@@ -11,16 +11,16 @@ Rectangle {
     property alias subTitleComponent: statusDescriptionListItemSubTitle
     property string value: ""
     property StatusIconSettings icon: StatusIconSettings {
-        width: Theme.dp(23)
-        height: Theme.dp(23)
+        width: 23
+        height: 23
     }
     property alias tooltip: statusToolTip
     property alias iconButton: statusFlatRoundButton
     property alias sensor: sensor
 
-    implicitWidth: Theme.dp(448)
-    implicitHeight: Theme.dp(56)
-    radius: Theme.dp(8)
+    implicitWidth: 448
+    implicitHeight: 56
+    radius: 8
 
     color: Theme.palette.statusListItem.backgroundColor
 
@@ -35,12 +35,12 @@ Rectangle {
             id: statusDescriptionListItemTitle
             anchors.top: parent.top
             anchors.left: parent.left
-            anchors.leftMargin: Theme.dp(16)
-            anchors.topMargin: Theme.dp(5)
+            anchors.leftMargin: 16
+            anchors.topMargin: 5
 
             color: Theme.palette.baseColor1
             text: statusDescriptionListItem.title
-            font.pixelSize: Theme.dp(13)
+            font.pixelSize: 13
             font.weight: Font.Medium
         }
 
@@ -48,12 +48,12 @@ Rectangle {
             id: statusDescriptionListItemSubTitle
             anchors.top: statusDescriptionListItemTitle.bottom
             anchors.left: parent.left
-            anchors.leftMargin: Theme.dp(16)
-            anchors.topMargin: Theme.dp(4)
+            anchors.leftMargin: 16
+            anchors.topMargin: 4
 
             text: statusDescriptionListItem.subTitle
             color: Theme.palette.directColor1
-            font.pixelSize: Theme.dp(15)
+            font.pixelSize: 15
             font.weight: Font.Normal
         }
 
@@ -62,10 +62,10 @@ Rectangle {
             visible: !!statusDescriptionListItem.icon.name
             anchors.verticalCenter: statusDescriptionListItemSubTitle.verticalCenter
             anchors.left: statusDescriptionListItemSubTitle.right
-            anchors.leftMargin: Theme.dp(4)
+            anchors.leftMargin: 4
 
-            width: Theme.dp(32)
-            height: Theme.dp(32)
+            width: 32
+            height: 32
 
             icon.name: statusDescriptionListItem.icon.name
             icon.width: statusDescriptionListItem.icon.width
@@ -78,15 +78,15 @@ Rectangle {
 
         Row {
             anchors.right: parent.right
-            anchors.rightMargin: Theme.dp(16)
+            anchors.rightMargin: 16
             anchors.verticalCenter: parent.verticalCenter
             visible: !!statusDescriptionListItem.value
-            spacing: Theme.dp(8)
+            spacing: 8
 
             StatusBaseText {
                 text: statusDescriptionListItem.value
                 color: Theme.palette.baseColor1
-                font.pixelSize: Theme.dp(15)
+                font.pixelSize: 15
                 anchors.verticalCenter: parent.verticalCenter
             }
 

src/StatusQ/Components/StatusEmoji.qml

@@ -1,16 +1,14 @@
 import QtQuick 2.13
 import StatusQ.Core 0.1
 
-import StatusQ.Core.Theme 0.1
 
 Image {
     id: root
 
     property string emojiId: ""
 
-    width: Theme.dp(14)
-    height: Theme.dp(14)
-
+    width: 14
+    height: 14
     sourceSize.width: width
     sourceSize.height: height
 
@@ -18,4 +16,4 @@ Image {
     mipmap: true
     antialiasing: true
     source: emojiId ? `../../assets/twemoji/svg/${emojiId}.svg` : ""
-}
+}

src/StatusQ/Components/StatusExpandableItem.qml

@@ -19,18 +19,18 @@ Rectangle {
     property bool expanded: false
 
     property StatusIconSettings icon: StatusIconSettings {
-        width: Theme.dp(!!statusExpandableItem.icon.name.toString() ? 24 : 40)
-        height: Theme.dp(!!statusExpandableItem.icon.name.toString() ? 24 : 40)
+        width: !!statusExpandableItem.icon.name.toString() ? 24 : 40
+        height: !!statusExpandableItem.icon.name.toString() ? 24 : 40
         color: Theme.palette.directColor1
         background: StatusIconBackgroundSettings {
-            width: Theme.dp(32)
-            height: Theme.dp(32)
+            width: 32
+            height: 32
             color: Theme.palette.primaryColor2
         }
     }
     property StatusImageSettings image: StatusImageSettings {
-        width: Theme.dp(40)
-        height: Theme.dp(40)
+        width: 40
+        height: 40
     }
 
     enum Type {
@@ -39,7 +39,7 @@ Rectangle {
         Tertiary // 2
     }
 
-    implicitWidth: Theme.dp(718)
+    implicitWidth: 718
 
     radius: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 8 : 0
     color: "transparent"
@@ -52,7 +52,7 @@ Rectangle {
         anchors.top: parent.top
         anchors.horizontalCenter: parent.horizontalCenter
         width: parent.width
-        height: Theme.dp(1)
+        height: 1
 
         color: Theme.palette.baseColor2
         visible: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary)
@@ -63,16 +63,16 @@ Rectangle {
         id: header
         anchors.top: parent.top
         width: parent.width
-        height: Theme.dp(64)
-        radius: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? Theme.dp(8) : 0
+        height: 64
+        radius: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 8 : 0
         color: statusExpandableItem.type === StatusExpandableItem.Type.Secondary && sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
 
         StatusSmartIdenticon {
             id: identicon
             anchors.top: parent.top
-            anchors.topMargin: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 12.5 : 25)
+            anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 12.5 : 25
             anchors.left: parent.left
-            anchors.leftMargin: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 16 : 11)
+            anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 16 : 11
             image: statusExpandableItem.image
             icon: statusExpandableItem.icon
             name: primaryText.text
@@ -83,20 +83,20 @@ Rectangle {
             id: primaryText
             anchors.top: (statusExpandableItem.type === StatusExpandableItem.Type.Primary)  ||
                         (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? parent.top : undefined
-            anchors.topMargin: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? 29 : 17)
+            anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? 29 : 17
             anchors.left: identicon.active ? identicon.right : parent.left
-            anchors.leftMargin: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Primary) ?  10 : 16)
+            anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ?  10 : 16
 
             anchors.verticalCenter: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? identicon.verticalCenter : undefined
 
-            width: !!additionalText.text ? (button.visible ? parent.width - icon.background.width - button.width - additionalText.contentWidth - Theme.dp(110) :
-                                                          parent.width - icon.background.width - additionalText.contentWidth - Theme.dp(110)) :
-                                        (button.visible ? parent.width - icon.background.width - button.width - Theme.dp(70) :
-                                                          parent.width - icon.background.width - Theme.dp(70))
+            width: !!additionalText.text ? (button.visible ? parent.width - icon.background.width - button.width - additionalText.contentWidth - 110 :
+                                                          parent.width - icon.background.width - additionalText.contentWidth - 110) :
+                                        (button.visible ? parent.width - icon.background.width - button.width - 70 :
+                                                          parent.width - icon.background.width - 70)
 
             font.weight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Font.Medium : Font.Normal
-            font.pixelSize: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 15 : 17)
-            lineHeight: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 22 : 24)
+            font.pixelSize: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 15 : 17
+            lineHeight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 22 : 24
             lineHeightMode: Text.FixedHeight
             elide: Text.ElideRight
             color: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? Theme.palette.baseColor1 : Theme.palette.directColor1
@@ -105,12 +105,12 @@ Rectangle {
         StatusBaseText {
             id: secondaryText
             anchors.top: primaryText.bottom
-            anchors.topMargin: Theme.dp(4)
+            anchors.topMargin: 4
             anchors.left: primaryText.left
             anchors.right: primaryText.right
 
-            font.pixelSize: Theme.dp(15)
-            lineHeight: Theme.dp(22)
+            font.pixelSize: 15
+            lineHeight: 22
             lineHeightMode: Text.FixedHeight
             elide: Text.ElideRight
             color: Theme.palette.directColor3
@@ -119,12 +119,12 @@ Rectangle {
         StatusBaseText {
             id: additionalText
             anchors.verticalCenter: primaryText.verticalCenter
-            anchors.verticalCenterOffset: Theme.dp(2)
+            anchors.verticalCenterOffset: 2
             anchors.right: expandImage.left
-            anchors.rightMargin: Theme.dp(16)
+            anchors.rightMargin: 16
 
-            font.pixelSize: Theme.dp(15)
-            lineHeight: Theme.dp(24)
+            font.pixelSize: 15
+            lineHeight: 24
             lineHeightMode: Text.FixedHeight
             elide: Text.ElideRight
             color: Theme.palette.baseColor1
@@ -133,9 +133,9 @@ Rectangle {
         StatusButton {
             id: button
             anchors.top: parent.top
-            anchors.topMargin: Theme.dp(19)
+            anchors.topMargin: 19
             anchors.right: parent.right
-            anchors.rightMargin: Theme.dp(16)
+            anchors.rightMargin: 16
             visible: !!text
         }
 
@@ -148,13 +148,13 @@ Rectangle {
             anchors.rightMargin: {
                 switch (statusExpandableItem.type) {
                     case StatusExpandableItem.Type.Primary:
-                      return Theme.dp(23)
+                      return 23
                       break;
                     case StatusExpandableItem.Type.Secondary:
-                      return Theme.dp(16)
+                      return 16
                       break;
                     default:
-                      return Theme.dp(6)
+                      return 6
 
                 }
             }
@@ -181,11 +181,11 @@ Rectangle {
     Loader {
         id: expandableRegion
         anchors.top: header.bottom
-        anchors.topMargin: Theme.dp(16)
+        anchors.topMargin: 16
         anchors.left: parent.left
-        anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Theme.dp(48) : 0
+        anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 48 : 0
         anchors.right: parent.right
-        anchors.rightMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Theme.dp(16) : 0
+        anchors.rightMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 16 : 0
         visible: false
     }
 
@@ -202,13 +202,13 @@ Rectangle {
         State {
             name: "EXPANDED"
             PropertyChanges {target: expandImage; icon: "chevron-up"}
-            PropertyChanges {target: statusExpandableItem; height: 82 + expandableRegion.height + Theme.dp(22)}
+            PropertyChanges {target: statusExpandableItem; height: 82 + expandableRegion.height + 22}
             PropertyChanges {target: expandableRegion; visible: true}
         },
         State {
             name: "COLLAPSED"
             PropertyChanges {target: expandImage; icon: "chevron-down"}
-            PropertyChanges {target: statusExpandableItem; height: Theme.dp(82)}
+            PropertyChanges {target: statusExpandableItem; height: 82}
             PropertyChanges {target: expandableRegion; visible: false}
         }
     ]
@@ -217,12 +217,12 @@ Rectangle {
         Transition {
             from: "COLLAPSED"
             to: "EXPANDED"
-            NumberAnimation { properties: "height"; duration: 200 }
+            NumberAnimation { properties: "height"; duration: 200;}
         },
         Transition {
             from: "EXPANDED"
             to: "COLLAPSED"
-            NumberAnimation { properties: "height"; duration: 200 }
+            NumberAnimation { properties: "height"; duration: 200;}
         }
     ]
 }

src/StatusQ/Components/StatusImageCropPanel.qml

@@ -2,7 +2,6 @@ import QtQuick 2.14
 import QtQuick.Layouts 1.14
 
 import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 
 /*!
@@ -51,7 +50,7 @@ Item {
         \qmlproperty bool StatusImageCrop::margins
         Space to keep around the control borders and crop area
     */
-    property int margins: Theme.dp(10)
+    property int margins: 10
 
     /*!
         \qmlproperty url StatusImageCropPanel::source
@@ -216,7 +215,7 @@ Item {
                 onMouseYChanged: updateDrag(Qt.point(mouse.x, mouse.y))
 
                 onWheel: {
-                    const delta = wheel.angleDelta.y / Theme.dp(120)
+                    const delta = wheel.angleDelta.y / 120
                     cropEditor.setCropRect(cropEditor.getZoomRect(cropEditor.zoomScale + delta * root.scrollZoomFactor))
                 }
 
@@ -243,13 +242,13 @@ Item {
             StatusIcon {
                 icon: "remove-circle"
 
-                Layout.preferredWidth: Theme.dp(20)
-                Layout.preferredHeight: Theme.dp(20)
+                Layout.preferredWidth: 20
+                Layout.preferredHeight: 20
             }
             StatusSlider {
                 Layout.fillWidth: true
-                Layout.topMargin: Theme.dp(20)
-                Layout.bottomMargin: Theme.dp(25)
+                Layout.topMargin: 20
+                Layout.bottomMargin: 25
                 Layout.alignment: Qt.AlignVCenter
 
                 enabled: root.interactive
@@ -263,8 +262,8 @@ Item {
             StatusIcon {
                 icon: "add-circle"
 
-                Layout.preferredWidth: Theme.dp(20)
-                Layout.preferredHeight: Theme.dp(20)
+                Layout.preferredWidth: 20
+                Layout.preferredHeight: 20
             }
         }
     }

src/StatusQ/Components/StatusItemSelector.qml

@@ -0,0 +1,227 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import QtQuick.Controls 2.14 as QC
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Core.Utils 0.1
+
+/*!
+   \qmltype StatusItemSelector
+   \inherits Rectangle
+   \inqmlmodule StatusQ.Components
+   \since StatusQ.Components 0.1
+   \brief It allows to add items and display them as a tag item with an image and text. It also allows to store and display logical `and` / `or` operators into the list. Inherits \l{https://doc.qt.io/qt-6/qml-qtquick-rectangle.html}{Item}.
+
+   The \c StatusItemSelector is populated with a data model. The data model is commonly a JavaScript array or a ListModel object with specific expected roles.
+
+   Example of how the component looks like:
+   \image status_item_selector.png
+
+   Example of how to use it:
+   \qml
+        StatusItemSelector {
+            icon: Style.svg("contact_verified")
+            title: qsTr("Who holds")
+            defaultItemText: qsTr("Example: 10 SNT")
+            andOperatorText: qsTr("and")
+            orOperatorText: qsTr("or")
+            popupItem: CustomPopup {
+                id: customPopup
+                onAddItem: {
+                    tokensSelector.addItem(itemText, itemImage, operator)
+                    customPopup.close()
+                }
+            }
+        }
+   \endqml
+   For a list of components available see StatusQ.
+*/
+Rectangle {
+    id: root
+    /*!
+       \qmlproperty string StatusItemSelector::icon
+       This property holds the icon name for the icon represented on top of the component as a title icon.
+    */
+    property string icon
+    /*!
+       \qmlproperty int StatusItemSelector::iconSize
+       This property holds the icon size for the icon represented on top of the component as a title icon.
+    */
+    property int iconSize: 18
+    /*!
+       \qmlproperty string StatusItemSelector::title
+       This property holds the titel shown on top of the component.
+    */
+    property string title
+    /*!
+       \qmlproperty string StatusItemSelector::defaultItemText
+       This property holds the default item text shown when the list of items is empty.
+    */
+    property string defaultItemText
+    /*!
+       \qmlproperty url StatusItemSelector::defaultItemImageSource
+       This property holds the default item icon shown when the list of items is empty.
+    */
+    property url defaultItemImageSource: ""
+    /*!
+       \qmlproperty QC.Popup StatusItemSelector::popupItem
+       This property holds a custom popup item to be opened near the `add` button in order to select new items.
+    */
+    property QC.Popup popupItem
+    /*!
+       \qmlproperty ListModel StatusItemSelector::itemsModel
+       This property holds the data that will be populated in the items selector.
+
+       Here an example of the model roles expected:
+       \qml
+            itemsModel: ListModel {
+            ListElement {
+                text: "Socks"
+                imageSource: "qrc:imports/assets/png/tokens/SOCKS.png"
+                operator: Utils.Operator.None
+            }
+            ListElement {
+                text: "ZRX"
+                imageSource: "qrc:imports/assets/png/tokens/ZRX.png"
+                operator: Utils.Operator.Or
+            }
+        }
+       \endqml
+    */
+    property ListModel itemsModel: ListModel { }
+    /*!
+       \qmlproperty string StatusItemSelector::andOperatorText
+       This property holds the string text representation for an `AND` logical operator.
+    */
+    property string andOperatorText: qsTr("and")
+    /*!
+       \qmlproperty string StatusItemSelector::orOperatorText
+       This property holds the string text representation for an `OR` logical operator.
+    */
+    property string orOperatorText: qsTr("or")
+    /*
+        \qmlmethod StatusItemSelector::addItem()
+        It is used to add new items into the selector control. The expected arguments are:
+        string `text`, url `imageSource` and int `operator` (None = 0, And = 1 and Or = 2)
+    */
+    function addItem(text, imageSource, operator) {
+        itemsModel.insert(itemsModel.count, { "text": text, "imageSource": imageSource.toString(), "operator": operator })
+    }
+
+    QtObject {
+        id: d
+
+        function operatorTextFormat(operator) {
+            switch(operator)
+            {
+            case Utils.Operators.And:
+                return root.andOperatorText
+            case Utils.Operators.Or:
+                return root.orOperatorText
+            case Utils.Operators.None:
+                return ""
+            }
+        }
+    }
+
+    color: Theme.palette.baseColor4
+    implicitHeight: columnLayout.implicitHeight + columnLayout.anchors.topMargin + columnLayout.anchors.bottomMargin
+    implicitWidth: 560
+    radius: 16
+    clip: true
+
+    ColumnLayout {
+        id: columnLayout
+        anchors.top: parent.top
+        anchors.topMargin: 12
+        anchors.bottomMargin: anchors.topMargin
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+        anchors.right: parent.right
+        anchors.rightMargin: 16
+        spacing: 12
+        clip: true
+        RowLayout {
+            id: headerRow
+            spacing: 8
+            Image {
+                sourceSize.width: width || undefined
+                sourceSize.height: height || undefined
+                fillMode: Image.PreserveAspectFit
+                mipmap: true
+                antialiasing: true
+                width: root.iconSize
+                height: width
+                source: root.icon
+            }
+            StatusBaseText {
+                Layout.alignment: Qt.AlignVCenter
+                text: root.title
+                color: Theme.palette.directColor1
+                font.pixelSize: 17
+            }
+        }        
+        Flow {
+            id: flow
+            Layout.fillWidth: true
+            spacing: 6
+            StatusListItemTag {
+                visible: itemsModel.count === 0
+                title: root.defaultItemText
+                image.source: root.defaultItemImageSource
+                color: Theme.palette.baseColor2
+                closeButtonVisible: false
+                titleText.color: Theme.palette.baseColor1
+                titleText.font.pixelSize: 15
+            }
+            Repeater {
+                model: itemsModel
+                RowLayout {
+                    spacing: flow.spacing
+                    StatusBaseText {                        
+                        visible: model.operator !== Utils.Operators.None
+                        Layout.alignment: Qt.AlignVCenter
+                        text: d.operatorTextFormat(model.operator)
+                        color: Theme.palette.primaryColor1
+                        font.pixelSize: 17
+                        MouseArea {
+                            anchors.fill: parent
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                // Switch operator
+                                if(model.operator === Utils.Operators.And)
+                                    model.operator = Utils.Operators.Or
+                                else
+                                    model.operator = Utils.Operators.And
+                            }
+                        }
+                    }
+                    StatusListItemTag {
+                        title: model.text
+                        image.source: model.imageSource
+                        color: Theme.palette.primaryColor3
+                        closeButtonVisible: false
+                        titleText.color: Theme.palette.primaryColor1
+                        titleText.font.pixelSize: 15
+                        //onClicked: // TODO: Open remove or edit dialog
+                    }
+                }
+            }
+            StatusRoundButton {
+                id: addItemButton
+                implicitHeight: 32
+                implicitWidth: implicitHeight
+                height: width
+                type: StatusRoundButton.Type.Secondary
+                icon.name: "add"
+                onClicked: {
+                    root.popupItem.x = addItemButton.x + addItemButton.width + 4 * flow.spacing
+                    root.popupItem.y = addItemButton.y + addItemButton.height
+                    root.popupItem.open()
+                }
+            }
+        }
+    }
+}

src/StatusQ/Components/StatusLetterIdenticon.qml

@@ -10,12 +10,12 @@ Rectangle {
     property string name
     property string emoji
     property string emojiSize: Emoji.size.small
-    property int letterSize: Theme.dp(21)
+    property int letterSize: 21
     property int charactersLen: 1
 
     color: Theme.palette.miscColor5
-    width: Theme.dp(40)
-    height: Theme.dp(40)
+    width: 40
+    height: 40
     radius: width / 2
 
     StatusEmoji {

src/StatusQ/Components/StatusListItem.qml

@@ -20,8 +20,9 @@ Rectangle {
     property string subTitle: ""
     property string tertiaryTitle: ""
     property string label: ""
-    property real leftPadding: Theme.dp(16)
-    property real rightPadding: Theme.dp(16)
+    property string titleTextIcon: ""
+    property real leftPadding: 16
+    property real rightPadding: 16
     property bool enabled: true
     property bool highlighted: false
     property bool propagateTitleClicks: true
@@ -35,17 +36,17 @@ Rectangle {
     property bool loadingFailed: false
 
     property StatusIconSettings icon: StatusIconSettings {
-        height: Theme.dp(isLetterIdenticon ? 40 : 20)
-        width: Theme.dp(isLetterIdenticon ? 40 : 20)
+        height: isLetterIdenticon ? 40 : 20
+        width: isLetterIdenticon ? 40 : 20
         rotation: 0
         isLetterIdenticon: false
-        letterSize: Theme.dp(21)
+        letterSize: 21
         charactersLen: 1
         color: isLetterIdenticon ? background.color : type === StatusListItem.Type.Danger ?
             Theme.palette.dangerColor1 : Theme.palette.primaryColor1
         background: StatusIconBackgroundSettings {
-            width: Theme.dp(40)
-            height: Theme.dp(40)
+            width: 40
+            height: 40
             color: {
                 if (sensor.containsMouse) {
                     return type === StatusListItem.Type.Secondary ||
@@ -58,8 +59,8 @@ Rectangle {
         }
     }
     property StatusImageSettings image: StatusImageSettings {
-        width: Theme.dp(40)
-        height: Theme.dp(40)
+        width: 40
+        height: 40
         isIdenticon: false
     }
     property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings {
@@ -90,12 +91,12 @@ Rectangle {
         Danger
     }
 
-    implicitWidth: Theme.dp(448)
+    implicitWidth: 448
     implicitHeight: {
         if (bottomModel.length === 0) {
-            return Math.max(64, statusListItemTitleArea.height + Theme.dp(16))
+            return Math.max(64, statusListItemTitleArea.height + 16)
         }
-        return Math.max(Theme.dp(64), statusListItemTitleArea.height + Theme.dp(90))
+        return Math.max(64, statusListItemTitleArea.height + 90)
     }
     color: {
         if (sensor.containsMouse || statusListItem.highlighted) {
@@ -179,7 +180,7 @@ Rectangle {
 
             anchors.left: iconOrImage.active ? iconOrImage.right : parent.left
             anchors.right: statusListItemLabel.visible ? statusListItemLabel.left : statusListItemComponentsSlot.left
-            anchors.leftMargin: iconOrImage.active ? Theme.dp(16) : statusListItem.leftPadding
+            anchors.leftMargin: iconOrImage.active ? 16 : statusListItem.leftPadding
             anchors.rightMargin: statusListItem.rightPadding
             anchors.verticalCenter:  bottomModel.length === 0 ? parent.verticalCenter : undefined
 
@@ -209,7 +210,7 @@ Rectangle {
                 id: statusListItemTitle
                 opacity: titleLoadingOverlay.visible ? 0 : 1
                 text: statusListItem.title
-                font.pixelSize: Theme.dp(15)
+                font.pixelSize: 15
                 height: visible ? contentHeight : 0
                 elide: Text.ElideRight
                 anchors.left: parent.left
@@ -230,6 +231,16 @@ Rectangle {
                     }
                 }
 
+                StatusIcon {
+                    width: visible ? 12 : 0
+                    height: visible ? 12 : 0
+                    visible: !!statusListItem.titleTextIcon
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.left: parent.left
+                    anchors.leftMargin: statusListItemTitle.contentWidth + 6
+                    icon: statusListItem.titleTextIcon
+                }
+
                 StatusToolTip {
                     id: statusListItemTitleTooltip
                     text: statusListItemTitle.text
@@ -254,12 +265,12 @@ Rectangle {
             StatusBaseText {
                 id: statusListItemTitleAsideText
                 anchors.left: statusListItemTitle.right
-                anchors.leftMargin: Theme.dp(4)
+                anchors.leftMargin: 4
                 anchors.verticalCenter: statusListItemTitle.verticalCenter
                 anchors.top: bottomModel.length === 0 ? undefined:  parent.top
                 anchors.topMargin: bottomModel.length === 0 ? undefined : 20
                 text: statusListItem.titleAsideText
-                font.pixelSize: Theme.dp(10)
+                font.pixelSize: 10
                 color: Theme.palette.baseColor1
                 visible: !!statusListItem.titleAsideText
             }
@@ -268,7 +279,7 @@ Rectangle {
                 id: titleIconsRow
                 anchors.left: !statusListItem.titleAsideText ? statusListItemTitle.right : statusListItemTitleAsideText.right
                 anchors.verticalCenter: statusListItemTitle.verticalCenter
-                anchors.leftMargin: Theme.dp(4)
+                anchors.leftMargin: 4
             }
 
             StatusBaseText {
@@ -293,7 +304,7 @@ Rectangle {
                 height: visible ? contentHeight : 0
                 text: statusListItem.tertiaryTitle
                 color: Theme.palette.baseColor1
-                font.pixelSize: Theme.dp(13)
+                font.pixelSize: 13
                 visible: !!statusListItem.tertiaryTitle
                 wrapMode: Text.WrapAtWordBoundaryOrAnywhere
             }
@@ -302,14 +313,14 @@ Rectangle {
                 id: statusListItemBadge
                 anchors.top: statusListItemTertiaryTitle.bottom
                 width: contentItem.width
-                implicitHeight: visible ? Theme.dp(22) : 0
+                implicitHeight: visible ? 22 : 0
             }
 
             Row {
                 id: statusListItemTagsSlotInline
                 anchors.top: statusListItemTertiaryTitle.bottom
                 width: parent.width
-                spacing: Theme.dp(10)
+                spacing: 10
                 clip: true
 
                 Repeater {
@@ -321,12 +332,12 @@ Rectangle {
 
         Row {
             id: statusListItemTagsSlot
-            anchors.topMargin: Theme.dp(16)
+            anchors.topMargin: 16
             anchors.top: iconOrImage.bottom
             anchors.left: parent.left
-            anchors.leftMargin: Theme.dp(16)
+            anchors.leftMargin: 16
             width: statusListItemBadge.width
-            spacing: Theme.dp(10)
+            spacing: 10
             anchors.verticalCenter: parent.verticalCenter
 
             Repeater {
@@ -339,12 +350,12 @@ Rectangle {
             id: statusListItemLabel
             anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined
             anchors.top: bottomModel.length === 0 ? undefined:  parent.top
-            anchors.topMargin: bottomModel.length === 0 ? undefined : Theme.dp(16)
+            anchors.topMargin: bottomModel.length === 0 ? undefined : 16
             anchors.right: statusListItemComponentsSlot.left
-            anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? Theme.dp(10) : 0
+            anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0
 
             text: statusListItem.label
-            font.pixelSize: Theme.dp(15)
+            font.pixelSize: 15
             color: Theme.palette.baseColor1
             visible: !!statusListItem.label
         }
@@ -355,8 +366,8 @@ Rectangle {
             anchors.rightMargin: statusListItem.rightPadding
             anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined
             anchors.top: bottomModel.length === 0 ? undefined:  parent.top
-            anchors.topMargin: bottomModel.length === 0 ? undefined : Theme.dp(12)
-            spacing: Theme.dp(10)
+            anchors.topMargin: bottomModel.length === 0 ? undefined : 12
+            spacing: 10
         }
     }
 }

src/StatusQ/Components/StatusListItemBadge.qml

@@ -14,13 +14,13 @@ Control {
     property string secondaryText: ""
 
     property StatusImageSettings image: StatusImageSettings {
-        height: Theme.dp(16)
-        width: Theme.dp(16)
+        height: 16
+        width: 16
         isIdenticon: false
     }
     property StatusIconSettings icon: StatusIconSettings {
-        height: Theme.dp(16)
-        width: Theme.dp(16)
+        height: 16
+        width: 16
         isLetterIdenticon: false
         background: StatusIconBackgroundSettings {}
         color: "transparent"
@@ -29,31 +29,31 @@ Control {
     background: Rectangle {
         anchors.fill: parent
         color: "transparent"
-        radius: Theme.dp(11)
+        radius: 11
         border.color: Theme.palette.directColor7
     }
 
     contentItem: Item {
         id: contentItem
-        width: (contentItemRow.width + Theme.dp(10))
+        width: (contentItemRow.width + 10)
         height: parent.height
         RowLayout {
             id: contentItemRow
             anchors.centerIn: parent
             anchors.horizontalCenterOffset: -spacing
-            spacing: Theme.dp(2)
+            spacing: 2
             StatusRoundedImage {
                 implicitWidth: root.image.width
                 implicitHeight: root.image.height
                 visible: !root.icon.isLetterIdenticon
                 image.source: root.image.source
                 border.color: Theme.palette.baseColor1
-                border.width: root.image.isIdenticon ? Theme.dp(1) : 0
+                border.width: root.image.isIdenticon ? 1 : 0
             }
             StatusLetterIdenticon {
                 implicitWidth: root.icon.width
                 implicitHeight: root.icon.width
-                letterSize: Theme.dp(11)
+                letterSize: 11
                 visible: root.icon.isLetterIdenticon
                 color: root.icon.color
                 name: root.primaryText

src/StatusQ/Components/StatusListItemTag.qml

@@ -7,9 +7,9 @@ import StatusQ.Core.Theme 0.1
 Rectangle {
     id: root
     width: layout.width + layout.anchors.margins
-    height: Theme.dp(30)
+    height: 30
     color: Theme.palette.primaryColor3
-    radius: Theme.dp(15)
+    radius: 15
 
     property alias titleText: titleText
 
@@ -18,21 +18,21 @@ Rectangle {
     signal clicked()
 
     property StatusImageSettings image: StatusImageSettings {
-        width: Theme.dp(20)
-        height: Theme.dp(20)
+        width: 20
+        height: 20
         isIdenticon: false
     }
 
     property StatusIconSettings icon: StatusIconSettings {
-        height: Theme.dp(20)
-        width: Theme.dp(20)
+        height: 20
+        width: 20
         rotation: 0
         isLetterIdenticon: false
-        letterSize: Theme.dp(10)
+        letterSize: 10
         color: Theme.palette.primaryColor1
         background: StatusIconBackgroundSettings {
-            width: Theme.dp(15)
-            height: Theme.dp(15)
+            width: 15
+            height: 15
             color: Theme.palette.primaryColor3
         }
     }
@@ -40,11 +40,11 @@ Rectangle {
     RowLayout {
         id: layout
         height: parent.height
-        anchors.margins: Theme.dp(6)
+        anchors.margins: 6
 
         StatusSmartIdenticon {
             id: iconOrImage
-            Layout.leftMargin: Theme.dp(4)
+            Layout.leftMargin: 4
             image: root.image
             icon: root.icon
             name: root.title
@@ -57,7 +57,7 @@ Rectangle {
             id: titleText
             color: Theme.palette.primaryColor1
             text: root.title
-            Layout.rightMargin: closeButtonVisible ? 0 : Theme.dp(5)
+            Layout.rightMargin: closeButtonVisible ? 0 : 5
         }
 
         StatusIcon {

src/StatusQ/Components/StatusListPicker.qml

@@ -227,8 +227,8 @@ Item {
         }
     }
 
-    width: Theme.dp(110)
-    height: Theme.dp(38)
+    width: 110
+    height: 38
 
     Component.onCompleted: d.initialize()
 
@@ -238,7 +238,7 @@ Item {
         bgColor: Theme.palette.primaryColor3
         contentColor: Theme.palette.primaryColor1
         text: picker.selectedItemsText
-        textPixelSize: Theme.dp(13)
+        font.pixelSize: 13
         type: StatusPickerButton.Type.Down
 
         onClicked: {
@@ -261,7 +261,7 @@ Item {
         anchors.right: root.menuAlignment === StatusListPicker.MenuAlignment.Right ? btn.right : undefined
         anchors.horizontalCenter: root.menuAlignment === StatusListPicker.MenuAlignment.Center ? btn.horizontalCenter : undefined
         anchors.top: btn.bottom
-        anchors.topMargin: Theme.dp(4)
+        anchors.topMargin: 4
         visible: false
         color: Theme.palette.statusPopupMenu.backgroundColor
         radius: 8
@@ -269,8 +269,8 @@ Item {
         layer.effect: DropShadow {
             source: picker
             horizontalOffset: 0
-            verticalOffset: Theme.dp(4)
-            radius: Theme.dp(12)
+            verticalOffset: 4
+            radius: 12
             samples: 25
             spread: 0.2
             color: Theme.palette.dropShadow
@@ -279,36 +279,36 @@ Item {
         ListView {
             id: content            
 
-            property int itemHeight: Theme.dp(40)
-            property int itemWidth: Theme.dp(360)
+            property int itemHeight: 40
+            property int itemWidth: 360
 
             model: d.filteredModel
             width: itemWidth
             anchors.top: parent.top
-            anchors.topMargin: Theme.dp(8)
+            anchors.topMargin: 8
             anchors.bottom: parent.bottom
-            anchors.bottomMargin: Theme.dp(8)
+            anchors.bottomMargin: 8
             currentIndex: -1
             clip: true
             headerPositioning: ListView.OverlayHeader
             header: Rectangle {
                 id: header
                 width: content.itemWidth
-                height: searchInput.height + Theme.dp(24)
+                height: searchInput.height + 24
                 color: Theme.palette.statusPopupMenu.backgroundColor
                 z: 3 // Above delegate (z=1) and above section.delegate (z = 2)
 
-                StatusBaseInput {
+                StatusInput {
                     id: searchInput
-                    implicitHeight: Theme.dp(36)
-                    width: content.itemWidth - Theme.dp(2) * 18
+                    maximumHeight: 36
+                    width: content.itemWidth - 2 * 18
                     anchors.horizontalCenter: parent.horizontalCenter
                     anchors.verticalCenter: parent.verticalCenter
                     topPadding: 0
                     bottomPadding: 0
                     placeholderText: root.placeholderSearchText
                     text: root.searchText
-                    icon.name: "search"
+                    input.icon.name: "search"
 
                     onTextChanged: {
                         d.applyFilter(text)
@@ -371,12 +371,12 @@ Item {
                 height: content.itemHeight
 
                 StatusBaseText {
-                    anchors.leftMargin: Theme.dp(18)
+                    anchors.leftMargin: 18
                     anchors.left: parent.left
                     anchors.verticalCenter: parent.verticalCenter
                     text: section
                     color: Theme.palette.baseColor1
-                    font.pixelSize: Theme.dp(15)
+                    font.pixelSize: 15
                     elide: Text.ElideRight
                 }
             }// End of Category item

src/StatusQ/Components/StatusListSectionHeadline.qml

@@ -4,18 +4,18 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 
 Item {
-    implicitHeight: Theme.dp(34)
-    implicitWidth: Theme.dp(176)
+    implicitHeight: 34
+    implicitWidth: 176
 
     property alias text: label.text
 
     StatusBaseText {
         anchors.left: parent.left
         anchors.bottom: parent.bottom
-        anchors.bottomMargin: Theme.dp(4)
-        anchors.leftMargin: Theme.dp(16)
+        anchors.bottomMargin: 4
+        anchors.leftMargin: 16
         id: label
-        font.pixelSize: Theme.dp(15)
+        font.pixelSize: 15
         color: Theme.palette.baseColor1
     }
 }

src/StatusQ/Components/StatusLoadingIndicator.qml

@@ -1,18 +1,17 @@
 import QtQuick 2.13
 import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
 
 StatusIcon {
     id: statusIcon
     icon: "loading"
-    height: Theme.dp(17)
-    width: Theme.dp(17)
+    height: 17
+    width: 17
     RotationAnimation {
         target: statusIcon;
         from: 0;
         to: 360;
         duration: 1200
-        running: true
+        running: visible
         loops: Animation.Infinite
     }
 }

src/StatusQ/Components/StatusMemberListItem.qml

@@ -104,14 +104,14 @@ StatusListItem {
 
         // Short keychat composition:
         function composeShortKeyChat(pubKey) {
-            return pubKey.substring(0, 5) + "..." + pubKey.substring(pubKey.length - Theme.dp(3))
+            return pubKey.substring(0, 5) + "..." + pubKey.substring(pubKey.length - 3)
         }
     }
 
     // root object settings:
     title: (root.nickName === "") ? root.userName : root.nickName
     statusListItemTitleIcons.sourceComponent: StatusContactVerificationIcons {
-        isMutualContact: root.isContact
+        isContact: root.isContact
         trustIndicator: {
             if (root.isVerified) return StatusContactVerificationIcons.TrustedType.Verified
             else if (root.isUntrustworthy) return StatusContactVerificationIcons.TrustedType.Untrustworthy
@@ -119,25 +119,25 @@ StatusListItem {
         } 
     }
     subTitle: d.composeSubtitile()
-    statusListItemSubTitle.font.pixelSize: Theme.dp(10)
+    statusListItemSubTitle.font.pixelSize: 10
     icon.isLetterIdenticon: !root.image.source.toString()
     statusListItemIcon.badge.visible: true
     statusListItemIcon.badge.color: root.status === 1 ? Theme.palette.successColor1 : Theme.palette.baseColor1 // FIXME
     color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.baseColor4
 
     // Default sizes / positions by design
-    implicitWidth: Theme.dp(256)
-    implicitHeight: Math.max(Theme.dp(56), statusListItemTitleArea.height + leftPadding)
-    leftPadding: Theme.dp(8)
-    image.width: Theme.dp(32)
-    image.height: Theme.dp(32)
-    icon.width: Theme.dp(32)
-    icon.height: Theme.dp(32)
+    implicitWidth: 256
+    implicitHeight: Math.max(56, statusListItemTitleArea.height + leftPadding)
+    leftPadding: 8
+    image.width: 32
+    image.height: 32
+    icon.width: 32
+    icon.height: 32
     statusListItemIcon.anchors.verticalCenter: sensor.verticalCenter
     statusListItemIcon.anchors.top: undefined
-    statusListItemIcon.badge.border.width: Theme.dp(2)
-    statusListItemIcon.badge.implicitHeight: Theme.dp(12) // 8 px + 2 px * 2 borders
-    statusListItemIcon.badge.implicitWidth: Theme.dp(12) // 8 px + 2 px * 2 borders
+    statusListItemIcon.badge.border.width: 2
+    statusListItemIcon.badge.implicitHeight: 12 // 8 px + 2 px * 2 borders
+    statusListItemIcon.badge.implicitWidth: 12 // 8 px + 2 px * 2 borders
     components: [
         StatusIcon {
             anchors.verticalCenter: parent.verticalCenter

src/StatusQ/Components/StatusMessage.qml

@@ -68,13 +68,13 @@ Rectangle {
             audioMessageInfoText: statusMessage.audioMessageInfoText
         }
         RowLayout {
-            spacing: Theme.dp(8)
+            spacing: 8
             Layout.fillWidth: true
             StatusSmartIdenticon {
                 id: profileImage
                 Layout.alignment: Qt.AlignTop
-                Layout.topMargin: Theme.dp(10)
-                Layout.leftMargin: Theme.dp(16)
+                Layout.topMargin: 10
+                Layout.leftMargin: 16
                 image: messageDetails.profileImage
                 name: messageHeader.displayName
                 MouseArea {
@@ -87,7 +87,7 @@ Rectangle {
             Column {
                 spacing: 4
                 Layout.alignment: Qt.AlignTop
-                Layout.topMargin: Theme.dp(10)
+                Layout.topMargin: 10
                 Layout.fillWidth: true
                 StatusPinMessageDetails {
                     visible: messageDetails.isPinned && !editMode
@@ -100,7 +100,7 @@ Rectangle {
                     displayName: messageDetails.displayName
                     secondaryName: messageDetails.secondaryName
                     tertiaryDetail: messageDetails.chatID
-                    isMutualContact: messageDetails.isMutualContact
+                    isContact: messageDetails.isContact
                     trustIndicator: messageDetails.trustIndicator
                     resendText: statusMessage.resendText
                     showResendButton: messageDetails.hasExpired && messageDetails.amISender
@@ -192,9 +192,9 @@ Rectangle {
     StatusMessageQuickActions {
         id: quickActionsPanel
         anchors.right: parent.right
-        anchors.rightMargin: Theme.dp(20)
+        anchors.rightMargin: 20
         anchors.top: parent.top
-        anchors.topMargin: -Theme.dp(8)
+        anchors.topMargin: -8
         visible: hoverHandler.hovered && !editMode
     }
 }

src/StatusQ/Components/StatusMessageDetails.qml

@@ -1,7 +1,6 @@
 import QtQuick 2.13
 
 import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
 
 QtObject {
     id: msgDetails
@@ -11,14 +10,14 @@ QtObject {
     property string secondaryName: ""
     property string chatID: ""
     property StatusImageSettings profileImage: StatusImageSettings {
-        width: Theme.dp(40)
-        height: Theme.dp(40)
+        width: 40
+        height: 40
     }
     property bool isEdited: false
     property string messageText: ""
     property int contentType: 0
     property string messageContent: ""
-    property bool isMutualContact: false
+    property bool isContact: false
     property var trustIndicator: StatusContactVerificationIcons.TrustedType.None
     property bool hasMention: false
     property bool isPinned: false

src/StatusQ/Components/StatusNavigationListItem.qml

@@ -9,14 +9,14 @@ StatusListItem {
     property bool selected: false
     property alias badge: statusBadge
 
-    implicitWidth: Theme.dp(286)
-    implicitHeight: Theme.dp(48)
+    implicitWidth: 286
+    implicitHeight: 48
 
-    icon.background.width: Theme.dp(20)
-    icon.background.height: Theme.dp(20)
+    icon.background.width: 20
+    icon.background.height: 20
     icon.background.color: "transparent"
 
-    statusListItemIcon.anchors.topMargin: Theme.dp(14)
+    statusListItemIcon.anchors.topMargin: 14
 
     color: {
         if (selected) {