Main menu improvements

- Move most of the code into generic Menu and MenuItem components
  - Icons can go left or right of text
  - Make icons fixed width (fixes ragged left edge of labels)
  - Labels underlined on hover only

js/component/common.js

@@ -3,9 +3,10 @@
 var Icon = React.createClass({
   propTypes: {
     style: React.PropTypes.object,
+    fixed: React.PropTypes.boolean,
   },
   render: function() {
-    var className = 'icon ' + this.props.icon;
+    var className = 'icon ' + ('fixed' in this.props ? 'icon-fixed-width ' : '') + this.props.icon;
     return <span className={className} style={this.props.style}></span>
   }
 });
@@ -27,6 +28,53 @@ var Link = React.createClass({
   }
 });
 
+// Generic menu styles
+var menuStyle = {
+  border: '1px solid #aaa',
+  padding: '2px',
+  whiteSpace: 'nowrap',
+};
+
+var Menu = React.createClass({
+  render: function() {
+    return (
+      <div style={menuStyle}>
+        {this.props.children}
+      </div>
+    );
+  }
+});
+
+var menuItemStyle = {
+  display: 'block',
+};
+var MenuItem = React.createClass({
+  propTypes: {
+    href: React.PropTypes.string,
+    label: React.PropTypes.string,
+    icon: React.PropTypes.string,
+    onClick: React.PropTypes.function,
+  },
+  getDefaultProps: function() {
+    return {
+      iconPosition: 'left',
+    }
+  },
+  render: function() {
+    var icon = (this.props.icon ? <Icon icon={this.props.icon} fixed /> : null);
+
+    return (
+      <a style={menuItemStyle} href={this.props.href} label={this.props.label} title={this.props.label}
+         className="button-text no-underline">
+        {this.props.iconPosition == 'left' ? icon : null}
+        {this.props.label}
+        {this.props.iconPosition == 'left' ? null : icon}
+      </a>
+    );
+  }
+});
+
+
 var creditAmountStyle = {
   color: '#216C2A',
   fontWeight: 'bold',

js/page/home.js

@@ -234,21 +234,12 @@ var topBarStyle = {
 },
 balanceStyle = {
   'marginRight': '5px'
-},
-closeIconStyle = {
-  'color': '#ff5155'
 };
 
-
 var mainMenuStyle = {
   position: 'absolute',
-  whiteSpace: 'nowrap',
-  border: '1px solid #aaa',
-  padding: '2px',
   top: '26px',
   right: '0px',
-}, mainMenuItemStyle = {
-  display: 'block',
 };
 
 var MainMenu = React.createClass({
@@ -264,12 +255,13 @@ var MainMenu = React.createClass({
     var isLinux = /linux/i.test(navigator.userAgent); // @TODO: find a way to use getVersionInfo() here without messy state management
     return (
       <div style={mainMenuStyle} className={this.props.show ? '' : 'hidden'}>
-        <Link href='/?files' label="My Files" icon='icon-cloud-download' style={mainMenuItemStyle}/>
-        <Link href='/?settings' label="Settings" icon='icon-gear' style={mainMenuItemStyle}/>
-        <Link href='/?help' label="Help" icon='icon-question-circle' style={mainMenuItemStyle}/>
-        {isLinux ? <Link href="/?start" label="Exit LBRY" icon="icon-close"
-                         hidden={!this.props.show} style={mainMenuItemStyle} />
-                 : null}
+        <Menu>
+          <MenuItem href='/?files' label="My Files" icon='icon-cloud-download' />
+          <MenuItem href='/?settings' label="Settings" icon='icon-gear' />
+          <MenuItem href='/?help' label="Help" icon='icon-question-circle' />
+          {isLinux ? <MenuItem href="/?start" label="Exit LBRY" icon="icon-close" />
+                   : null}
+        </Menu>
       </div>
     );
   }