added hover styles to iconCropper delete button

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;

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",
       },

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",
       },