Redesign with the header on the left side, fixes #5 (#7)

* Redesign the layout vertically

* Refactor: LogoLI component

* Header :animate from left and center vertically

* Fix right side styles

* Style improvements, add iOS and Android logos

Author: Malek Hakim

components/SubscribeForm.js

@@ -47,7 +47,7 @@ class SubscribeForm extends React.Component {
     return (
       <form
         style={{
-          margin: '10px 0 40px 0',
+          margin: '0 0 20px 0',
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',

components/book-li.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { Component, PropTypes } from 'react'
 import stylePropType from 'react-style-proptype'
 
 import Emoji from './emoji'
@@ -36,9 +36,9 @@ const BookLI = ({ style, children }) => {
 
 BookLI.propTypes = {
   style: stylePropType,
-  children: React.PropTypes.oneOfType([
-    React.PropTypes.element,
-    React.PropTypes.string,
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.string,
   ]).isRequired,
 }
 

components/emoji.js

@@ -1,8 +1,9 @@
 // https://developer.github.com/v3/emojis/
 // http://www.webpagefx.com/tools/emoji-cheat-sheet/
-import React from 'react'
+import { PropTypes } from 'react'
+import stylePropType from 'react-style-proptype'
 
-const Emoji = ({ name, size, ...props }) => {
+const Emoji = ({ name, size, style, ...props }) => {
   const src = `https://github.global.ssl.fastly.net/images/icons/emoji/${name}.png?v5`
 
   return (
@@ -12,6 +13,7 @@ const Emoji = ({ name, size, ...props }) => {
       style={{
         width: size,
         height: size,
+        ...style,
       }}
       className="emoji"
       {...props}
@@ -21,13 +23,15 @@ const Emoji = ({ name, size, ...props }) => {
 
 Emoji.defaultProps = {
   size: '1.5em',
+  style: {},
 }
 
 Emoji.propTypes = {
-  name: React.PropTypes.string.isRequired,
-  size: React.PropTypes.oneOfType([
-    React.PropTypes.string,
-    React.PropTypes.number,
+  name: PropTypes.string.isRequired,
+  style: stylePropType,
+  size: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
   ]),
 }
 

components/logo-li.js

@@ -0,0 +1,38 @@
+import { PropTypes } from 'react'
+
+const LogoLI = ({ name, children }) => (
+  <div
+    style={{
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      textAlign: 'center',
+      padding: 20,
+      borderRadius: 20,
+    }}
+    className="logo"
+    >
+    <div className="svg-wrapper">
+      {children}
+    </div>
+    <div
+      style={{
+        color: '#737373',
+        marginTop: 10,
+      }}
+      >
+      {name}
+    </div>
+  </div>
+)
+
+
+LogoLI.propTypes = {
+  name: PropTypes.string.isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.string,
+  ]).isRequired,
+}
+
+export default LogoLI

css/raw.js

@@ -50,16 +50,22 @@ a:hover {
   fill: ${white};
 }
 
-.logo-collection > .logo {
-  position: relative;
-  width: 150px;
-  height: 150px;
+#apple-logo * {
+  fill: #aaaaaa;
+}
+
+.logo-collection .svg-wrapper {
+  width: 100px;
+  height: 100px;
 }
-.logo-collection > .logo > svg {
+.logo-collection svg {
   width: 100%;
   height: 100%;
 }
-.logo-collection > .logo:hover > svg {
+.logo-collection > .logo:hover {
+  background-color: white;
+}
+.logo-collection > .logo:hover svg {
   animation: spin 3s linear infinite;
 }
 @keyframes spin {
@@ -112,6 +118,9 @@ a.-grey:hover {
   -webkit-transform: scale(1.3);
   transform: scale(1.3);
 }
+.hvr-grow-shadow:hover {
+  background-color: white;
+}
 
 .hvr-float-shadow {
   display: inline-block;