adding primary and compact buttons

Summary: Adding a style for `primary` buttons

Reviewed By: priteshrnandgaonkar

Differential Revision: D13417284

fbshipit-source-id: 8ef46092d79ee0f9d39167aa2662a84caca9aa11

src/__tests__/__snapshots__/App.electron.js.snap

@@ -8,14 +8,13 @@ exports[`Empty app state matches snapshot 1`] = `
     className="toolbar css-1u64wvw"
   >
     <div
-      className="css-7nzs1f"
-      disabled={false}
+      className="css-q7gju5"
       onClick={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
     >
       <div
-        className="css-at56xe"
+        className="css-1h9aj9a"
         color="#acacac"
         size={12}
         src="https://external.xx.fbcdn.net/assets/?name=minus-circle&variant=filled&size=12&set=facebook_icons&density=1x"
@@ -26,7 +25,7 @@ exports[`Empty app state matches snapshot 1`] = `
       className="css-1ayt83l"
     >
       <div
-        className="css-1telx8z"
+        className="css-rb77sv"
         disabled={true}
         onClick={[Function]}
         onMouseDown={[Function]}
@@ -34,14 +33,14 @@ exports[`Empty app state matches snapshot 1`] = `
         title="Take Screenshot"
       >
         <div
-          className="css-11ecny9"
+          className="css-1dg3xuk"
           color="#acacac"
           size={12}
           src="https://external.xx.fbcdn.net/assets/?name=camera&variant=filled&size=12&set=facebook_icons&density=1x"
         />
       </div>
       <div
-        className="css-1telx8z"
+        className="css-rb77sv"
         disabled={true}
         onClick={[Function]}
         onMouseDown={[Function]}
@@ -49,7 +48,7 @@ exports[`Empty app state matches snapshot 1`] = `
         title="Make Screen Recording"
       >
         <div
-          className="css-1qxark3"
+          className="css-wvm62d"
           color="#acacac"
           size={12}
           src="https://external.xx.fbcdn.net/assets/?name=camcorder&variant=filled&size=12&set=facebook_icons&density=1x"
@@ -63,14 +62,14 @@ exports[`Empty app state matches snapshot 1`] = `
       className="css-1xcv92o"
     />
     <div
-      className="css-1lljw3m"
+      className="css-1cecbfb"
       onClick={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
       title="Report Bug"
     >
       <div
-        className="css-1u10tgp"
+        className="css-1idwz0j"
         color="#acacac"
         size={12}
         src="https://external.xx.fbcdn.net/assets/?name=bug&variant=filled&size=12&set=facebook_icons&density=1x"
@@ -80,21 +79,21 @@ exports[`Empty app state matches snapshot 1`] = `
       className="css-1ayt83l"
     >
       <div
-        className="css-19m5dks"
+        className="css-u1e6jr"
         onClick={[Function]}
         onMouseDown={[Function]}
         onMouseUp={[Function]}
         title="Toggle Plugins"
       >
         <div
-          className="css-1pfn0zl"
+          className="css-2bfl92"
           color="#80a6f5"
           size={20}
           src="icons/sidebar_left.svg"
         />
       </div>
       <div
-        className="css-1telx8z"
+        className="css-rb77sv"
         disabled={true}
         onClick={[Function]}
         onMouseDown={[Function]}
@@ -102,7 +101,7 @@ exports[`Empty app state matches snapshot 1`] = `
         title="Toggle Details"
       >
         <div
-          className="css-13cmaba"
+          className="css-j5i4pm"
           color="#acacac"
           size={20}
           src="icons/sidebar_right.svg"
@@ -138,7 +137,7 @@ exports[`Empty app state matches snapshot 1`] = `
           onClick={[Function]}
         >
           <div
-            className="css-1wavjrl"
+            className="css-1hjpcq0"
             color="#8155cb"
             size={20}
             src="https://external.xx.fbcdn.net/assets/?name=rocket&variant=filled&size=20&set=facebook_icons&density=1x"
@@ -163,7 +162,7 @@ exports[`Empty app state matches snapshot 1`] = `
           onClick={[Function]}
         >
           <div
-            className="css-1bmw9ne"
+            className="css-yfo7mj"
             color="#8155cb"
             size={20}
             src="https://external.xx.fbcdn.net/assets/?name=magic-wand&variant=filled&size=20&set=facebook_icons&density=1x"
@@ -188,7 +187,7 @@ exports[`Empty app state matches snapshot 1`] = `
           onClick={[Function]}
         >
           <div
