use webpack & add some styles

browser/main/Components/ExternalLink.js

@@ -0,0 +1,19 @@
+import React, { PropTypes } from 'react'
+import shell from 'shell'
+
+export default class ExternalLink extends React.Component {
+  handleClick (e) {
+    shell.openExternal(this.props.href)
+    e.preventDefault()
+  }
+
+  render () {
+    return (
+      <a onClick={e => this.handleClick(e)} {...this.props}/>
+    )
+  }
+}
+
+ExternalLink.propTypes = {
+  href: PropTypes.string
+}

browser/main/Components/ProfileImage.js

@@ -0,0 +1,24 @@
+import React, { PropTypes} from 'react'
+import md5 from 'md5'
+
+export default class ProfileImage extends React.Component {
+  render () {
+    let className = this.props.className == null ? 'ProfileImage' : 'ProfileImage ' + this.props.className
+    let email = this.props.email != null ? this.props.email : ''
+    let src = 'http://www.gravatar.com/avatar/' + md5(email.trim().toLowerCase()) + '?s=' + this.props.size
+
+    return (
+      <img
+        className={className}
+        width={this.props.size}
+        height={this.props.size}
+        src={src}/>
+    )
+  }
+}
+
+ProfileImage.propTypes = {
+  email: PropTypes.string,
+  size: PropTypes.string,
+  className: PropTypes.string
+}

browser/main/Components/ProfileImage.jsx

@@ -1,15 +0,0 @@
-var React = require('react')
-var md5 = require('md5')
-
-module.exports = React.createClass({
-  propTypes: {
-    email: React.PropTypes.string,
-    size: React.PropTypes.string,
-    className: React.PropTypes.string
-  },
-  render: function () {
-    return (
-      <img className={this.props.className} width={this.props.size} height={this.props.size} src={'http://www.gravatar.com/avatar/' + md5(this.props.email.trim().toLowerCase()) + '?s=' + this.props.size}/>
-    )
-  }
-})