Simplify confirm delete interaction

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,

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)

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 {