From 1c8b68b4d774e3809d0a3b8fba2d187cde18c660 Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Thu, 27 Jun 2019 15:35:52 +0300 Subject: Dark mode improvements --- vnext/src/ui/Button.css | 2 +- vnext/src/ui/Contacts.js | 2 +- vnext/src/ui/Message.css | 16 ++++++++-------- vnext/src/ui/Thread.css | 2 +- vnext/src/ui/helpers/BubbleStyle.js | 2 +- 5 files changed, 12 insertions(+), 12 deletions(-) (limited to 'vnext/src/ui') diff --git a/vnext/src/ui/Button.css b/vnext/src/ui/Button.css index 2acb87be..539e6d36 100644 --- a/vnext/src/ui/Button.css +++ b/vnext/src/ui/Button.css @@ -1,6 +1,6 @@ .Button { background: #fff; - border: 1px solid #eee; + border: 1px solid var(--border-color); color: #888; cursor: pointer; display: inline-block; diff --git a/vnext/src/ui/Contacts.js b/vnext/src/ui/Contacts.js index 3852b26f..7a42283c 100644 --- a/vnext/src/ui/Contacts.js +++ b/vnext/src/ui/Contacts.js @@ -45,5 +45,5 @@ const chatTitleStyle = { textAlign: 'left', background: '#fff', color: '#222', - borderBottom: '1px solid #eee' + borderBottom: '1px solid var(--border-color)' }; diff --git a/vnext/src/ui/Message.css b/vnext/src/ui/Message.css index 126fcd6a..d66352a4 100644 --- a/vnext/src/ui/Message.css +++ b/vnext/src/ui/Message.css @@ -10,11 +10,11 @@ padding: 12px; } .msg-cont > .l { - border-top: 1px solid #eee; + border-top: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-around; - background: #fdfdfe; + background: var(--main-background-color); } .msg-cont > .l a { color: #88958d; @@ -36,8 +36,8 @@ margin-bottom: 0; } .msg-cont { - background: #FFF; - border: 1px solid #eee; + background: var(--text-background-color); + border: 1px solid var(--border-color); line-height: 140%; margin-bottom: 12px; } @@ -119,8 +119,8 @@ blockquote { } .msg-comment input { align-self: flex-start; - background: #EEE; - border: 1px solid #CCC; + background: var(--background-color); + border: 1px solid var(--border-color); color: #999; margin: 0 0 0 6px; position: sticky; @@ -130,11 +130,11 @@ blockquote { } .msg-recomms { color: #88958d; - background: #fdfdfe; + background: var(--main-background-color); font-size: small; margin-bottom: 10px; padding: 6px; - border-bottom: 1px solid #eee; + border-bottom: 1px solid var(--border-color); overflow: hidden; text-indent: 10px; } diff --git a/vnext/src/ui/Thread.css b/vnext/src/ui/Thread.css index 3a3f9589..5e515627 100644 --- a/vnext/src/ui/Thread.css +++ b/vnext/src/ui/Thread.css @@ -1,6 +1,6 @@ #replies { background: #fff; - border: 1px solid #eee; + border: 1px solid var(--border-color); padding: 12px; } diff --git a/vnext/src/ui/helpers/BubbleStyle.js b/vnext/src/ui/helpers/BubbleStyle.js index 570b7337..f44f726e 100644 --- a/vnext/src/ui/helpers/BubbleStyle.js +++ b/vnext/src/ui/helpers/BubbleStyle.js @@ -1,7 +1,7 @@ export function bubbleStyle(me, msg) { const isMe = me.uid === msg.user.uid; const color = isMe ? '#fff' : '#222'; - const background = isMe ? '#ec4b98' : '#eee'; + const background = isMe ? '#ec4b98' : 'var(--border-color)'; return { background: background, color: color, -- cgit v1.2.3