Feature/misc fixes

components/Navbar/Navbar.jsx

@@ -1,35 +1,33 @@
 require('./Navbar.scss')
 
 import MenuBar from '../MenuBar/MenuBar'
-import React, { Component } from 'react'
+import React from 'react'
 import SearchBar from '../SearchBar/SearchBar'
 import QuickLinks from '../QuickLinks/QuickLinks'
 import UserDropdownMenu from '../UserDropdownMenu/UserDropdownMenu'
 
 const primaryNavigationItems = [
-  {img: require('./nav-community.svg'), text: 'Community', link: 'javascript:;'},
-  {img: require('./nav-compete.svg'), text: 'Compete', link: 'javascript:;', selected: true},
-  {img: require('./nav-learn.svg'), text: 'Learn', link: 'javascript:;'}
+  {img: require('./nav-community.svg'), text: 'Community', link: '/community'},
+  {img: require('./nav-compete.svg'), text: 'Compete', link: '/compete', selected: true},
+  {img: require('./nav-learn.svg'), text: 'Learn', link: '/learn'}
 ]
 
-class Navbar extends Component {
-  render() {
-    return (
-      <div className="Navbar flex middle space-between">
-        <div className="topcoder-logo"></div>
-        <div className="search-bar-wrap">
-          <div className="icon-placeholder"></div>
-          <SearchBar />
-        </div>
-        <MenuBar items={primaryNavigationItems} orientation="horizontal" />
-        <div className="collapse-group">
-          <div className="icon-placeholder"></div>
-          <div className="quick-links-wrap"><QuickLinks /></div>
-          <UserDropdownMenu username="vic-tor" />
-        </div>
+const Navbar = ({username, domain}) => {
+  return (
+    <div className="Navbar flex middle space-between">
+      <div className="topcoder-logo"></div>
+      <div className="search-bar-wrap">
+        <div className="icon-placeholder"></div>
+        <SearchBar />
       </div>
-    )
-  }
+      <MenuBar items={primaryNavigationItems} orientation="horizontal" />
+      <div className="collapse-group">
+        <div className="icon-placeholder"></div>
+        <div className="quick-links-wrap"><QuickLinks domain={domain} /></div>
+        <UserDropdownMenu username={username} />
+      </div>
+    </div>
+  )
 }
 
 export default Navbar

components/Navbar/NavbarExample.jsx

@@ -2,7 +2,7 @@ import Navbar from './Navbar'
 import React from 'react'
 
 const NavbarExample = () => (
-	<Navbar />
+	<Navbar username="vic-tor" />
 )
 
 module.exports = NavbarExample

components/QuickLinks/QuickLinks.jsx

@@ -1,34 +1,32 @@
 require('./QuickLinks.scss')
 
-import React, { Component } from 'react'
+import React from 'react'
 import Dropdown from '../Dropdown/Dropdown'
 
 import StandardListItem  from '../StandardListItem/StandardListItem'
 
-class QuickLinks extends Component {
-  render() {
-    return (
-      <div className="QuickLinks">
-        <Dropdown pointerShadow>
-          <img src={ require('./grid.svg') } className="dropdown-menu-header" />
-          <ul className="dropdown-menu-list">
-            <li className="dropdown-menu-list-item">
-              <div className="icon-placeholder"></div>
-              <StandardListItem labelText="Review" showIcon={false} />
-            </li>
-            <li className="dropdown-menu-list-item">
-              <div className="icon-placeholder"></div>
-              <StandardListItem labelText="Web Arena" showIcon={false} />
-            </li>
-            <li className="dropdown-menu-list-item">
-              <div className="icon-placeholder"></div>
-              <StandardListItem labelText="Applet Arena" showIcon={false} />
-            </li>
-          </ul>
-        </Dropdown>
-      </div>
-    )
-  }
+const QuickLinks = ({domain}) => {
+  const orLink = '//software.' + domain
+  const arenaLink = '//arena.' + domain
+  const arenaAppletLink = '//' + domain + '/contest/arena/ContestAppletProd.jnlp'
+  return (
+    <div className="QuickLinks">
+      <Dropdown pointerShadow>
+        <img src={ require('./grid.svg') } className="dropdown-menu-header" />
+        <ul className="dropdown-menu-list">
+          <li className="dropdown-menu-list-item">
+            <StandardListItem labelText="Review" imgSrc={require('./placeholder.svg')} linkUrl={orLink} linkTarget="_blank" />
+          </li>
+          <li className="dropdown-menu-list-item">
+            <StandardListItem labelText="Web Arena" imgSrc={require('./placeholder.svg')} linkUrl={arenaLink} linkTarget="_blank" />
+          </li>
+          <li className="dropdown-menu-list-item">
+            <StandardListItem labelText="Applet Arena" imgSrc={require('./placeholder.svg')} linkUrl={arenaAppletLink} linkTarget="_blank" />
+          </li>
+        </ul>
+      </Dropdown>
+    </div>
+  )
 }
 
 export default QuickLinks

components/QuickLinks/QuickLinks.scss

@@ -1,6 +1,6 @@
 @import "topcoder/tc-includes";
 
-$logo-placeholder-bg: #B47DD6;
+$link-text-hover-color: #7A7F83;
 
 .QuickLinks {
   position: relative;
@@ -22,22 +22,22 @@ $logo-placeholder-bg: #B47DD6;
 
       .dropdown-menu-list-item {
         display: inline-block;
-        cursor: pointer;
-
-        .icon-placeholder {
-          width: 30px;
-          height: 30px;
-          background-color: $logo-placeholder-bg;
-          margin: 0 auto;
-          margin-bottom: 6px;
-        }      
+        cursor: pointer;      
 
         .StandardListItem {
           padding: 0;
 
+          &:active,
+          &:hover {
+            .label {
+              color: $link-text-hover-color;
+            }
+          }
+
           .label {
             font-size: 12px;
             line-height: 26px;
+            color: $accent-gray-dark;
           }
         }
       }

components/QuickLinks/QuickLinksExample.jsx

@@ -5,7 +5,7 @@ import QuickLinks from './QuickLinks'
 
 const QuickLinksExample = () => (
 	<div className="example-wrap">
-		<QuickLinks />
+		<QuickLinks domain="topcoder-dev.com" />
 	</div>
 )
 

components/StandardListItem/StandardListItem.jsx

@@ -1,4 +1,4 @@
-import {PropTypes, Component } from 'react'
+import {PropTypes } from 'react'
 import React from 'react'
 
 require('./StandardListItemStyles.scss')
@@ -8,39 +8,45 @@ require('./StandardListItemStyles.scss')
  // labelText: The text for the label
  // placeIcon: defines the position of the icon. Either: top | left | right.  Default to top
 
-class StandardListItem extends Component {
-  constructor(props) {
-    super(props)
-  }
-  render() {
-    const classes = 'StandardListItem transition ' + this.props.placeIcon
-    let label
-    let icon
+const StandardListItem = ({showIcon, showLabel, imgSrc, labelText, linkUrl, linkTarget='_self', placeIcon='top'}) => {
+  const classes = 'StandardListItem transition ' + placeIcon
+  let label
+  let icon
+  let item
 
-    if (this.props.showLabel){
-      label = <p className="label">{this.props.labelText}</p>
-    }
+  if (showLabel) {
+    label = <p className="label">{labelText}</p>
+  }
 
-    if (this.props.showIcon){
-      icon = <img className="icon" src={this.props.imgSrc}/>
-    }
+  if (showIcon) {
+    icon = <img className="icon" src={imgSrc}/>
+  }
 
-    return (<div className={classes}>{label}{icon}</div>)
+  if (linkUrl) {
+    item =
+        <a className={classes} href={linkUrl} target={linkTarget}>{label}{icon}</a>
+  } else {
+    item = <div className={classes}>{label}{icon}</div>
   }
+
+  return item
 }
 
 StandardListItem.propTypes = {
-  showIcon : PropTypes.bool,
-  showLabel : PropTypes.bool,
-  imgSrc : PropTypes.string,
-  labelText : PropTypes.node,
-  placeIcon : PropTypes.string
+  showIcon   : PropTypes.bool,
+  showLabel  : PropTypes.bool,
+  imgSrc     : PropTypes.string,
+  labelText  : PropTypes.node,
+  linkUrl    : PropTypes.string,
+  linkTarget : PropTypes.string,
+  placeIcon  : PropTypes.string
 }
 
 StandardListItem.defaultProps = {
-  showIcon: true,
-  showLabel: true,
-  placeIcon: 'top'
+  showIcon    : true,
+  showLabel   : true,
+  linkTarget  : '_self',
+  placeIcon   : 'top'
 }
 
 export default StandardListItem

components/StandardListItem/StandardListItemExamples.jsx

@@ -16,14 +16,26 @@ const StandardListItemExamples = () => (
 
     <h1>Icon on the Right</h1>
 
-    <StandardListItem imgSrc="../components/Avatar/place-holder.svg" labelText="This is a test" placeIcon="right"  />
+    <StandardListItem imgSrc="../components/Avatar/place-holder.svg" labelText="This is a test" placeIcon="right" />
 
     <h1>Icon Hidden</h1>
     <StandardListItem labelText="This is a test" showIcon={false}  />
 
     <h1>Label Hidden</h1>
     <StandardListItem imgSrc="../components/Avatar/place-holder.svg" showLabel={false}  />
 
+    <h1>With Link In Self</h1>
+    <StandardListItem imgSrc="../components/Avatar/place-holder.svg" labelText="Click Me" linkUrl="http://google.com" />
+
+    <h1>With Link In New Tab</h1>
+    <StandardListItem imgSrc="../components/Avatar/place-holder.svg" labelText="Click Me" linkUrl="http://google.com" linkTarget="_blank" />
+
+    <h1>Link: Icon on the Right</h1>
+    <StandardListItem imgSrc="../components/Avatar/place-holder.svg" labelText="This is a test" placeIcon="right" linkUrl="http://google.com"  />
+
+    <h1>Link: Icon on the Left</h1>
+    <StandardListItem imgSrc="../components/Avatar/place-holder.svg" labelText="This is a test" placeIcon="left" linkUrl="http://google.com"  />
+
   </div>
 )
 

components/UserDropdownMenu/UserDropdownMenu.jsx

@@ -1,6 +1,6 @@
 require('./UserDropdownMenu.scss')
 
-import React, { Component } from 'react'
+import React from 'react'
 import Dropdown from '../Dropdown/Dropdown'
 
 const userDropdownLists = [
@@ -18,45 +18,38 @@ const userDropdownLists = [
   ]
 ]
 
-class UserDropdownMenu extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = { isLoggedIn: true }
-  }
-
-  render() {
-    const publicDOM = <div><button>Log in</button><button>Join</button></div>
-
-    const loggedInDOM = (
-      <div className="UserDropdownMenu">
-        <Dropdown pointerShadow>
-          <div className="dropdown-menu-header">
-            <span className="user-image"></span>
-            <span className="username">{ this.props.username }</span>
-            <img className="dropdown-arrow" src={ require('./arrow-small-down.svg') } />
-          </div>
+const UserDropdownMenu = ({username}) => {
+
+  const publicDOM = <div><button>Log in</button><button>Join</button></div>
 
-          <div className="dropdown-menu-list">
-            {
-              userDropdownLists.map((list, i) => {
-                return ( <ul key={ i }>
-                  {
-                    list.map((link, j) => {
-                      return <li className="user-menu-item transition" key={ j }><a href={ link.link }>{ link.label }</a></li>
-                    })
-                  }
-                </ul> )
-              })
-            }
-
-          </div>
-        </Dropdown>
-      </div>
-    )
-
-    return this.state.isLoggedIn ? loggedInDOM : publicDOM
-  }
+  const loggedInDOM = (
+    <div className="UserDropdownMenu">
+      <Dropdown pointerShadow>
+        <div className="dropdown-menu-header">
+          <span className="user-image"></span>
+          <span className="username">{ username }</span>
+          <img className="dropdown-arrow" src={ require('./arrow-small-down.svg') } />
+        </div>
+
+        <div className="dropdown-menu-list">
+          {
+            userDropdownLists.map((list, i) => {
+              return ( <ul key={ i }>
+                {
+                  list.map((link, j) => {
+                    return <li className="user-menu-item transition" key={ j }><a href={ link.link }>{ link.label }</a></li>
+                  })
+                }
+              </ul> )
+            })
+          }
+
+        </div>
+      </Dropdown>
+    </div>
+  )
+
+  return username ? loggedInDOM : publicDOM
 }
 
 export default UserDropdownMenu

components/UserDropdownMenu/UserDropdownMenuExamples.jsx

@@ -2,7 +2,14 @@ import React from 'react'
 import UserDropdownMenu from './UserDropdownMenu'
 
 const UserDropdownMenuExamples = () => {
-  return <UserDropdownMenu username="vic-tor" />
+  return (
+    <div>
+      <p>Logged In state</p>
+      <UserDropdownMenu username="vic-tor" />
+      <p>Logged Out state</p>
+      <UserDropdownMenu />
+    </div>
+  )
 }
 
 module.exports = UserDropdownMenuExamples