From bac1f46127f030b2340792fdeb89c33d25373381 Mon Sep 17 00:00:00 2001
From: Konstantinos Sideris <sideris.konstantin@gmail.com>
Date: Sun, 18 Mar 2018 23:38:04 +0200
Subject: [PATCH] Dark theme revisited

---
 include/RoomInfoListItem.h      | 21 +++++++++
 resources/styles/nheko-dark.qss | 79 ++++++++++++++++++++-------------
 resources/styles/nheko.qss      |  6 +++
 resources/styles/system.qss     |  3 ++
 src/RoomInfoListItem.cc         | 22 +++++----
 src/Splitter.cc                 |  1 +
 6 files changed, 92 insertions(+), 40 deletions(-)

diff --git a/include/RoomInfoListItem.h b/include/RoomInfoListItem.h
index 389a851..7da6c41 100644
--- a/include/RoomInfoListItem.h
+++ b/include/RoomInfoListItem.h
@@ -48,9 +48,16 @@ class RoomInfoListItem : public QWidget
           QColor hoverBackgroundColor READ hoverBackgroundColor WRITE setHoverBackgroundColor)
         Q_PROPERTY(QColor backgroundColor READ backgroundColor WRITE setBackgroundColor)
 
+        Q_PROPERTY(QColor avatarBgColor READ avatarBgColor WRITE setAvatarBgColor)
+        Q_PROPERTY(QColor avatarFgColor READ avatarFgColor WRITE setAvatarFgColor)
+
         Q_PROPERTY(QColor titleColor READ titleColor WRITE setTitleColor)
         Q_PROPERTY(QColor subtitleColor READ subtitleColor WRITE setSubtitleColor)
 
+        Q_PROPERTY(QColor timestampColor READ timestampColor WRITE setTimestampColor)
+        Q_PROPERTY(QColor highlightedTimestampColor READ highlightedTimestampColor WRITE
+                     setHighlightedTimestampColor)
+
         Q_PROPERTY(
           QColor highlightedTitleColor READ highlightedTitleColor WRITE setHighlightedTitleColor)
         Q_PROPERTY(QColor highlightedSubtitleColor READ highlightedSubtitleColor WRITE
@@ -87,21 +94,29 @@ public:
         QColor highlightedBackgroundColor() const { return highlightedBackgroundColor_; }
         QColor hoverBackgroundColor() const { return hoverBackgroundColor_; }
         QColor backgroundColor() const { return backgroundColor_; }
+        QColor avatarBgColor() const { return avatarBgColor_; }
+        QColor avatarFgColor() const { return avatarFgColor_; }
 
         QColor highlightedTitleColor() const { return highlightedTitleColor_; }
         QColor highlightedSubtitleColor() const { return highlightedSubtitleColor_; }
+        QColor highlightedTimestampColor() const { return highlightedTimestampColor_; }
 
         QColor titleColor() const { return titleColor_; }
         QColor subtitleColor() const { return subtitleColor_; }
+        QColor timestampColor() const { return timestampColor_; }
         QColor btnColor() const { return btnColor_; }
         QColor btnTextColor() const { return btnTextColor_; }
 
         void setHighlightedBackgroundColor(QColor &color) { highlightedBackgroundColor_ = color; }
         void setHoverBackgroundColor(QColor &color) { hoverBackgroundColor_ = color; }
         void setBackgroundColor(QColor &color) { backgroundColor_ = color; }
+        void setTimestampColor(QColor &color) { timestampColor_ = color; }
+        void setAvatarFgColor(QColor &color) { avatarFgColor_ = color; }
+        void setAvatarBgColor(QColor &color) { avatarBgColor_ = color; }
 
         void setHighlightedTitleColor(QColor &color) { highlightedTitleColor_ = color; }
         void setHighlightedSubtitleColor(QColor &color) { highlightedSubtitleColor_ = color; }
+        void setHighlightedTimestampColor(QColor &color) { highlightedTimestampColor_ = color; }
 
         void setTitleColor(QColor &color) { titleColor_ = color; }
         void setSubtitleColor(QColor &color) { subtitleColor_ = color; }
@@ -192,4 +207,10 @@ private:
         QFont timestampFont_;
         QFont usernameFont_;
         QFont unreadCountFont_;
+
+        QColor timestampColor_;
+        QColor highlightedTimestampColor_;
+
+        QColor avatarBgColor_;
+        QColor avatarFgColor_;
 };
diff --git a/resources/styles/nheko-dark.qss b/resources/styles/nheko-dark.qss
index 99ca6c9..9a354d3 100644
--- a/resources/styles/nheko-dark.qss
+++ b/resources/styles/nheko-dark.qss
@@ -4,29 +4,30 @@ QLabel {
 
 #chatPage,
 #chatPage > * {
-    background-color: #383c4a;
+    background-color: #202228;
 }
 
 #sideBar {
     border: none;
