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
This commit is contained in:
Noelia 2022-06-01 17:24:44 +02:00 committed by Noelia
parent 5361b56e9f
commit 40db66f763
23 changed files with 441 additions and 186 deletions

View File

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

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
sandbox/images/Coinbase.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

BIN
sandbox/images/Ethereum.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 398 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

BIN
sandbox/images/Fluff.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
sandbox/images/RARI.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1009 B

BIN
sandbox/images/Rarible.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

BIN
sandbox/images/SR.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
sandbox/images/SRToken.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
sandbox/images/Spotify.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

View File

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

View File

@ -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>

View File

@ -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

View File

@ -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>

After

Width:  |  Height:  |  Size: 198 B

View File

@ -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>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 917 B