From 78b4733fb9d8869b1c3e3325ec9e8a053cada43f Mon Sep 17 00:00:00 2001
From: Zeng1998 <1129142694@qq.com>
Date: Sat, 5 Nov 2022 17:41:14 +0800
Subject: [PATCH] chore: add icon for deleting resource (#414)

---
 web/src/components/ResourcesDialog.tsx | 7 ++++---
 web/src/less/resources-dialog.less     | 6 +++++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/web/src/components/ResourcesDialog.tsx b/web/src/components/ResourcesDialog.tsx
index 37cf9eb1..3f404ef4 100644
--- a/web/src/components/ResourcesDialog.tsx
+++ b/web/src/components/ResourcesDialog.tsx
@@ -183,9 +183,10 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
             </div>
           </div>
           <div className="buttons-wrapper">
-            <button className="delete-unused-resource-btn" onClick={handleDeleteUnusedResourcesBtnClick}>
-              {t("resources.clear-unused-resources")}
-            </button>
+            <div className="delete-unused-resource-btn" onClick={handleDeleteUnusedResourcesBtnClick}>
+              <Icon.Trash2 className="icon-img" />
+              <span>{t("resources.clear-unused-resources")}</span>
+            </div>
           </div>
         </div>
         {loadingState.isLoading ? (
diff --git a/web/src/less/resources-dialog.less b/web/src/less/resources-dialog.less
index e06779fc..51ee8a7f 100644
--- a/web/src/less/resources-dialog.less
+++ b/web/src/less/resources-dialog.less
@@ -24,7 +24,11 @@
           }
 
           > .delete-unused-resource-btn {
-            @apply text-sm py-1 px-3 mr-2 rounded bg-red-100 border border-solid border-red-600 text-red-600 hover:opacity-80;
+            @apply text-sm cursor-pointer px-3 py-1 rounded flex flex-row justify-center items-center border border-red-600 text-red-600 bg-red-100 hover:opacity-80;
+
+            > .icon-img {
+            @apply w-4 h-auto mr-1;
+            }
           }
         }
       }