Feature/connectv2 with dev

.eslintignore

@@ -0,0 +1 @@
+dist/

components/Avatar/Avatar.jsx

@@ -1,14 +1,14 @@
 import React from 'react'
+import { default as ReactAvatar } from 'react-avatar'
 
 require('./Avatar.scss')
 
-const Avatar = ({ avatarUrl }) => {
-
-  const src = avatarUrl || require('./place-holder.svg')
-
+const Avatar = ({ avatarUrl, userName, size }) => {
+  const s = size || 35
+  const src = !avatarUrl && !userName ? require('./place-holder.svg') : avatarUrl
   return (
     <div className="Avatar">
-      <img src={src}/>
+      <ReactAvatar src={ src } name={ userName } size={ s }/>
     </div>
   )
 }

components/Avatar/Avatar.scss

@@ -1,14 +1,17 @@
 $avatar-diameter: 35px;
 
-.Avatar {
-  width           : $avatar-diameter;
-  height          : $avatar-diameter;
-  border-radius   : 50%;
-  background-color: #eee;
-  overflow        : hidden;
-
-  img {
-    width : 100%;
-    height: 100%;
+:global {
+  .Avatar {
+    width           : $avatar-diameter;
+    height          : $avatar-diameter;
+    border-radius   : 50%;
+    background-color: #eee;
+    overflow        : hidden;
+
+    img {
+      width : 100%;
+      height: 100%;
+    }
   }
 }
+

components/Carousel/Carousel.jsx

@@ -4,8 +4,8 @@ import classNames from 'classnames'
 import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
 
-import LeftArrowIcon from '../Icons/LeftArrowIcon'
-import RightArrowIcon from '../Icons/RightArrowIcon'
+import IconArrowMinimalLeft from '../Icons/IconArrowMinimalLeft'
+import IconArrowMinimalRight from '../Icons/IconArrowMinimalRight'
 
 export default class Carousel extends Component {
   componentWillMount() {
@@ -107,13 +107,13 @@ export default class Carousel extends Component {
     return (
       <div className="Carousel">
         <div className="page-down" onClick={this.handlePageDown}>
-          <LeftArrowIcon fill="#FFFFFF" />
+          <IconArrowMinimalLeft fill="#FFFFFF" />
         </div>
         <div className="visible-area">
           { this.props.children.map(carouselItem) }
         </div>
         <div className="page-up" onClick={this.handlePageUp}>
-          <RightArrowIcon fill="#FFFFFF" />
+          <IconArrowMinimalRight fill="#FFFFFF" />
         </div>
       </div>
     )

components/Carousel/Carousel.scss

@@ -1,45 +1,48 @@
-@import 'topcoder/tc-includes';
+@import '~tc-ui/src/styles/tc-includes';
 
 $pager-bg-color: #737380;
 
-.Carousel {
-  display: flex;
-  flex-direction: row;
-
-  .page-down {
-    width: 20px;
-    margin-right: 15px;
-    background-color: $pager-bg-color;
+:global {
+  .Carousel {
     display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-
-    &.hidden {
-      display: none;
+    flex-direction: row;
+
+    .page-down {
+      width: 20px;
+      margin-right: 15px;
+      background-color: $pager-bg-color;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+
+      &.hidden {
+        display: none;
+      }
     }
-  }
-
-  .page-up {
-    width: 20px;
-    background-color: $pager-bg-color;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-
-    &.hidden {
-      display: none;
+
+    .page-up {
+      width: 20px;
+      background-color: $pager-bg-color;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+
+      &.hidden {
+        display: none;
+      }
     }
-  }
-
-  .visible-area {
-    display: flex;
-    flex-direction: row;
-    overflow: hidden;
-
-    .carousel-item:not(:first-child) {
-      margin-left: 30px;
+
+    .visible-area {
+      display: flex;
+      flex-direction: row;
+      overflow: hidden;
+
+      .carousel-item:not(:first-child) {
+        margin-left: 30px;
+      }
     }
   }
-}
+}
+

components/Carousel/CarouselExamples.scss

@@ -1,17 +1,20 @@
-@import 'topcoder/tc-includes';
+@import '~tc-ui/src/styles/tc-includes';
 
-.Carousel {
-  .StandardListItem {
-    padding: 0px;
+:global {
+  .Carousel {
+    .StandardListItem {
+      padding: 0px;
+    }
   }
-}
-
-.CarouselExamples {
-  > p {
-    border: 1px solid $accent-gray;
-    margin: 20px 0px;
+
+  .CarouselExamples {
+    > p {
+      border: 1px solid $tc-gray-40;
+      margin: 20px 0px;
+    }
+    .limited-width {
+      width: 200px;
+    }
   }
-  .limited-width {
-    width: 200px;
-  }
-}
+}
+

components/Checkbox/Checkbox.scss

@@ -1,15 +1,16 @@
-@import "work/work-includes";
 
-.Checkbox {
-  label {
-    margin-left: 10px;
+:global {
+  .Checkbox {
+    label {
+      margin-left: 10px;
+    }
+
+    .icon, button {
+      width   : 24px;
+      height  : 24px;
+      /* fixing jumping issues on webkit */
+      outline : none;
+      overflow: hidden;
+    }
   }
-
-  .icon, button {
-    width   : 24px;
-    height  : 24px;
-    /* fixing jumping issues on webkit */
-    outline : none;
-    overflow: hidden;
-  }
-}
+}