From 4b7efb73d7d8e108a683fdd1e95e7790ff316366 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emil=20Sj=C3=B6lander?= <emilsj@fb.com>
Date: Tue, 13 Feb 2018 11:27:39 -0800
Subject: [PATCH] Change some default playground styling

Reviewed By: danielbuechele

Differential Revision: D6977989

fbshipit-source-id: 64975685490b8a2230d4effc8791c028b680d2b7
---
 website/src/components/Playground/YogaNode.js |  2 +-
 website/src/components/Playground/index.css   |  8 +++++
 website/src/components/Playground/index.js    | 29 ++-----------------
 3 files changed, 12 insertions(+), 27 deletions(-)

diff --git a/website/src/components/Playground/YogaNode.js b/website/src/components/Playground/YogaNode.js
index 9ec7b1c7..4154d0bc 100644
--- a/website/src/components/Playground/YogaNode.js
+++ b/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>}
diff --git a/website/src/components/Playground/index.css b/website/src/components/Playground/index.css
index 97691196..8ff86f79 100644
--- a/website/src/components/Playground/index.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/website/src/components/Playground/index.js b/website/src/components/Playground/index.js
index ba8ecbab..4c222c2b 100644
--- a/website/src/components/Playground/index.js
+++ b/website/src/components/Playground/index.js
@@ -54,21 +54,9 @@ export default class Playground extends Component<Props, State> {
 
   static defaultProps = {
     layoutDefinition: LayoutRecord({
-      width: 700,
-      height: 400,
-      justifyContent: yoga.JUSTIFY_SPACE_BETWEEN,
-      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',
-      }),
+      width: 500,
+      height: 500,
+      children: List([LayoutRecord(), LayoutRecord(), LayoutRecord()]),
     }),
     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>