scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-08-28 22:12:19 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

add icon & style to the StudioReport button

Browse source
This commit is contained in:
Christopher Willis-Ford 2021-05-21 12:19:28 -07:00
parent ddaa099cf0
commit 87f4fb3a9c
3 changed files with 38 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/views/studio/icons/report-icon.svg Normal file
View file

@ -0,0 +1,9 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4057 11.5091C9.50472 11.5091 8.77527 12.2386 8.77527 13.1396C8.77527 14.0405 9.50472 14.77 10.4057 14.77C11.3067 14.77 12.0362 14.0405 12.0362 13.1396C12.0362 12.2386 11.3067 11.5091 10.4057 11.5091ZM11.3417 10.0236C10.927 10.9523 9.88444 10.9523 9.46975 10.0236L8.14574 7.07519C7.73106 6.15289 8.25066 5 9.08171 5H11.7297C12.5608 5 13.0804 6.15289 12.6657 7.07519L11.3417 10.0236Z" fill="white"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="8" y="5" width="5" height="10">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4057 11.5091C9.50472 11.5091 8.77527 12.2386 8.77527 13.1396C8.77527 14.0405 9.50472 14.77 10.4057 14.77C11.3067 14.77 12.0362 14.0405 12.0362 13.1396C12.0362 12.2386 11.3067 11.5091 10.4057 11.5091ZM11.3417 10.0236C10.927 10.9523 9.88444 10.9523 9.46975 10.0236L8.14574 7.07519C7.73106 6.15289 8.25066 5 9.08171 5H11.7297C12.5608 5 13.0804 6.15289 12.6657 7.07519L11.3417 10.0236Z" fill="white"/>
</mask>
<g mask="url(#mask0)">
<rect width="20" height="20" fill="white"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

11
src/views/studio/studio-report.jsx
View file

@ -11,15 +11,20 @@ import {
selectors
} from '../../redux/studio-report';
import reportIcon from './icons/report-icon.svg';
const StudioReport = ({
canReport,
isOpen,
handleOpen
}) => (
<div>
{canReport && (
<button onClick={handleOpen}><FormattedMessage id="general.report" /></button>
)}
{canReport &&
<button onClick={handleOpen}>
<img src={reportIcon} />
<FormattedMessage id="general.report" />
</button>
}
{isOpen && (
<StudioReportModal />
)}

21
src/views/studio/studio.scss
View file

@ -78,6 +78,27 @@ $radius: 8px;
.studio-info-footer-report {
justify-content: flex-end;
button {
font-size: smaller;
background-color: $ui-blue;
border: 1px solid transparent;
border-radius: 999em;
color: $ui-white;
display: flex;
align-items: center;
padding: 0.25em;
padding-right: 0.75em;
&:hover {
background-color: $ui-blue-dark;
}
img {
margin-right: 0.25em;
width: 1.5em;
}
}
}
.studio-title {