Merge pull request #1452 from manpenaloza/better-sandbox-stylings

refactor sandbox example buttons to especially improve mobile appearance
styled-components · Jan 29, 2018 · 0edca9d · 0edca9d
2 parents f01bb08 + 8744a14
commit 0edca9d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/sandbox/src/App.js b/sandbox/src/App.js
@@ -101,6 +101,11 @@ const LiveEditor = LiveBlock.withComponent(_LiveEditor).extend`
 
 const LivePreview = LiveBlock.withComponent(_LivePreview).extend`
   background-color: white;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-wrap: wrap;
+  align-items: center;
 `
 
 const LiveError = styled(_LiveError)`

diff --git a/sandbox/src/Button.example.js b/sandbox/src/Button.example.js
@@ -4,7 +4,7 @@ const Button = styled.button`
   font-size: 16px;
   border-radius: 5px;
   padding: 0.25em 1em;
-  margin: 0 1em;
+  margin: 1em 1em;
   background: transparent;
   color: palevioletred;
   border: 2px solid palevioletred;
@@ -17,11 +17,9 @@ const Button = styled.button`
     `};
 `
 
-const content = (
-  <div>
-    <Button>Normal Button</Button>
-    <Button primary>Primary Button</Button>
-  </div>
-)
+const content = [
+  <Button>Normal Button</Button>,
+  <Button primary>Primary Button</Button>,
+]
 
 render(content)