scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 15:47:53 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

styling studio report tiles

Browse source
This commit is contained in:
Eric Rosenbaum 2021-05-14 17:08:08 -04:00
parent df30f9bac6
commit a76f0b3fac
2 changed files with 31 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -73,6 +73,7 @@ const StudioReport = ({
>
<h3><FormattedMessage id="studio.reportThisStudio" /></h3>
<p><FormattedMessage id="studio.reportPleaseExplain" /></p>
<div className="studio-report-tile-container">
<StudioReportTile
handleChange={handleChange}
heading={intl.formatMessage({id: 'studio.title'})}
@ -91,6 +92,7 @@ const StudioReport = ({
image={image}
value={Fields.THUMBNAIL}
/>
</div>
<p><FormattedMessage id="studio.reportAreThereComments" /></p>
<button
className="button"

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

@ -89,6 +89,8 @@ $radius: 8px;
}
.studio-report-modal {
width: 650px;
.studio-report-title {
box-shadow: inset 0 -1px 0 0 $ui-aqua-dark;
background: $ui-aqua;
@ -103,19 +105,25 @@ $radius: 8px;
padding: 2rem;
}
.studio-report-tile-container {
display: flex;
flex-wrap: wrap;
}
.button:disabled {
background-color: $active-dark-gray;
}
.studio-report-tile {
background: $ui-light-gray;
width: 200px;
background: rgba(0, 0, 0, 0.05);
width: 250px;
height: 156px;
margin: 1rem;
border-radius: 0.5rem;
}
.studio-report-tile-header {
background: $ui-gray;
background: rgba(0, 0, 0, 0.05);
border-radius: 0.5rem;
padding: 0.5rem;
}