Merge branch 'dev'

Author: Parth Shah

src/assets/images/tech-32px-outline-work-project.svg

@@ -1,10 +1,10 @@
 import React, {PropTypes} from 'react'
 import './ColorSelector.scss'
-import cn from 'classnames'
 import { SketchPicker } from 'react-color'
 import _ from 'lodash'
 import { HOC as hoc } from 'formsy-react'
 import {PROJECT_MAX_COLORS} from '../../config/constants'
+import { Icons } from 'appirio-tech-react-components'
 
 class ColorSelector extends React.Component {
 
@@ -40,14 +40,18 @@ class ColorSelector extends React.Component {
 
     return (
       <div className="colorSelector">
-        {colors.map((color) =>
+        {value.map((color) =>
           <a
             key={color}
             href="javascript:"
             onClick={() => onColorToggle(color)}
-            className={cn('color-card', {selected: value.indexOf(color) !== -1})}
+            className="color-card"
             style={{backgroundColor: color}}
-          />
+          >
+            <span className="remove-color">
+              <Icons.CloseIcon />
+            </span>
+          </a>
         )}
 
         {colors.length < PROJECT_MAX_COLORS && 

src/components/ColorSelector/ColorSelector.jsx

@@ -9,8 +9,21 @@
     border: 1px solid $tc-gray-60;
     border-radius: 4px;
     margin: 0 15px;
-    &.selected {
-      border: 4px solid $tc-gray-60;
+    position: relative;
+    .remove-color {
+      background-color: $tc-gray-60;
+      opacity: 0.7;
+      display: none;
+      position: absolute;
+      width: 39px;
+      height: 38px;
+    }
+    &:hover {
+      .remove-color {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
     }
   }
   .color-card-add{

src/components/ColorSelector/ColorSelector.scss

@@ -2,7 +2,7 @@ import React, {PropTypes} from 'react'
 
 const DeleteLinkModal = ({ onCancel, onConfirm}) => {
   return (
-    <div className="modal">
+    <div className="modal delete-link-modal">
       <div className="modal-title danger">
         You're about to delete a link
       </div>

src/components/LinksMenu/DeleteLinkModal.jsx

@@ -7,11 +7,12 @@ import uncontrollable from 'uncontrollable'
 import cn from 'classnames'
 
 const LinksMenu = ({ links, limit, canDelete, isAddingNewLink, onAddingNewLink, onAddNewLink, onChangeLimit, linkToDelete, onDeleteIntent, onDelete }) => (
-  <Panel className={cn({'modal-active': isAddingNewLink})}>
+  <Panel className={cn({'modal-active': (isAddingNewLink || linkToDelete >= 0) })}>
     {!isAddingNewLink && <Panel.AddBtn onClick={() => onAddingNewLink(true)}>Create New Link</Panel.AddBtn>}
     {!isAddingNewLink && <Panel.Title>
       Links ({links.length})
     </Panel.Title>}
+    { (isAddingNewLink || linkToDelete >= 0) && <div className="modal-overlay" />}
     {isAddingNewLink &&
       <AddLink
         onAdd={(link) => {

src/components/LinksMenu/LinksMenu.jsx

@@ -33,4 +33,8 @@
     line-height: $base-unit*6;
     padding-left: $base-unit*4;
   }
+
+  .delete-link-modal {
+    margin-left: -4*$base-unit;
+  }
 }

src/components/LinksMenu/LinksMenu.scss

@@ -3,7 +3,7 @@ import React from 'react'
 require('./LoadingIndicator.scss')
 
 const LoadingIndicator = () => {
-  const backgroundImageUrl = { backgroundImage: `url(${require('./ripple.svg')})` }
+  const backgroundImageUrl = { backgroundImage: `url(${require('./loader.gif')})` }
 
   return (
     <div

src/components/LoadingIndicator/LoadingIndicator.jsx

@@ -1,7 +1,6 @@
 .loading-indicator {
-  height: 100px;
-  width: 100px;
-  margin: 150px auto;
-  background-repeat: no-repeat;
-  background-position: center;
+  height: 80%;
+  width: 100%;
+  background: 50% 50% no-repeat;
+  background-size: 70px 70px;
 }