From 4f1e8b860ace0d362e7b36af342f466778758bb0 Mon Sep 17 00:00:00 2001
From: mushka <nikitamushka@mail.ru>
Date: Mon, 29 Aug 2022 16:47:32 +0300
Subject: [PATCH] added hover styles to iconCropper delete button

---
 .../sub-components/IconEditor/IconCropper.js       | 14 ++++++++++++++
 packages/components/themes/base.js                 |  3 +++
 packages/components/themes/dark.js                 |  3 +++
 3 files changed, 20 insertions(+)

diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/IconCropper.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/IconCropper.js
index 74446487a6..f2de074d2a 100644
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/IconCropper.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/IconCropper.js
@@ -46,9 +46,23 @@ const StyledIconCropper = styled.div`
     padding: 6px 0;
     background: ${(props) =>
       props.theme.createEditRoomDialog.iconCropper.deleteButton.background};
+    border: 1px solid
+      ${(props) =>
+        props.theme.createEditRoomDialog.iconCropper.deleteButton.borderColor};
     border-radius: 3px;
     margin-bottom: 12px;
 
+    transition: all 0.2s ease;
+    &:hover {
+      background: ${(props) =>
+        props.theme.createEditRoomDialog.iconCropper.deleteButton
+          .hoverBackground};
+      border: 1px solid
+        ${(props) =>
+          props.theme.createEditRoomDialog.iconCropper.deleteButton
+            .hoverBorderColor};
+    }
+
     &-text {
       user-select: none;
       font-weight: 600;
diff --git a/packages/components/themes/base.js b/packages/components/themes/base.js
index 20d0f1914b..05b6a02b38 100644
--- a/packages/components/themes/base.js
+++ b/packages/components/themes/base.js
@@ -2338,6 +2338,9 @@ const Base = {
       gridColor: "#333333",
       deleteButton: {
         background: "#f8f9f9",
+        hoverBackground: "#f3f4f4",
+        borderColor: "#f8f9f9",
+        hoverBorderColor: "#f3f4f4",
         color: "#555f65",
         iconColor: "#657077",
       },
diff --git a/packages/components/themes/dark.js b/packages/components/themes/dark.js
index 07d86021d5..81acb77955 100644
--- a/packages/components/themes/dark.js
+++ b/packages/components/themes/dark.js
@@ -2346,6 +2346,9 @@ const Dark = {
       gridColor: "#333333",
       deleteButton: {
         background: "#292929",
+        hoverBackground: "#333333",
+        borderColor: "#292929",
+        hoverBorderColor: "#fafafa",
         color: "#858585",
         iconColor: "#e8e8e9",
       },