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
2021-06-29 08:38:33 -07:00
parent 014e571f74
commit 8cbdd3d148
14 changed files with 70 additions and 225 deletions
--- a/desktop/app/src/chrome/SettingsSheet.tsx
+++ b/desktop/app/src/chrome/SettingsSheet.tsx
@@ -246,7 +246,7 @@ class SettingsSheet extends Component<Props, State> {
          }}
        />
        <ToggledSection
-          label="Enable dark theme (experimental)"
+          label="Enable dark theme"
          toggled={darkMode}
          onChange={(enabled) => {
            this.setState((prevState) => ({
--- 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"
    >
      <div
-        class="css-bl14sl-View-FlexBox-SearchBox e271nro4"
+        class="css-r8ah0d-View-FlexBox-SearchBox e271nro4"
      >
        <input
-          class="css-184o3nx-Input-SearchInput e271nro3"
+          class="css-84x0xt-Input-SearchInput e271nro3"
          placeholder="Search Flipper plugins..."
          type="text"
          value=""
@@ -252,7 +252,7 @@ exports[`load PluginInstaller list 1`] = `
      class="css-1spj5hr-View-FlexBox-FlexRow-Container ersmi542"
    >
      <input
-        class="css-phqpi-Input-FileInputBox ersmi540"
+        class="css-sli06x-Input-FileInputBox ersmi540"
        placeholder="Specify path to a Flipper package or just drag and drop it here..."
        type="text"
        value=""
@@ -316,10 +316,10 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
      class="css-1lxv8hi-Container-Horizontal-SandyToolbarContainer e1ecpah20"
    >
      <div
-        class="css-bl14sl-View-FlexBox-SearchBox e271nro4"
+        class="css-r8ah0d-View-FlexBox-SearchBox e271nro4"
      >
        <input
-          class="css-184o3nx-Input-SearchInput e271nro3"
+          class="css-84x0xt-Input-SearchInput e271nro3"
          placeholder="Search Flipper plugins..."
          type="text"
          value=""
@@ -559,7 +559,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
      class="css-1spj5hr-View-FlexBox-FlexRow-Container ersmi542"
    >
      <input
-        class="css-phqpi-Input-FileInputBox ersmi540"
+        class="css-sli06x-Input-FileInputBox ersmi540"
        placeholder="Specify path to a Flipper package or just drag and drop it here..."
        type="text"
        value=""
--- a/desktop/app/src/chrome/settings/KeyboardShortcutInput.tsx
+++ b/desktop/app/src/chrome/settings/KeyboardShortcutInput.tsx
@@ -9,6 +9,7 @@

 import {FlexColumn, styled, FlexRow, Text, Glyph, colors} from '../../ui';
 import React, {useRef, useState, useEffect} from 'react';
+import {theme} from 'flipper-plugin';

 type PressedKeys = {
  metaKey: boolean;
@@ -62,7 +63,7 @@ const ShortcutKeysContainer = styled(FlexRow)<{invalid: boolean}>(

 const ShortcutKeyContainer = styled.div({
  border: `1px solid ${colors.light20}`,
-  backgroundColor: colors.light05,
+  backgroundColor: theme.backgroundWash,
  padding: 3,
  margin: '0 1px',
  borderRadius: 3,
--- 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<MenuItemConstructorOptions>;
-}>((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,
 }));
--- 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',
  },
 });
--- 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';

--- 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',
--- 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',
--- 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,
--- 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(
            <SearchBox tabIndex={-1}>
              <SearchIcon
                name="magnifying-glass"
-                color={colors.macOSTitleBarIcon}
+                color={theme.textColorSecondary}
                size={16}
              />
              {this.state.filters.map((filter, i) => (
--- 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<string, Bookmark>;
@@ -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) => {
                    )}
                  </TextContainer>
                  <IconButton
-                    color={colors.macOSTitleBarButtonBackgroundActive}
+                    color={theme.textColorSecondary}
                    outline={false}
                    icon="cross-circle"
                    size={16}
--- a/desktop/plugins/public/navigation/components/NavigationInfoBox.tsx
+++ b/desktop/plugins/public/navigation/components/NavigationInfoBox.tsx
@@ -19,6 +19,7 @@ import {
 } from 'flipper';
 import {parseURIParameters, stripQueryParameters} from '../util/uri';
 import React from 'react';
+import {theme} from 'flipper-plugin';

 const BOX_HEIGHT = 240;

@@ -81,7 +82,7 @@ const NavigationInfoBoxContainer = styled.div({
  flexGrow: 1,
  position: 'relative',
  marginBottom: 10,
-  backgroundColor: colors.white,
+  backgroundColor: theme.backgroundDefault,
  boxShadow: '1px 1px 5px rgba(0,0,0,0.1)',
 });

@@ -117,7 +118,7 @@ const TimelineCircle = styled.div({
  height: 18,
  top: 11,
  left: -33,
-  backgroundColor: colors.light02,
+  backgroundColor: theme.backgroundWash,
  border: `4px solid ${colors.highlight}`,
  borderRadius: '50%',
  position: 'absolute',
@@ -129,7 +130,7 @@ const TimelineMiniCircle = styled.div({
  top: 1,
  left: -30,
  borderRadius: '50%',
-  backgroundColor: colors.highlight,
+  backgroundColor: theme.textColorActive,
  position: 'absolute',
 });

--- a/desktop/plugins/public/navigation/components/Timeline.tsx
+++ b/desktop/plugins/public/navigation/components/Timeline.tsx
@@ -7,10 +7,11 @@
 * @format
 */

-import {colors, FlexCenter, styled} from 'flipper';
+import {FlexCenter, styled} from 'flipper';
 import {NavigationInfoBox} from './';
 import {Bookmark, NavigationEvent, URI} from '../types';
 import React, {useRef} from 'react';
+import {theme} from 'flipper-plugin';

 type Props = {
  bookmarks: Map<string, Bookmark>;
@@ -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) => {
--- 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);}