From d1b4451ef6f7452a76c32c1d1e74f4f6bb113f10 Mon Sep 17 00:00:00 2001
From: Zach Fogg <zach.fogg@gmail.com>
Date: Thu, 14 May 2015 17:51:29 -0700
Subject: [PATCH] Vertical centering via flexbox. You get horizontal centering
 for free.

---
 lib/components/Centered.js     | 52 ++++++----------------------------
 lib/components/DownloadPage.js |  8 +++---
 lib/components/DropZone.js     |  1 -
 lib/components/UploadPage.js   |  6 ++--
 4 files changed, 15 insertions(+), 52 deletions(-)

diff --git a/lib/components/Centered.js b/lib/components/Centered.js
index ee88844..69101e3 100644
--- a/lib/components/Centered.js
+++ b/lib/components/Centered.js
@@ -3,51 +3,15 @@ import React from 'react'
 export default class Centered extends React.Component {
 
   render() {
-    const h = this.props.hor
-    const v = this.props.ver
-
-    if (h && v) {
-
-      return <div style={{
-        display: 'table',
-        width: '100%',
-        height: '100%'}}>
-        <div style={{
-          display: 'table-cell',
-          verticalAlign: 'middle',
-          textAlign: 'center'}}>
-          <div style={{display: 'inline-block'}}>
-            {this.props.children}
-          </div>
-        </div>
-      </div>
-
-    } else if (h && !v) {
-
-      return <div style={{textAlign: 'center'}}>
-        <div style={{display: 'inline-block'}}>
-          {this.props.children}
-        </div>
+    return <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      height: '100%'}}>
+      <div>
+        {this.props.children}
       </div>
-
-    } else if (!h && v) {
-
-      return <div style={{
-        display: 'table',
-        width: '100%',
-        height: '100%'}}>
-        <div style={{
-          display: 'table-cell',
-          verticalAlign: 'middle'}}>
-          {this.props.children}
-        </div>
-      </div>
-
-    } else {
-
-      return this.props.children
-
-    }
+    </div>
   }
 
 }
diff --git a/lib/components/DownloadPage.js b/lib/components/DownloadPage.js
index 6da838b..7f31093 100644
--- a/lib/components/DownloadPage.js
+++ b/lib/components/DownloadPage.js
@@ -38,7 +38,7 @@ export default class DownloadPage extends React.Component {
   render() {
     switch (this.state.status) {
       case 'ready':
-        return <Centered ver>
+        return <Centered>
 
           <h1>FilePizza</h1>
           <Spinner dir="down"
@@ -51,7 +51,7 @@ export default class DownloadPage extends React.Component {
 
       case 'requesting':
       case 'downloading':
-        return <Centered ver>
+        return <Centered>
 
           <h1>FilePizza</h1>
           <Spinner dir="down" animated
@@ -63,7 +63,7 @@ export default class DownloadPage extends React.Component {
         </Centered>
 
       case 'cancelled':
-        return <Centered ver>
+        return <Centered>
 
           <h1>FilePizza</h1>
           <Spinner dir="down"
@@ -75,7 +75,7 @@ export default class DownloadPage extends React.Component {
         </Centered>
 
       case 'done':
-        return <Centered ver>
+        return <Centered>
 
           <h1>FilePizza</h1>
           <Spinner dir="down"
diff --git a/lib/components/DropZone.js b/lib/components/DropZone.js
index b5a3bf6..32cbb4e 100644
--- a/lib/components/DropZone.js
+++ b/lib/components/DropZone.js
@@ -1,5 +1,4 @@
 import React from 'react'
-import Centered from './Centered'
 
 export default class DropZone extends React.Component {
 
diff --git a/lib/components/UploadPage.js b/lib/components/UploadPage.js
index 83d4ce0..4541730 100644
--- a/lib/components/UploadPage.js
+++ b/lib/components/UploadPage.js
@@ -48,7 +48,7 @@ export default class UploadPage extends React.Component {
       case 'ready':
 
         return <DropZone onDrop={this.uploadFile.bind(this)}>
-          <Centered ver>
+          <Centered>
 
             <Spinner dir="up" />
 
@@ -65,7 +65,7 @@ export default class UploadPage extends React.Component {
         </DropZone>
 
       case 'processing':
-        return <Centered ver>
+        return <Centered>
 
           <Spinner dir="up" animated />
 
@@ -77,7 +77,7 @@ export default class UploadPage extends React.Component {
       case 'uploading':
         var keys = Object.keys(this.state.peerProgress)
         keys.reverse()
-        return <Centered ver>
+        return <Centered>
 
           <h1>FilePizza</h1>
           <Spinner dir="up" animated {...this.state.file} />