-    border-right: 1px solid #414A59;
-    border-left: 1px solid #414A59;
+    border-right: 1px solid #202228;
+    border-left: 1px solid #202228;
 }
 
 TimelineView,
 TimelineView > * {
-    background-color: #383c4a;
+    background-color: #202228;
 }
 
 RoomList,
 RoomList > * {
-    background-color: #383c4a;
+    background-color: #2d3139;
 }
 
 CommunitiesList,
 CommunitiesList > * {
-    background-color: #383c4a;
+    background-color: #2d3139;
 }
+
 FlatButton {
     qproperty-foregroundColor: #caccd1;
     qproperty-backgroundColor: #333;
@@ -50,9 +51,9 @@ RaisedButton {
 }
 
 RoomInfoListItem {
-    qproperty-highlightedBackgroundColor: #5294e2;
-    qproperty-hoverBackgroundColor: #39679e;
-    qproperty-backgroundColor: #383c4a;
+    qproperty-highlightedBackgroundColor: #4d84c7;
+    qproperty-hoverBackgroundColor: rgba(57,103,158, 100) ;
+    qproperty-backgroundColor: #2d3139;
 
     qproperty-titleColor: #e4e5e8;
     qproperty-subtitleColor: #caccd1;
@@ -62,12 +63,18 @@ RoomInfoListItem {
 
     qproperty-btnColor: #414A59;
     qproperty-btnTextColor: white;
+
+    qproperty-timestampColor: #727274;
+    qproperty-highlightedTimestampColor: #e7e7e9;
+
+    qproperty-avatarBgColor: #202228;
+    qproperty-avatarFgColor: white;
 }
 
 CommunitiesListItem {
     qproperty-highlightedBackgroundColor: #5294e2;
     qproperty-hoverBackgroundColor: #39679e;
-    qproperty-backgroundColor: #383c4a;
+    qproperty-backgroundColor: #2d3139;
 }
 
 LoadingIndicator {
@@ -75,22 +82,22 @@ LoadingIndicator {
 }
 
 UserInfoWidget, UserInfoWidget > * {
-    background-color: #383c4a;
+    background-color: #2d3139;
     color: #b0b3ba;
 }
 
 UserInfoWidget {
     border: none;
-    qproperty-borderColor: #414A59;
+    qproperty-borderColor: #202228;
 }
 
 UserSettingsPage {
-    background-color: #383c4a;
+    background-color: #202228;
 }
 
 Avatar {
-    qproperty-textColor: black;
-    qproperty-backgroundColor: #b0b3ba;
+    qproperty-textColor: white;
+    qproperty-backgroundColor: #2d3139;
 }
 
 #displayNameLabel {
@@ -108,8 +115,11 @@ dialogs--CreateRoom,
 dialogs--InviteUsers,
 dialogs--ReadReceipts,
 dialogs--JoinRoom,
-dialogs--PreviewUploadOverlay {
-    background-color: #383c4a;
+dialogs--PreviewUploadOverlay,
+dialogs--CreateRoom > QLineEdit,
+dialogs--InviteUsers > QLineEdit,
+dialogs--JoinRoom > QLineEdit {
+    background-color: #202228;
     color: #caccd1;
 }
 
@@ -117,19 +127,19 @@ QListWidget,
 WelcomePage,
 LoginPage,
 RegisterPage {
-    background-color: #383c4a;
+    background-color: #202228;
     color: #caccd1;
 }
 
 emoji--Panel,
 emoji--Panel > * {
-    background-color: #313440;
+    background-color: #202228;
     color: #caccd1;
 }
 
 emoji--Category,
 emoji--Category > * {
-    background-color: #383c4a;
+    background-color: #2d3139;
     color: #caccd1;
 }
 
@@ -139,32 +149,37 @@ FloatingButton {
 }
 
 TextField {
-    qproperty-backgroundColor: #383c4e;
+    qproperty-backgroundColor: #202228;
     qproperty-inkColor: #caccd1;
     qproperty-labelColor: #caccd1;
 }
 
-QLineEdit,
-QTextEdit {
-    background-color: #383c4a;
-    color: #caccd1;
-}
-
 ScrollBar {
     qproperty-handleColor: #caccd1;
-    qproperty-backgroundColor: #383c4e;
+    qproperty-backgroundColor: #202228;
 }
 
 SideBarActions {
     border: none;
-    qproperty-borderColor: #414A59;
+    qproperty-borderColor: #202228;
+    background-color: #2d3139;
 }
 
 TopRoomBar {
     border: none;
-    qproperty-borderColor: #414A59;
+    qproperty-borderColor: #202228;
+    background-color: #2d3139;
+}
+
+QLineEdit {
+    background-color: #202228;
+    color: #caccd1;
 }
 
-TextInputWidget {
-    qproperty-borderColor: #414A59;
+TextInputWidget,
+TextInputWidget > QTextEdit,
+TextInputWidget > QLineEdit {
+    qproperty-borderColor: #202228;
+    background-color: #2d3139;
+    color: #caccd1;
 }
diff --git a/resources/styles/nheko.qss b/resources/styles/nheko.qss
index 849bcd6..cb8f50e 100644
--- a/resources/styles/nheko.qss
+++ b/resources/styles/nheko.qss
@@ -61,6 +61,12 @@ RoomInfoListItem {
 
     qproperty-btnColor: #ccc;
     qproperty-btnTextColor: #333;
+
+    qproperty-timestampColor: #707070;
+    qproperty-highlightedTimestampColor: #f4f4f5;
+
+    qproperty-avatarBgColor: #eee;
+    qproperty-avatarFgColor: black;
 }
 
 CommunitiesListItem {
diff --git a/resources/styles/system.qss b/resources/styles/system.qss
index 9f3ad24..4a4faee 100644
--- a/resources/styles/system.qss
+++ b/resources/styles/system.qss
@@ -64,6 +64,9 @@ RoomInfoListItem {
 
     qproperty-btnColor: palette(light);
     qproperty-btnTextColor: palette(text);
+
+    qproperty-timestampColor: palette(text);
+    qproperty-highlightedTimestampColor: palette(light);
 }
 
 CommunitiesListItem {
diff --git a/src/RoomInfoListItem.cc b/src/RoomInfoListItem.cc
index e84cb83..b504bdd 100644
--- a/src/RoomInfoListItem.cc
+++ b/src/RoomInfoListItem.cc
@@ -30,8 +30,8 @@
 #include "Theme.h"
 #include "Utils.h"
 
-constexpr int Padding   = 7;
-constexpr int IconSize  = 48;
+constexpr int Padding   = 9;
+constexpr int IconSize  = 44;
 constexpr int MaxHeight = IconSize + 2 * Padding;
 
 constexpr int InviteBtnX = IconSize + 2 * Padding;
@@ -53,10 +53,9 @@ RoomInfoListItem::init(QWidget *parent)
         ripple_overlay_->setClipPath(path);
         ripple_overlay_->setClipping(true);
 
-        font_.setPixelSize(conf::fontSize);
+        font_.setPixelSize(conf::fontSize - 1);
 
         usernameFont_ = font_;
-        usernameFont_.setWeight(60);
 
         bubbleFont_ = font_;
         bubbleFont_.setPixelSize(conf::roomlist::fonts::bubble);
@@ -69,7 +68,7 @@ RoomInfoListItem::init(QWidget *parent)
         timestampFont_.setBold(false);
 
         headingFont_ = font_;
-        headingFont_.setPixelSize(conf::roomlist::fonts::heading);
+        headingFont_.setPixelSize(conf::roomlist::fonts::heading - 1);
         headingFont_.setWeight(60);
 }
 
@@ -162,7 +161,7 @@ RoomInfoListItem::paintEvent(QPaintEvent *event)
         QRect avatarRegion(Padding, Padding, IconSize, IconSize);
 
         // Description line with the default font.
-        int bottom_y = MaxHeight - Padding - Padding / 3 - metrics.ascent() / 2;
+        int bottom_y = MaxHeight - Padding - metrics.ascent() / 2;
 
         if (width() > ui::sidebar::SmallSize) {
                 p.setFont(headingFont_);
@@ -209,9 +208,16 @@ RoomInfoListItem::paintEvent(QPaintEvent *event)
                                    description);
 
                         // We show the last message timestamp.
+                        p.save();
+                        if (isPressed_)
+                                p.setPen(QPen(highlightedTimestampColor_));
+                        else
+                                p.setPen(QPen(timestampColor_));
+
                         p.setFont(timestampFont_);
                         p.drawText(QPoint(width() - Padding - msgStampWidth, top_y),
                                    lastMsgInfo_.timestamp);
+                        p.restore();
                 } else {
                         int btnWidth = (width() - IconSize - 6 * Padding) / 2;
 
@@ -246,7 +252,7 @@ RoomInfoListItem::paintEvent(QPaintEvent *event)
         if (roomAvatar_.isNull()) {
                 QBrush brush;
                 brush.setStyle(Qt::SolidPattern);
-                brush.setColor("#eee");
+                brush.setColor(avatarBgColor());
 
                 p.setPen(Qt::NoPen);
                 p.setBrush(brush);
@@ -254,7 +260,7 @@ RoomInfoListItem::paintEvent(QPaintEvent *event)
                 p.drawEllipse(avatarRegion.center(), IconSize / 2, IconSize / 2);
 
                 p.setFont(bubbleFont_);
-                p.setPen(QColor("#333"));
+                p.setPen(avatarFgColor());
                 p.setBrush(Qt::NoBrush);
                 p.drawText(
                   avatarRegion.translated(0, -1), Qt::AlignCenter, utils::firstChar(roomName()));
diff --git a/src/Splitter.cc b/src/Splitter.cc
index 230bbcc..ccc250b 100644
--- a/src/Splitter.cc
+++ b/src/Splitter.cc
@@ -25,6 +25,7 @@ Splitter::Splitter(QWidget *parent)
 {
         connect(this, &QSplitter::splitterMoved, this, &Splitter::onSplitterMoved);
         setChildrenCollapsible(false);
+        setStyleSheet("QSplitter::handle { image: none; }");
 }
 
 void