import React, { PropTypes } from 'react';

import { line, heading } from 'scaffold/typography';

function style(theme) {
  return {
    bar: {
      background: theme.sidebarColor,
      padding: `${theme.sizeL}px ${theme.sizeXxl}px`
    },
    h1: {
      ...heading(theme, {level: 2}),
      color: theme.sidebarColorHeading,
      fontWeight: 600,
      margin: 0,
      textTransform: 'uppercase'
    },
    img: {
      ...line(theme, {level: 2}),
      display: 'inline-block',
      float: 'left',
      height: '1em',
      margin: `0 ${theme.sizeS}px 0 0`,
      width: '1em'
    }
  };
}

class AppBar extends React.Component {
  static propTypes = {
    title: PropTypes.string.isRequired,
    theme: PropTypes.object.isRequired,
    logoSrc: PropTypes.string
  }
  render() {
    const { title } = this.props;
    let currentStyle = style(this.props.theme);
    return (
      <div style={currentStyle.bar}>
        <h1 style={currentStyle.h1}>{title}{this.props.logoSrc && <img style={currentStyle.img} src={this.props.logoSrc} />}</h1>
      </div>
    );
  }
}

export default AppBar;

@@ -422,147 +422,31 @@
     
-...line(theme, %7Blevel: 2%7D),%0A      display: 'inline-block',%0A      float: 'left',%0A      height: '1em',%0A      margin: %600 $%7Btheme.sizeS%7Dpx 0 0%60
+display: 'inline-block'
 ,%0A  
@@ -458,18 +458,19 @@
 idth: '1
-em
+00%25
 '%0A    %7D%0A
@@ -653,16 +653,17 @@
 ing%0A  %7D%0A
+%0A
   render
@@ -684,16 +684,25 @@
  %7B title
+, logoSrc
  %7D = thi
@@ -849,34 +849,16 @@
 1%7D%3E%7B
-title%7D%7Bthis.props.
 logoSrc 
 && %3C
@@ -857,10 +857,9 @@
 Src 
-&&
+?
  %3Cim
@@ -890,27 +890,16 @@
 g%7D src=%7B
-this.props.
 logoSrc%7D
@@ -901,16 +901,39 @@
 oSrc%7D /%3E
+ : (title ? title : %22%22)
 %7D%3C/h1%3E%0A 

Change the order of importance of the logo and the title in the AppBar component