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 arrowUp = require('../../../images/sort-arrow-up.svg');
const arrowDown = require('../../../images/sort-arrow-down.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 ShareURL = ({ value }) => {
const [showURL, setShowURL] = React.useState(false); const [showURL, setShowURL] = React.useState(false);
@ -75,7 +75,7 @@ class CollectionItemRowBase extends React.Component {
className="collection-row__remove-button" className="collection-row__remove-button"
onClick={this.handleSketchRemove} onClick={this.handleSketchRemove}
> >
<InlineSVG src={trashCan} alt="Remove" /> <InlineSVG src={removeIcon} alt="Remove" />
</button> </button>
</td> </td>
</tr>); </tr>);

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

@ -130,13 +130,35 @@
} }
.collection-row__remove-button { .collection-row__remove-button {
display: inline-block;
width:#{35 / $base-font-size}rem;
height:#{35 / $base-font-size}rem;
@include icon();
@include themify() { @include themify() {
svg path { // icon graphic
polygon {
fill: getThemifyVariable('table-button-color');
}
// icon background circle
path {
fill: getThemifyVariable('table-button-background-color'); fill: getThemifyVariable('table-button-background-color');
} }
&:hover svg path { & svg {
fill: getThemifyVariable('table-button-background-hover-color'); 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');
}
} }
} }
} }