feat(StatusCommunityCard): New design

- Added community banner. - Added community restrictions / private. - Modified card background shape. - Modified logo shape and position. - Modified text position and size. - Modified `loading state` card. - Added `DropShadow` effect. - Added new icons. - Added new community images and updated model. - Added numbers format function. - Added following new properties: `banner`,`activeUsers` `communityColor`, `isPrivate` and `tokenLogo`. Closes #692
2022-06-01 17:24:44 +02:00 · 2022-06-01 17:24:44 +02:00 · 40db66f763
parent 5361b56e9f
commit 40db66f763
23 changed files with 441 additions and 186 deletions
--- a/sandbox/demoapp/StatusAppCommunitiesPortalView.qml
+++ b/sandbox/demoapp/StatusAppCommunitiesPortalView.qml
@ -100,11 +100,12 @@ ScrollView {
                    locale: "es"
                    communityId: model.communityId
                    loaded: model.available
-                    logo: model.icon
+                    logo: model.logo
                    name: model.name
                    description: model.description
                    members: model.members
                    popularity: model.popularity
+                    communityColor: model.communityColor
                    categories: ListModel {
                        ListElement { name: "sport"; emoji: "🎾"}
                        ListElement { name: "food"; emoji: "🥑"}
@ -137,11 +138,15 @@ ScrollView {
                    locale: "es"
                    communityId: model.communityId
                    loaded: model.available
-                    logo: model.icon
+                    logo: model.logo
                    name: model.name
                    description: model.description
                    members: model.members
+                    activeUsers: model.activeUsers
                    popularity: model.popularity
+                    tokenLogo: model.tokenLogo
+                    isPrivate: model.isPrivate
+                    banner: model.banner

                    onClicked: { d.navigateToCommunity(communityId) }
                }
--- a/sandbox/demoapp/data/Models.qml
+++ b/sandbox/demoapp/data/Models.qml
@ -1326,125 +1326,164 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
        ListElement {
            name: "CryptoKitties";
            description: "A community of cat lovers, meow!";
-            icon:"qrc:/images/CryptoKitties.png";
+            logo:"qrc:/images/CryptoKitties.png";
            members: 1045;
            categories: [];
            communityId: "341";
            available: true;
-            popularity: 1
+            popularity: 1;
+            communityColor: "pink"
        }
        ListElement {
            name: "Friends with Benefits";
            description: "A group chat full of out favorite thinkers and creators.";
-            icon:"qrc:/images/FriendsBenefits.png";
+            logo:"qrc:/images/FriendsBenefits.png";
            members: 452;
            categories: [];
            communityId: "232";
            available: true;
-            popularity: 2
+            popularity: 2;
+            communityColor: "grey"
        }
        ListElement {
            name: "Status Hi!!";
            description: "A new community description with long long long and repetitive repetitive repetitive repetitive explanation!!";
-            icon:"qrc:/images/SNT.png";
+            logo:"qrc:/images/SNT.png";
            members: 89;
            categories: [];
            communityId: "223";
            available: true;
            popularity: 3
+            communityColor: "blue"
        }
    }

    property ListModel curatedCommunitiesModel : ListModel {
        ListElement {
-            name: "CryptoKitties";
-            description: "A community of cat lovers, meow!";
-            icon:"qrc:/images/CryptoKitties.png";
-            members: 1000;
+            name: "Status.im";
+            description: "Your portal to Web3. Secure wallet. dApp browser. Private messaging. All-in-one.";
+            logo: "qrc:/images/SNT.png";
+            banner: "qrc:/images/CommunityBanner1.png";
+            members: 299500;
+            activeUsers: 71400;
            categories: [];
            communityId: "1";
            available: true;
            popularity: 1
+            isPrivate: true
+            tokenLogo: "qrc:/images/SNT.png";
        }
        ListElement {
-            name: "Friends with Benefits";
-            description: "A group chat full of out favorite thinkers and creators.";
-            icon:"qrc:/images/FriendsBenefits.png";
-            members: 452;
+            name: "SuperRare";
+            description: "The future of CryptoArt markets—a network governed by artists, collectors and curators.";
+            logo:"qrc:/images/SR.png";
+            banner: "qrc:/images/SuperRareCommunityBanner.png";
+            members: 299500;
+            activeUsers: 71400;
            categories: [];
            communityId: "2";
            available: true;
            popularity: 2
+            isPrivate: true
+            tokenLogo: "qrc:/images/SRToken.png";
        }
        ListElement {
-            name: "Teller";
-            description: "A community of P2P crypto trades";
-            icon:"qrc:/images/P2PCrypto.png";
-            members: 50;
+            name: "Coinbase";
+            description: "Jump start your crypto portfolio with the easiest place to buy and sell crypto. ";
+            logo:"qrc:/images/Coinbase.png";
+            banner: "qrc:/images/CoinBaseCommunityBanner.png";
+            members: 4900000;
+            activeUsers: 245600;
            categories: [];
            communityId: "3";
            available: true;
            popularity: 3
+            isPrivate: false
+            tokenLogo: "";
        }
        ListElement {
-            name: "Status";
-            description: "Community description goes here.";
-            icon:"qrc:/images/SNT.png";
-            members: 5288;
+            name: "Rarible";
+            description: "Multichain community-centric NFT marketplace. Create, sell and collect NFTs.";
+            logo:"qrc:/images/Rarible.png";
+            banner: "qrc:/images/RaribleCommunityBanner.png";
+            members: 629200;
+            activeUsers: 112100;
            categories: [];
            communityId: "4";
            available: true;
            popularity: 4
+            isPrivate: true
+            tokenLogo: "qrc:/images/RARI.png";
        }
        ListElement {
-            name: "Status Punks";
-            description: "Community description goes here.Community description goes here. Community description goes here. Community description goes here.";
-            icon:"qrc:/images/StatusPunks.png";
-            members: 4125;
+            name: "Spotify";
+            description: "Listening is everything";
+            logo:"qrc:/images/Spotify.png";
+            banner: "qrc:/images/SpotifyCommunityBanner.png";
+            members: 207500;
+            activeUsers: 52200;
            categories: [];
            communityId: "5";
-            available: false;
+            available: true;
            popularity: 5
+            isPrivate: false
+            tokenLogo: "";
        }
        ListElement {
-            name: "Uniswap";
-            description: "Community description goes here.";
-            icon:"qrc:/images/CryptoKitties.png";
-            members: 45;
+            name: "Dribbble";
+            description: "Open source platform to write and distribute decentralized applications..";
+            logo:"qrc:/images/Fluff.png";
+            banner: "qrc:/images/DribbbleCommunityBanner.png";
+            members: 2300000;
+            activeUsers: 112100;
            categories: [];
            communityId: "6";
-            available: false;
+            available: true;
            popularity: 6
+            isPrivate: false
+            tokenLogo: "";
        }
        ListElement {
-            name: "Dragonereum";
-            description: "Community description goes here.";
-            icon:"qrc:/images/Dragonerum.png";
-            members: 968;
+            name: "Status.im";
+            description: "Your portal to Web3. Secure wallet. dApp browser. Private messaging. All-in-one.";
+            logo:"qrc:/images/SNT.png";
+            banner: ""
+            members: 299500;
+            activeUsers: 71400;
            categories: [];
            communityId: "7";
            available: true;
-            popularity: 7
+            popularity: 1
+            isPrivate: false
+            tokenLogo: "";
        }
        ListElement {
            name: "CryptoPunks";
            description: "Community description goes here. Community description goes here. Community description goes here. Community description goes here. Community description goes here. Community description goes here.";
-            icon:"qrc:/images/CryptoPunks.png";
-            members: 4200;
+            logo:"qrc:/images/CryptoPunks.png";
+            banner: "";
+            members: 4900;
+            activeUsers: 245600;
            categories: [];
            communityId: "8";
-            available: true;
+            available: false;
            popularity: 8
+            isPrivate: false
+            tokenLogo: "";
        }
        ListElement {
            name: "Socks";
            description: "Community description goes here.";
-            icon:"qrc:/images/Socks.png"
-            members: 12;
+            logo:"qrc:/images/Socks.png";
+            banner: "";
+            members: 4900;
+            activeUsers: 245600;
            categories: [];
            communityId: "9";
-            available: true;
+            available: false;
            popularity: 9
+            isPrivate: false
+            tokenLogo: "";
        }
    }

--- a/sandbox/images/CoinBaseCommunityBanner.png
+++ b/sandbox/images/CoinBaseCommunityBanner.png
--- a/sandbox/images/Coinbase.png
+++ b/sandbox/images/Coinbase.png
--- a/sandbox/images/CommunityBanner1.png
+++ b/sandbox/images/CommunityBanner1.png
--- a/sandbox/images/DribbbleCommunityBanner.png
+++ b/sandbox/images/DribbbleCommunityBanner.png
--- a/sandbox/images/Ethereum.png
+++ b/sandbox/images/Ethereum.png
--- a/sandbox/images/EthereumCommunityBanner.png
+++ b/sandbox/images/EthereumCommunityBanner.png
--- a/sandbox/images/Fluff.png
+++ b/sandbox/images/Fluff.png
--- a/sandbox/images/RARI.png
+++ b/sandbox/images/RARI.png
--- a/sandbox/images/Rarible.png
+++ b/sandbox/images/Rarible.png
--- a/sandbox/images/RaribleCommunityBanner.png
+++ b/sandbox/images/RaribleCommunityBanner.png
--- a/sandbox/images/SR.png
+++ b/sandbox/images/SR.png
--- a/sandbox/images/SRToken.png
+++ b/sandbox/images/SRToken.png
--- a/sandbox/images/Spotify.png
+++ b/sandbox/images/Spotify.png
--- a/sandbox/images/SpotifyCommunityBanner.png
+++ b/sandbox/images/SpotifyCommunityBanner.png
--- a/sandbox/images/SuperRareCommunityBanner.png
+++ b/sandbox/images/SuperRareCommunityBanner.png
--- a/sandbox/pages/StatusCommunityCardPage.qml
+++ b/sandbox/pages/StatusCommunityCardPage.qml
@ -17,8 +17,8 @@ GridLayout {

    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
    columns: 2
-    columnSpacing: 16
-    rowSpacing: 16
+    columnSpacing: 28
+    rowSpacing: 28

    Repeater {
        model: Models.curatedCommunitiesModel
@ -26,15 +26,19 @@ GridLayout {
            locale: "en"
            communityId: model.communityId
            loaded: model.available
-            logo: model.icon
+            logo: model.logo
+            banner: model.banner
            name: model.name
            description: model.description
            members: model.members
+            activeUsers: model.activeUsers
            popularity: model.popularity
+            isPrivate: model.isPrivate
+            tokenLogo: model.tokenLogo
            categories: ListModel {
-                ListElement { name: "sport"; emoji: "🎾"}
-                ListElement { name: "food"; emoji: "🥑"}
-                ListElement { name: "privacy"; emoji: "👻"}
+                ListElement { name: "Crypto"; emoji: "🔗"}
+                ListElement { name: "Privacy"; emoji: "👻"}
+                ListElement { name: "Social"; emoji: "☕"}
            }

            onClicked: { d.navigateToCommunity(communityId) }
--- a/sandbox/qml.qrc
+++ b/sandbox/qml.qrc
@ -53,5 +53,20 @@
        <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/Rarible.png</file>
+        <file>images/RaribleCommunityBanner.png</file>
+        <file>images/Spotify.png</file>
+        <file>images/SpotifyCommunityBanner.png</file>
+        <file>images/SR.png</file>
+        <file>images/SuperRareCommunityBanner.png</file>
+        <file>images/RARI.png</file>
+        <file>images/SRToken.png</file>
    </qresource>
 </RCC>
--- a/src/StatusQ/Components/StatusCommunityCard.qml
+++ b/src/StatusQ/Components/StatusCommunityCard.qml
@ -1,5 +1,6 @@
 import QtQuick 2.13
 import QtQuick.Layouts 1.14
+import QtGraphicalEffects 1.0

 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
@ -66,6 +67,11 @@ Rectangle {
       This property holds the community members value.
    */
    property int members: 0
+    /*!
+       \qmlproperty int StatusCommunityCard::activeUsers
+       This property holds the community active users value.
+    */
+    property int activeUsers: 0
    /*!
       \qmlproperty int StatusCommunityCard::popularity
       This property holds the community popularity (community rate).
@ -93,6 +99,28 @@ Rectangle {
       If not provided, default value is "en".
    */
    property string locale: "en"
+    /*!
+       \qmlproperty url StatusCommunityCard::banner
+       This property holds the community banner image url.
+    */
+    property url banner: ""
+    /*!
+       \qmlproperty color StatusCommunityCard::communityColor
+       This property holds the community color.
+       If not provided, default value in Light Theme is "#4360DF" and in Dark Theme is "#88B0FF".
+    */
+    property color communityColor: Theme.palette.primaryColor1
+    /*!
+       \qmlproperty bool StatusCommunityCard::isPrivate
+       This property holds if the community is private.
+       If not provided, default value is false.
+    */
+    property bool isPrivate: false
+    /*!
+       \qmlproperty url StatusCommunityCard::tokenLogo
+       This property holds the image of the token needed if the community is private.
+    */
+    property url tokenLogo: ""

    /*!
        \qmlsignal StatusCommunityCard::clicked(string communityId)
@ -102,180 +130,330 @@ Rectangle {

    QtObject {
        id: d
-        property int dMargins: 12
+        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
+        property color loadingColor2: Theme.palette.baseColor4
+
+        function numberFormat(number) {
+            var res = number
+            const million = 1000000
+            const ks = 1000
+            if(number > million) {
+                res = number / million
+                res = Number(number / million).toLocaleString(Qt.locale(root.locale), 'f', 1) + 'M'
+            }
+            else if(number > ks) {
+                res = number / ks
+                res = Number(number / ks).toLocaleString(Qt.locale(root.locale), 'f', 1) + 'K'
+            }
+            else
+                res = Number(number).toLocaleString(Qt.locale(root.locale), 'f', 0)
+            return res
+        }
    }

-    width: 400 // by design
-    height: 230 // by design
-    border.color: Theme.palette.baseColor2
-    color: sensor.containsMouse ? Theme.palette.baseColor4 : "transparent"
-    radius: 8
-    clip: true
+    width: d.cardWidth
+    height: d.totalHeigth
+    radius: d.bannerRadius
+    color: "transparent"
+    layer.enabled: true
+    layer.effect: DropShadow {
+        source: root
+        horizontalOffset: 0
+        verticalOffset: 2
+        radius: sensor.containsMouse ? 30 : d.bannerRadius
+        samples: 25
+        spread: 0
+        color: sensor.containsMouse ? Theme.palette.backdropColor : Theme.palette.dropShadow
+    }

-    // Community Card:
-    ColumnLayout {
-        visible: root.loaded
-        anchors.fill: parent
-        anchors.margins: d.dMargins
-        clip: true
-        spacing: 4       
+    // Community banner:
+    Item {
+        id: banner
+        anchors.top: parent.top
+        width: d.cardWidth
+        height: d.bannerHeigth
+        Rectangle {
+            id: mask
+            anchors.fill: parent
+            radius: d.bannerRadius
+            color: root.loaded ? root.communityColor : d.loadingColor2
+        }
+        Image {
+            id: image
+            source: root.banner
+            anchors.fill: parent
+            anchors.centerIn: parent
+            fillMode: Image.PreserveAspectFit
+            smooth: true
+            visible: !root.loaded || !root.banner
+        }
+        OpacityMask {
+            anchors.fill: image
+            source: image
+            maskSource: mask
+        }
+    }
+
+    // Community logo:
+    Rectangle {
+        z: parent.z + 1
+        anchors.top: parent.top
+        anchors.topMargin: 16
+        anchors.left: parent.left
+        anchors.leftMargin: 12
+        width: 48
+        height: width
+        radius: width / 2
+        color: root.loaded ? d.cardColor : d.loadingColor1

        StatusRoundedImage {
-            width: 40
-            height: 40
+            visible: root.loaded
+            anchors.centerIn: parent
+            width: parent.width - 4
+            height: width
            image.source: root.logo
            color: "transparent"
        }
+    } // End of community logo

-        // TODO: Add here new component for community permissions / restrictions
-        // ...
-
-        RowLayout {
-            Layout.topMargin: 8
-
+    // Content card
+    Rectangle {
+        visible: root.loaded
+        anchors.top: parent.top
+        anchors.topMargin: 40
+        width: d.cardWidth
+        height: d.cardHeigth
+        color: d.cardColor
+        radius: d.cardRadius
+        clip: true
+        // Community restriccions
+        Rectangle {
+            visible: root.isPrivate
+            anchors.top: parent.top
+            anchors.topMargin: 8
+            anchors.right: parent.right
+            anchors.rightMargin: anchors.topMargin
+            width: 48
+            height: 24
+            color: d.loadingColor2
+            radius: 200
+            StatusIcon {
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.leftMargin: 6
+                anchors.left: parent.left
+                icon: "tiny/unlocked"
+                width: 16
+                height: 16
+                color: Theme.palette.baseColor1
+            }
+            StatusRoundedImage {
+                anchors.rightMargin: 2
+                anchors.right: parent.right
+                anchors.verticalCenter: parent.verticalCenter
+                width: 20
+                height: width
+                image.source: root.tokenLogo
+                color: "transparent"
+            }
+        }
+        // Community info
+        ColumnLayout {
+            anchors.fill: parent
+            anchors.topMargin: 32
+            anchors.leftMargin: d.margins
+            anchors.rightMargin: d.margins
+            anchors.bottomMargin: d.margins
+            clip: true
+            spacing: 6
            StatusBaseText {
                Layout.alignment: Qt.AlignVCenter
                text: root.name
                font.weight: Font.Bold
-                font.pixelSize: 17
-                color: Theme.palette.directColor1
+                font.pixelSize: 19
+                color: d.fontColor
            }
-
-            StatusIcon {
-                Layout.alignment: Qt.AlignVCenter
-                Layout.leftMargin: 6
-                icon: "tiny/tiny-contact"
-                width: 10
-                height: 10
-                color: Theme.palette.baseColor1
-            }
-
            StatusBaseText {
-                Layout.alignment: Qt.AlignVCenter
-                text: Number(root.members).toLocaleString(Qt.locale(locale), 'f', 0)
-                font.pixelSize: 13
-                color: Theme.palette.directColor1
-                horizontalAlignment: Text.AlignLeft
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                text: root.description
+                font.pixelSize: 15
+                lineHeight: 1.2
+                color: d.fontColor
+                maximumLineCount: 2
+                wrapMode: Text.WordWrap
+                elide: Text.ElideRight
+                clip: true
            }
        }
-
-        StatusBaseText {
-            Layout.fillHeight: true
-            Layout.fillWidth: true
-            text: root.description
-            font.pixelSize: 15
-            color: Theme.palette.directColor1
-            wrapMode: Text.WordWrap
-            elide: Text.ElideRight
+        ColumnLayout {
+            anchors.fill: parent
+            anchors.topMargin: 116
+            anchors.leftMargin: d.margins
+            anchors.rightMargin: d.margins
+            anchors.bottomMargin: d.margins
            clip: true
-        }
+            spacing: 18
+            Row {
+                Layout.alignment: Qt.AlignVCenter
+                spacing: 20
+                // Members
+                Row {
+                    height: membersTxt.height
+                    spacing: 4
+                    StatusIcon {
+                        anchors.verticalCenter: parent.verticalCenter
+                        icon: "tiny/members"
+                        width: 16
+                        height: 16
+                    }
+                    StatusBaseText {
+                        id: membersTxt
+                        Layout.alignment: Qt.AlignVCenter
+                        text: d.numberFormat(root.members)
+                        font.pixelSize: 15
+                        color: d.fontColor
+                    }
+                }
+                // Active users:
+                Row {
+                    height: activeUsersTxt.height
+                    spacing: 4
+                    StatusIcon {
+                        anchors.verticalCenter: parent.verticalCenter
+                        icon: "tiny/flash"
+                        width: 14
+                        height: 14
+                    }
+                    StatusBaseText {
+                        id: activeUsersTxt
+                        Layout.alignment: Qt.AlignVCenter
+                        text: d.numberFormat(root.activeUsers)
+                        font.pixelSize: 15
+                        color: d.fontColor
+                    }
+                }
+            }
+            // TODO: Replace by `StatusListItemTagRow` - To be done!
+            Row {
+                visible: root.categories.count > 0
+                Layout.alignment: Qt.AlignVCenter
+                Layout.fillWidth: true
+                spacing: 8
+                clip: true

-        // TODO: Replace by `StatusListItemTagRow` - To be done!
-        Row {
-            visible: root.categories.count > 0
-            Layout.bottomMargin: 4
-            width: 324 // by design
-            spacing: 8
-            clip: true
-
-            Repeater {
-                model: root.categories
-                delegate: StatusListItemTag {
-                    border.color: Theme.palette.baseColor2
-                    color: "transparent"
-                    height: 32
-                    radius: 36
-                    closeButtonVisible: false
-                    icon.emoji: model.emoji
-                    icon.height: 32
-                    icon.width: icon.height
-                    icon.color: "transparent"
-                    icon.isLetterIdenticon: true
-                    title: model.name
-                    titleText.font.pixelSize: 15
-                    titleText.color: Theme.palette.primaryColor1
+                Repeater {
+                    model: root.categories
+                    delegate: StatusListItemTag {
+                        border.color: Theme.palette.baseColor2
+                        color: "transparent"
+                        height: 24
+                        radius: 20
+                        closeButtonVisible: false
+                        icon.emoji: model.emoji
+                        icon.height: 24
+                        icon.width: icon.height
+                        icon.color: "transparent"
+                        icon.isLetterIdenticon: true
+                        title: model.name
+                        titleText.font.pixelSize: 13
+                        titleText.color: d.fontColor
+                    }
                }
            }
        }
-    }
+    } // End of content card

-    // Loading Card
-    ColumnLayout {
+    // Loading card
+    Rectangle {
        visible: !root.loaded
-        anchors.fill: parent
-        anchors.margins: d.dMargins
+        anchors.top: parent.top
+        anchors.topMargin: 40
+        width: d.cardWidth
+        height: d.cardHeigth
+        color: d.cardColor
+        radius: d.cardRadius
        clip: true
-        spacing: 9
-
        Rectangle {
-            width: 40
-            height: 40
-            color: Theme.palette.baseColor2
-            radius: width / 2
+            anchors.top: parent.top
+            anchors.topMargin: 8
+            anchors.right: parent.right
+            anchors.rightMargin: anchors.topMargin
+            width: 48
+            height: 24
+            color: d.loadingColor2
+            radius: 200
        }
-
-        RowLayout {
-            Layout.topMargin: 8
+        ColumnLayout {
+            anchors.fill: parent
+            anchors.topMargin: 32
+            anchors.margins: d.margins
+            clip: true
+            spacing: 9
            Rectangle {
-                Layout.alignment: Qt.AlignBottom
-                Layout.topMargin: 8
                width: 84
                height: 16
-                color: Theme.palette.baseColor2
+                color: d.loadingColor1
                radius: 5
            }
-
            Rectangle {
-                Layout.leftMargin: 8
-                Layout.alignment: Qt.AlignBottom
-                width: 14
-                height: 14
-                color: Theme.palette.baseColor2
-                radius: width / 2
-            }
-
-            Rectangle {
-                Layout.alignment: Qt.AlignBottom
-                width: 50
-                height: 12
-                color: Theme.palette.baseColor2
+                width: 311
+                height: 16
+                color: d.loadingColor1
                radius: 5
            }
-        }
-
-        Rectangle {
-            width: 311
-            height: 16
-            color: Theme.palette.baseColor2
-            radius: 5
-        }
-
-        Rectangle {
-            width: 271
-            height: 16
-            color: Theme.palette.baseColor2
-            radius: 5
-        }
-
-        // Filler
-        Item { Layout.fillHeight: true }
-
-        Row {
-            Layout.bottomMargin: 4
-            spacing: 8
-
-            Repeater {
-                model: 3
-                delegate:
-                Rectangle {
-                    width: 76
-                    height: 24
-                    color: Theme.palette.baseColor2
-                    radius: 20
+            Rectangle {
+                width: 271
+                height: 16
+                color: d.loadingColor1
+                radius: 5
+            }
+            Row {
+                Layout.topMargin: 22 - 9
+                spacing: 16
+                Repeater {
+                    model: 2
+                    delegate: Row {
+                        spacing: 4
+                        Rectangle {
+                            width: 14
+                            height: 14
+                            color: d.loadingColor1
+                            radius: width / 2
+                        }
+                        Rectangle {
+                            width: 50
+                            height: 12
+                            color: d.loadingColor2
+                            radius: 5
+                        }
+                    }
+                }
+            }
+            Row {
+                Layout.topMargin: 21 - 9
+                spacing: 8
+                Repeater {
+                    model: 3
+                    delegate:
+                    Rectangle {
+                        width: 76
+                        height: 24
+                        color: d.loadingColor2
+                        radius: 20
+                    }
                }
            }
        }
-    }
+    } // End of loading card

    MouseArea {
        id: sensor
--- a/src/assets/img/icons/tiny/flash.svg
+++ b/src/assets/img/icons/tiny/flash.svg
@ -0,0 +1,3 @@
+<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 1V6H9L4 13V8H1L6 1Z" stroke="#647084" stroke-width="1.2" stroke-linejoin="round"/>
+</svg>
--- a/src/assets/img/icons/tiny/members.svg
+++ b/src/assets/img/icons/tiny/members.svg
@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.625 10.6H7.375V9.4H4.625V10.6ZM9.125 12.9H2.875V14.1H9.125V12.9ZM2.875 12.9C2.72312 12.9 2.6 12.7769 2.6 12.625H1.4C1.4 13.4396 2.06038 14.1 2.875 14.1V12.9ZM9.4 12.625C9.4 12.7769 9.27688 12.9 9.125 12.9V14.1C9.93962 14.1 10.6 13.4396 10.6 12.625H9.4ZM7.375 10.6C8.49338 10.6 9.4 11.5066 9.4 12.625H10.6C10.6 10.8439 9.15612 9.4 7.375 9.4V10.6ZM4.625 9.4C2.84388 9.4 1.4 10.8439 1.4 12.625H2.6C2.6 11.5066 3.50662 10.6 4.625 10.6V9.4Z" fill="#647084"/>
+<path d="M11.25 9.4C10.9186 9.4 10.65 9.66863 10.65 10C10.65 10.3314 10.9186 10.6 11.25 10.6V9.4ZM11.75 12.9C11.4186 12.9 11.15 13.1686 11.15 13.5C11.15 13.8314 11.4186 14.1 11.75 14.1V12.9ZM11.25 10.6H11.625V9.4H11.25V10.6ZM13.375 12.9H11.75V14.1H13.375V12.9ZM13.65 12.625C13.65 12.7769 13.5269 12.9 13.375 12.9V14.1C14.1896 14.1 14.85 13.4396 14.85 12.625H13.65ZM14.85 12.625C14.85 10.8439 13.4061 9.4 11.625 9.4V10.6C12.7434 10.6 13.65 11.5066 13.65 12.625H14.85Z" fill="#A1ABBD"/>
+<circle cx="6" cy="5" r="2" stroke="#647084" stroke-width="1.2" stroke-linejoin="round"/>
+<path d="M9.75 6.93182C10.1753 6.81787 10.551 6.56678 10.8191 6.21749C11.0871 5.8682 11.2324 5.44024 11.2324 4.99997C11.2324 4.5597 11.0871 4.13173 10.8191 3.78244C10.551 3.43316 10.1753 3.18207 9.75 3.06812" stroke="#A1ABBD" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/src/assets/img/icons/tiny/unlocked.svg
+++ b/src/assets/img/icons/tiny/unlocked.svg
@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 12.3C4 10.6198 4 9.77976 4.32698 9.13803C4.6146 8.57354 5.07354 8.1146 5.63803 7.82698C6.27976 7.5 7.11984 7.5 8.8 7.5H11.2C12.8802 7.5 13.7202 7.5 14.362 7.82698C14.9265 8.1146 15.3854 8.57354 15.673 9.13803C16 9.77976 16 10.6198 16 12.3V12.7C16 14.3802 16 15.2202 15.673 15.862C15.3854 16.4265 14.9265 16.8854 14.362 17.173C13.7202 17.5 12.8802 17.5 11.2 17.5H8.8C7.11984 17.5 6.27976 17.5 5.63803 17.173C5.07354 16.8854 4.6146 16.4265 4.32698 15.862C4 15.2202 4 14.3802 4 12.7V12.3Z" stroke="black" stroke-width="1.3" stroke-linejoin="round"/>
+<path d="M10 11V14" stroke="black" stroke-width="1.3" stroke-linejoin="round"/>
+<path d="M13 7.5V5.40569C13 3.80092 11.6991 2.5 10.0943 2.5V2.5C8.84361 2.5 7.73323 3.30032 7.33772 4.48683L7 5.5" stroke="black" stroke-width="1.3" stroke-linejoin="round"/>
+</svg>