fix(Core): disable StatusIcon ColorOverlay if no color is supplied

This is needed to have the underlying SVG's color bleed through and
make use of the image's opacity at the same time.

Using `ColorOverlay` together with (half) transparent colors doesn't
work very well as it makes the underlying SVG color come through,
result in wrong colors.

Applying `opacity` on the image itself cause the `ColorOverlay` to
reduce in opacity as well. So in order to work with transparent
colors, we need a way to turn of the ColorOverlay and work with the
Image's opacity, which is what this change enables.

README.md

@@ -11,6 +11,7 @@ These modules are:
 - [StatusQ.Core.Theme](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/Theme/qmldir)
 - [StatusQ.Components](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/qmldir)
 - [StatusQ.Controls](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/qmldir)
+- [StatusQ.Layout](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Layout/qmldir)
 
 Provided components can be viewed and tested in the [sandbox application](#viewing-and-testing-components) that comes with this repository.
 Other than that, modules and components can be used as expected.

sandbox/Buttons.qml

@@ -0,0 +1,239 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Controls 0.1
+import StatusQ.Core.Theme 0.1
+
+Grid {
+
+    columns: 3
+    columnSpacing: 38
+    rowSpacing: 10
+
+    horizontalItemAlignment: Grid.AlignHCenter
+
+    // Large
+    StatusButton {
+        text: "Button"
+    }
+
+    StatusButton {
+        text: "Button"
+        enabled: false
+    }
+
+    StatusButton {
+        text: "Button"
+        loading: true
+    }
+
+    StatusButton {
+        text: "Button"
+        type: StatusBaseButton.Type.Danger
+    }
+
+    StatusButton {
+        text: "Button"
+        type: StatusBaseButton.Type.Danger
+        enabled: false
+    }
+
+    StatusButton {
+        text: "Button"
+        loading: true
+        type: StatusBaseButton.Type.Danger
+    }
+
+    StatusFlatButton {
+        text: "Button"
+    }
+
+    StatusFlatButton {
+        text: "Button"
+        enabled: false
+
+    }
+
+    StatusFlatButton {
+        text: "Button"
+        loading: true
+    }
+
+    StatusFlatButton {
+        text: "Button"
+        type: StatusBaseButton.Type.Danger
+    }
+
+    StatusFlatButton {
+        text: "Button"
+        type: StatusBaseButton.Type.Danger
+        enabled: false
+    }
+
+    StatusFlatButton {
+        text: "Button"
+        type: StatusBaseButton.Type.Danger
+        loading: true
+    }
+
+    // Small
+    StatusButton {
+        text: "Button"
+        size: StatusBaseButton.Size.Small
+    }
+
+    StatusButton {
+        text: "Button"
+        enabled: false
+        size: StatusBaseButton.Size.Small
+    }
+
+    StatusButton {
+        text: "Button"
+        size: StatusBaseButton.Size.Small
+        loading: true
+    }
+
+    StatusButton {
+        text: "Button"
+        type: StatusBaseButton.Type.Danger
+        size: StatusBaseButton.Size.Small
+    }
+
+    StatusButton {
+        text: "Button"
+        type: StatusBaseButton.Type.Danger
+        size: StatusBaseButton.Size.Small
+        enabled: false
+    }
+
+    StatusButton {
+        text: "Button"
+        type: StatusBaseButton.Type.Danger
+        size: StatusBaseButton.Size.Small
+        loading: true
+    }
+
+    StatusFlatButton {
+        text: "Button"
+        size: StatusBaseButton.Size.Small
+    }
+
+    StatusFlatButton {
+        text: "Button"
+        enabled: false
+        size: StatusBaseButton.Size.Small
+    }
+
+    StatusFlatButton {
+        text: "Button"
+        enabled: false
+        size: StatusBaseButton.Size.Small
+        loading: true
+    }
+
+    // Icon buttons
+
+    // blue
+
+    StatusRoundButton {
+        icon: "info"
+    }
+
+    StatusRoundButton {
+        icon: "info"
+        enabled: false
+    }
+
+    StatusRoundButton {
+        icon: "info"
+        loading: true
+    }
+
+    // black
+
+    StatusRoundButton {
+        type: StatusRoundButton.Type.Secondary
+        icon: "info"
+    }
+
+    StatusRoundButton {
+        type: StatusRoundButton.Type.Secondary
+        icon: "info"
+        enabled: false
+    }
+
+    StatusRoundButton {
+        type: StatusRoundButton.Type.Secondary
+        icon: "info"
+        loading: true
+    }
+
+    // Rounded blue
+
+    StatusFlatRoundButton {
+        width: 44
+        height: 44
+
+        icon: "info"
+    }
+
+    StatusFlatRoundButton {
+        width: 44
+        height: 44
+        icon: "info"
+        enabled: false
+    }
+
+    StatusFlatRoundButton {
+        width: 44
+        height: 44
+        icon: "info"
+        loading: true
+    }
+
+    // Rounded white
+
+    StatusFlatRoundButton {
+        type: StatusFlatRoundButton.Type.Secondary
+        width: 44
+        height: 44
+
+        icon: "info"
+    }
+
+    StatusFlatRoundButton {
+        type: StatusFlatRoundButton.Type.Secondary
+        width: 44
+        height: 44
+        icon: "info"
+        enabled: false
+    }
+
+    StatusFlatRoundButton {
+        type: StatusFlatRoundButton.Type.Secondary
+        width: 44
+        height: 44
+        icon: "info"
+        loading: true
+    }
+
+    StatusFlatButton {
+        iconName: "info"
+        text: "Button"
+        size: StatusBaseButton.Size.Small
+    }
+    StatusFlatButton {
+        iconName: "info"
+        text: "Button"
+        enabled: false
+        size: StatusBaseButton.Size.Small
+    }
+
+    StatusFlatButton {
+        iconName: "info"
+        text: "Button"
+        loading: true
+        size: StatusBaseButton.Size.Small
+    }
+}

sandbox/Controls.qml

@@ -9,7 +9,6 @@ GridLayout {
     columns: 6
     columnSpacing: 5
     rowSpacing: 5
-    property ThemePalette theme
 
     StatusIconTabButton {
         icon.name: "chat"
@@ -19,6 +18,14 @@ GridLayout {
         icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
     }
 
+    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"
+        name: "Pascal"
+    }
+
     StatusIconTabButton {
         name: "#status"
     }
@@ -85,4 +92,14 @@ GridLayout {
         tooltip.text: "Chat"
         badge.value: 100
     }
+
+    StatusSwitch {
+
+    }
+
+    StatusRadioButton {
+        text: "i'm radio!"
+    }
+
+    StatusCheckBox {}
 }

sandbox/Layout.qml

@@ -0,0 +1,258 @@
+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.Layout 0.1
+
+GridLayout {
+    columns: 6
+    columnSpacing: 5
+    rowSpacing: 5
+
+    Button {
+        id: btn
+        text: "Append"
+        onClicked: {
+            buttons.append({
+                name: "Test community",
+                tooltipText: "Test Community"
+            })
+        }
+    }
+
+    StatusAppNavBar {
+        navBarChatButton: StatusNavBarTabButton {
+            icon.name: "chat"
+            badge.value: 33
+            badge.visible: true
+            tooltip.text: "Chat"
+        }
+    }
+
+    StatusAppNavBar {
+        navBarChatButton: StatusNavBarTabButton {
+            icon.name: "chat"
+            badge.value: 33
+            badge.visible: true
+            tooltip.text: "Chat"
+        }
+
+        navBarCommunityTabButtons.model: ListModel {
+            id: buttons
+            ListElement {
+                name: "Test community"
+                tooltipText: "Test Community"
+            }
+        }
+
+        navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
+            name: model.name
+            tooltip.text: model.name
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+
+        navBarTabButtons: [
+            StatusNavBarTabButton {
+                icon.name: "wallet"
+                tooltip.text: "Wallet"
+            },
+            StatusNavBarTabButton {
+                icon.name: "browser"
+                tooltip.text: "Browser"
+            },
+            StatusNavBarTabButton {
+                icon.name: "status-update"
+                tooltip.text: "Timeline"
+            },
+            StatusNavBarTabButton {
+                icon.name: "profile"
+                badge.visible: true
+                badge.anchors.rightMargin: 4
+                badge.anchors.topMargin: 5
+                badge.border.color: Theme.palette.statusAppNavBar.backgroundColor
+                badge.border.width: 2
+
+                tooltip.text: "Profile"
+            }
+        ]
+    }
+
+    StatusAppNavBar {
+        navBarChatButton: StatusNavBarTabButton {
+            icon.name: "chat"
+            badge.value: 33
+            badge.visible: true
+            tooltip.text: "Chat"
+        }
+
+        navBarCommunityTabButtons.model: ListModel {
+            ListElement {
+                name: "Test community"
+                tooltipText: "Test Community"
+            }
+        }
+
+        navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
+            name: model.name
+            tooltip.text: model.name
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+
+        navBarTabButtons: [
+            StatusNavBarTabButton {
+                icon.name: "wallet"
+                tooltip.text: "Wallet"
+            },
+            StatusNavBarTabButton {
+                icon.name: "browser"
+                tooltip.text: "Browser"
+            }
+        ]
+    }
+
+    StatusAppNavBar {
+        navBarChatButton: StatusNavBarTabButton {
+            icon.name: "chat"
+            badge.value: 33
+            badge.visible: true
+            tooltip.text: "Chat"
+        }
+
+        navBarCommunityTabButtons.model: ListModel {
+            ListElement {
+                name: "Test community"
+                tooltipText: "Test Community"
+            }
+
+            ListElement {
+                name: "Test community"
+                tooltipText: "Test Community"
+            }
+
+            ListElement {
+                name: "Test community"
+                tooltipText: "Test Community"
+            }
+            ListElement {
+                name: "Test community"
+                tooltipText: "Test Community"
+            }
+        }
+
+        navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
+            name: model.name
+            tooltip.text: model.name
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+
+        navBarTabButtons: [
+            StatusNavBarTabButton {
+                icon.name: "wallet"
+                tooltip.text: "Wallet"
+            },
+            StatusNavBarTabButton {
+                icon.name: "browser"
+                tooltip.text: "Browser"
+            },
+            StatusNavBarTabButton {
+                icon.name: "status-update"
+                tooltip.text: "Timeline"
+            },
+            StatusNavBarTabButton {
+                icon.name: "profile"
+                badge.visible: true
+                badge.anchors.rightMargin: 4
+                badge.anchors.topMargin: 5
+                badge.border.color: Theme.palette.statusAppNavBar.backgroundColor
+                badge.border.width: 2
+
+                tooltip.text: "Profile"
+            }
+        ]
+    }
+
+    StatusAppNavBar {
+        id: test
+        navBarChatButton: StatusNavBarTabButton {
+            icon.name: "chat"
+            badge.value: 33
+            badge.visible: true
+            tooltip.text: "Chat"
+        }
+
+        navBarCommunityTabButtons.model: ListModel {
+            ListElement {
+                name: "Test community"
+                tooltipText: "Test Community"
+            }
+
+            ListElement {
+                name: "Test community"
+                tooltipText: "Test Community"
+            }
+            ListElement {
+                name: "Test community"
+                tooltipText: "Test Community"
+            }
+            ListElement {
+                name: "Test community"
+                tooltipText: "Test Community"
+            }
+            ListElement {
+                name: "Test community"
+                tooltipText: "Test Community"
+            }
+            ListElement {
+                name: "Test community"
+                tooltipText: "Test Community"
+            }
+            ListElement {
+                name: "Test community"
+                tooltipText: "Test Community"
+            }
+            ListElement {
+                name: "Test community"
+                tooltipText: "Test Community"
+            }
+            ListElement {
+                name: "Test community"
+                tooltipText: "Test Community"
+            }
+        }
+
+        navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
+            name: model.name
+            tooltip.text: model.name
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+
+        navBarTabButtons: [
+            StatusNavBarTabButton {
+                icon.name: "wallet"
+                tooltip.text: "Wallet"
+            },
+            StatusNavBarTabButton {
+                icon.name: "browser"
+                tooltip.text: "Browser"
+            },
+            StatusNavBarTabButton {
+                icon.name: "status-update"
+                tooltip.text: "Timeline"
+            },
+            StatusNavBarTabButton {
+                icon.name: "profile"
+                badge.visible: true
+                badge.anchors.rightMargin: 4
+                badge.anchors.topMargin: 5
+                badge.border.color: Theme.palette.statusAppNavBar.backgroundColor
+                badge.border.width: 2
+
+                tooltip.text: "Profile"
+            }
+        ]
+    }
+}
+

sandbox/ListItems.qml

@@ -0,0 +1,129 @@
+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
+
+GridLayout {
+    columns: 1
+    columnSpacing: 5
+    rowSpacing: 5
+
+    StatusListItem {
+        title: "Title"
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+    }
+
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        components: [StatusButton {
+            text: "Button"
+            size: StatusBaseButton.Size.Small
+        }]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        components: [StatusSwitch {}]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        components: [StatusRadioButton {}]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        components: [StatusCheckBox {}]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        label: "Text"
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        label: "Text"
+        components: [
+            StatusButton {
+                text: "Button"
+                size: StatusBaseButton.Size.Small
+            }
+        ]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        label: "Text"
+        components: [StatusSwitch {}]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        label: "Text"
+        components: [
+          StatusRadioButton {}
+        ]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        label: "Text"
+        components: [StatusCheckBox {}]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        label: "Text"
+        components: [
+            StatusBadge {
+                value: 1
+            },
+            StatusIcon {
+                icon: "info"
+                color: Theme.palette.baseColor1
+                width: 20
+                height: 20
+            }
+        ]
+    }
+}

