fix: fix dark theme colors for chat and profile

2020-07-22 16:16:06 -04:00 · 2020-07-22 16:16:06 -04:00 · c71f5f1a07
parent 145519719b
commit c71f5f1a07
19 changed files with 62 additions and 37 deletions
--- a/ui/app/AppLayouts/Chat/ChatColumn/ChatButtons.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/ChatButtons.qml
@ -60,7 +60,7 @@ Item {
        anchors.rightMargin: Style.current.padding - chatButtonsContainer.iconPadding * 2
        anchors.verticalCenter: parent.verticalCenter
        radius: Style.current.radius
-        color: hovered ? Style.current.lightBlue : Style.current.transparent
+        color: hovered ? Style.current.secondaryBackground : Style.current.transparent

        SVGImage {
            id: emojiIcon
@ -75,7 +75,7 @@ Item {
        ColorOverlay {
            anchors.fill: emojiIcon
            source: emojiIcon
-            color: emojiIconContainer.hovered || emojiPopup.opened ? Style.current.blue : Style.current.transparent
+            color: emojiIconContainer.hovered || emojiPopup.opened ? Style.current.blue : Style.current.darkGrey
        }

        MouseArea {
@ -109,7 +109,7 @@ Item {
        anchors.rightMargin: Style.current.padding - chatButtonsContainer.iconPadding * (imageIconContainer.visible ? 2 : 1)
        anchors.verticalCenter: parent.verticalCenter
        radius: Style.current.radius
-        color: hovered ? Style.current.lightBlue : Style.current.transparent
+        color: hovered ? Style.current.secondaryBackground : Style.current.transparent

        Image {
            id: stickersIcon
@ -124,7 +124,7 @@ Item {
        ColorOverlay {
            anchors.fill: stickersIcon
            source: stickersIcon
-            color: stickerIconContainer.hovered || stickersPopup.opened ? Style.current.blue : Style.current.transparent
+            color: stickerIconContainer.hovered || stickersPopup.opened ? Style.current.blue : Style.current.darkGrey
        }

        MouseArea {
@ -157,7 +157,7 @@ Item {
        anchors.rightMargin: Style.current.padding - chatButtonsContainer.iconPadding
        anchors.verticalCenter: parent.verticalCenter
        radius: Style.current.radius
-        color: hovered ? Style.current.lightBlue : Style.current.transparent
+        color: hovered ? Style.current.secondaryBackground : Style.current.transparent

        Image {
            id: imageIcon
@ -172,7 +172,7 @@ Item {
        ColorOverlay {
            anchors.fill: imageIcon
            source: imageIcon
-            color: imageIconContainer.hovered ? Style.current.blue : Style.current.transparent
+            color: imageIconContainer.hovered ? Style.current.blue : Style.current.darkGrey
        }

        MouseArea {
--- a/ui/app/AppLayouts/Chat/ChatColumn/ChatInput.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/ChatInput.qml
@ -93,7 +93,7 @@ Rectangle {
            placeholderText: qsTrId("type-a-message")
            Keys.onPressed: onEnter(event)
            background: Rectangle {
-                color: "#00000000"
+                color: Style.current.transparent
            }
        }
    }
--- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChannelIdentifier.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChannelIdentifier.qml
@ -20,7 +20,7 @@ Item {
        height: 120
        radius: 120
        border.width: chatsModel.activeChannel.chatType === Constants.chatTypeOneToOne ? 2 : 0
-        border.color: Style.current.grey
+        border.color: Style.current.border
        color: {
            if (chatsModel.activeChannel.chatType === Constants.chatTypeOneToOne) {
                return Style.current.transparent
--- a/ui/app/AppLayouts/Chat/components/ChannelIcon.qml
+++ b/ui/app/AppLayouts/Chat/components/ChannelIcon.qml
@ -57,9 +57,9 @@ Item {
            width: contactImage.width ? contactImage.width : 40
            height: contactImage.height ? contactImage.height : 40
            radius: 50
-            border.color: "#10000000"
+            border.color: Style.current.border
            border.width: 1
-            color: Style.current.transparent
+            color: Style.current.background
            SVGImage {
                width: contactImage.width ? contactImage.width : 40
                height: contactImage.height ? contactImage.height : 40
--- a/ui/app/AppLayouts/Chat/components/EmojiPopup.qml
+++ b/ui/app/AppLayouts/Chat/components/EmojiPopup.qml
@ -16,8 +16,9 @@ Popup {
    property int selectedPackId
    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
    background: Rectangle {
-        radius: 8
-        border.color: Style.current.grey
+        radius: Style.current.radius
+        color: Style.current.background
+        border.color: Style.current.border
        layer.enabled: true
        layer.effect: DropShadow{
            verticalOffset: 3
--- a/ui/app/AppLayouts/Chat/components/StickersPopup.qml
+++ b/ui/app/AppLayouts/Chat/components/StickersPopup.qml
@ -13,8 +13,9 @@ Popup {
    modal: false
    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
    background: Rectangle {
-        radius: 8
-        border.color: Style.current.grey
+        radius: Style.current.radius
+        color: Style.current.background
+        border.color: Style.current.border
        layer.enabled: true
        layer.effect: DropShadow{
            verticalOffset: 3
--- a/ui/app/AppLayouts/Profile/Sections/BackupSeedModal.qml
+++ b/ui/app/AppLayouts/Profile/Sections/BackupSeedModal.qml
@ -26,7 +26,8 @@ ModalPopup {
        height: 40*(len/2)
        width: 350
        border.width: 1
-        border.color: Style.current.grey
+        color: Style.current.background
+        border.color: Style.current.border
        radius: Style.current.radius
        anchors.horizontalCenter: parent.horizontalCenter

@ -48,7 +49,7 @@ ModalPopup {
              anchors.bottom: parent.bottom
              anchors.right: parent.right
              anchors.rightMargin: 175
-              color: Style.current.grey
+              color: Style.current.inputBackground
              visible: index >= wrapper.len/2
            }

--- a/ui/app/AppLayouts/Profile/Sections/LanguageContainer.qml
+++ b/ui/app/AppLayouts/Profile/Sections/LanguageContainer.qml
@ -40,7 +40,7 @@ Item {
            Layout.leftMargin: Style.current.padding
            selectOptions: Locales_JSON.locales.map(locale => {
                return {
-                    text: locale,
+                    label: locale,
                    onClicked: function () {
                        profileModel.changeLocale(locale)
                        appSettings.locale = locale
--- a/ui/app/AppLayouts/Profile/Sections/MyProfileContainer.qml
+++ b/ui/app/AppLayouts/Profile/Sections/MyProfileContainer.qml
@ -32,6 +32,7 @@ Item {
            border.width: 1
            border.color: Style.current.border
            radius: 50
+            color: Style.current.background

            Image {
                id: identiconImage
@ -68,6 +69,7 @@ Item {
        }

        SVGImage {
+            id: qrCodeImage
            source: "../../../img/qr-code-icon.svg"
            width: 18
            height: 18
@ -80,6 +82,11 @@ Item {
                }
            }
        }
+        ColorOverlay {
+            anchors.fill: qrCodeImage
+            source: qrCodeImage
+            color: Style.current.textColor
+        }

        Separator {
            id: lineSeparator
--- a/ui/app/AppLayouts/Profile/Sections/SyncContainer.qml
+++ b/ui/app/AppLayouts/Profile/Sections/SyncContainer.qml
@ -6,8 +6,6 @@ import "../../../../shared"

 Item {
    id: syncContainer
-    width: 200
-    height: 200
    Layout.fillHeight: true
    Layout.fillWidth: true

--- a/ui/imports/Themes/DarkTheme.qml
+++ b/ui/imports/Themes/DarkTheme.qml
@ -7,14 +7,13 @@ Theme {
    property color black: "#000000"
    property color grey: "#EEF2F5"
    property color lightBlue: "#ECEFFC"
-    property color blue: "#4360DF"
+    property color blue: "#758EF0"
    property color transparent: "#00000000"
-    property color darkGrey: "#939BA1"
+    property color darkGrey: "#838C91"
    property color lightBlueText: "#8f9fec"
-
    property color darkBlue: "#3c55c9"
    property color darkBlueBtn: "#5a70dd"
-    property color red: "#FF2D55"
+    property color red: "#FC5F5F"
    property color lightRed: "#FFEAEE"
    property color green: "#4EBC60"
    
@ -23,5 +22,7 @@ Theme {
    property color textColor: white
    property color currentUserTextColor: white
    property color secondaryBackground: "#23252F"
+    property color inputBackground: secondaryBackground
+    property color inputColor: darkGrey
    property color modalBackground: background
 }
--- a/ui/imports/Themes/LightTheme.qml
+++ b/ui/imports/Themes/LightTheme.qml
@ -22,5 +22,7 @@ Theme {
    property color textColor: black
    property color currentUserTextColor: white
    property color secondaryBackground: lightBlue
+    property color inputBackground: grey
+    property color inputColor: black
    property color modalBackground: white2
 }
--- a/ui/shared/CopyToClipBoardButton.qml
+++ b/ui/shared/CopyToClipBoardButton.qml
@ -7,6 +7,7 @@ Rectangle {
    height: 32
    width: 32
    radius: 8
+    color: Style.current.transparent
    property var onClick: function() {}
    property string textToCopy: ""

--- a/ui/shared/Identicon.qml
+++ b/ui/shared/Identicon.qml
@ -6,10 +6,10 @@ Rectangle {
    property url source:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAg0lEQVR4nOzXwQmAMBAFURV7sQybsgybsgyr0QYUlE1g+Mw7ioQMe9lMQwhDaAyhMYTGEJqYkPnrj/t5XE/ft2UdW1yken7MRAyhMYTGEBpDaAyhKe9JbzvSX9WdLWYihtAYQuMLkcYQGkPUScxEDKExhMYQGkNoDKExhMYQmjsAAP//ZfIUZgXTZXQAAAAASUVORK5CYII="
    width: 40
    height: 40
-    color: Style.current.white
+    color: Style.current.background
    radius: 50
    border.width: 1
-    border.color: "#10000000"
+    border.color: Style.current.border

    Image {
        width: parent.width
--- a/ui/shared/Input.qml
+++ b/ui/shared/Input.qml
@ -8,10 +8,8 @@ Item {
    property alias text: inputValue.text
    property string validationError: ""
    property string label: ""
-    //    property string label: "My Label"
    readonly property bool hasLabel: label !== ""
-    property color bgColor: Style.current.grey
-    //    property url icon: "../app/img/hash.svg"
+    property color bgColor: Style.current.inputBackground
    property url icon: ""
    property int iconHeight: 24
    property int iconWidth: 24
@ -45,7 +43,7 @@ Item {
        id: inputRectangle
        height: customHeight
        color: bgColor
-        radius: 8
+        radius: Style.current.radius
        anchors.top: inputBox.hasLabel ? inputLabel.bottom : parent.top
        anchors.topMargin: inputBox.hasLabel ? inputBox.labelMargin : 0
        anchors.right: parent.right
@ -70,7 +68,7 @@ Item {
            selectByMouse: true
            font.pixelSize: fontPixelSize
            background: Rectangle {
-                color: "#00000000"
+                color: Style.current.transparent
            }
        }

--- a/ui/shared/Select.qml
+++ b/ui/shared/Select.qml
@ -7,7 +7,7 @@ import "../imports"
 Item {
    property string label: ""
    readonly property bool hasLabel: label !== ""
-    property color bgColor: Style.current.grey
+    property color bgColor: Style.current.inputBackground
    readonly property int labelMargin: 7
    property var selectOptions
    property int customHeight: 44
@ -43,7 +43,7 @@ Item {
        id: inputRectangle
        height: customHeight
        color: bgColor
-        radius: 8
+        radius: Style.current.radius
        anchors.top: inputBox.hasLabel ? inputLabel.bottom : parent.top
        anchors.topMargin: inputBox.hasLabel ? inputBox.labelMargin : 0
        anchors.right: parent.right
@ -100,7 +100,7 @@ Item {
            background: Rectangle {
                width: parent.width
                height: parent.height
-                color: Style.current.grey
+                color: Style.current.inputBackground
                radius: Style.current.radius
            }

@ -130,8 +130,22 @@ Item {
            Component {
                id: menuItem
                MenuItem {
+                    id: itemContainer
                    property var onClicked: function () {}
-                    property color bgColor: Style.current.white
+                    property string label: ""
+                    property color bgColor: Style.current.transparent
+
+                    height: itemText.height + 4
+                    width: parent ? parent.width : selectMenu.width
+
+                    StyledText {
+                        id: itemText
+                        text: itemContainer.label
+                        anchors.left: parent.left
+                        anchors.leftMargin: 5
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
                    onTriggered: function () {
                        onClicked()
                    }
--- a/ui/shared/StyledTArea.qml
+++ b/ui/shared/StyledTArea.qml
@ -4,4 +4,5 @@ import "../imports"

 TextArea {
    font.family: Style.current.fontRegular.name
+    color: Style.current.textColor
 }
--- a/ui/shared/StyledTextArea.qml
+++ b/ui/shared/StyledTextArea.qml
@ -9,10 +9,9 @@ Item {
    property string placeholderText: "My placeholder"
    property alias text: textArea.text
    property string validationError: ""
-    //    property string label: "My Label"
    property string label: ""
    readonly property bool hasLabel: label !== ""
-    property color bgColor: Style.current.grey
+    property color bgColor: Style.current.inputBackground
    readonly property var forceActiveFocus: function () {
        textArea.forceActiveFocus(Qt.MouseFocusReason)
    }
@ -40,7 +39,7 @@ Item {
        id: inputRectangle
        height: customHeight
        color: bgColor
-        radius: 8
+        radius: Style.current.radius
        anchors.top: inputBox.hasLabel ? inputLabel.bottom : parent.top
        anchors.topMargin: inputBox.hasLabel ? inputBox.labelMargin : 0
        anchors.right: parent.right
--- a/ui/shared/StyledTextField.qml
+++ b/ui/shared/StyledTextField.qml
@ -4,4 +4,5 @@ import "../imports"

 TextField {
    font.family: Style.current.fontRegular.name
+    color: Style.current.textColor
 }