From f8d857546f6055a5ee4be60f2d5dd7fd3fd2d11c Mon Sep 17 00:00:00 2001
From: Rainer Simon <aboutgeo@gmail.com>
Date: Sat, 20 Mar 2021 15:39:34 +0100
Subject: [PATCH] Delete button style

---
 src/editor/Editor.jsx              |  8 ++++++--
 themes/default/editor/_editor.scss | 23 +++++++++++++++++++++++
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/editor/Editor.jsx b/src/editor/Editor.jsx
index 228cafb..449ac40 100644
--- a/src/editor/Editor.jsx
+++ b/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>
             )}
 
diff --git a/themes/default/editor/_editor.scss b/themes/default/editor/_editor.scss
index 8bcfbcf..1ed8cd7 100644
--- a/themes/default/editor/_editor.scss
+++ b/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;
+    }
   }
 
 }