status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: Sticker market dark mode support

This commit is contained in:
emizzle 2020-09-17 16:40:41 +10:00 committed by Iuri Matias
parent 7b0d3c496c
commit c9c1dce6ea
8 changed files with 29 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ui/app/AppLayouts/Chat/components/StickerButton.qml
View File

@ -27,8 +27,8 @@ Item {
})
//% "Buy for %1 SNT"
property string text: root.style === StickerButton.StyleType.Default ? packPrice : qsTrId("buy-for--1-snt").arg(packPrice )
property color textColor: style === StickerButton.StyleType.Default ? Style.current.white : Style.current.blue
property color bgColor: style === StickerButton.StyleType.Default ? Style.current.blue : Style.current.lightBlue
property color textColor: style === StickerButton.StyleType.Default ? Style.current.pillButtonTextColor : Style.current.buttonForegroundColor
property color bgColor: style === StickerButton.StyleType.Default ? Style.current.blue : Style.current.secondaryBackground
signal uninstallClicked()
signal installClicked()
signal cancelClicked()
@ -44,7 +44,7 @@ Item {
target: root;
//% "Uninstall"
text: root.style === StickerButton.StyleType.Default ? "" : qsTrId("uninstall");
textColor: root.style === StickerButton.StyleType.Default ? Style.current.white : Style.current.red;
textColor: root.style === StickerButton.StyleType.Default ? Style.current.pillButtonTextColor : Style.current.red;
bgColor: root.style === StickerButton.StyleType.Default ? Style.current.green : Style.current.lightRed;
icon: new Object({
path: "../../../img/check.svg",
@ -83,8 +83,8 @@ Item {
PropertyChanges {
target: root;
text: root.style === StickerButton.StyleType.Default ? packPrice : packPrice + " SNT";
textColor: root.style === StickerButton.StyleType.Default ? Style.current.white : Style.current.darkGrey
bgColor: root.style === StickerButton.StyleType.Default ? Style.current.darkGrey : Style.current.grey;
textColor: root.style === StickerButton.StyleType.Default ? Style.current.pillButtonTextColor : Style.current.darkGrey
bgColor: root.style === StickerButton.StyleType.Default ? Style.current.darkGrey : Style.current.buttonDisabledBackgroundColor;
enabled: false;
}
},
@ -95,7 +95,7 @@ Item {
target: root;
//% "Pending..."
text: qsTrId("pending---");
textColor: root.style === StickerButton.StyleType.Default ? Style.current.white : Style.current.darkGrey
textColor: root.style === StickerButton.StyleType.Default ? Style.current.pillButtonTextColor : Style.current.darkGrey
bgColor: root.style === StickerButton.StyleType.Default ? Style.current.darkGrey : Style.current.grey;
enabled: false;
icon: new Object({
@ -113,8 +113,8 @@ Item {
target: root;
//% "Cancel"
text: qsTrId("browsing-cancel");
textColor: root.style === StickerButton.StyleType.Default ? Style.current.white : Style.current.red;
bgColor: root.style === StickerButton.StyleType.Default ? Style.current.darkGrey : Style.current.lightRed;
textColor: root.style === StickerButton.StyleType.Default ? Style.current.pillButtonTextColor : Style.current.red;
bgColor: root.style === StickerButton.StyleType.Default ? Style.current.red : Style.current.lightRed;
}
},
State {
@ -184,6 +184,12 @@ Item {
running: root.icon.runAnimation
loops: Animation.Infinite
}
ColorOverlay {
anchors.fill: roundedIconImage
source: roundedIconImage
color: Style.current.pillButtonTextColor
antialiasing: true
}
states: [
State {
name: "installed"

1
ui/app/AppLayouts/Chat/components/StickerMarket.qml
View File

@ -147,6 +147,7 @@ Item {
height: 28
iconWidth: 17.5
iconHeight: 13.5
iconColor: Style.current.pillButtonTextColor
source: "../../../img/arrowUp.svg"
rotation: 270
onClicked: {

2
ui/app/AppLayouts/Chat/components/StickerPackDetails.qml
View File

@ -28,7 +28,7 @@ Item {
Text {
id: txtPackName
text: packName
color: Style.current.black
color: Style.current.textColor
font.family: Style.current.fontBold.name
font.weight: Font.Bold
font.pixelSize: packNameFontSize

10
ui/app/AppLayouts/Chat/components/StickerPackPurchaseModal.qml
View File

@ -4,6 +4,7 @@ import QtQuick.Layouts 1.13
import QtQuick.Dialogs 1.3
import "../../../../imports"
import "../../../../shared"
import "../../../../shared/status"
ModalPopup {
id: root
@ -51,7 +52,7 @@ ModalPopup {
anchors.rightMargin: Style.current.padding
onGroupActivated: {
root.title = group.headerText
btnNext.label = group.footerText
btnNext.text = group.footerText
}
TransactionFormGroup {
id: group1
@ -196,11 +197,12 @@ ModalPopup {
stack.back()
}
}
StyledButton {
StatusButton {
id: btnNext
anchors.right: parent.right
label: qsTr("Next")
disabled: !stack.currentGroup.isValid
text: qsTr("Next")
enabled: stack.currentGroup.isValid && !stack.currentGroup.isPending
state: stack.currentGroup.isPending ? "pending" : "default"
onClicked: {
const isValid = stack.currentGroup.validate()

1
ui/app/img/stickers_sad_icon.svg
View File

@ -1,4 +1,3 @@
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="56" height="56" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M28 49.875C38.4868 49.875 47.25 42.4958 49.3805 32.6466C49.7619 30.8835 48.0357 29.5236 46.2386 29.6801C45.7068 29.7264 45.1686 29.75 44.625 29.75C34.4768 29.75 26.25 21.5232 26.25 11.375C26.25 10.8314 26.2736 10.2932 26.3199 9.76137C26.4764 7.96426 25.1165 6.23814 23.3534 6.61951C13.5042 8.74997 6.125 17.5132 6.125 28C6.125 40.0812 15.9188 49.875 28 49.875ZM44.625 28C46.0743 28 47.4794 27.8147 48.8183 27.4669C49.2523 27.3541 49.4609 26.873 49.2278 26.49C48.7244 25.663 47.973 24.6784 47.0151 23.5608C45.0993 21.3257 42.5276 18.7525 39.8876 16.1124C37.2475 13.4724 34.6743 10.9007 32.4392 8.98495C31.3216 8.02699 30.337 7.27556 29.51 6.77219C29.127 6.53905 28.6459 6.74772 28.5331 7.1817C28.1853 8.52059 28 9.92566 28 11.375C28 20.5567 35.4433 28 44.625 28ZM28 51.625C41.0477 51.625 51.625 41.0477 51.625 28C51.625 25.375 46.375 20.125 41.125 14.875C35.875 9.625 30.625 4.375 28 4.375C14.9523 4.375 4.375 14.9523 4.375 28C4.375 41.0477 14.9523 51.625 28 51.625ZM19.8578 41.7544C21.9375 39.7461 24.8144 38.5 28 38.5C31.1856 38.5 34.0625 39.7461 36.1422 41.7544C36.4898 42.0901 37.0437 42.0804 37.3794 41.7328C37.7151 41.3852 37.7054 40.8313 37.3578 40.4956C34.9588 38.1789 31.6486 36.75 28 36.75C24.3514 36.75 21.0412 38.1789 18.6422 40.4956C18.2946 40.8313 18.2849 41.3852 18.6206 41.7328C18.9563 42.0804 19.5102 42.0901 19.8578 41.7544Z" fill="#939BA1"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

8
ui/imports/Themes/DarkTheme.qml
View File

@ -13,6 +13,7 @@ Theme {
property color darkAccentBlue: "#2946C4"
property color transparent: "#00000000"
property color darkGrey: "#838C91"
property color darkerGrey: "#252528"
property color lightBlueText: "#8f9fec"
property color darkBlue: "#3c55c9"
property color darkBlueBtn: "#5a70dd"
@ -24,7 +25,7 @@ Theme {
property color tenPercentBlue: Qt.rgba(67, 96, 223, 0.1)
property color background: almostBlack
property color border: "#252528"
property color border: darkerGrey
property color borderSecondary: tenPercentWhite
property color borderTertiary: blue
property color textColor: white
@ -35,7 +36,7 @@ Theme {
property color inputBorderFocus: blue
property color inputColor: darkGrey
property color modalBackground: background
property color backgroundHover: "#252528"
property color backgroundHover: darkerGrey
property color secondaryText: darkGrey
property color secondaryHover: tenPercentWhite
property color primary: blue
@ -44,11 +45,12 @@ Theme {
property color primaryMenuItemHover: blue
property color primaryMenuItemTextHover: almostBlack
property color backgroundTertiary: tenPercentBlue
property color pillButtonTextColor: almostBlack
property color buttonForegroundColor: blue
property color buttonBackgroundColor: secondaryBackground
property color buttonDisabledForegroundColor: darkGrey
property color buttonDisabledBackgroundColor: grey
property color buttonDisabledBackgroundColor: darkerGrey
property color roundedButtonForegroundColor: white
property color roundedButtonBackgroundColor: secondaryBackground

1
ui/imports/Themes/LightTheme.qml
View File

@ -43,6 +43,7 @@ Theme {
property color primaryMenuItemHover: blue
property color primaryMenuItemTextHover: white
property color backgroundTertiary: tenPercentBlue
property color pillButtonTextColor: white
property color buttonForegroundColor: blue
property color buttonBackgroundColor: secondaryBackground

1
ui/shared/RoundedIcon.qml
View File

@ -37,6 +37,7 @@ Rectangle {
anchors.fill: roundedIconImage
source: roundedIconImage
color: root.iconColor
rotation: roundedIconImage.rotation
}
}