-            className="css-nk9hkx"
+            className="css-4qdej8"
             color="#8155cb"
             size={20}
             src="https://external.xx.fbcdn.net/assets/?name=tools&variant=filled&size=20&set=facebook_icons&density=1x"
@@ -213,7 +212,7 @@ exports[`Empty app state matches snapshot 1`] = `
           onClick={[Function]}
         >
           <div
-            className="css-14xjmfa"
+            className="css-l82yfp"
             color="#8155cb"
             size={20}
             src="https://external.xx.fbcdn.net/assets/?name=posts&variant=filled&size=20&set=facebook_icons&density=1x"

src/chrome/DevicesButton.js

@@ -5,7 +5,7 @@
  * @format
  */
 
-import {Component, Button} from 'flipper';
+import {Component, Button, styled} from 'flipper';
 import {connect} from 'react-redux';
 import {spawn} from 'child_process';
 import {selectDevice, preferDevice} from '../reducers/connections.js';
@@ -19,6 +19,10 @@ type Props = {
   preferDevice: (device: string) => void,
 };
 
+const DropdownButton = styled(Button)({
+  fontSize: 11,
+});
+
 // Remove this if the flow fixme at the bottom is addressed (or has already been removed).
 /* eslint-disable prettier/prettier */
 class DevicesButton extends Component<Props> {
@@ -90,14 +94,12 @@ class DevicesButton extends Component<Props> {
       }
     }
     return (
-      <Button compact={true} icon={icon} dropdown={dropdown} disabled={false}>
+      <DropdownButton compact={true} icon={icon} dropdown={dropdown}>
         {text}
-      </Button>
+      </DropdownButton>
     );
   }
-}
-
-/* $FlowFixMe(>=0.86.0) This comment suppresses an error found when Flow v0.86
+} /* $FlowFixMe(>=0.86.0) This comment suppresses an error found when Flow v0.86
  * was deployed. To see the error, delete this comment and run Flow.
  */
 export default connect(

src/ui/components/Button.js

@@ -20,6 +20,8 @@ const borderColor = props => {
     return colors.macOSTitleBarButtonBorderBlur;
   } else if (props.type === 'danger') {
     return colors.red;
+  } else if (props.type === 'primary') {
+    return '#237FF1';
   } else if (props.depressed) {
     return colors.macOSTitleBarButtonBorderBottom;
   } else {
@@ -31,6 +33,8 @@ const borderBottomColor = props => {
     return colors.macOSTitleBarButtonBorderBlur;
   } else if (props.type === 'danger') {
     return colors.red;
+  } else if (props.type === 'primary') {
+    return '#237FF1';
   } else {
     return colors.macOSTitleBarButtonBorderBottom;
   }
@@ -44,6 +48,8 @@ const backgroundImage = props => {
       } 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
@@ -57,6 +63,8 @@ const backgroundImage = props => {
 const color = props => {
   if (props.type === 'danger' && props.windowIsFocused) {
     return colors.red;
+  } else if (props.type === 'primary' && props.windowIsFocused) {
+    return colors.white;
   } else if (props.disabled) {
     return colors.macOSTitleBarIconBlur;
   } else {
@@ -85,11 +93,10 @@ const StyledButton = styled('div')(props => ({
   borderWidth: 1,
   borderColor: borderColor(props),
   borderBottomColor: borderBottomColor(props),
-  fontSize: props.compact === true ? 11 : '1em',
   color: color(props),
   borderRadius: 4,
   position: 'relative',
-  padding: '0 6px',
+  padding: props.padded ? '0 15px' : '0 6px',
   height: props.compact === true ? 24 : 28,
   margin: 0,
   marginLeft: props.inButtonGroup === true ? 0 : 10,
@@ -210,6 +217,10 @@ type Props = {
    * Style of the icon. `filled` is the default
    */
   iconVariant?: 'filled' | 'outline',
+  /**
+   * Whether the button should have additional padding left and right.
+   */
+  padded?: boolean,
 };
 
 type State = {

src/ui/components/Glyph.js

@@ -14,6 +14,7 @@ const ColoredIconBlack = styled('img')(({size}) => ({
   height: size,
   verticalAlign: 'middle',
   width: size,
+  flexShrink: 0,
 }));
 
 const ColoredIconCustom = styled('div')(props => ({
@@ -26,6 +27,7 @@ const ColoredIconCustom = styled('div')(props => ({
   maskSize: '100% 100%',
   WebkitMaskImage: `url('${props.src}')`,
   WebkitMaskSize: '100% 100%',
+  flexShrink: 0,
 }));
 
 function ColoredIcon(