Final tweaks

Reviewed By: danielbuechele

Differential Revision: D7009456

fbshipit-source-id: 65304f648141407bc15484840647050e712e89df

website/contents/properties/layout-direction.md

@@ -1,7 +1,7 @@
 ---
 path: "docs/layout-direction"
 title: "Layout Direction"
-hasPlayground: true
+hasPlayground: false
 ---
 
 ## Layout Direction
@@ -17,7 +17,7 @@ to the `CalculateLayout` call or by setting the direction on the root node.
 **LTR (DEFAULT)** Text and children and laid our from left to right. Margin and
 padding applied the start of an element are applied on the left side.
 
-**RTL (DEFAULT)** Text and children and laid our from right to left. Margin and
+**RTL** Text and children and laid our from right to left. Margin and
 padding applied the start of an element are applied on the right side.
 
 <controls prop="layoutDirection"></controls>

website/contents/properties/min-max.md

@@ -9,7 +9,7 @@ hasPlayground: true
 All the following properties set the maximum and minimum size constraints of an element.
 These properties have higher priority than all other properties and will always be respected.
 Constraints can be specified as either absolute pixel values or as percentages of their
-parent's size. By default all these constraints are undefined.
+parent's size. By default all these constraints are `undefined`.
 
 ### Max Width
 

website/src/components/Playground/CodeGenerators.js

@@ -138,7 +138,7 @@ export default class CodeGenerators extends Component<Props, State> {
           </div>
         )}
       </Modal>,
-      <Dropdown overlay={menu} key="dropdown">
+      <Dropdown overlay={menu} key="dropdown" trigger="click">
         <Button>
           Get Code <Icon type="down" />
         </Button>

website/src/components/Playground/Editor.css

@@ -23,9 +23,12 @@
 }
 
 .Editor h2 {
-  font-size: 16px;
   margin-bottom: 8px;
-  margin-top: 30px;
+  margin-top: 20px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #444950;
+  text-transform: uppercase;
 }
 
 .Editor h2:first-child {

website/src/components/Playground/Editor.js

@@ -68,7 +68,7 @@ export default class Editor extends Component<Props> {
               onChange={this.props.onChangeSetting}
             />
             <h2>
-              Flex direction
+              Flex Direction
               <InfoText doclink="/docs/flex-direction">
                 Defines the direction of the main-axis
               </InfoText>
@@ -130,7 +130,7 @@ export default class Editor extends Component<Props> {
             </Row>
 
             <h2>
-              Flex wrap
+              Flex Wrap
               <InfoText doclink="/docs/flex-wrap">
                 Wrapping behaviour when child nodes don't fit into a single line
               </InfoText>
@@ -144,7 +144,7 @@ export default class Editor extends Component<Props> {
           </TabPane>
           <TabPane tab="Alignment" key="2">
             <h2>
-              Justify content
+              Justify Content
               <InfoText doclink="/docs/justify-content">
                 Aligns child nodes along the main-axis
               </InfoText>
@@ -157,7 +157,7 @@ export default class Editor extends Component<Props> {
             />
 
             <h2>
-              Align items
+              Align Items
               <InfoText doclink="/docs/align-items">
                 Aligns child nodes along the cross-axis
               </InfoText>
@@ -170,7 +170,7 @@ export default class Editor extends Component<Props> {
             />
 
             <h2>
-              Align self
+              Align Self
               <InfoText doclink="/docs/align-items">
                 Override align items of parent
               </InfoText>
@@ -183,7 +183,7 @@ export default class Editor extends Component<Props> {
             />
 
             <h2>
-              Align content
+              Align Content
               <InfoText doclink="/docs/align-content">
                 Alignment of lines along the cross-axis when wrapping
               </InfoText>
@@ -197,7 +197,7 @@ export default class Editor extends Component<Props> {
           </TabPane>
           <TabPane tab="Layout" key="3">
             <h2>
-              Width &times; height
+              Width &times; Height
               <InfoText doclink="/docs/width-height">
                 Dimensions of the node
               </InfoText>
@@ -226,7 +226,7 @@ export default class Editor extends Component<Props> {
             </Row>
 
             <h2>
-              Aspect ratio
+              Aspect Ratio
               <InfoText doclink="/docs/aspect-ratio">
                 Width/Height aspect ratio of node
               </InfoText>
@@ -240,7 +240,6 @@ export default class Editor extends Component<Props> {
               onChange={this.props.onChangeLayout}
             />
 
-            <h2>Box model</h2>
             {['padding', 'border', 'margin'].map(property => (
               <EditValue
                 property={property}
@@ -251,7 +250,7 @@ export default class Editor extends Component<Props> {
               />
             ))}
             <h2>
-              Position
+              Position Type
               <InfoText doclink="/docs/absolute-position">
                 Relative position offsets the node from it's calculated
                 position. Absolute position removes the node from the flexbox

website/src/components/Playground/YogaEnumSelect.js

@@ -75,6 +75,7 @@ export default class YogaEnumSelect extends Component<Props> {
     return this.values.length > 3 ? (
       <div className="YogaEnumSelect">
         <Dropdown
+          trigger="click"
           disabled={props.disabled}
           overlay={
             <Menu onClick={this.handleMenuClick}>

website/src/components/Playground/YogaPositionEditor.css

@@ -26,6 +26,7 @@
   justify-content: space-between;
   align-items: center;
   flex-direction: row;
-  font-size: 16px;
-  font-weight: bold;
+  font-size: 12px;
+  font-weight: 700;
+  color: #444950;
 }

website/src/components/Playground/YogaPositionEditor.js

@@ -53,7 +53,7 @@ export default class YogaPositionEditor extends Component<Props> {
               onChange(property, value.set('left', e.target.value))
             }
           />
-          {property}
+          {property.toUpperCase()}
           <Input
             type="text"
             value={value.right}

website/src/templates/index.css

@@ -41,10 +41,11 @@
 }
 
 .doc-block h3 {
-  color: #444950;
-  font-size: 16px;
-  font-weight: 700;
   line-height: 180%;
+  font-size: 14px;
+  font-weight: 700;
+  color: #444950;
+  text-transform: uppercase;
 }
 
 .doc-block p {