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/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']}) => ({
-  padding: 10,
-  borderRadius: 4,
-  color: color[type],
-  border: `1px solid ${color[type]}`,
-  background: bgColor[type],
-}));
+const InfoWrapper = styled(FlexColumn)(
+  ({type, small}: Pick<InfoProps, 'type' | 'small'>) => ({
+    padding: small ? '0 4px' : 10,
+    borderRadius: 4,
+    color: color[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;