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'); + } } } }