From 8cbdd3d14832cb8bc16a57d420a9c837bbc53fc5 Mon Sep 17 00:00:00 2001 From: Michel Weststrate Date: Tue, 29 Jun 2021 08:38:33 -0700 Subject: [PATCH] Dark mode tweaks Summary: Went over all plugins and did superficial fixes to make most plugins look decent or at least usable in dark mode, which before they weren't :) Reviewed By: priteshrnandgaonkar Differential Revision: D29456680 fbshipit-source-id: 3952e5da512c68b89434eea081faf121d1049908 --- desktop/app/src/chrome/SettingsSheet.tsx | 2 +- .../PluginInstaller.node.tsx.snap | 12 +- .../chrome/settings/KeyboardShortcutInput.tsx | 3 +- desktop/app/src/ui/components/Button.tsx | 167 ------------------ desktop/app/src/ui/components/Input.tsx | 12 +- desktop/app/src/ui/components/Select.tsx | 3 + desktop/app/src/ui/components/Sidebar.tsx | 4 +- desktop/app/src/ui/components/Tabs.tsx | 22 ++- .../ui/components/searchable/FilterToken.tsx | 14 +- .../ui/components/searchable/Searchable.tsx | 16 +- .../components/BookmarksSidebar.tsx | 18 +- .../components/NavigationInfoBox.tsx | 7 +- .../public/navigation/components/Timeline.tsx | 11 +- desktop/themes/dark.less | 4 +- 14 files changed, 70 insertions(+), 225 deletions(-) diff --git a/desktop/app/src/chrome/SettingsSheet.tsx b/desktop/app/src/chrome/SettingsSheet.tsx index 546d0864c..91880fe27 100644 --- a/desktop/app/src/chrome/SettingsSheet.tsx +++ b/desktop/app/src/chrome/SettingsSheet.tsx @@ -246,7 +246,7 @@ class SettingsSheet extends Component { }} /> { this.setState((prevState) => ({ diff --git a/desktop/app/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap b/desktop/app/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap index facd82d48..631804134 100644 --- a/desktop/app/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap +++ b/desktop/app/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap @@ -9,10 +9,10 @@ exports[`load PluginInstaller list 1`] = ` class="css-1lxv8hi-Container-Horizontal-SandyToolbarContainer e1ecpah20" >
( const ShortcutKeyContainer = styled.div({ border: `1px solid ${colors.light20}`, - backgroundColor: colors.light05, + backgroundColor: theme.backgroundWash, padding: 3, margin: '0 1px', borderRadius: 3, diff --git a/desktop/app/src/ui/components/Button.tsx b/desktop/app/src/ui/components/Button.tsx index ee749e040..b2487822e 100644 --- a/desktop/app/src/ui/components/Button.tsx +++ b/desktop/app/src/ui/components/Button.tsx @@ -10,10 +10,8 @@ import React, {useState, useCallback, useMemo} from 'react'; import electron, {MenuItemConstructorOptions} from 'electron'; import styled from '@emotion/styled'; -import {keyframes} from '@emotion/css'; import {Button as AntdButton, Dropdown, Menu} from 'antd'; -import {colors} from './colors'; import Glyph, {IconSize} from './Glyph'; import type {ButtonProps} from 'antd/lib/button'; import {DownOutlined, CheckOutlined} from '@ant-design/icons'; @@ -21,171 +19,6 @@ import {theme} from 'flipper-plugin'; type ButtonType = 'primary' | 'success' | 'warning' | 'danger'; -const borderColor = (props: { - windowIsFocused?: boolean; - disabled?: boolean; - type?: ButtonType; - depressed?: boolean; -}) => { - if (!props.windowIsFocused) { - return colors.macOSTitleBarButtonBorderBlur; - } else if (props.type === 'danger' && !props.disabled) { - return colors.red; - } else if (props.type === 'primary' && !props.disabled) { - return '#237FF1'; - } else if (props.depressed) { - return colors.macOSTitleBarButtonBorderBottom; - } else { - return colors.macOSTitleBarButtonBorder; - } -}; -const borderBottomColor = (props: { - windowIsFocused?: boolean; - disabled?: boolean; - type?: ButtonType; - depressed?: boolean; -}) => { - if (!props.windowIsFocused) { - return colors.macOSTitleBarButtonBorderBlur; - } else if (props.type === 'danger' && !props.disabled) { - return colors.red; - } else if (props.type === 'primary' && !props.disabled) { - return '#237FF1'; - } else { - return colors.macOSTitleBarButtonBorderBottom; - } -}; - -const backgroundImage = (props: { - windowIsFocused?: boolean; - disabled?: boolean; - type?: ButtonType; - depressed?: boolean; -}) => { - if (props.windowIsFocused && !props.disabled) { - if (props.depressed) { - return `linear-gradient(to bottom, ${colors.macOSTitleBarBorderBlur} 1px, ${colors.macOSTitleBarButtonBorderBlur} 0%, ${colors.macOSTitleBarButtonBackgroundActive} 100%)`; - } else if (props.type === 'primary') { - return `linear-gradient(to bottom, #67a6f7 0%, #0072FA 100%)`; - } else { - return `linear-gradient(to bottom, transparent 0%,${colors.macOSTitleBarButtonBackground} 100%)`; - } - } else { - return 'none'; - } -}; - -const color = (props: { - windowIsFocused?: boolean; - type?: ButtonType; - disabled?: boolean; -}) => { - if (props.type === 'danger' && props.windowIsFocused && !props.disabled) { - return colors.red; - } else if ( - props.type === 'primary' && - props.windowIsFocused && - !props.disabled - ) { - return colors.white; - } else if (props.disabled) { - return colors.macOSTitleBarIconBlur; - } else { - return colors.light50; - } -}; - -const pulse = keyframes({ - '0%': { - boxShadow: `0 0 4px 0 ${colors.macOSTitleBarIconSelected}`, - }, - '70%': { - boxShadow: '0 0 4px 6px transparent', - }, - '100%': { - boxShadow: '0 0 4px 0 transparent', - }, -}); - -const StyledButton = styled.div<{ - windowIsFocused?: boolean; - compact?: boolean; - inButtonGroup?: boolean; - padded?: boolean; - pulse?: boolean; - disabled?: boolean; - dropdown?: Array; -}>((props) => ({ - userSelect: 'none', - backgroundColor: - props.windowIsFocused && !props.disabled - ? colors.white - : colors.macOSTitleBarButtonBackgroundBlur, - backgroundImage: backgroundImage(props), - borderStyle: 'solid', - borderWidth: 1, - borderColor: borderColor(props), - borderBottomColor: borderBottomColor(props), - color: color(props), - borderRadius: 4, - position: 'relative', - padding: props.padded ? '0 15px' : '0 6px', - height: props.compact === true ? 24 : 28, - margin: 0, - minWidth: 34, - display: 'inline-flex', - alignItems: 'center', - justifyContent: 'center', - flexShrink: 0, - - boxShadow: - props.pulse && props.windowIsFocused - ? `0 0 0 ${colors.macOSTitleBarIconSelected}` - : '', - animation: props.pulse && props.windowIsFocused ? `${pulse} 1s infinite` : '', - - '&:not(:first-child)': { - marginLeft: props.inButtonGroup === true ? 0 : 10, - borderTopLeftRadius: props.inButtonGroup === true ? 0 : 4, - borderBottomLeftRadius: props.inButtonGroup === true ? 0 : 4, - }, - - '&:not(:last-child)': { - borderTopRightRadius: props.inButtonGroup === true ? 0 : 4, - borderBottomRightRadius: props.inButtonGroup === true ? 0 : 4, - borderRight: props.inButtonGroup === true ? 0 : '', - }, - - '&:first-of-type': { - marginLeft: 0, - }, - - '&:active': props.disabled - ? null - : { - borderColor: colors.macOSTitleBarButtonBorder, - borderBottomColor: colors.macOSTitleBarButtonBorderBottom, - background: `linear-gradient(to bottom, ${colors.macOSTitleBarButtonBackgroundActiveHighlight} 1px, ${colors.macOSTitleBarButtonBackgroundActive} 0%, ${colors.macOSTitleBarButtonBorderBlur} 100%)`, - }, - - '&:disabled': { - borderColor: borderColor(props), - borderBottomColor: borderBottomColor(props), - pointerEvents: 'none', - }, - - '&:hover::before': { - content: props.dropdown ? "''" : 'normal', - position: 'absolute', - bottom: 1, - right: 2, - borderStyle: 'solid', - borderWidth: '4px 3px 0 3px', - borderColor: `${colors.macOSTitleBarIcon} transparent transparent transparent`, - }, -})); -StyledButton.displayName = 'Button:StyledButton'; - const Icon = styled(Glyph)<{hasText: boolean}>(({hasText}) => ({ marginRight: hasText ? 3 : 0, })); diff --git a/desktop/app/src/ui/components/Input.tsx b/desktop/app/src/ui/components/Input.tsx index e1aaa044d..01ca81d75 100644 --- a/desktop/app/src/ui/components/Input.tsx +++ b/desktop/app/src/ui/components/Input.tsx @@ -8,24 +8,26 @@ */ import styled from '@emotion/styled'; -import {colors} from './colors'; +import {theme} from 'flipper-plugin'; export const inputStyle = (props: { compact: boolean; valid: boolean; readOnly: boolean; }) => ({ - border: `1px solid ${props.valid ? colors.light15 : colors.red}`, + border: `1px solid ${props.valid ? theme.dividerColor : theme.errorColor}`, borderRadius: 4, font: 'inherit', fontSize: '1em', height: props.compact ? '17px' : '28px', lineHeight: props.compact ? '17px' : '28px', - backgroundColor: props.readOnly ? colors.light02 : undefined, + backgroundColor: props.readOnly + ? theme.backgroundWash + : theme.backgroundDefault, '&:disabled': { - backgroundColor: '#ddd', - borderColor: '#ccc', + backgroundColor: theme.disabledColor, + borderColor: theme.disabledColor, cursor: 'not-allowed', }, }); diff --git a/desktop/app/src/ui/components/Select.tsx b/desktop/app/src/ui/components/Select.tsx index 3c76a527f..5b19451ae 100644 --- a/desktop/app/src/ui/components/Select.tsx +++ b/desktop/app/src/ui/components/Select.tsx @@ -11,6 +11,7 @@ import {Component, CSSProperties} from 'react'; import Text from './Text'; import styled from '@emotion/styled'; import React from 'react'; +import {theme} from 'flipper-plugin'; const Label = styled.label({ display: 'flex', @@ -26,6 +27,8 @@ LabelText.displayName = 'Select:LabelText'; const SelectMenu = styled.select<{grow?: boolean}>((props) => ({ flexGrow: props.grow ? 1 : 0, + background: theme.backgroundDefault, + border: `1px solid ${theme.dividerColor}`, })); SelectMenu.displayName = 'Select:SelectMenu'; diff --git a/desktop/app/src/ui/components/Sidebar.tsx b/desktop/app/src/ui/components/Sidebar.tsx index e01ccb486..4a5a28030 100644 --- a/desktop/app/src/ui/components/Sidebar.tsx +++ b/desktop/app/src/ui/components/Sidebar.tsx @@ -9,7 +9,6 @@ import {theme, _Interactive, _InteractiveProps} from 'flipper-plugin'; import FlexColumn from './FlexColumn'; -import {colors} from './colors'; import {Component} from 'react'; import styled from '@emotion/styled'; import {Property} from 'csstype'; @@ -33,8 +32,7 @@ const SidebarContainer = styled(FlexColumn)<{ ...(props.unstyled ? undefined : { - backgroundColor: - props.backgroundColor || colors.macOSTitleBarBackgroundBlur, + backgroundColor: props.backgroundColor || theme.backgroundDefault, borderLeft: props.position === 'right' ? borderStyle : 'none', borderTop: props.position === 'bottom' ? borderStyle : 'none', borderRight: props.position === 'left' ? borderStyle : 'none', diff --git a/desktop/app/src/ui/components/Tabs.tsx b/desktop/app/src/ui/components/Tabs.tsx index a82d7258f..f37766353 100644 --- a/desktop/app/src/ui/components/Tabs.tsx +++ b/desktop/app/src/ui/components/Tabs.tsx @@ -16,7 +16,7 @@ import Tab, {Props as TabProps} from './Tab'; import {Property} from 'csstype'; import React, {useContext} from 'react'; import {TabsContext} from './TabsContainer'; -import {_wrapInteractionHandler} from 'flipper-plugin'; +import {theme, _wrapInteractionHandler} from 'flipper-plugin'; const TabList = styled(FlexRow)({ justifyContent: 'center', @@ -35,14 +35,22 @@ const TabListItem = styled.div<{ ? 'linear-gradient(to bottom, #67a6f7 0%, #0072FA 100%)' : `linear-gradient(to bottom, white 0%,${colors.macOSTitleBarButtonBackgroundBlur} 100%)` : props.active - ? colors.light15 - : colors.light02, - borderBottom: props.container ? '1px solid #B8B8B8' : '1px solid #dddfe2', + ? theme.primaryColor + : theme.backgroundWash, + borderBottom: props.container + ? '1px solid #B8B8B8' + : `1px solid ${theme.dividerColor}`, boxShadow: props.active && props.container ? 'inset 0px 0px 3px rgba(0,0,0,0.25)' : 'none', - color: props.container && props.active ? colors.white : colors.dark80, + color: props.container + ? props.active + ? colors.white + : colors.dark80 + : props.active + ? colors.white + : theme.textColorPrimary, flex: props.container ? 'unset' : 1, top: props.container ? -11 : 0, fontWeight: 500, @@ -63,7 +71,7 @@ const TabListItem = styled.div<{ borderBottomRightRadius: props.container ? 3 : 0, }, '&:hover': { - backgroundColor: props.active ? colors.light15 : colors.light05, + backgroundColor: theme.backgroundTransparentHover, }, })); TabListItem.displayName = 'Tabs:TabListItem'; @@ -77,7 +85,7 @@ const TabListAddItem = styled(TabListItem)({ TabListAddItem.displayName = 'Tabs:TabListAddItem'; const CloseButton = styled.div({ - color: '#000', + color: theme.textColorPrimary, float: 'right', fontSize: 10, fontWeight: 'bold', diff --git a/desktop/app/src/ui/components/searchable/FilterToken.tsx b/desktop/app/src/ui/components/searchable/FilterToken.tsx index acceaaa9c..69503e575 100644 --- a/desktop/app/src/ui/components/searchable/FilterToken.tsx +++ b/desktop/app/src/ui/components/searchable/FilterToken.tsx @@ -11,18 +11,18 @@ import {Filter} from '../filter/types'; import {PureComponent} from 'react'; import Text from '../Text'; import styled from '@emotion/styled'; -import {colors} from '../colors'; import electron, {MenuItemConstructorOptions} from 'electron'; import React from 'react'; import {Property} from 'csstype'; +import {theme} from 'flipper-plugin'; const Token = styled(Text)<{focused?: boolean; color?: Property.Color}>( (props) => ({ display: 'inline-flex', alignItems: 'center', backgroundColor: props.focused - ? colors.macOSHighlightActive - : props.color || colors.macOSHighlight, + ? theme.textColorActive + : props.color || theme.buttonDefaultBackground, borderRadius: 4, marginRight: 4, padding: 4, @@ -30,8 +30,8 @@ const Token = styled(Text)<{focused?: boolean; color?: Property.Color}>( height: 21, color: props.focused ? 'white' : 'inherit', '&:active': { - backgroundColor: colors.macOSHighlightActive, - color: colors.white, + backgroundColor: theme.textColorActive, + color: theme.textColorPrimary, }, '&:first-of-type': { marginLeft: 3, @@ -57,7 +57,7 @@ const Key = styled(Text)<{ fontSize: 14, }, '&:active:after': { - backgroundColor: colors.macOSHighlightActive, + backgroundColor: theme.textColorActive, }, })); Key.displayName = 'FilterToken:Key'; @@ -83,7 +83,7 @@ const Chevron = styled.div<{focused?: boolean}>((props) => ({ top: -2, height: 'auto', lineHeight: 'initial', - color: props.focused ? colors.white : 'inherit', + color: props.focused ? theme.textColorActive : 'inherit', '&:hover, &:active, &:focus': { color: 'inherit', border: 0, diff --git a/desktop/app/src/ui/components/searchable/Searchable.tsx b/desktop/app/src/ui/components/searchable/Searchable.tsx index 52c5f2a1f..270c3b6bb 100644 --- a/desktop/app/src/ui/components/searchable/Searchable.tsx +++ b/desktop/app/src/ui/components/searchable/Searchable.tsx @@ -11,7 +11,6 @@ import {Filter} from '../filter/types'; import {TableColumns} from '../table/types'; import {PureComponent} from 'react'; import Input from '../Input'; -import {colors} from '../colors'; import Text from '../Text'; import FlexBox from '../FlexBox'; import Glyph from '../Glyph'; @@ -34,10 +33,10 @@ export const SearchBox = styled(FlexBox)<{isInvalidInput?: boolean}>( flex: `1 0 auto`, minWidth: 150, height: 30, - backgroundColor: colors.white, + backgroundColor: theme.backgroundDefault, borderRadius: '999em', border: `1px solid ${ - !props.isInvalidInput ? colors.light15 : colors.red + !props.isInvalidInput ? theme.dividerColor : theme.errorColor }`, alignItems: 'center', paddingLeft: 4, @@ -61,9 +60,12 @@ export const SearchInput = styled(Input)<{ marginLeft: 2, marginRight: 8, width: '100%', - color: props.regex && !props.isValidInput ? colors.red : colors.black, + color: + props.regex && !props.isValidInput + ? theme.errorColor + : theme.textColorPrimary, '&::-webkit-input-placeholder': { - color: colors.placeholder, + color: theme.textColorPlaceholder, fontWeight: 300, }, })); @@ -81,7 +83,7 @@ const Clear = styled(Text)({ lineHeight: '15.5px', textAlign: 'center', backgroundColor: 'rgba(0,0,0,0.1)', - color: colors.white, + color: theme.textColorPrimary, display: 'block', '&:hover': { backgroundColor: 'rgba(0,0,0,0.15)', @@ -479,7 +481,7 @@ export default function Searchable( {this.state.filters.map((filter, i) => ( diff --git a/desktop/plugins/public/navigation/components/BookmarksSidebar.tsx b/desktop/plugins/public/navigation/components/BookmarksSidebar.tsx index 792c3b17b..a7f9fc3f7 100644 --- a/desktop/plugins/public/navigation/components/BookmarksSidebar.tsx +++ b/desktop/plugins/public/navigation/components/BookmarksSidebar.tsx @@ -11,7 +11,6 @@ import { DetailSidebar, FlexCenter, styled, - colors, FlexRow, FlexColumn, Text, @@ -20,6 +19,7 @@ import { import {Bookmark, URI} from '../types'; import {IconButton} from './'; import React from 'react'; +import {theme} from 'flipper-plugin'; type Props = { bookmarks: Map; @@ -29,14 +29,14 @@ type Props = { const NoData = styled(FlexCenter)({ fontSize: 18, - color: colors.macOSTitleBarIcon, + color: theme.textColorSecondary, }); const BookmarksList = styled.div({ overflowY: 'scroll', overflowX: 'hidden', height: '100%', - backgroundColor: colors.white, + backgroundColor: theme.backgroundDefault, }); const BookmarkContainer = styled(FlexRow)({ @@ -45,16 +45,12 @@ const BookmarkContainer = styled(FlexRow)({ height: 55, alignItems: 'center', cursor: 'pointer', - borderBottom: `1px ${colors.greyTint} solid`, + borderBottom: `1px ${theme.dividerColor} solid`, ':last-child': { borderBottom: '0', }, ':active': { - backgroundColor: colors.highlight, - color: colors.white, - }, - ':active *': { - color: colors.white, + backgroundColor: theme.backgroundWash, }, }); @@ -70,7 +66,7 @@ const BookmarkSubtitle = styled(Text)({ overflowX: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', - color: colors.greyTint3, + color: theme.textColorSecondary, marginTop: 4, }); @@ -110,7 +106,7 @@ export default (props: Props) => { )} ; @@ -21,7 +22,7 @@ type Props = { const TimelineLine = styled.div({ width: 2, - backgroundColor: colors.highlight, + backgroundColor: theme.textColorActive, position: 'absolute', top: 38, bottom: 0, @@ -32,7 +33,7 @@ const TimelineContainer = styled.div({ paddingLeft: 25, overflowY: 'scroll', flexGrow: 1, - backgroundColor: colors.light02, + backgroundColor: theme.backgroundWash, scrollBehavior: 'smooth', '&>div': { position: 'relative', @@ -53,8 +54,8 @@ const NavigationEventContainer = styled.div({ const NoData = styled(FlexCenter)({ height: '100%', fontSize: 18, - backgroundColor: colors.macOSTitleBarBackgroundBlur, - color: colors.macOSTitleBarIcon, + backgroundColor: theme.backgroundWash, + color: theme.textColorSecondary, }); export default (props: Props) => { diff --git a/desktop/themes/dark.less b/desktop/themes/dark.less index e0ffeab1f..da18689d1 100644 --- a/desktop/themes/dark.less +++ b/desktop/themes/dark.less @@ -47,7 +47,7 @@ // Divider color @divider-color: #181818; // white 10% -::-webkit-scrollbar { width: 8px;} +::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track-piece { background-color: transparent; } -::-webkit-scrollbar-thumb { height: 50px; background-color: rgba(255, 255, 255, 0.5); border-radius: 3px;} +::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.5); border-radius: 3px;} ::-webkit-scrollbar-thumb:hover {background-color: rgba(255, 255, 255, 0.7);}