Qml message input mockup

resources/qml/Avatar.qml

@@ -13,7 +13,7 @@ Rectangle {
     width: 48
     height: 48
     radius: Settings.avatarCircles ? height / 2 : 3
-    color: colors.base
+    color: colors.alternateBase
 
     Label {
         anchors.fill: parent

resources/qml/Reactions.qml

@@ -83,7 +83,7 @@ Flow {
                 implicitWidth: reaction.implicitWidth
                 implicitHeight: reaction.implicitHeight
                 border.color: (reaction.hovered || modelData.selfReactedEvent !== '') ? colors.highlight : colors.text
-                color: modelData.selfReactedEvent !== '' ? Qt.hsla(highlightHue, highlightSat, highlightLight, 0.2) : colors.base
+                color: modelData.selfReactedEvent !== '' ? Qt.hsla(highlightHue, highlightSat, highlightLight, 0.2) : colors.window
                 border.width: 1
                 radius: reaction.height / 2
             }

resources/qml/TimelineRow.qml

@@ -48,7 +48,7 @@ Item {
             Reply {
                 visible: model.replyTo
                 modelData: chat.model.getDump(model.replyTo, model.id)
-                userColor: TimelineManager.userColor(modelData.userId, colors.window)
+                userColor: TimelineManager.userColor(modelData.userId, colors.base)
             }
 
             // actual message content

resources/qml/TimelineView.qml

@@ -161,6 +161,7 @@ Page {
         ColumnLayout {
             visible: TimelineManager.timeline != null
             anchors.fill: parent
+            spacing: 0
 
             Rectangle {
                 id: topBar
@@ -168,7 +169,7 @@ Page {
                 Layout.fillWidth: true
                 implicitHeight: topLayout.height + 16
                 z: 3
-                color: colors.base
+                color: colors.window
 
                 MouseArea {
                     anchors.fill: parent
@@ -283,14 +284,25 @@ Page {
 
             }
 
+            Rectangle {
+                Layout.fillWidth: true
+                height: 1
+                z: 3
+                color: colors.mid
+            }
+
+            Rectangle {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                color: colors.base
+
                 ListView {
                     id: chat
 
                     property int delegateMaxWidth: (Settings.timelineMaxWidth > 100 && (parent.width - Settings.timelineMaxWidth) > scrollbar.width * 2) ? Settings.timelineMaxWidth : (parent.width - scrollbar.width * 2)
 
                     cacheBuffer: 400
-                Layout.fillWidth: true
+                    anchors.fill: parent
-                Layout.fillHeight: true
                     model: TimelineManager.timeline
                     boundsBehavior: Flickable.StopAtBounds
                     pixelAligned: true
@@ -382,7 +394,7 @@ Page {
 
                                 background: Rectangle {
                                     radius: parent.height / 2
-                                color: colors.base
+                                    color: colors.window
                                 }
 
                             }
@@ -486,27 +498,20 @@ Page {
 
                 }
 
+            }
+
             Item {
-                id: chatFooter
+                implicitHeight: Math.max(fontMetrics.height * 1.2, typingDisplay.height)
-
-                implicitHeight: Math.max(fontMetrics.height * 1.2, footerContent.height)
                 Layout.fillWidth: true
-                z: 3
-
-                Column {
-                    id: footerContent
-
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.bottom: parent.bottom
 
                 Rectangle {
                     id: typingRect
 
+                    color: colors.base
                     anchors.left: parent.left
                     anchors.right: parent.right
-                        color: (chat.model && chat.model.typingUsers.length > 0) ? colors.window : "transparent"
+                    height: (chat.model && chat.model.typingUsers.length > 0) ? typingDisplay.height : 0
-                        height: typingDisplay.height
+                    z: 3
 
                     Label {
                         id: typingDisplay
@@ -515,22 +520,25 @@ Page {
                         anchors.leftMargin: 10
                         anchors.right: parent.right
                         anchors.rightMargin: 10
+                        anchors.bottom: parent.bottom
                         color: colors.text
-                            text: chat.model ? chat.model.formatTypingUsers(chat.model.typingUsers, colors.window) : ""
+                        text: chat.model ? chat.model.formatTypingUsers(chat.model.typingUsers, colors.base) : ""
                         textFormat: Text.RichText
                     }
 
                 }
 
+            }
+
             Rectangle {
                 id: replyPopup
 
-                        anchors.left: parent.left
+                Layout.fillWidth: true
-                        anchors.right: parent.right
                 visible: chat.model && chat.model.reply
                 // Height of child, plus margins, plus border
-                        height: replyPreview.height + 10
+                implicitHeight: replyPreview.height + 10
-                        color: colors.base
+                color: colors.window
+                z: 3
 
                 Reply {
                     id: replyPreview
@@ -562,15 +570,104 @@ Page {
 
             }
 
-                }
-
-            }
-
             ActiveCallBar {
                 Layout.fillWidth: true
                 z: 3
             }
 
+            Rectangle {
+                Layout.fillWidth: true
+                z: 3
+                height: 1
+                color: colors.mid
+            }
+
+            Rectangle {
+                color: colors.window
+                Layout.fillWidth: true
+                Layout.preferredHeight: textInput.height
+                Layout.minimumHeight: 40
+
+                RowLayout {
+                    id: inputBar
+
+                    anchors.fill: parent
+                    spacing: 16
+
+                    ImageButton {
+                        Layout.alignment: Qt.AlignBottom
+                        hoverEnabled: true
+                        width: 22
+                        height: 22
+                        image: ":/icons/icons/ui/place-call.png"
+                        Layout.topMargin: 8
+                        Layout.bottomMargin: 8
+                        Layout.leftMargin: 16
+                    }
+
+                    ImageButton {
+                        Layout.alignment: Qt.AlignBottom
+                        hoverEnabled: true
+                        width: 22
+                        height: 22
+                        image: ":/icons/icons/ui/paper-clip-outline.png"
+                        Layout.topMargin: 8
+                        Layout.bottomMargin: 8
+                    }
+
+                    ScrollView {
+                        id: textInput
+
+                        Layout.alignment: Qt.AlignBottom
+                        Layout.maximumHeight: Window.height / 4
+                        Layout.fillWidth: true
+
+                        TextArea {
+                            placeholderText: qsTr("Write a message...")
+                            placeholderTextColor: colors.buttonText
+                            color: colors.text
+                            wrapMode: TextEdit.Wrap
+
+                            MouseArea {
+                                // workaround for wrong cursor shape on some platforms
+                                anchors.fill: parent
+                                acceptedButtons: Qt.NoButton
+                                cursorShape: Qt.IBeamCursor
+                            }
+
+                            background: Rectangle {
+                                color: colors.window
+                            }
+
+                        }
+
+                    }
+
+                    ImageButton {
+                        Layout.alignment: Qt.AlignRight | Qt.AlignBottom
+                        hoverEnabled: true
+                        width: 22
+                        height: 22
+                        image: ":/icons/icons/ui/smile.png"
+                        Layout.topMargin: 8
+                        Layout.bottomMargin: 8
+                    }
+
+                    ImageButton {
+                        Layout.alignment: Qt.AlignRight | Qt.AlignBottom
+                        hoverEnabled: true
+                        width: 22
+                        height: 22
+                        image: ":/icons/icons/ui/cursor.png"
+                        Layout.topMargin: 8
+                        Layout.bottomMargin: 8
+                        Layout.rightMargin: 16
+                    }
+
+                }
+
+            }
+
         }
 
     }

resources/qml/delegates/FileMessage.qml

@@ -65,7 +65,7 @@ Item {
     }
 
     Rectangle {
-        color: colors.dark
+        color: colors.alternateBase
         z: -1
         radius: 10
         height: row.height + 24

resources/qml/delegates/Pill.qml

@@ -9,7 +9,7 @@ Label {
 
     background: Rectangle {
         radius: parent.height / 2
-        color: colors.dark
+        color: colors.alternateBase
     }
 
 }

resources/qml/delegates/PlayableMediaMessage.qml

@@ -8,7 +8,7 @@ Rectangle {
     id: bg
 
     radius: 10
-    color: colors.dark
+    color: colors.alternateBase
     height: Math.round(content.height + 24)
     width: parent ? parent.width : undefined
 

resources/qml/emoji/EmojiPicker.qml

@@ -161,7 +161,7 @@ Popup {
         Rectangle {
             Layout.fillWidth: true
             Layout.preferredHeight: 1
-            color: emojiPopup.colors.dark
+            color: emojiPopup.colors.alternateBase
         }
 
         // Category picker row
@@ -281,7 +281,7 @@ Popup {
                 Layout.preferredWidth: 1
                 implicitWidth: 1
                 height: parent.height
-                color: emojiPopup.colors.dark
+                color: emojiPopup.colors.alternateBase
             }
 
             // Search Button is special

src/UserSettingsPage.cpp

@@ -339,17 +339,18 @@ UserSettings::applyTheme()
                   /*windowText*/ QColor("#333"),
                   /*button*/ QColor("#333"),
                   /*light*/ QColor(0xef, 0xef, 0xef),
-                  /*dark*/ QColor(220, 220, 220),
+                  /*dark*/ QColor(110, 110, 110),
-                  /*mid*/ QColor(110, 110, 110),
+                  /*mid*/ QColor(220, 220, 220),
                   /*text*/ QColor("#333"),
                   /*bright_text*/ QColor("#333"),
-                  /*base*/ QColor("#eee"),
+                  /*base*/ QColor("#fff"),
                   /*window*/ QColor("white"));
+                lightActive.setColor(QPalette::AlternateBase, QColor("#eee"));
                 lightActive.setColor(QPalette::Highlight, QColor("#38a3d8"));
                 lightActive.setColor(QPalette::ToolTipBase, lightActive.base().color());
                 lightActive.setColor(QPalette::ToolTipText, lightActive.text().color());
                 lightActive.setColor(QPalette::Link, QColor("#0077b5"));
-                lightActive.setColor(QPalette::ButtonText, QColor(Qt::gray));
+                lightActive.setColor(QPalette::ButtonText, QColor("#495057"));
                 QApplication::setPalette(lightActive);
         } else if (this->theme() == "dark") {
                 stylefile.setFileName(":/styles/styles/nheko-dark.qss");
@@ -357,17 +358,18 @@ UserSettings::applyTheme()
                   /*windowText*/ QColor("#caccd1"),
                   /*button*/ QColor(0xff, 0xff, 0xff),
                   /*light*/ QColor("#caccd1"),
-                  /*dark*/ QColor("#2d3139"),
+                  /*dark*/ QColor(110, 110, 110),
-                  /*mid*/ QColor(110, 110, 110),
+                  /*mid*/ QColor("#202228"),
                   /*text*/ QColor("#caccd1"),
                   /*bright_text*/ QColor(0xff, 0xff, 0xff),
-                  /*base*/ QColor("#2d3139"),
+                  /*base*/ QColor("#202228"),
-                  /*window*/ QColor("#202228"));
+                  /*window*/ QColor("#2d3139"));
+                darkActive.setColor(QPalette::AlternateBase, QColor("#2d3139"));
                 darkActive.setColor(QPalette::Highlight, QColor("#38a3d8"));
                 darkActive.setColor(QPalette::ToolTipBase, darkActive.base().color());
                 darkActive.setColor(QPalette::ToolTipText, darkActive.text().color());
                 darkActive.setColor(QPalette::Link, QColor("#38a3d8"));
-                darkActive.setColor(QPalette::ButtonText, QColor(0x90, 0x90, 0x90));
+                darkActive.setColor(QPalette::ButtonText, "#727274");
                 QApplication::setPalette(darkActive);
         } else {
                 stylefile.setFileName(":/styles/styles/system.qss");