Delete button style

src/editor/Editor.jsx

@@ -1,6 +1,7 @@
 import React from 'preact/compat';
 import { useState, useRef, useEffect } from 'preact/hooks';
 import { getWidget, DEFAULT_WIDGETS } from './widgets';
+import { TrashIcon } from '../Icons';
 import setPosition from './setPosition';
 import i18n from '../i18n';
 
@@ -189,8 +190,11 @@ const Editor = props => {
         ) : (
           <div className="r6o-footer">
             { hasDelete && (
-              <button className="r6o-btn highlight left outline" onClick={onDelete}>
-                {i18n.t('Remove')}
+              <button 
+                className="r6o-btn left delete-annotation" 
+                title={i18n.t('Delete')}
+                onClick={onDelete}>
+                <TrashIcon width={15} />
               </button>
             )}
 

themes/default/editor/_editor.scss

@@ -54,12 +54,35 @@
   }
 
   .r6o-footer {
+    position:relative;
     text-align:right;
     padding:8px 0;
 
     .r6o-btn {
       margin-right:8px;
     }
+
+    .r6o-btn.delete-annotation {
+      position:absolute;
+      top:5px;
+      left:5px;
+      background-color:transparent;
+      border:none;
+      color:rgba($ocean, .8);
+      width:36px;
+      height:36px;
+      min-width:0;
+      border-radius: 100%;
+      padding:0;
+      display: flex;
+      justify-content:center;
+      align-items:center;
+    }
+
+    .r6o-btn.delete-annotation:hover {
+      color:$ocean;
+      background-color:$blueish-white-hi;
+    }
   }
 
 }