r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Use same remove icon as in QuickAdd panel

Browse source
This commit is contained in:
Andrew Nicolaou 2019-11-25 19:55:39 +01:00
parent df44a6223f
commit ce1c389505
2 changed files with 27 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
client/modules/User/components/Collection.jsx
View file

@ -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}
>
<InlineSVG src={trashCan} alt="Remove" />
<InlineSVG src={removeIcon} alt="Remove" />
</button>
</td>
</tr>);

28
client/styles/components/_collection.scss
View file

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