delete button style changes

2 files changed, 40 insertions, 19 deletions

diff --git a/src/client/views/nodes/TaskBox.scss b/src/client/views/nodes/TaskBox.scss
index e129e75d1..beee58697 100644
--- a/src/client/views/nodes/TaskBox.scss
+++ b/src/client/views/nodes/TaskBox.scss
@@ -115,3 +115,18 @@ input[type='datetime-local'] {
     flex-direction: column;
     min-width: 0;
 }
+
+.task-manager-button-row {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+}
+
+.task-manager-delete {
+    @extend .task-manager-google;
+    background-color: #182430;
+
+    &:hover {
+        background-color: #000000;
+    }
+}
diff --git a/src/client/views/nodes/TaskBox.tsx b/src/client/views/nodes/TaskBox.tsx
index 3c7a2f345..5a54e8049 100644
--- a/src/client/views/nodes/TaskBox.tsx
+++ b/src/client/views/nodes/TaskBox.tsx
@@ -481,7 +481,7 @@ export class TaskBox extends ViewBoxBaseComponent<FieldViewProps>() {
     handleDeleteTask = async () => {
         const doc = this.Document;
         if (!doc.$googleTaskId) return;
-        if (!window.confirm('Are you sure you want to permanently delete this task from Google Tasks?')) return;
+        if (!window.confirm('Are you sure you want to permanently delete this task? This action is undoable.')) return;
 
         try {
             const token = await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken();
@@ -583,24 +583,30 @@ export class TaskBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         </label>
                     </div>
 
-                    <button
-                        className="task-manager-google"
-                        // disabled={!this.needsSync}
-                        onClick={event => {
-                            event.preventDefault();
-                            handleGoogleTaskSync();
-                        }}>
-                        {this._syncing ? 'Syncing...' : this.needsSync ? 'Push Updates' : 'Sync Task'}
-                    </button>
-
-                    <button
-                        className="task-delete"
-                        onClick={event => {
-                            event.preventDefault();
-                            this.handleDeleteTask();
-                        }}>
-                        Delete Task
-                    </button>
+                    <div className="task-manager-button-row">
+                        <button
+                            className="task-manager-google"
+                            onClick={event => {
+                                event.preventDefault();
+                                handleGoogleTaskSync();
+                            }}>
+                            {this._syncing ? 'Syncing...' : this.needsSync ? 'Push Updates' : 'Sync Task'}
+                        </button>
+
+                        <button
+                            className="task-manager-delete"
+                            onClick={event => {
+                                event.preventDefault();
+                                this.handleDeleteTask();
+                            }}>
+                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="12" height="12" viewBox="0 0 24 24" style={{ fill: 'white', marginRight: '6px', verticalAlign: 'middle', marginTop: '-2px' }}>
+                                <path d="M 10 2 L 9 3 L 5 3 C 4.4 3 4 3.4 4 4 C 4 4.6 4.4 5 5 5 L 7 5 L 17 5 L 19 5 C 19.6 5 20 4.6 20 4 C 20 3.4 19.6 3 19 3 L 15 3 L 14 2 L 10 2 z M 5 7 L 5 20 C 5 21.1 5.9 22 7 22 L 17 22 C 18.1 22 19 21.1 19 20 L 19 7 L 5 7 z M 9 9 C 9.6 9 10 9.4 10 10 L 10 19 C 10 19.6 9.6 20 9 20 C 8.4 20 8 19.6 8 19 L 8 10 C 8 9.4 8.4 9 9 9 z M 15 9 C 15.6 9 16 9.4 16 10 L 16 19 C 16 19.6 15.6 20 15 20 C 14.4 20 14 19.6 14 19 L 14 10 C 14 9.4 14.4 9 15 9 z"></path>
+                            </svg>
+
+                            
+                            Delete
+                        </button>
+                    </div>
 
                     {!allDay && (
                         <div className="task-manager-times" style={{ opacity: isCompleted ? 0.7 : 1 }}>