From 289b2474c8a2fce2f8f1f60cb9900c2556defeb1 Mon Sep 17 00:00:00 2001
From: Luke Morris <lukevmorris@gmail.com>
Date: Wed, 31 Jan 2018 17:39:05 -0800
Subject: [PATCH] Add confirm dialog to removing Organization Tag

---
 ui/src/shared/components/Tags.js            | 11 ++++++++++-
 ui/src/style/components/confirm-button.scss | 15 ++++++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/ui/src/shared/components/Tags.js b/ui/src/shared/components/Tags.js
index b3e01bb75..7a0897ed4 100644
--- a/ui/src/shared/components/Tags.js
+++ b/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>
     )
   }
diff --git a/ui/src/style/components/confirm-button.scss b/ui/src/style/components/confirm-button.scss
index fd971d7e7..042648f3f 100644
--- a/ui/src/style/components/confirm-button.scss
+++ b/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;
+  }
+}
\ No newline at end of file