From ec9caa85a8ce92d82e2b474cfadddbc2b34dd7da Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Tue, 23 May 2017 02:35:04 -0700
Subject: [PATCH] Simplify confirm delete interaction

---
 .../components/TemplateVariableRow.js         |  2 +-
 .../shared/components/DeleteConfirmButtons.js | 21 +++++++++++++++----
 .../template-variables-manager.scss           | 13 ------------
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/ui/src/dashboards/components/TemplateVariableRow.js b/ui/src/dashboards/components/TemplateVariableRow.js
index 935f15fff2..ded811fbd5 100644
--- a/ui/src/dashboards/components/TemplateVariableRow.js
+++ b/ui/src/dashboards/components/TemplateVariableRow.js
@@ -84,7 +84,7 @@ const RowButtons = ({
     <div className="tvm-actions">
       <DeleteConfirmButtons onDelete={() => onDelete(id)} />
       <button
-        className="btn btn-sm btn-info btn-edit"
+        className="btn btn-sm btn-info btn-edit btn-square"
         type="button"
         onClick={e => {
           // prevent subsequent 'onSubmit' that is caused by an unknown source,
diff --git a/ui/src/shared/components/DeleteConfirmButtons.js b/ui/src/shared/components/DeleteConfirmButtons.js
index 94782d5313..3c719443b4 100644
--- a/ui/src/shared/components/DeleteConfirmButtons.js
+++ b/ui/src/shared/components/DeleteConfirmButtons.js
@@ -1,11 +1,14 @@
 import React, {PropTypes, Component} from 'react'
+import classnames from 'classnames'
 
 import OnClickOutside from 'shared/components/OnClickOutside'
 import ConfirmButtons from 'shared/components/ConfirmButtons'
 
-const DeleteButton = ({onClickDelete}) => (
+const DeleteButton = ({onClickDelete, buttonSize}) => (
   <button
-    className="btn btn-xs btn-danger admin-table--hidden"
+    className={classnames('btn btn-danger admin-table--hidden', {
+      [buttonSize]: buttonSize,
+    })}
     onClick={onClickDelete}
   >
     Delete
@@ -35,7 +38,7 @@ class DeleteConfirmButtons extends Component {
   }
 
   render() {
-    const {onDelete, item} = this.props
+    const {onDelete, item, buttonSize} = this.props
     const {isConfirming} = this.state
 
     return isConfirming
@@ -43,8 +46,12 @@ class DeleteConfirmButtons extends Component {
           onConfirm={onDelete}
           item={item}
           onCancel={this.handleCancel}
+          buttonSize={buttonSize}
+        />
+      : <DeleteButton
+          onClickDelete={this.handleClickDelete}
+          buttonSize={buttonSize}
         />
-      : <DeleteButton onClickDelete={this.handleClickDelete} />
   }
 }
 
@@ -52,11 +59,17 @@ const {func, oneOfType, shape, string} = PropTypes
 
 DeleteButton.propTypes = {
   onClickDelete: func.isRequired,
+  buttonSize: string,
 }
 
 DeleteConfirmButtons.propTypes = {
   item: oneOfType([(string, shape())]),
   onDelete: func.isRequired,
+  buttonSize: string,
+}
+
+DeleteConfirmButtons.defaultProps = {
+  buttonSize: 'btn-sm',
 }
 
 export default OnClickOutside(DeleteConfirmButtons)
diff --git a/ui/src/style/components/template-variables-manager.scss b/ui/src/style/components/template-variables-manager.scss
index 03988ff695..622e27c584 100644
--- a/ui/src/style/components/template-variables-manager.scss
+++ b/ui/src/style/components/template-variables-manager.scss
@@ -191,11 +191,6 @@ $tvmp-table-gutter: 8px;
 
   .btn-edit {
     order: 1;
-    width: 30px;
-    text-align: center;
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-    > span.icon {margin: 0 !important;}
   }
 
   > .btn {margin-left: $tvmp-table-gutter;}
@@ -204,17 +199,9 @@ $tvmp-table-gutter: 8px;
   /* Janky, but doing this quick & dirty for now  */
   .btn-danger {
     order: 2;
-    height: 30px !important;
-    line-height: 30px !important;
-    padding: 0 9px !important;
-    font-size: 13px;
   }
   .confirm-buttons > .btn {
-    height: 30px !important;
-    width: 30px !important;
     margin-left: $tvmp-table-gutter !important;
-    font-size: 13px;
-    padding: 0 !important;
   }
   /* Hide the edit button when confirming a delete */
   .confirm-buttons + .btn-edit {