WIP Polish annotation tooltip delete

Trying to make this thing look nice and not be obscured by the page
header

ui/src/shared/annotations/styles.js

@@ -119,12 +119,12 @@ export const tooltipStyle = annotationState => {
 
   return {
     position: 'absolute',
-    bottom: 'calc(100% + 8px)',
+    bottom: 'calc(100% + 6px)',
     left: '50%',
     transform: 'translateX(-50%)',
     backgroundColor: NEUTRALS[0],
     zIndex: '3',
-    padding: isDragging ? '6px 12px' : '12px 12px 6px 12px',
+    padding: '6px 12px',
     borderRadius: '4px',
     whiteSpace: 'nowrap',
     userSelect: 'none',

ui/src/shared/components/AnnotationInput.js

@@ -67,7 +67,7 @@ class AnnotationInput extends Component {
           ? <form onSubmit={this.handleFormSubmit} style={tooltipFormStyle}>
               <input
                 type="text"
-                className="form-control input-sm"
+                className="form-control input-xs"
                 style={tooltipInput}
                 value={value}
                 onChange={this.handleChange}
@@ -76,7 +76,7 @@ class AnnotationInput extends Component {
                 onFocus={this.handleFocus}
               />
               <button
-                className="btn btn-square btn-sm btn-default"
+                className="btn btn-square btn-xs btn-default"
                 style={tooltipInputButton}
                 type="button"
                 onClick={this.handleClickOutside}
@@ -84,7 +84,7 @@ class AnnotationInput extends Component {
                 <span className="icon remove" />
               </button>
               <button
-                className="btn btn-square btn-sm btn-success"
+                className="btn btn-square btn-xs btn-success"
                 style={tooltipInputButton}
                 type="submit"
               >

ui/src/shared/components/AnnotationTooltip.js

@@ -55,10 +55,10 @@ class AnnotationTooltip extends Component {
           : <div style={tooltipItemsStyle}>
               {isEditing &&
                 <button
-                  className="btn btn-sm btn-danger btn-square"
+                  className="annotation-tooltip--delete"
                   onClick={this.props.onDelete}
                 >
-                  <span className="icon trash" />
+                  <span className="icon remove" />
                 </button>}
               {isEditing
                 ? <AnnotationInput

ui/src/style/unsorted.scss

@@ -566,3 +566,43 @@ div.dropdown.dropdown-stretch > button.dropdown-toggle {
   left: -8px;
   z-index: -1;
 }
+.annotation-tooltip--delete {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border-radius: 50%;
+  color: $g20-white;
+  background-color: $c-curacao;
+  transform: translate(50%,-50%);
+  transition:
+    background-color 0.25s ease;
+  z-index: 3;
+  outline: none;
+  border: none;
+
+  &:hover {
+    cursor: pointer;
+    background-color: $c-dreamsicle;
+  }
+
+  > span.icon {
+    position: absolute;
+    top: calc(50% - 1px);
+    left: calc(50% - 1px);
+    font-size: 12px;
+    transform: translate(-50%,-50%);
+  }
+}
+.annotation-tooltip-input .input-cte {
+  height: 22px;
+  font-size: 12px;
+  line-height: 18px;
+  padding: 0 7px;
+
+  > span.icon {
+    right: 9px;
+  }
+}