Add confirm dialog to removing Organization Tag

ui/src/shared/components/Tags.js

@@ -1,5 +1,6 @@
 import React, {Component, PropTypes} from 'react'
 import TagsAddButton from 'src/shared/components/TagsAddButton'
+import ConfirmButton from 'src/shared/components/ConfirmButton'
 
 const Tags = ({tags, onDeleteTag, addMenuItems, addMenuChoose}) =>
   <div className="input-tag-list">
@@ -29,7 +30,15 @@ class Tag extends Component {
         <span>
           {item.text || item.name || item}
         </span>
-        <span className="icon remove" onClick={this.handleClickDelete(item)} />
+        {
+          <ConfirmButton
+            icon="remove"
+            size="btn-xs"
+            customClass="btn-xxs"
+            confirmText="Remove user from organization?"
+            confirmAction={this.handleClickDelete(item)}
+          />
+        }
       </span>
     )
   }

ui/src/style/components/confirm-button.scss

@@ -17,7 +17,7 @@
 }
 .confirm-button--confirmation {
   white-space: pre;
-  max-width: 200px;
+  max-width: 210px;
   border-radius: 3px;
   background-color: $c-curacao;
   opacity: 0;
@@ -58,3 +58,16 @@
     opacity: 1;
   }
 }
+.confirm-button.btn.btn-default.btn-xs.btn-xxs {
+  padding-right: 0;
+  margin-top: -1px;
+
+  &:hover {
+    background-color: #383846;
+    color: #c6cad3;
+  }
+
+  span.icon.remove {
+    margin-right: 0;
+  }
+}