sandbox/Others.qml

@@ -8,10 +8,9 @@ GridLayout {
     columns: 6
     columnSpacing: 5
     rowSpacing: 5
-    property ThemePalette theme
 
     StatusLoadingIndicator {
-        color: parent.theme.directColor4
+        color: Theme.palette.directColor4
     }
 
     StatusLetterIdenticon {
@@ -35,4 +34,8 @@ GridLayout {
     StatusBadge {
         value: 100
     }
+
+    StatusRoundIcon {
+        icon.name: "info"
+    }
 }

sandbox/main.qml

@@ -2,24 +2,36 @@ import QtQuick 2.14
 import QtQuick.Window 2.14
 import QtQuick.Controls 2.14
 
+import Sandbox 0.1
+
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 
-Window {
+StatusWindow {
     id: rootWindow
-    width: 640
-    height: 480
+    width: 1024
+    height: 840
     visible: true
     title: qsTr("Status App Sandbox")
 
+    property ThemePalette lightTheme: StatusLightTheme {}
+    property ThemePalette darkTheme: StatusDarkTheme { }
+
     ButtonGroup {
         id: topicsGroup
         buttons: tabs.children
     }
 
+    ButtonGroup {
+        buttons: switchRow.children
+    }
+
     Flow {
         id: tabs
-        width: parent.width
+        anchors.left: parent.left
+        anchors.leftMargin: 100
+        anchors.right: parent.right
+
         Button {
             text: "Reload QML"
             onClicked: app.restartQml()
@@ -34,84 +46,101 @@ Window {
             checkable: true
             text: "Controls"
         }
+        Button {
+            id: listItemsTab
+            checkable: true
+            text: "List Items"
+        }
+        Button {
+            id: layoutTab
+            checkable: true
+            text: "Layout"
+        }
         Button {
             id: otherTab
             checkable: true
             text: "Other"
         }
+
+        Button {
+            id: buttonsTab
+            checkable: true
+            text: "Buttons"
+        }
     }
 
+
+
     ScrollView {
         width: parent.width
         anchors.top: tabs.bottom
         anchors.bottom: parent.bottom
-        contentHeight: rootWindow.height * rootWindow.factor
+        contentHeight: lightThemeBg.height * rootWindow.factor
         contentWidth: rootWindow.width * rootWindow.factor
         clip: true
-        SplitView {
-            width: parent.width
-            height: rootWindow.height
-            handle: Item {}
 
+
+        Rectangle {
+            id: lightThemeBg
+
+            width: rootWindow.width
+            height: page.height + 64
+            anchors.topMargin: 32
+            color: Theme.palette.baseColor5
+            clip: true
             scale: rootWindow.factor
 
-            Rectangle {
-                id: lightThemeBg
+            Loader {
+                id: page
+                active: true
+                anchors.centerIn: parent
 
-                SplitView.minimumWidth: rootWindow.width / 2
-                height: parent.height
-                color: lightTheme.baseColor5
-                clip: true
-
-                Loader {
-                    active: true
-                    anchors.centerIn: parent
-                    property var currentTheme: StatusLightTheme { id: lightTheme }
-
-                    sourceComponent: {
-                        switch(topicsGroup.checkedButton) {
-                        case iconsTab:
-                            return iconsComponent;
-                        case controlsTab:
-                            return controlsComponent;
-                        case otherTab:
-                            return othersComponent;
-                        default:
-                            return null;
-                        }
+                sourceComponent: {
+                    switch(topicsGroup.checkedButton) {
+                    case iconsTab:
+                        return iconsComponent;
+                    case controlsTab:
+                        return controlsComponent;
+                    case listItemsTab:
+                        return listItemsComponent;
+                    case layoutTab:
+                        return layoutComponent;
+                    case otherTab:
+                        return othersComponent;
+                    case buttonsTab:
+                        return buttonsComponent;
+                    default:
+                        return null;
                     }
                 }
-
             }
 
-            Rectangle {
-                id: darkThemeBg
+            Row {
+                id: switchRow
+                scale: 0.8
+                anchors.right: parent.right
+                anchors.top: parent.top
 
-                SplitView.fillWidth: true
-                SplitView.minimumWidth: rootWindow.width / 2
-                height: parent.height
-                color: darkTheme.baseColor5
-                clip: true
-
-                Loader {
-                    active: true
-                    anchors.centerIn: parent
-                    property var currentTheme:  StatusDarkTheme { id: darkTheme }
-
-                    sourceComponent: {
-                        switch(topicsGroup.checkedButton) {
-                        case iconsTab:
-                            return iconsComponent;
-                        case controlsTab:
-                            return controlsComponent;
-                        case otherTab:
-                            return othersComponent;
-                        default:
-                            return null;
+                Button {
+                    checkable: true
+                    checked: true
+                    text: "Light Theme"
+                    onCheckedChanged: {
+                        if (checked) {
+                            Theme.setTheme(lightTheme)
                         }
                     }
                 }
 
+                Button {
+                    checkable: true
+                    text: "Dark Theme"
+                    onCheckedChanged: {
+                        if (checked) {
+                            Theme.setTheme(darkTheme)
+                        }
+                    }
+                }
             }
         }
     }
@@ -147,7 +176,7 @@ Window {
         id: iconsComponent
         Icons {
             anchors.centerIn: parent
-            iconColor: parent? parent.currentTheme.primaryColor1 : "#ffffff"
+            iconColor: Theme.palette.primaryColor1
         }
     }
 
@@ -155,7 +184,20 @@ Window {
         id: controlsComponent
         Controls {
             anchors.centerIn: parent
-            theme: parent.currentTheme
+        }
+    }
+
+    Component {
+        id: listItemsComponent
+        ListItems {
+            anchors.centerIn: parent
+        }
+    }
+
+    Component {
+        id: layoutComponent
+        Layout {
+            anchors.centerIn: parent
         }
     }
 
@@ -163,7 +205,13 @@ Window {
         id: othersComponent
         Others {
             anchors.centerIn: parent
-            theme: parent.currentTheme
+        }
+    }
+
+    Component {
+        id: buttonsComponent
+        Buttons {
+            anchors.centerIn: parent
         }
     }
 }

sandbox/qml.qrc

@@ -4,5 +4,6 @@
         <file>Controls.qml</file>
         <file>Icons.qml</file>
         <file>Others.qml</file>
+        <file>Buttons.qml</file>
     </qresource>
 </RCC>

sandbox/sandbox.pro

@@ -11,6 +11,9 @@ SOURCES += \
         main.cpp \
         sandboxapp.cpp
 
+OBJECTIVE_SOURCES += \
+    statuswindow_mac.mm
+
 RESOURCES += qml.qrc
 
 DESTDIR = $$PWD/bin
@@ -25,4 +28,13 @@ OTHER_FILES += $$files($$PWD/../src/*, true)
 
 HEADERS += \
     handler.h \
-    sandboxapp.h
+    sandboxapp.h \
+    statuswindow.h
+
+DISTFILES += \
+    ../src/StatusQ/Controls/StatusBaseButton.qml \
+    ../src/StatusQ/Controls/StatusButton.qml \
+    ../src/StatusQ/Controls/StatusCheckBox.qml \
+    ../src/StatusQ/Controls/StatusFlatRoundButton.qml \
+    ../src/StatusQ/Controls/StatusRadioButton.qml \
+    ../src/StatusQ/Controls/StatusSwitch.qml

sandbox/sandboxapp.cpp

@@ -1,9 +1,11 @@
 #include "sandboxapp.h"
 
 #include <QQmlContext>
-
+#include <QWindow>
 #include <QDebug>
 
+#include "statuswindow.h"
+
 SandboxApp::SandboxApp(int &argc, char **argv)
     : QGuiApplication(argc, argv),
       m_handler(new Handler(this))
@@ -13,6 +15,8 @@ SandboxApp::SandboxApp(int &argc, char **argv)
 
 void SandboxApp::startEngine()
 {
+    qmlRegisterType<StatusWindow>("Sandbox", 0, 1, "StatusWindow");
+
     const QUrl url(applicationDirPath() + "/../main.qml");
 
     m_engine.rootContext()->setContextProperty("app", m_handler);
@@ -30,7 +34,11 @@ void SandboxApp::startEngine()
 void SandboxApp::restartEngine()
 {
     const QUrl url(applicationDirPath() + "/../main.qml");
-    m_engine.rootObjects().at(0)->deleteLater();
+    QWindow *rootWindow = qobject_cast<QWindow*>(m_engine.rootObjects().at(0));
+    if (rootWindow) {
+
+        rootWindow->close();
+    }
     m_engine.clearComponentCache();
     m_engine.load(url);
 }

sandbox/statuswindow.h

@@ -0,0 +1,21 @@
+#ifndef STATUSWINDOW_H
+#define STATUSWINDOW_H
+
+#include <QQuickWindow>
+
+class StatusWindow: public QQuickWindow
+{
+    Q_OBJECT
+
+public:
+    explicit StatusWindow(QWindow *parent = nullptr)
+        : QQuickWindow(parent)
+    {
+        removeTitleBar(winId());
+    }
+
+private:
+    void removeTitleBar(WId wid);
+};
+
+#endif // STATUSWINDOW_H

sandbox/statuswindow_mac.mm

@@ -0,0 +1,18 @@
+#include "statuswindow.h"
+
+#include <QColor>
+
+#include <Foundation/Foundation.h>
+#include <AppKit/NSView.h>
+#include <AppKit/NSWindow.h>
+#include <AppKit/NSColor.h>
+
+void StatusWindow::removeTitleBar(WId wid)
+{
+    NSView *nsView = reinterpret_cast<NSView*>(wid);
+    NSWindow *window = [nsView window];
+
+    window.titlebarAppearsTransparent = true;
+    window.titleVisibility = NSWindowTitleHidden;
+    window.styleMask |= NSWindowStyleMaskFullSizeContentView;
+}

src/StatusQ/Components/StatusBadge.qml

@@ -28,7 +28,7 @@ Rectangle {
         visible: statusBadge.value > 0
         font.pixelSize: statusBadge.value > 99 ? 10 : 12
         font.weight: Font.Bold
-        color: Theme.palette.white
+        color: Theme.palette.statusBadge.foregroundColor
         anchors.centerIn: parent
         text: {
             if (statusBadge.value > 99) {

src/StatusQ/Components/StatusListItem.qml

@@ -0,0 +1,109 @@
+import QtQuick 2.13
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+
+Rectangle {
+    id: statusListItem
+
+    implicitWidth: 448
+    implicitHeight: 64
+
+    color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.statusListItem.backgroundColor
+    radius: 8
+
+    property string title: ""
+    property string subTitle: ""
+    property StatusIconSettings icon: StatusIconSettings {
+        height: 20
+        width: 20
+    }
+    property StatusImageSettings image: StatusImageSettings {}
+    property string label: ""
+
+    property list<Item> components
+
+    onComponentsChanged: {
+        if (components.length) {
+            for (let idx in components) {
+                components[idx].parent = statusListItemComponentsSlot
+            }
+        }
+    }
+
+    MouseArea {
+        id: sensor
+
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor 
+        hoverEnabled: true
+
+        Loader {
+            id: iconOrImage
+            anchors.left: parent.left
+            anchors.leftMargin: 16
+            anchors.verticalCenter: parent.verticalCenter
+            sourceComponent: !!statusListItem.icon.name ? statusRoundedIcon : statusRoundedImage
+            active: !!statusListItem.icon.name || !!statusListItem.image.source.toString()
+        }
+
+        Component {
+            id: statusRoundedIcon
+            StatusRoundIcon {
+                icon: statusListItem.icon
+            }
+        }
+
+        Component {
+            id: statusRoundedImage
+            StatusRoundedImage {
+                image.source: statusListItem.image.source
+            }
+        }
+
+        Item {
+            anchors.left: iconOrImage.active ? iconOrImage.right : parent.left
+            anchors.leftMargin: 16
+            anchors.verticalCenter: parent.verticalCenter
+            height: statusListItemTitle.height + (statusListItemSubTitle.visible ? statusListItemSubTitle.height : 0)
+
+            StatusBaseText {
+                id: statusListItemTitle
+                text: statusListItem.title
+                font.pixelSize: 15
+                color: Theme.palette.directColor1
+            }
+
+            StatusBaseText {
+                id: statusListItemSubTitle
+                anchors.top: statusListItemTitle.bottom
+
+                text: statusListItem.subTitle
+                font.pixelSize: 15
+                color: Theme.palette.baseColor1
+                visible: !!statusListItem.subTitle
+            }
+        }
+
+        StatusBaseText {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: statusListItemComponentsSlot.left
+            anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0
+
+            text: statusListItem.label
+            font.pixelSize: 15
+            color: Theme.palette.baseColor1
+            visible: !!statusListItem.label
+        }
+
+
+        Row {
+            id: statusListItemComponentsSlot
+            anchors.right: parent.right
+            anchors.rightMargin: 16
+            anchors.verticalCenter: parent.verticalCenter
+            spacing: 10
+        }
+    }
+}

src/StatusQ/Components/StatusRoundIcon.qml

@@ -0,0 +1,28 @@
+import QtQuick 2.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+Rectangle {
+    id: statusRoundedIcon
+
+    implicitWidth: 40
+    implicitHeight: 40
+    radius: width / 2;
+
+    color: Theme.palette.primaryColor3;
+    property StatusIconSettings icon: StatusIconSettings {
+        width: 24
+        height: 24
+    }
+
+    StatusIcon {
+        id: statusIcon
+        anchors.centerIn: parent
+
+        width: statusRoundedIcon.icon.width
+        height: statusRoundedIcon.icon.height
+
+        color: Theme.palette.primaryColor1
+        icon: statusRoundedIcon.icon.name
+    }
+}

src/StatusQ/Components/qmldir

@@ -2,5 +2,7 @@ module StatusQ.Components
 
 StatusBadge 0.1 StatusBadge.qml
 StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
+StatusListItem 0.1 StatusListItem.qml
 StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
+StatusRoundIcon 0.1 StatusRoundIcon.qml
 StatusRoundedImage 0.1 StatusRoundedImage.qml

src/StatusQ/Controls/StatusBaseButton.qml

@@ -0,0 +1,142 @@
+import QtQuick 2.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+Rectangle {
+    id: statusBaseButton
+
+    enum Size {
+        Small,
+        Large
+    }
+
+    enum Type {
+        Normal,
+        Danger
+    }
+
+    property alias iconName: icon.icon
+
+    property bool loading: false
+
+    property alias hovered: sensor.containsMouse
+
+    property int size: StatusBaseButton.Size.Large
+    property int type: StatusBaseButton.Type.Normal
+
+    property alias text: label.text
+    property alias font: label.font
+
+    property real defaultLeftPadding: size === StatusBaseButton.Size.Large ? 24 : 12
+    property real defaultRightPadding: size === StatusBaseButton.Size.Large ? 24 : 12
+    property real defaultTopPadding: size === StatusBaseButton.Size.Large ? 11 : 10
+    property real defaultBottomPadding: size === StatusBaseButton.Size.Large ? 11 : 10
+
+
+    property real leftPadding: defaultLeftPadding
+    property real rightPadding: defaultRightPadding
+    property real topPadding: defaultTopPadding
+    property real bottomPadding: defaultBottomPadding
+
+    property color normalColor
+    property color hoverColor
+    property color disaledColor
+
+    property color textColor
+    property color disabledTextColor
+
+    signal pressed(var mouse)
+    signal released(var mouse)
+    signal clicked(var mouse)
+    signal pressAndHold(var mouse)
+
+
+
+    /// Implementation
+
+    implicitWidth: sensor.width
+    implicitHeight: sensor.height
+
+    radius: 8
+
+    color: {
+        if (statusBaseButton.enabled) {
+            return sensor.containsMouse ? hoverColor
+                                        : normalColor
+        } else {
+            return disaledColor
+        }
+    }
+
+
+    MouseArea {
+        id: sensor
+        width: layout.width + statusBaseButton.leftPadding + statusBaseButton.rightPadding
+        height: layout.height + statusBaseButton.topPadding + statusBaseButton.bottomPadding
+
+        cursorShape: loading ? Qt.ArrowCursor
+                             : Qt.PointingHandCursor
+        hoverEnabled: !loading
+        enabled: !loading
+
+        Row {
+            id: layout
+            anchors.left: parent.left
+            anchors.leftMargin: statusBaseButton.leftPadding
+            anchors.verticalCenter: parent.verticalCenter
+            spacing: 4
+            StatusIcon {
+                id: icon
+                anchors.verticalCenter: parent.verticalCenter
+                visible: !loading && iconName !== ""
+                color: statusBaseButton.enabled ? textColor
+                                                : disabledTextColor
+            } // Icon
+            StatusBaseText {
+                id: label
+                visible: !loading
+                anchors.verticalCenter: parent.verticalCenter
+                font.pixelSize: size === StatusBaseButton.Size.Large ? 15 : 13 // by design
+
+                color: statusBaseButton.enabled ? textColor
+                                                : disabledTextColor
+            } // Text
+
+            Loader {
+                anchors.verticalCenter: parent.verticalCenter
+                active: loading
+                sourceComponent: StatusLoadingIndicator {
+                    color: statusBaseButton.enabled ? textColor
+                                                    : disabledTextColor
+                } // Indicator
+            } // Loader
+        } // Ro
+
+
+        onPressed: {
+            if (!loading) {
+                statusBaseButton.pressed(mouse)
+            }
+        }
+
+        onReleased: {
+            if (!loading) {
+                statusBaseButton.released(mouse)
+            }
+        }
+
+        onClicked: {
+            if (!loading) {
+                statusBaseButton.clicked(mouse)
+            }
+        }
+
+        onPressAndHold: {
+            if (!loading) {
+                statusBaseButton.pressAndHold(mouse)
+            }
+        }
+    } // Sensor
+
+}

src/StatusQ/Controls/StatusButton.qml

@@ -0,0 +1,17 @@
+import QtQuick 2.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+StatusBaseButton {
+    id: statusButton
+
+    normalColor: type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor3
+                                                       : Theme.palette.dangerColor3
+    hoverColor:  type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor2
+                                                       : Theme.palette.dangerColor2
+    disaledColor: Theme.palette.baseColor2
+
+    textColor: type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor1
+                                                     : Theme.palette.dangerColor1
+    disabledTextColor: Theme.palette.baseColor1
+}

src/StatusQ/Controls/StatusCheckBox.qml

@@ -0,0 +1,42 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtGraphicalEffects 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+
+CheckBox {
+    id: statusCheckBox
+
+    indicator: Rectangle {
+        implicitWidth: 18
+        implicitHeight: 18
+        x: statusCheckBox.leftPadding
+        y: parent.height / 2 - height / 2
+        radius: 2
+        color: (statusCheckBox.down || statusCheckBox.checked) ? Theme.palette.primaryColor1
+                                                               : Theme.palette.directColor8
+
+        StatusIcon {
+            icon: "checkbox"
+            width: 11
+            height: 8
+            anchors.centerIn: parent
+            anchors.horizontalCenterOffset: 1
+            color: Theme.palette.white
+            visible: statusCheckBox.down || statusCheckBox.checked
+        }
+    }
+
+    contentItem: StatusBaseText {
+        text: statusCheckBox.text
+        opacity: enabled ? 1.0 : 0.3
+        verticalAlignment: Text.AlignVCenter
+        wrapMode: Text.WordWrap
+        width: parent.width
+        leftPadding: !!statusCheckBox.text ? statusCheckBox.indicator.width + statusCheckBox.spacing
+                                           : statusCheckBox.indicator.width
+    }
+}

src/StatusQ/Controls/StatusFlatButton.qml

@@ -0,0 +1,21 @@
+import QtQuick 2.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+StatusBaseButton {
+    id: statusFlatButton
+
+    normalColor: "transparent"
+    hoverColor:  type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor3
+                                                       : Theme.palette.dangerColor3
+    disaledColor: "transparent"
+
+    textColor: type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor1
+                                                     : Theme.palette.dangerColor1
+    disabledTextColor: Theme.palette.baseColor1
+
+    border.color: type === StatusBaseButton.Type.Normal || hovered ? "transparent"
+                                                          : Theme.palette.baseColor2
+    rightPadding: iconName !== "" ? 18 : defaultRightPadding
+    leftPadding: iconName !== "" ? 14 : defaultLeftPadding
+}

src/StatusQ/Controls/StatusFlatRoundButton.qml

@@ -0,0 +1,138 @@
+import QtQuick 2.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+
+Rectangle {
+    id: statusFlatRoundButton
+
+    property alias icon: iconSettings.name
+
+    property bool loading: false
+
+    property int type: StatusFlatRoundButton.Type.Primary
+
+    signal pressed(var mouse)
+    signal released(var mouse)
+    signal clicked(var mouse)
+    signal pressAndHold(var mouse)
+
+    enum Type {
+        Primary,
+        Secondary
+    }
+
+
+
+    /// Implementation
+
+    QtObject {
+        id: iconSettings
+        property alias name: statusIcon.icon
+        property color color: {
+            switch(statusFlatRoundButton.type) {
+            case StatusFlatRoundButton.Type.Secondary:
+                return Theme.palette.directColor1;
+            case StatusFlatRoundButton.Type.Primary:
+                return Theme.palette.primaryColor1;
+            }
+        }
+
+        property color disabledColor: {
+            switch(statusFlatRoundButton.type) {
+            case StatusFlatRoundButton.Type.Secondary:
+                return Theme.palette.baseColor1;
+            case StatusFlatRoundButton.Type.Primary:
+                return Theme.palette.baseColor1;
+            }
+        }
+    }
+
+    QtObject {
+        id: backgroundSettings
+
+        property color color: {
+            switch(statusFlatRoundButton.type) {
+            case StatusFlatRoundButton.Type.Primary:
+            case StatusFlatRoundButton.Type.Secondary:
+                return "transparent";
+            }
+        }
+
+        property color hoverColor: {
+            switch(statusFlatRoundButton.type) {
+            case StatusFlatRoundButton.Type.Primary:
+                return Theme.palette.primaryColor2;
+            case StatusFlatRoundButton.Type.Secondary:
+                return "transparent";
+            }
+        }
+
+        property color disabledColor: {
+            switch(statusFlatRoundButton.type) {
+            case StatusFlatRoundButton.Type.Primary:
+            case StatusFlatRoundButton.Type.Secondary:
+                return "transparent";
+            }
+        }
+    }
+
+    implicitWidth: 44
+    implicitHeight: 44
+    radius: 8
+
+    color: {
+        if (statusFlatRoundButton.enabled) {
+            return sensor.containsMouse ? backgroundSettings.hoverColor
+                                        : backgroundSettings.color
+        } else {
+            return backgroundSettings.disabledColor
+        }
+    }
+    MouseArea {
+        id: sensor
+
+        anchors.fill: parent
+        cursorShape: loading ? Qt.ArrowCursor
+                             : Qt.PointingHandCursor
+        hoverEnabled: !loading
+        enabled: !loading
+
+
+        StatusIcon {
+            id: statusIcon
+            anchors.centerIn: parent
+            visible: !loading
+
+            width: statusFlatRoundButton.width -  20
+            height: statusFlatRoundButton.height - 20
+
+            color: {
+                if (statusFlatRoundButton.enabled) {
+                    return iconSettings.color
+                } else {
+                    return iconSettings.disabledColor
+                }
+            }
+        } // Icon
+        Loader {
+            active: loading
+            anchors.centerIn: parent
+            sourceComponent: StatusLoadingIndicator {
+                color: {
+                    if (statusFlatRoundButton.enabled) {
+                        return iconSettings.color
+                    } else {
+                        return iconSettings.disabledColor
+                    }
+                }
+            } // Indicator
+        } // Loader
+
+        onClicked: statusFlatRoundButton.clicked(mouse)
+        onPressed: statusFlatRoundButton.pressed(mouse)
+        onReleased: statusFlatRoundButton.released(mouse)
+        onPressAndHold: statusFlatRoundButton.pressAndHold(mouse)
+    } // Sensor
+} // Rectangle

src/StatusQ/Controls/StatusIconTabButton.qml

@@ -40,10 +40,37 @@ TabButton {
 
         Component {
             id: imageIcon
-            StatusRoundedImage {
+            Item {
                 width: 28
                 height: 28
-                image.source: icon.source
+                StatusRoundedImage {
+                    id: statusRoundImage
+                    width: parent.width
+                    height: parent.height
+                    image.source: icon.source
+                }
+                Loader {
+                    sourceComponent: {
+                        switch (statusRoundImage.image.status) {
+                            case Image.Loading:
+                              return statusLoadingIndicator
+                              break;
+                            case Image.Error:
+                              return letterIdenticon
+                              break;
+                        }
+                    }
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    active: statusRoundImage.image.status === Image.Loading || statusRoundImage.image.status === Image.Error
+                }
+
+                Component {
+                    id: statusLoadingIndicator
+                    StatusLoadingIndicator {
+                        color: Theme.palette.directColor6
+                    }
+                }
             }
         }
 

src/StatusQ/Controls/StatusRadioButton.qml

@@ -0,0 +1,41 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQml 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+
+RadioButton {
+    id: statusRadioButton
+
+    width: indicator.implicitWidth
+
+    indicator: Rectangle {
+        implicitWidth: 20
+        implicitHeight: 20
+        x: 0
+        y: 6
+        radius: 10
+        color: statusRadioButton.checked ? Theme.palette.primaryColor1
+                                         : Theme.palette.directColor8
+
+        Rectangle {
+            width: 12
+            height: 12
+            radius: 6
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            color: statusRadioButton.checked ? Theme.palette.white : "transparent"
+            visible: statusRadioButton.checked
+        }
+    }
+    contentItem: StatusBaseText {
+        text: statusRadioButton.text
+        color: Theme.palette.directColor1
+        verticalAlignment: Text.AlignVCenter
+        leftPadding: !!statusRadioButton.text ? statusRadioButton.indicator.width + statusRadioButton.spacing
+                                              : statusRadioButton.indicator.width
+    }
+}

src/StatusQ/Controls/StatusRoundButton.qml

@@ -0,0 +1,140 @@
+import QtQuick 2.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+
+Rectangle {
+    id: statusRoundButton
+
+    property alias icon: iconSettings.name
+
+    property bool loading: false
+
+    property int type: StatusRoundButton.Type.Primary
+
+    signal pressed(var mouse)
+    signal released(var mouse)
+    signal clicked(var mouse)
+    signal pressAndHold(var mouse)
+
+    enum Type {
+        Primary,
+        Secondary
+    }
+
+
+
+    /// Implementation
+
+    QtObject {
+        id: iconSettings
+        property alias name: statusIcon.icon
+        property color color: {
+            switch(statusRoundButton.type) {
+            case StatusRoundButton.Type.Primary:
+                return Theme.palette.primaryColor1;
+            case StatusRoundButton.Type.Secondary:
+                return Theme.palette.indirectColor1;
+            }
+        }
+
+        property color disabledColor: {
+            switch(statusRoundButton.type) {
+            case StatusRoundButton.Type.Primary:
+                return Theme.palette.baseColor1;
+            case StatusRoundButton.Type.Secondary:
+                return Theme.palette.indirectColor1;
+            }
+        }
+    }
+
+    QtObject {
+        id: backgroundSettings
+
+        property color color: {
+            switch(statusRoundButton.type) {
+            case StatusRoundButton.Type.Primary:
+                return Theme.palette.primaryColor3;
+            case StatusRoundButton.Type.Secondary:
+                return Theme.palette.primaryColor1;
+            }
+        }
+
+        property color hoverColor: {
+            switch(statusRoundButton.type) {
+            case StatusRoundButton.Type.Primary:
+                return Theme.palette.primaryColor2;
+            case StatusRoundButton.Type.Secondary:
+                return Theme.palette.miscColor1;
+            }
+        }
+
+        property color disabledColor: {
+            switch(statusRoundButton.type) {
+            case StatusRoundButton.Type.Primary:
+                return Theme.palette.indirectColor1;
+            case StatusRoundButton.Type.Secondary:
+                return Theme.palette.baseColor1;
+            }
+        }
+    }
+
+    implicitWidth: 44
+    implicitHeight: 44
+    radius: width / 2;
+
+    color: {
+        if (statusRoundButton.enabled) {
+            return sensor.containsMouse ? backgroundSettings.hoverColor
+                                        : backgroundSettings.color
+        } else {
+            return backgroundSettings.disabledColor
+        }
+    }
+    MouseArea {
+        id: sensor
+
+        anchors.fill: parent
+        cursorShape: loading ? Qt.ArrowCursor
+                             : Qt.PointingHandCursor
+        hoverEnabled: !loading
+        enabled: !loading
+
+
+        StatusIcon {
+            id: statusIcon
+            anchors.centerIn: parent
+            visible: !loading
+
+            width: statusRoundButton.width -  20
+            height: statusRoundButton.height - 20
+
+            color: {
+                if (statusRoundButton.enabled) {
+                    return iconSettings.color
+                } else {
+                    return iconSettings.disabledColor
+                }
+            }
+        } // Icon
+        Loader {
+            active: loading
+            anchors.centerIn: parent
+            sourceComponent: StatusLoadingIndicator {
+                color: {
+                    if (statusRoundButton.enabled) {
+                        return iconSettings.color
+                    } else {
+                        return iconSettings.disabledColor
+                    }
+                }
+            } // Indicator
+        } // Loader
+
+        onClicked: statusRoundButton.clicked(mouse)
+        onPressed: statusRoundButton.pressed(mouse)
+        onReleased: statusRoundButton.released(mouse)
+        onPressAndHold: statusRoundButton.pressAndHold(mouse)
+    } // Sensor
+} // Rectangle

src/StatusQ/Controls/StatusSwitch.qml

@@ -0,0 +1,66 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.14
+import QtGraphicalEffects 1.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+Switch {
+    id: statusSwitch
+
+    indicator: Rectangle {
+        id: oval
+        implicitWidth: 52
+        implicitHeight: 28
+        x: statusSwitch.leftPadding
+        y: parent.height / 2 - height / 2
+        radius: 14
+        color: statusSwitch.checked ? Theme.palette.primaryColor1
+                               : Theme.palette.directColor8
+
+
+        Rectangle {
+            id: circle
+            y: 4
+            width: 20
+            height: 20
+            radius: 10
+            color: Theme.palette.white
+            layer.enabled: true
+            layer.effect: DropShadow {
+                width: parent.width
+                height: parent.height
+                visible: true
+                verticalOffset: 1
+                fast: true
+                cached: true
+                color: Theme.palette.dropShadow
+            }
+
+            states: [
+                State {
+                    name: "on"
+                    when: statusSwitch.checked
+                    PropertyChanges { target: circle; x: oval.width - circle.width - 4 }
+                },
+                State {
+                    name: "off"
+                    when: !statusSwitch.checked
+                    PropertyChanges { target: circle; x: 4 }
+                }
+            ]
+
+            transitions: Transition {
+                reversible: true
+                NumberAnimation { properties: "x"; easing.type: Easing.Linear; duration: 120; }
+            }
+        }
+    }
+
+    contentItem: StatusBaseText {
+        text: statusSwitch.text
+        opacity: enabled ? 1.0 : 0.3
+        verticalAlignment: Text.AlignVCenter
+        leftPadding: !!statusSwitch.text ? statusSwitch.indicator.width + statusSwitch.spacing : statusSwitch.indicator.width
+    }
+}

src/StatusQ/Controls/qmldir

@@ -3,4 +3,11 @@ module StatusQ.Controls
 StatusIconTabButton 0.1 StatusIconTabButton.qml
 StatusNavBarTabButton 0.1 StatusNavBarTabButton.qml
 StatusToolTip 0.1 StatusToolTip.qml
-
+StatusBaseButton 0.1 StatusBaseButton.qml
+StatusButton 0.1 StatusButton.qml
+StatusFlatButton 0.1 StatusFlatButton.qml
+StatusRoundButton 0.1 StatusRoundButton.qml
+StatusFlatRoundButton 0.1 StatusFlatRoundButton.qml
+StatusSwitch 0.1 StatusSwitch.qml
+StatusRadioButton 0.1 StatusRadioButton.qml
+StatusCheckBox 0.1 StatusCheckBox.qml

src/StatusQ/Core/StatusIcon.qml

@@ -3,7 +3,7 @@ import QtGraphicalEffects 1.13
 
 Image {
     property string icon: ""
-    property color color
+    property string color: ""
 
     id: statusIcon
     width: 24
@@ -19,7 +19,7 @@ Image {
     }
 
     ColorOverlay {
-        visible: statusIcon.color !== undefined
+        visible: !!statusIcon.color
         anchors.fill: statusIcon
         source: statusIcon
         color: statusIcon.color

src/StatusQ/Core/StatusIconSettings.qml

@@ -0,0 +1,11 @@
+import QtQuick 2.13
+
+QtObject {
+    id: statusIconSettings
+
+    property string name
+    property real width
+    property real height
+    property color color
+    property url source
+}

src/StatusQ/Core/StatusImageSettings.qml

@@ -0,0 +1,10 @@
+import QtQuick 2.13
+
+QtObject {
+    id: statusImageSettings
+
+    property url source
+    property real width
+    property real height
+}
+

src/StatusQ/Core/Theme/StatusDarkTheme.qml

@@ -116,5 +116,17 @@ ThemePalette {
     miscColor9: getColor('moss2')
     miscColor10: getColor('brown3')
     miscColor11: getColor('yellow2')
+
+    property QtObject statusAppNavBar: QtObject {
+        property color backgroundColor: baseColor5
+    }
+
+    property QtObject statusListItem: QtObject {
+        property color backgroundColor: baseColor3
+    }
+
+    property QtObject statusBadge: QtObject {
+        property color foregroundColor: baseColor3
+    }
 }
 

src/StatusQ/Core/Theme/StatusLightTheme.qml

@@ -116,5 +116,17 @@ ThemePalette {
     miscColor9: getColor('moss')
     miscColor10: getColor('brown')
     miscColor11: getColor('brown2')
+
+    property QtObject statusAppNavBar: QtObject {
+        property color backgroundColor: baseColor4
+    }
+
+    property QtObject statusListItem: QtObject {
+        property color backgroundColor: white
+    }
+
+    property QtObject statusBadge: QtObject {
+        property color foregroundColor: white
+    }
 }
 

src/StatusQ/Core/Theme/Theme.qml

@@ -4,7 +4,7 @@ import QtQuick 2.13
 
 QtObject {
     id: appTheme
-    property ThemePalette palette: StatusLightTheme {}
+    property QtObject palette: StatusLightTheme {}
 
     function setTheme(theme) {
         palette = theme

src/StatusQ/Core/Theme/ThemePalette.qml

@@ -25,6 +25,8 @@ QtObject {
     property color black: getColor('black')
     property color white: getColor('white')
 
+    property color dropShadow: getColor('black', 0.12)
+
     property color baseColor1
     property color baseColor2
     property color baseColor3
@@ -76,6 +78,18 @@ QtObject {
     property color miscColor10
     property color miscColor11
 
+    property QtObject statusAppNavBar: QtObject {
+        property color backgroundColor
+    }
+
+    property QtObject statusListItem: QtObject {
+        property color backgroundColor
+    }
+
+    property QtObject statusBadge: QtObject {
+        property color foregroundColor
+    }
+
     function alphaColor(color, alpha) {
         let actualColor = Qt.darker(color, 1)
         actualColor.a = alpha

src/StatusQ/Core/qmldir

@@ -2,4 +2,6 @@ module StatusQ.Core
 
 StatusBaseText 0.1 StatusBaseText.qml
 StatusIcon 0.1 StatusIcon.qml
+StatusIconSettings 0.1 StatusIconSettings.qml
+StatusImageSettings 0.1 StatusImageSettings.qml
 

src/StatusQ/Layout/StatusAppNavBar.qml

@@ -0,0 +1,135 @@
+import QtQuick 2.13
+import QtQuick.Layouts 1.13
+import QtQuick.Controls 2.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+Rectangle {
+    id: statusAppNavBar
+
+    property StatusNavBarTabButton navBarChatButton
+    property list<StatusNavBarTabButton> navBarTabButtons
+    property alias navBarCommunityTabButtons: navBarCommunityTabButtons
+
+    property int navBarContentHeight: 0
+    property int navBarContentHeightWithoutCommunityButtons: 0
+
+    width: 78
+    implicitHeight: 600
+    color: Theme.palette.statusAppNavBar.backgroundColor
+
+    Component.onCompleted: {
+        navBarContentHeightWithoutCommunityButtons = (navBarChatButtonSlot.anchors.topMargin + navBarChatButtonSlot.height) + 
+                                  (separator.anchors.topMargin + separator.height) +
+                                  (navBarTabButtonsSlot.height + navBarTabButtonsSlot.anchors.topMargin + navBarTabButtonsSlot.anchors.bottomMargin)
+        navBarContentHeight = navBarContentHeightWithoutCommunityButtons +
+                              (navBarCommunityTabButtonsSlot.height + navBarScrollSection.anchors.topMargin)
+    }
+
+    onNavBarChatButtonChanged: {
+        if (!!navBarChatButton) {
+            navBarChatButton.parent = navBarChatButtonSlot
+        }
+    }
+
+    onNavBarTabButtonsChanged: {
+        if (navBarTabButtons.length) {
+            for (let idx in navBarTabButtons) {
+                navBarTabButtons[idx].parent = navBarTabButtonsSlot
+            }
+        }
+    }
+
+    Item {
+        id: navBarChatButtonSlot
+        anchors.top: parent.top
+        anchors.topMargin: 48
+        anchors.horizontalCenter: parent.horizontalCenter
+        height: statusAppNavBar.navBarChatButton.height
+        width: statusAppNavBar.navBarChatButton.width
+    }
+
+    Rectangle {
+        id: separatorTop
+        height: 1
+        width: 30
+        color: Theme.palette.directColor7
+        anchors.top: navBarChatButtonSlot.bottom
+        anchors.topMargin: 16
+        anchors.horizontalCenter: parent.horizontalCenter
+        visible: separator.anchors.topMargin === 0
+    }
+
+    ScrollView {
+        id: navBarScrollSection
+        anchors.top: separatorTop.visible ? separatorTop.bottom : navBarChatButtonSlot.bottom
+        anchors.topMargin: separatorTop.visible ? 0 : 12
+        anchors.horizontalCenter: statusAppNavBar.horizontalCenter
+        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+        clip: true
+
+        Component.onCompleted: {
+            if (navBarContentHeight > statusAppNavBar.height) {
+                height = statusAppNavBar.height - 
+                         statusAppNavBar.navBarContentHeightWithoutCommunityButtons -
+                         (!!navBarTabButtonsSlot.anchors.bottom ? navBarTabButtonsSlot.anchors.bottomMargin : navBarTabButtonsSlot.anchors.topMargin)
+                bottomPadding = 16
+                topPadding = 16
+            } else {
+                height = navBarCommunityTabButtonsSlot.implicitHeight
+            }
+        }
+
+        Column {
+            id: navBarCommunityTabButtonsSlot
+            width: navBarScrollSection.width
+            anchors.top: parent.top
+            anchors.horizontalCenter: parent.horizontalCenter
+            spacing: 12
+
+            onImplicitHeightChanged: {
+                statusAppNavBar.Component.onCompleted()
+                navBarTabButtonsSlot.Component.onCompleted()
+                navBarScrollSection.Component.onCompleted()
+            }
+
+            Repeater {
+                id: navBarCommunityTabButtons
+            }
+        }
+    }
+
+    Rectangle {
+        id: separator
+        height: 1
+        width: 30
+        color: Theme.palette.directColor7
+        anchors.top: navBarCommunityTabButtons.model && navBarCommunityTabButtons.model.count > 0 ? navBarScrollSection.bottom : navBarChatButtonSlot.bottom
+        anchors.topMargin: navBarScrollSection.height < navBarCommunityTabButtonsSlot.implicitHeight ? 0 : 16
+        anchors.horizontalCenter: parent.horizontalCenter
+        visible: navBarChatButton !== null && navBarTabButtons.length > 0
+    }
+
+    Column {
+        id: navBarTabButtonsSlot
+        anchors.horizontalCenter: parent.horizontalCenter
+        spacing: 12
+
+        Component.onCompleted: {
+            if (navBarContentHeight > statusAppNavBar.height) {
+                anchors.top = undefined
+                anchors.topMargin = 0
+                anchors.bottom = statusAppNavBar.bottom
+                anchors.bottomMargin = 32
+            } else {
+                anchors.bottom = undefined
+                anchors.bottomMargin = 0
+                anchors.top = separator.visible ? separator.bottom : parent.top
+                anchors.topMargin = separator.visible ? 16 : navBarChatButtonSlot.anchors.topMargin
+            }
+        }
+    }
+}
+

src/StatusQ/Layout/qmldir

@@ -0,0 +1,5 @@
+module StatusQ.Layout
+
+StatusAppNavBar 0.1 StatusAppNavBar.qml
+
+

src/assets/img/icons/checkbox.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="8" viewBox="0 0 11 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.76413 5.69006L9.32479 0.278881C9.70676 -0.0928258 10.3248 -0.0940903 10.7111 0.28187C11.0948 0.655228 11.0968 1.25861 10.7142 1.63093L4.45575 7.72112C4.26582 7.90595 4.01753 7.99919 3.76838 8C3.51183 7.99812 3.26284 7.90634 3.07584 7.72437L0.284232 5.0078C-0.0959013 4.63789 -0.0957078 4.03795 0.290638 3.66199C0.674309 3.28863 1.29863 3.29084 1.67363 3.65576L3.76413 5.69006Z" fill="white"/>
+</svg>