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

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) }
                 }

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: "";
         }
     }
 

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) }

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>

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,79 +130,223 @@ 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
+    // Community banner:
+    Item {
+        id: banner
+        anchors.top: parent.top
+        width: d.cardWidth
+        height: d.bannerHeigth
+        Rectangle {
+            id: mask
             anchors.fill: parent
-        anchors.margins: d.dMargins
-        clip: true
-        spacing: 4       
+            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
-            }
-        }
-
-        StatusBaseText {
-            Layout.fillHeight: true
                 Layout.fillWidth: true
+                Layout.fillHeight: true
                 text: root.description
                 font.pixelSize: 15
-            color: Theme.palette.directColor1
+                lineHeight: 1.2
+                color: d.fontColor
+                maximumLineCount: 2
                 wrapMode: Text.WordWrap
                 elide: Text.ElideRight
                 clip: true
             }
-
+        }
+        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.bottomMargin: 4
-            width: 324 // by design
+                Layout.alignment: Qt.AlignVCenter
+                Layout.fillWidth: true
                 spacing: 8
                 clip: true
 
@@ -183,99 +355,105 @@ Rectangle {
                     delegate: StatusListItemTag {
                         border.color: Theme.palette.baseColor2
                         color: "transparent"
-                    height: 32
-                    radius: 36
+                        height: 24
+                        radius: 20
                         closeButtonVisible: false
                         icon.emoji: model.emoji
-                    icon.height: 32
+                        icon.height: 24
                         icon.width: icon.height
                         icon.color: "transparent"
                         icon.isLetterIdenticon: true
                         title: model.name
-                    titleText.font.pixelSize: 15
-                    titleText.color: Theme.palette.primaryColor1
+                        titleText.font.pixelSize: 13
+                        titleText.color: d.fontColor
                     }
                 }
             }
         }
+    } // End of content card
 
-    // Loading Card
-    ColumnLayout {
+    // Loading 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
+        Rectangle {
+            anchors.top: parent.top
+            anchors.topMargin: 8
+            anchors.right: parent.right
+            anchors.rightMargin: anchors.topMargin
+            width: 48
+            height: 24
+            color: d.loadingColor2
+            radius: 200
+        }
+        ColumnLayout {
             anchors.fill: parent
-        anchors.margins: d.dMargins
+            anchors.topMargin: 32
+            anchors.margins: d.margins
             clip: true
             spacing: 9
-
             Rectangle {
-            width: 40
-            height: 40
-            color: Theme.palette.baseColor2
-            radius: width / 2
-        }
-
-        RowLayout {
-            Layout.topMargin: 8
-            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
-                radius: 5
-            }
-        }
-
             Rectangle {
                 width: 311
                 height: 16
-            color: Theme.palette.baseColor2
+                color: d.loadingColor1
                 radius: 5
             }
-
             Rectangle {
                 width: 271
                 height: 16
-            color: Theme.palette.baseColor2
+                color: d.loadingColor1
                 radius: 5
             }
-
-        // Filler
-        Item { Layout.fillHeight: true }
-
             Row {
-            Layout.bottomMargin: 4
+                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: Theme.palette.baseColor2
+                        color: d.loadingColor2
                         radius: 20
                     }
                 }
             }
         }
+    } // End of loading card
 
     MouseArea {
         id: sensor

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>

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>

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>