Change some default playground styling

Reviewed By: danielbuechele

Differential Revision: D6977989

fbshipit-source-id: 64975685490b8a2230d4effc8791c028b680d2b7

website/src/components/Playground/YogaNode.js

@@ -251,7 +251,7 @@ export default class YogaNode extends Component<Props, State> {
         className={`YogaNode ${isFocused ? 'focused' : ''} ${className || ''} ${
           this.state.visible ? '' : 'invisible'
         }`}
-        style={{left, top, width, height}}
+        style={path.length == 0 ? {width, height} : {left, top, width, height}}
         onDoubleClick={this.onDoubleClick}
         onClick={this.onClick}>
         {label && <div className="label">{label}</div>}

website/src/components/Playground/index.css

@@ -15,6 +15,7 @@
 }
 
 .Playground {
+  display: flex;
   flex-grow: 1;
   position: relative;
   width: 100%;
@@ -41,3 +42,10 @@
   background-size: 10px 10px, 10px 10px, 100px 100px, 100px 100px, 100px 100px,
     100px 100px, 100px 100px, 100px 100px;
 }
+
+
+.Playground > .YogaNode {
+  margin: auto;
+  position: static;
+  align-self: center;
+}

website/src/components/Playground/index.js

@@ -54,21 +54,9 @@ export default class Playground extends Component<Props, State> {
 
   static defaultProps = {
     layoutDefinition: LayoutRecord({
-      width: 700,
+      width: 500,
-      height: 400,
+      height: 500,
-      justifyContent: yoga.JUSTIFY_SPACE_BETWEEN,
+      children: List([LayoutRecord(), LayoutRecord(), LayoutRecord()]),
-      alignItems: yoga.ALIGN_FLEX_START,
-      children: List([LayoutRecord(), LayoutRecord()]),
-      padding: PositionRecord({
-        left: '10',
-        top: '10',
-        right: '10',
-        bottom: '10',
-      }),
-      margin: PositionRecord({
-        left: '30',
-        top: '30',
-      }),
     }),
     direction: yoga.DIRECTION_LTR,
     maxDepth: 3,
@@ -248,13 +236,6 @@ export default class Playground extends Component<Props, State> {
         ref={ref => {
           this._containerRef = ref;
         }}>
-        {/* <Toolbar
-        onShowCode={
-        !this.state.showCode
-        ? () => this.setState({selectedNodePath: null, showCode: true})
-        : undefined
-      }
-    /> */}
         <YogaNode
           layoutDefinition={layoutDefinition}
           selectedNodePath={selectedNodePath}
@@ -296,10 +277,6 @@ export default class Playground extends Component<Props, State> {
           width={500}
           visible={this.state.showCode}
           onClose={() => this.setState({showCode: false})}>
-          {/* <Code
-            layoutDefinition={layoutDefinition}
-            direction={this.state.direction}
-          /> */}
         </Sidebar>
         {this.props.persist && <URLShortener />}
       </div>