style support request form

Summary:
Styles the create support request form similarly to the details form, using the standard UI components.

N.B. Video section styling will be a separate diff

Reviewed By: jknoxville

Differential Revision: D18637989

fbshipit-source-id: f1cc6967b6841a55e770043f330e1a87ac7bfb50

src/chrome/MainSidebar.tsx

@@ -33,6 +33,8 @@ import {
   Heading,
   Spacer,
   ArchivedDevice,
+  SmallText,
+  Info,
 } from 'flipper';
 import React, {Component, PureComponent, Fragment} from 'react';
 import NotificationsHub from '../NotificationsHub';
@@ -445,6 +447,11 @@ class MainSidebar extends PureComponent<Props, State> {
     const {staticView, setStaticView} = this.props;
     return (
       <>
+        <ListItem>
+          <Info type="warning" small>
+            {selectedDevice.source ? 'Imported device' : 'Archived device'}
+          </Info>
+        </ListItem>
         {this.state.showSupportForm &&
           (selectedDevice as ArchivedDevice).supportRequestDetails && (
             <ListItem
@@ -537,15 +544,7 @@ class MainSidebar extends PureComponent<Props, State> {
       <>
         {favoritePlugins.length === 0 ? (
           <ListItem>
-            <div
+            <SmallText center>Star your favorite plugins!</SmallText>
-              style={{
-                textAlign: 'center',
-                width: '100%',
-                color: colors.light30,
-                fontStyle: 'italic',
-              }}>
-              Star your favorite plugins!
-            </div>
           </ListItem>
         ) : (
           <>

src/chrome/__tests__/__snapshots__/ShareSheetPendingDialog.node.tsx.snap

@@ -25,7 +25,7 @@ exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
       className="css-12zzrdt"
     />
     <div
-      className="css-1awwm1c"
+      className="css-1qfnye7"
       onClick={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
@@ -33,7 +33,7 @@ exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
       Cancel
     </div>
     <div
-      className="css-1awwm1c"
+      className="css-1qfnye7"
       onClick={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
@@ -68,7 +68,7 @@ exports[`ShareSheetPendingDialog is rendered without status update 1`] = `
       className="css-12zzrdt"
     />
     <div
-      className="css-1awwm1c"
+      className="css-1qfnye7"
       onClick={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
@@ -76,7 +76,7 @@ exports[`ShareSheetPendingDialog is rendered without status update 1`] = `
       Cancel
     </div>
     <div
-      className="css-1awwm1c"
+      className="css-1qfnye7"
       onClick={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}

src/ui/components/Button.tsx

@@ -131,7 +131,6 @@ const StyledButton = styled('div')(
     padding: props.padded ? '0 15px' : '0 6px',
     height: props.compact === true ? 24 : 28,
     margin: 0,
-    marginLeft: props.inButtonGroup === true ? 0 : 10,
     minWidth: 34,
     display: 'inline-flex',
     alignItems: 'center',
@@ -146,6 +145,7 @@ const StyledButton = styled('div')(
       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,
     },

src/ui/components/HBox.tsx

@@ -42,7 +42,9 @@ const HBox: React.FC<{
     width: '100%',
     shrink: 1,
     grow: 1,
-  };
+    display: 'flex',
+    flexDirection: 'column',
+  } as const;
 
   switch (grow) {
     case 'right':

src/ui/components/Info.tsx

@@ -20,6 +20,7 @@ import FlexColumn from './FlexColumn';
 export type InfoProps = {
   children: React.ReactNode;
   type: 'info' | 'spinning' | 'warning' | 'error';
+  small?: boolean;
 };
 
 const icons = {
@@ -42,30 +43,33 @@ const bgColor = {
   spinning: 'transparent',
 };
 
-const InfoWrapper = styled(FlexColumn)(({type}: {type: InfoProps['type']}) => ({
+const InfoWrapper = styled(FlexColumn)(
-  padding: 10,
+  ({type, small}: Pick<InfoProps, 'type' | 'small'>) => ({
-  borderRadius: 4,
+    padding: small ? '0 4px' : 10,
-  color: color[type],
+    borderRadius: 4,
-  border: `1px solid ${color[type]}`,
+    color: color[type],
-  background: bgColor[type],
+    border: `1px solid ${color[type]}`,
-}));
+    background: bgColor[type],
+    width: '100%',
+  }),
+);
 InfoWrapper.displayName = 'InfoWrapper';
 
 /**
  * Shows an info box with some text and a symbol.
  * Supported types: info | spinning | warning | error
  */
-function Info({type, children}: InfoProps) {
+function Info({type, children, small}: InfoProps) {
   return (
-    <InfoWrapper type={type}>
+    <InfoWrapper type={type} small={small}>
       <HBox>
         {type === 'spinning' ? (
-          <LoadingIndicator size={24} />
+          <LoadingIndicator size={small ? 12 : 24} />
         ) : (
           <Glyph
             name={icons[type]}
             color={color[type]}
-            size={24}
+            size={small ? 12 : 24}
             variant="filled"
           />
         )}

src/ui/components/RoundedSection.tsx

@@ -11,6 +11,7 @@ import React from 'react';
 import styled from 'react-emotion';
 import {colors} from './colors';
 import Heading from './Heading';
+import FlexColumn from './FlexColumn';
 
 const Divider = styled('hr')({
   margin: '16px -20px 20px -20px',
@@ -38,7 +39,7 @@ const RoundedSection: React.FC<{title: string}> = ({title, children}) => (
   <Container>
     <Heading>{title}</Heading>
     <Divider />
-    {children}
+    <FlexColumn>{children}</FlexColumn>
   </Container>
 );
 

src/ui/components/SmallText.tsx

@@ -14,11 +14,13 @@ import Text from './Text';
 /**
  * Subtle text that should not draw attention
  */
-const SmallText = styled(Text)({
+const SmallText = styled(Text)(({center}: {center?: boolean}) => ({
   color: colors.light20,
   size: 10,
   fontStyle: 'italic',
-});
+  textAlign: center ? 'center' : undefined,
+  width: '100%',
+}));
 SmallText.displayName = 'SmallText';
 
 export default SmallText;

src/utils/icons.js

@@ -18,27 +18,36 @@ const {remote} = require('electron');
 
 const ICONS = {
   'app-dailies': [12],
+  'app-react': [12],
   'arrow-right': [12],
+  bell: [12],
   'bell-null-outline': [12, 24],
   'bell-null': [12],
+  'building-city': [12],
+  'brush-paint': [12],
   'caution-octagon': [16],
-  'caution-triangle': [16, 24],
+  'caution-triangle': [12, 16, 24],
   'chevron-down-outline': [10],
   'chevron-down': [8, 12],
   'chevron-up': [8, 12],
   'chevron-right': [8, 12, 16],
-  'cross-circle': [16, 24],
+  compose: [12],
+  'cross-circle': [12, 16, 24],
   'dots-3-circle-outline': [16],
   'flash-default': [12],
-  'info-circle': [16, 24],
+  'info-circle': [12, 16, 24],
-  'magic-wand': [20],
+  'magic-wand': [12, 20],
   'magnifying-glass': [16, 20],
   'minus-circle': [12],
   'mobile-engagement': [16],
+  network: [12],
+  'news-feed': [12],
   'question-circle-outline': [16],
   'star-outline': [12, 16, 24],
+  trending: [12],
   'triangle-down': [12],
   'triangle-right': [12],
+  'thought-bubble': [12],
   accessibility: [16],
   apps: [12],
   bird: [12],
@@ -50,10 +59,12 @@ const ICONS = {
   caution: [16],
   cross: [16],
   checkmark: [16],
+  dashboard: [12],
   desktop: [12],
   directions: [12],
   download: [16],
   internet: [12],
+  messages: [12],
   mobile: [12, 16, 32],
   posts: [20],
   power: [16],
@@ -63,11 +74,14 @@ const ICONS = {
   settings: [12],
   share: [16],
   star: [12, 16, 24],
+  tree: [12],
+  translate: [12],
   'star-slash': [16],
   'life-event-major': [16],
   target: [12, 16],
   tools: [12, 20],
   'washing-machine': [12],
+  'watch-tv': [12],
 };
 
 // Takes a string like 'star', or 'star-outline', and converts it to