Support dark mode

Summary: As reported in https://fb.workplace.com/groups/flippersupport/permalink/1171595499987773/, the SupportForm doesn't support dark mode. Fixed this by fixing theming in some of the underlying deprecated components.

Reviewed By: timur-valiev

Differential Revision: D29694034

fbshipit-source-id: f8b90ecc87f7f16f6e1f9751d22309d37a052d5a

desktop/app/src/chrome/ListView.tsx

@@ -16,12 +16,12 @@ import {
   Spacer,
   Checkbox,
   Radio,
-  colors,
   View,
   Tooltip,
   Glyph,
 } from '../ui';
 import React, {Component} from 'react';
+import {theme} from 'flipper-plugin';
 
 export type SelectionType = 'multiple' | 'single';
 
@@ -62,7 +62,7 @@ const Container = styled(FlexColumn)({
 });
 
 const Line = styled(View)({
-  backgroundColor: colors.greyTint2,
+  backgroundColor: theme.dividerColor,
   height: 1,
   width: 'auto',
   flexShrink: 0,
@@ -71,7 +71,7 @@ const Line = styled(View)({
 const RowComponentContainer = styled(FlexColumn)({
   overflow: 'scroll',
   height: 'auto',
-  backgroundColor: colors.white,
+  backgroundColor: theme.backgroundDefault,
   maxHeight: 500,
 });
 
@@ -121,12 +121,14 @@ class RowComponent extends Component<RowComponentProps> {
             paddingBottom={8}
             paddingLeft={leftPadding || 0}>
             <FlexRow style={{alignItems: 'center'}}>
-              <Text color={disabled ? colors.light20 : undefined}>{label}</Text>
+              <Text color={disabled ? theme.disabledColor : undefined}>
+                {label}
+              </Text>
               <Spacer />
               {disabled && (
                 <Glyph
                   name="caution-triangle"
-                  color={colors.light20}
+                  color={theme.dividerColor}
                   size={12}
                   variant="filled"
                   style={{marginRight: 5}}

desktop/app/src/ui/components/CenteredView.tsx

@@ -8,24 +8,7 @@
  */
 
 import React from 'react';
-import styled from '@emotion/styled';
-import {colors} from './colors';
-import FlexColumn from './FlexColumn';
-
-const Container = styled(FlexColumn)({
-  height: '100%',
-  overflow: 'auto',
-  backgroundColor: colors.light02,
-});
-Container.displayName = 'CenteredView:Container';
-
-const ContentWrapper = styled.div({
-  width: 500,
-  marginLeft: 'auto',
-  marginRight: 'auto',
-  padding: '20px 0',
-});
-ContentWrapper.displayName = 'CenteredView:ContentWrapper';
+import {Layout, theme} from 'flipper-plugin';
 
 /**
  * CenteredView creates a scrollable container with fixed with, centered content.
@@ -33,9 +16,18 @@ ContentWrapper.displayName = 'CenteredView:ContentWrapper';
  * @deprecated
  */
 const CenteredView: React.FC<{}> = ({children}) => (
-  <Container grow>
-    <ContentWrapper>{children}</ContentWrapper>
-  </Container>
+  <Layout.ScrollContainer style={{background: theme.backgroundWash}}>
+    <Layout.Container
+      center
+      padv={theme.space.huge}
+      width={500}
+      style={{
+        marginLeft: 'auto',
+        marginRight: 'auto',
+      }}>
+      {children}
+    </Layout.Container>
+  </Layout.ScrollContainer>
 );
 
 export default CenteredView;

desktop/app/src/ui/components/Markdown.tsx

@@ -10,8 +10,7 @@
 import React, {CSSProperties, ReactNode} from 'react';
 import styled from '@emotion/styled';
 import ReactMarkdown from 'react-markdown';
-import {colors} from './colors';
-import {getFlipperLib} from 'flipper-plugin';
+import {getFlipperLib, theme} from 'flipper-plugin';
 
 const Container = styled.div({
   padding: 10,
@@ -25,7 +24,7 @@ const Heading = styled.div({fontSize: 18, marginTop: 10, marginBottom: 10});
 const SubHeading = styled.div({
   fontSize: 12,
   textTransform: 'uppercase',
-  color: '#90949c',
+  color: theme.textColorSecondary,
   marginTop: 10,
   marginBottom: 10,
   fontWeight: 'bold',
@@ -37,23 +36,23 @@ const ListItem = styled.li({
 });
 const Strong = styled.span({
   fontWeight: 'bold',
-  color: '#1d2129',
+  color: theme.textColorPrimary,
 });
 const Emphasis = styled.span({
   fontStyle: 'italic',
 });
 const Quote = styled(Row)({
   padding: 10,
-  backgroundColor: '#f1f2f3',
+  backgroundColor: theme.backgroundWash,
   fontSize: 13,
 });
 const Code = styled.span({
   fontFamily: '"Courier New", Courier, monospace',
-  backgroundColor: '#f1f2f3',
+  backgroundColor: theme.backgroundWash,
 });
 const Pre = styled(Row)({
   padding: 10,
-  backgroundColor: '#f1f2f3',
+  backgroundColor: theme.backgroundWash,
 });
 function CodeBlock(props: {
   children: ReactNode[];
@@ -69,7 +68,7 @@ function CodeBlock(props: {
   );
 }
 const Link = styled.span({
-  color: colors.blue,
+  color: theme.textColorActive,
 });
 function LinkReference(props: {href: string; children: Array<ReactNode>}) {
   return (

desktop/app/src/ui/components/MultiLineInput.tsx

@@ -8,20 +8,21 @@
  */
 
 import styled from '@emotion/styled';
-import {colors} from './colors';
+import {theme} from 'flipper-plugin';
 
 export const multilineStyle = (props: {valid: boolean}) => ({
-  border: `1px solid ${props.valid === false ? colors.red : colors.light15}`,
+  border: `1px solid ${
+    props.valid === false ? theme.errorColor : theme.dividerColor
+  }`,
   borderRadius: 4,
   font: 'inherit',
   fontSize: '1em',
   height: '28px',
   lineHeight: '28px',
   marginRight: 5,
-
+  backgroundColor: theme.backgroundDefault,
   '&:disabled': {
-    backgroundColor: '#ddd',
-    borderColor: '#ccc',
+    backgroundColor: theme.backgroundWash,
     cursor: 'not-allowed',
   },
 });

desktop/app/src/ui/components/RoundedSection.tsx

@@ -9,24 +9,23 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-import {colors} from './colors';
-import Heading from './Heading';
-import FlexColumn from './FlexColumn';
+import {theme, Layout} from 'flipper-plugin';
+import {Typography} from 'antd';
 
 const Divider = styled.hr({
   margin: '16px -20px 20px -20px',
   border: 'none',
-  borderTop: `1px solid ${colors.light05}`,
+  borderTop: `1px solid ${theme.dividerColor}`,
 });
 Divider.displayName = 'RoundedSection:Divider';
 
 const Container = styled.div({
-  background: colors.white,
-  borderRadius: 10,
-  boxShadow: '0 1px 3px rgba(0,0,0,0.25)',
-  marginBottom: '20px',
+  background: theme.backgroundDefault,
+  borderRadius: theme.space.medium,
+  boxShadow: `0 1px 3px ${theme.dividerColor}`,
+  marginBottom: theme.space.large,
   width: '100%',
-  padding: 20,
+  padding: theme.space.large,
 });
 Container.displayName = 'RoundedSection:Container';
 
@@ -37,9 +36,9 @@ Container.displayName = 'RoundedSection:Container';
  */
 const RoundedSection: React.FC<{title: string}> = ({title, children}) => (
   <Container>
-    <Heading>{title}</Heading>
+    <Typography.Title level={3}>{title}</Typography.Title>
     <Divider />
-    <FlexColumn>{children}</FlexColumn>
+    <Layout.Container>{children}</Layout.Container>
   </Container>
 );