From 93d0a1bb691ca7ef204c174c2b513f482a497fe3 Mon Sep 17 00:00:00 2001
From: Jarek Radosz <jradosz@gmail.com>
Date: Mon, 4 Feb 2019 07:51:02 +0100
Subject: [PATCH] Style improvements (#757)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Replace colors with existing CSS variables

* Extract code-blocks CSS to a separate file

* Fix the “forward message” icon in dark mode

* Fix message composer icons in light full-vibrancy

* Revert "Fix #173 (#174)"

This reverts commit 67f2353133c48779ca7d608269e96a5c7a0ceb41.

This CSS rule is no longer needed.

* Remove unused CSS rules

* Improve contrast on contact name links

* Revert “Vertically align “conversation info” buttons.”

Messenger fixed this on their side. Our fix has now the opposite effect.

* Remove an overreaching CSS rule

* Fix “search in conversation” in dark mode

* Improve the text color in “Delete message” popup

* Improve “Message Reactions” popup in dark mode

* Improve code blocks

* Tweak deleted messages

* Tweak link previews

* Tweak attached files

* Tweak chat bot menu

* Fix variation in brightness of message composer icons
---
 css/browser.css     | 123 +++---------------------------------------
 css/code-blocks.css | 126 ++++++++++++++++++++++++++++++++++++++++++++
 css/dark-mode.css   | 107 ++++++++++++++++++++-----------------
 css/vibrancy.css    |  46 +++++++++++++---
 source/index.ts     |   3 ++
 5 files changed, 232 insertions(+), 173 deletions(-)
 create mode 100644 css/code-blocks.css

diff --git a/css/browser.css b/css/browser.css
index 5856733bb..755fa1a30 100644
--- a/css/browser.css
+++ b/css/browser.css
@@ -50,11 +50,6 @@ body {
 	-webkit-user-drag: none;
 }
 
-/* Vertically align `Conversation Info` buttons */
-._fl2 ._30yy {
-	vertical-align: middle;
-}
-
 /* Window wrapper */
 ._4sp8 {
 	min-width: 0 !important;
@@ -227,117 +222,6 @@ a,
 	height: 280px;
 }
 
-/* Tomorrow light theme for code blocks */
-._wu0 {
-	--code-block-base: #1d1f21;
-	--code-block-background: #fff;
-	--code-block-border: #b9b9b9;
-	--code-block-primary: #de935f;
-	--code-block-meta: #969896;
-	--code-block-tag: #a3685a;
-	--code-block-quoted: #b5bd68;
-	--code-block-variable: #c66;
-	--code-block-special: #8abeb7;
-	--code-block-attr-value: #139543;
-	--code-block-keyword: #b294bb;
-	--code-block-function: #81a2be;
-	background-color: var(--code-block-background) !important;
-	border: 1px solid var(--code-block-border) !important;
-	color: var(--code-block-base) !important;
-}
-._wu0 .token.punctuation {
-	color: var(--code-block-base) !important;
-}
-._wu0 .token.property {
-	color: var(--code-block-base) !important;
-}
-._wu0 .token.operator {
-	color: var(--code-block-base) !important;
-}
-._wu0 .token.boolean {
-	color: var(--code-block-primary) !important;
-}
-._wu0 .token.number {
-	color: var(--code-block-primary) !important;
-}
-._wu0 .token.constant {
-	color: var(--code-block-primary) !important;
-}
-._wu0 .token.selector {
-	color: var(--code-block-primary) !important;
-}
-._wu0 .token.bold {
-	color: var(--code-block-primary) !important;
-	font-weight: bold;
-}
-._wu0 .token.comment {
-	color: var(--code-block-meta) !important;
-}
-._wu0 .token.prolog {
-	color: var(--code-block-meta) !important;
-}
-._wu0 .token.doctype {
-	color: var(--code-block-meta) !important;
-}
-._wu0 .token.cdata {
-	color: var(--code-block-meta) !important;
-}
-._wu0 .token.tag {
-	color: var(--code-block-tag) !important;
-}
-._wu0 .token.symbol {
-	color: var(--code-block-quoted) !important;
-}
-._wu0 .token.string {
-	color: var(--code-block-quoted) !important;
-}
-._wu0 .token.char {
-	color: var(--code-block-quoted) !important;
-}
-._wu0 .token.inserted {
-	color: var(--code-block-quoted) !important;
-}
-._wu0 .token.attr-name {
-	color: var(--code-block-variable) !important;
-}
-._wu0 .token.url {
-	color: var(--code-block-variable) !important;
-}
-._wu0 .token.entity {
-	color: var(--code-block-variable) !important;
-}
-._wu0 .token.variable {
-	color: var(--code-block-variable) !important;
-}
-._wu0 .token.deleted {
-	color: var(--code-block-variable) !important;
-}
-._wu0 .token.builtin {
-	color: var(--code-block-special) !important;
-}
-._wu0 .token.hexcode {
-	color: var(--code-block-special) !important;
-}
-._wu0 .token.regex {
-	color: var(--code-block-special) !important;
-}
-._wu0 .token.attr-value {
-	color: var(--code-block-attr-value) !important;
-}
-._wu0 .token.keyword {
-	color: var(--code-block-keyword) !important;
-}
-._wu0 .token.important {
-	color: var(--code-block-keyword) !important;
-}
-._wu0 .token.italic {
-	color: var(--code-block-keyword) !important;
-	font-style: italic;
-}
-._wu0 .token.function {
-	color: var(--code-block-function) !important;
-}
-
 /* Hide hidden accessibility elements so they're not included in copy-pasting of chat logs */
 .accessible_elem {
 	display: none !important;
@@ -399,3 +283,10 @@ a,
 .fbPageBanner {
 	display: none !important;
 }
+
+/* Message composer buttons */
+a._4rv6, /* "Choose a sticker" */
+a._4ce_ { /* "Play a game" */
+	opacity: 1 !important;
+	filter: invert(0.66);
+}
diff --git a/css/code-blocks.css b/css/code-blocks.css
new file mode 100644
index 000000000..854f9404b
--- /dev/null
+++ b/css/code-blocks.css
@@ -0,0 +1,126 @@
+/* Tomorrow light theme for code blocks */
+._wu0 {
+	--code-block-base: #1d1f21;
+	--code-block-background: transparent;
+	--code-block-border: rgba(0, 0, 0, .1);
+	--code-block-primary: #de935f;
+	--code-block-meta: #969896;
+	--code-block-tag: #a3685a;
+	--code-block-quoted: #b5bd68;
+	--code-block-variable: #c66;
+	--code-block-special: #8abeb7;
+	--code-block-attr-value: #139543;
+	--code-block-keyword: #b294bb;
+	--code-block-function: #81a2be;
+	background-color: var(--code-block-background) !important;
+	border: 1px solid var(--code-block-border) !important;
+	color: var(--code-block-base) !important;
+}
+._wu0 .token.punctuation {
+	color: var(--code-block-base) !important;
+}
+._wu0 .token.property {
+	color: var(--code-block-base) !important;
+}
+._wu0 .token.operator {
+	color: var(--code-block-base) !important;
+}
+._wu0 .token.boolean {
+	color: var(--code-block-primary) !important;
+}
+._wu0 .token.number {
+	color: var(--code-block-primary) !important;
+}
+._wu0 .token.constant {
+	color: var(--code-block-primary) !important;
+}
+._wu0 .token.selector {
+	color: var(--code-block-primary) !important;
+}
+._wu0 .token.bold {
+	color: var(--code-block-primary) !important;
+	font-weight: bold;
+}
+._wu0 .token.comment {
+	color: var(--code-block-meta) !important;
+}
+._wu0 .token.prolog {
+	color: var(--code-block-meta) !important;
+}
+._wu0 .token.doctype {
+	color: var(--code-block-meta) !important;
+}
+._wu0 .token.cdata {
+	color: var(--code-block-meta) !important;
+}
+._wu0 .token.tag {
+	color: var(--code-block-tag) !important;
+}
+._wu0 .token.symbol {
+	color: var(--code-block-quoted) !important;
+}
+._wu0 .token.string {
+	color: var(--code-block-quoted) !important;
+}
+._wu0 .token.char {
+	color: var(--code-block-quoted) !important;
+}
+._wu0 .token.inserted {
+	color: var(--code-block-quoted) !important;
+}
+._wu0 .token.attr-name {
+	color: var(--code-block-variable) !important;
+}
+._wu0 .token.url {
+	color: var(--code-block-variable) !important;
+}
+._wu0 .token.entity {
+	color: var(--code-block-variable) !important;
+}
+._wu0 .token.variable {
+	color: var(--code-block-variable) !important;
+}
+._wu0 .token.deleted {
+	color: var(--code-block-variable) !important;
+}
+._wu0 .token.builtin {
+	color: var(--code-block-special) !important;
+}
+._wu0 .token.hexcode {
+	color: var(--code-block-special) !important;
+}
+._wu0 .token.regex {
+	color: var(--code-block-special) !important;
+}
+._wu0 .token.attr-value {
+	color: var(--code-block-attr-value) !important;
+}
+._wu0 .token.keyword {
+	color: var(--code-block-keyword) !important;
+}
+._wu0 .token.important {
+	color: var(--code-block-keyword) !important;
+}
+._wu0 .token.italic {
+	color: var(--code-block-keyword) !important;
+	font-style: italic;
+}
+._wu0 .token.function {
+	color: var(--code-block-function) !important;
+}
+
+/* Tomorrow dark theme for code blocks */
+html.dark-mode ._wu0 {
+	color: var(--base);
+	--code-block-base: #c5c8c6;
+	--code-block-border: var(--base-ten);
+}
+
+/* Full-window vibrancy */
+html.full-vibrancy ._wu0 {
+	--code-block-background: #fff;
+	--code-block-border: transparent;
+}
+html.full-vibrancy.dark-mode ._wu0 {
+	--code-block-background: var(--container-color);
+}
diff --git a/css/dark-mode.css b/css/dark-mode.css
index b0293b86b..df0568bd5 100644
--- a/css/dark-mode.css
+++ b/css/dark-mode.css
@@ -7,9 +7,9 @@
 	--base-fourty: rgba(255, 255, 255, 0.4);
 	--base-thirty: rgba(255, 255, 255, 0.3);
 	--base-twenty: rgba(255, 255, 255, 0.2);
-	--base-five: rgba(255, 255, 255, 0.05);
 	--base-ten: rgba(255, 255, 255, 0.1);
 	--base-nine: rgba(255, 255, 255, 0.09);
+	--base-five: rgba(255, 255, 255, 0.05);
 	--container-color: #323232;
 	--container-dark-color: #1e1e1e;
 	--list-header-color: #222;
@@ -43,16 +43,6 @@ html.dark-mode ._hh7._2f5r {
 	background: none !important;
 }
 
-/* Message list: remove border from messages */
-._hh7._aol {
-	border-color: transparent !important;
-}
-
-/* Fix dark mode overriding colors for code snippets */
-html.dark-mode ._wu0 {
-	color: var(--base);
-}
-
 /* Message list: link in your message bubble */
 html.dark-mode ._o46:not(._nd_) ._hh7 a {
 	color: var(--base-seventy);
@@ -79,6 +69,7 @@ html.dark-mode ._5i_d .__6l {
 	color: var(--base-seventy);
 }
 
+/* Message list: link preview domain */
 html.dark-mode ._5i_d .__6m {
 	color: var(--base-fourty);
 }
@@ -203,6 +194,9 @@ html.dark-mode ._ih3 ._3oh-,
 html.dark-mode ._llq ._3oh- {
 	color: var(--base-seventy);
 }
+html.dark-mode ._llq ._3oh- a {
+	color: var(--blue);
+}
 
 html.dark-mode ._2v6o {
 	color: var(--base-fourty);
@@ -231,6 +225,11 @@ html.dark-mode ._2xh0 ._2xh4 {
 	border-color: var(--base-ten);
 }
 
+/* Message composer: chat bot menu popover */
+html.dark-mode ._1wc4 {
+	border-top-color: var(--base-ten);
+}
+
 /* Contact list: header above */
 html.dark-mode ._36ic {
 	background: var(--list-header-color) !important;
@@ -257,7 +256,7 @@ html.dark-mode ._1qt4 {
 	border-top: solid 1px var(--base-five) !important;
 }
 
-/* contact list: person name */
+/* Contact list: person name */
 html.dark-mode ._1ht6 {
 	color: var(--base-seventy);
 }
@@ -282,7 +281,7 @@ html.dark-mode ._1ht3 ._1ht7 {
 	color: rgba(0, 132, 255, 0.7);
 }
 
-/* contact list: search results */
+/* Contact list: search results */
 html.dark-mode ._5t4c,
 html.dark-mode ._5t4c ._5l37 {
 	color: var(--base-seventy) !important;
@@ -326,6 +325,11 @@ html.dark-mode ._4_j5 {
 	border-left: solid 1px var(--base-five);
 }
 
+/* Right sidebar: contact name */
+html.dark-mode ._3eur a {
+  color: var(--blue);
+}
+
 /* Right sidebar: menus background */
 html.dark-mode ._54ng {
 	background: var(--container-color);
@@ -393,6 +397,7 @@ html.dark-mode ._4jgu {
 	background-color: var(--container-color);
 }
 
+/* Invite friends popup: "Added" labels */
 html.dark-mode ._5rh4 {
 	color: var(--base-seventy);
 }
@@ -437,19 +442,6 @@ html.dark-mode ._1k1p {
 html.dark-mode ._33p7 {
 	background-color: var(--container-color);
 }
-html.dark-mode ._33p7 ._b-u,
-html.dark-mode ._33p7 ._b-v {
-	background-color: transparent !important;
-	background-image: url('https://static.xx.fbcdn.net/rsrc.php/v3/yG/r/CV3cVGSAcf3.png') !important;
-	background-repeat: no-repeat !important;
-	background-size: auto !important;
-}
-html.dark-mode ._33p7 ._b-u {
-	background-position: 0 -42px !important;
-}
-html.dark-mode ._33p7 ._b-v {
-	background-position: 0 0 !important;
-}
 html.dark-mode ._33p7 input {
 	color: var(--base-seventy);
 	background-color: var(--base-five);
@@ -520,13 +512,6 @@ html.dark-mode ._3cn0 {
 	color: var(--base-seventy);
 }
 
-/* Bot card content */
-html.dark-mode ._3cnl,
-._3cnn a,
-._3cnj {
-	color: var(--base-fourty);
-}
-
 /* Dialogs */
 html.dark-mode ._53ij,
 html.dark-mode ._4eby,
@@ -633,12 +618,17 @@ html.dark-mode ._5hy2 ._43dh {
 	background-color: transparent !important;
 }
 
-/* Fix the Sticker and Gaming buttons */
-html.dark-mode ._4rv6,
-html.dark-mode ._4ce_ {
+/* Message composer buttons */
+html.dark-mode a._4rv6, /* "Choose a sticker" */
+html.dark-mode a._4ce_ { /* "Play a game" */
 	filter: invert(1) !important;
 	opacity: 0.6 !important;
 }
+html.dark-mode ._4rv3 ._4rv4 ._5vn8, /* "Add files" */
+html.dark-mode a._39bk { /* Other icons */
+	opacity: 0.6;
+	filter: brightness(1.6);
+}
 
 /* Fix the @name-popover in the chat input box */
 html.dark-mode ._13iv {
@@ -666,13 +656,6 @@ html.dark-mode ._30vt ._4qba {
 	color: var(--blue);
 }
 
-/* Tomorrow dark theme for code blocks */
-html.dark-mode ._wu0 {
-	--code-block-base: #c5c8c6;
-	--code-block-background: #1d1f21;
-	--code-block-border: #0a0c14;
-}
-
 /* Plan dialog primary text */
 html.dark-mode ._4dx5,
 html.dark-mode ._38wl {
@@ -702,23 +685,24 @@ html.dark-mode .chatAttachmentShelf {
 	color: var(--base-seventy);
 }
 html.dark-mode .chatAttachmentShelf {
-	border-top: 1px solid rgba(255, 255, 255, 0.1);
+	border-top: 1px solid var(--base-ten);
 }
 html.dark-mode .chatAttachmentShelf .__6k,
 html.dark-mode .chatAttachmentShelf .__6l {
 	color: inherit;
 }
 
-/* Fixes appearance of attached files */
+/* Message composer: attached files */
 html.dark-mode ._2zl5 {
-	border-color: rgba(255, 255, 255, 0.1);
+	background-color: transparent;
+	border-color: var(--base-ten);
 }
 
 html.dark-mode ._2-x5,
 html.dark-mode .__6k,
 html.dark-mode .__6l {
 	color: var(--base-seventy);
-	background: var(--container-color);
+	background: transparent;
 }
 html.dark-mode ._4gd0 {
 	background: transparent;
@@ -726,7 +710,7 @@ html.dark-mode ._4gd0 {
 
 /* Fix color on links */
 html.dark-mode .__6j._43kk {
-	border-color: rgba(255, 255, 255, 0.1) !important;
+	border-color: var(--base-ten) !important;
 }
 
 /* Fixes appearance of "Verify Account" screen text */
@@ -748,9 +732,34 @@ html.dark-mode ._3v_o {
 
 /* Login inputs */
 html.dark-mode ._3v_o ._55r1 {
-	background: rgba(255, 255, 255, 0.05);
+	background: var(--base-five);
 	color: var(--base-seventy);
 }
 html.dark-mode ._3v_o ._55r1::-webkit-input-placeholder {
 	color: var(--base-thirty) !important;
 }
+
+/* Forward message icon */
+html.dark-mode ._2u_d a {
+	filter: invert(1);
+}
+
+/* "Delete message" popup */
+html.dark-mode ._7492 {
+	color: var(--base-fifty);
+}
+
+/* Deleted message */
+html.dark-mode ._7301._hh7 {
+	background-color: transparent;
+	border-color: var(--base-ten) !important;
+	color: var(--base-fourty) !important;
+}
+
+/* "Message Reactions" popup */
+html.dark-mode ._koh {
+	border-bottom-color: var(--base-five);
+}
+html.dark-mode ._koh li:not(.selected) {
+	color: var(--base-seventy);
+}
diff --git a/css/vibrancy.css b/css/vibrancy.css
index d51b0a16b..81af8c60d 100644
--- a/css/vibrancy.css
+++ b/css/vibrancy.css
@@ -28,7 +28,7 @@ html.sidebar-vibrancy ._5iwm ._58al {
 	background-color: rgba(246, 247, 249, 0.5) !important;
 }
 html.sidebar-vibrancy.dark-mode ._5iwm ._58al {
-	background: rgba(255, 255, 255, 0.05) !important;
+	background: var(--base-five) !important;
 }
 
 /* Chat title bar */
@@ -38,7 +38,7 @@ html.sidebar-vibrancy ._673w {
 }
 html.sidebar-vibrancy.dark-mode ._673w {
 	background-color: var(--container-dark-color) !important;
-	border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
+	border-bottom: 1px solid var(--base-five) !important;
 }
 
 /* Share previews: title and subtitle */
@@ -115,7 +115,7 @@ html.full-vibrancy ._5iwm ._58al {
 	background-color: rgba(246, 247, 249, 0.5) !important;
 }
 html.full-vibrancy.dark-mode ._5iwm ._58al {
-	background: rgba(255, 255, 255, 0.05) !important;
+	background: var(--base-five) !important;
 }
 
 /* Chat title bar */
@@ -150,11 +150,6 @@ html.full-vibrancy.dark-mode ._36ic {
 	background: transparent !important;
 }
 
-/* Login button */
-html.full-vibrancy.dark-mode button {
-	background: transparent !important;
-}
-
 /* Message container + right sidebar */
 html.full-vibrancy ._4_j4,
 html.full-vibrancy ._4_j5,
@@ -169,4 +164,39 @@ html.full-vibrancy.dark-mode ._2y8y {
 	background: transparent !important;
 }
 
+/* Message composer buttons */
+html.full-vibrancy ._39bj {
+	filter: brightness(0.8);
+}
+html.full-vibrancy.dark-model ._39bj {
+	filter: brightness(1);
+}
+
+/* Deleted message */
+html.full-vibrancy ._7301._hh7 {
+	background-color: #fff;
+	border-color: transparent !important;
+}
+html.full-vibrancy.dark-mode ._7301._hh7 {
+	background-color: var(--container-color);
+}
+
+/* Message list: link preview */
+html.full-vibrancy ._5i_d {
+	background-color: #fff;
+	border-color: transparent !important;
+}
+html.full-vibrancy.dark-mode ._5i_d {
+	background-color: var(--container-color);
+}
+
+/* Message composer: attached files */
+html.full-vibrancy ._2zl5 {
+	background-color: #fff;
+	border-color: transparent;
+}
+html.full-vibrancy.dark-mode ._2zl5 {
+	background-color: var(--container-color);
+}
+
 /* -- BLOCK END: full-window vibrancy -- */
diff --git a/source/index.ts b/source/index.ts
index 1d97e3265..6fff952f0 100644
--- a/source/index.ts
+++ b/source/index.ts
@@ -330,6 +330,9 @@ function createMainWindow(): BrowserWindow {
 		webContents.insertCSS(readFileSync(path.join(__dirname, '..', 'css', 'browser.css'), 'utf8'));
 		webContents.insertCSS(readFileSync(path.join(__dirname, '..', 'css', 'dark-mode.css'), 'utf8'));
 		webContents.insertCSS(readFileSync(path.join(__dirname, '..', 'css', 'vibrancy.css'), 'utf8'));
+		webContents.insertCSS(
+			readFileSync(path.join(__dirname, '..', 'css', 'code-blocks.css'), 'utf8')
+		);
 
 		if (config.get('useWorkChat')) {
 			webContents.insertCSS(