From f08bcb2a2c473949b1c72dca655837d2b6f242ff Mon Sep 17 00:00:00 2001
From: Simek <gosimek@gmail.com>
Date: Thu, 27 Jan 2022 04:29:35 -0800
Subject: [PATCH] tweak dark mode theme colors, improve LeftRail UI (#3335)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Summary:
Currently the design of `LeftRail` varies a bit between light and dark modes. Additionally washed background color is hard to differentiate from the main background color in comparison to the light theme (See `LeftRail` sidebars toggle buttons background for example). This lead to few contrast related issues, for example the hover effect on the WelcomeScreen elements is not visible in dark mode.

The PR tweaks the dark mode theme colors and fixes the unnecessary background of Settings icon in dark mode.

I have also spotted that icon `hover` effect is not working when icon has a badge (pure dot or count), I might have an idea how to fix this and I will push another PR for that. 🙂

## Changelog

* tweak dark mode theme colors, improve LeftRail UI

Pull Request resolved: https://github.com/facebook/flipper/pull/3335

Test Plan:
The change has been testes by running the desktop Flipper app locally from source.

## Preview (before & after)

<img width="390" alt="Screenshot 2022-01-24 at 13 37 20" align="left" src="https://user-images.githubusercontent.com/719641/150784627-36e222a8-e53e-4409-ab72-783d4a594f8e.png">
<img width="390" alt="Screenshot 2022-01-24 at 13 46 08" src="https://user-images.githubusercontent.com/719641/150785438-bb496adf-83ab-4b1c-928d-07f4b0098f1a.png">

Reviewed By: antonk52

Differential Revision: D33741513

Pulled By: lblasa

fbshipit-source-id: ef187db0725ac2b04c09b7f06823e713b50be88f
---
 desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx | 6 +++++-
 desktop/themes/dark.less                              | 6 +++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx b/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx
index 38a5080a8..5b3701919 100644
--- a/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx
+++ b/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx
@@ -248,7 +248,11 @@ function ExtrasMenu() {
       <NUX
         title="Find import, export, deeplink, feedback, settings, and help (welcome) here"
         placement="right">
-        <Menu mode="vertical" className={menu} selectable={false}>
+        <Menu
+          mode="vertical"
+          className={menu}
+          selectable={false}
+          style={{backgroundColor: theme.backgroundDefault}}>
           <SubMenu
             popupOffset={[10, 0]}
             key="extras"
diff --git a/desktop/themes/dark.less b/desktop/themes/dark.less
index 26068890d..44221b484 100644
--- a/desktop/themes/dark.less
+++ b/desktop/themes/dark.less
@@ -29,9 +29,9 @@
 // Background - default
 @background-default: @black;
 // Background - Wash
-@background-wash: #0d0d0d; // white 5%
+@background-wash: #121212;
 // Backgroud - default button
-@button-default-background: rgba(255, 255, 255, 0.1); // white 10%
+@button-default-background: rgba(255, 255, 255, 0.15); // white 15%
 // Background - transparent hover
 @button-transparent-hover: rgba(255, 255, 255, 0.1); // white 10%
 
@@ -45,7 +45,7 @@
 // @button-background-active: @fade(@white, 8%)
 
 // Divider color
-@divider-color: #181818; // white 10%
+@divider-color: #1c1c1c;
 
 // Semantic colors: Diff
 @diff-added-background: @lime-2;