diff --git a/client/modules/User/components/Collection.jsx b/client/modules/User/components/Collection.jsx
index 59130704..ed69f482 100644
--- a/client/modules/User/components/Collection.jsx
+++ b/client/modules/User/components/Collection.jsx
@@ -23,7 +23,7 @@ import { SketchSearchbar } from '../../IDE/components/Searchbar';
const arrowUp = require('../../../images/sort-arrow-up.svg');
const arrowDown = require('../../../images/sort-arrow-down.svg');
-const trashCan = require('../../../images/trash-can.svg');
+const removeIcon = require('../../../images/close.svg');
const ShareURL = ({ value }) => {
const [showURL, setShowURL] = React.useState(false);
@@ -75,7 +75,7 @@ class CollectionItemRowBase extends React.Component {
className="collection-row__remove-button"
onClick={this.handleSketchRemove}
>
-
+
);
diff --git a/client/styles/components/_collection.scss b/client/styles/components/_collection.scss
index c0df5141..77888e91 100644
--- a/client/styles/components/_collection.scss
+++ b/client/styles/components/_collection.scss
@@ -130,13 +130,35 @@
}
.collection-row__remove-button {
+ display: inline-block;
+ width:#{35 / $base-font-size}rem;
+ height:#{35 / $base-font-size}rem;
+ @include icon();
@include themify() {
- svg path {
+ // icon graphic
+ polygon {
+ fill: getThemifyVariable('table-button-color');
+ }
+
+ // icon background circle
+ path {
fill: getThemifyVariable('table-button-background-color');
}
- &:hover svg path {
- fill: getThemifyVariable('table-button-background-hover-color');
+ & svg {
+ width:#{35 / $base-font-size}rem;
+ height:#{35 / $base-font-size}rem;
+ }
+
+ &:hover,
+ &:focus {
+ polygon {
+ fill: getThemifyVariable('table-button-hover-color');
+ }
+
+ path {
+ fill: getThemifyVariable('table-button-background-hover-color');
+ }
}
}
}