tweak dark mode theme colors, improve LeftRail UI (#3335)

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
This commit is contained in:
Simek
2022-01-27 04:29:35 -08:00
committed by Facebook GitHub Bot
parent 31f3443dee
commit f08bcb2a2c
2 changed files with 8 additions and 4 deletions

View File

@@ -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"

View File

@@ -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;