AS#104536643797659, Update QuickLinks component to use hyperlinks with real URLs

-- Used hyperlinks
-- Used StandardListItem's icon to show icons instead of using separate div
-- Added real URLs with dynamic domain

Author: vikasrohit

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>
 )