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

More progress on donate section

Browse source
This commit is contained in:
Karishma Chadha 2020-08-17 12:04:38 -04:00
parent 13c9837ebf
commit 98a7841a50
2 changed files with 265 additions and 220 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/views/annual-report/annual-report.jsx
View file

@ -16,12 +16,7 @@ const render = require('../../lib/render.jsx');
require('./annual-report.scss');
class AnnualReport extends React.Component {
constructor (props) {
super(props);
}
render () {
return (
const AnnualReport = () => (
<div>
<div className="subnavigation">
<FlexRow className="inner">
@ -201,37 +196,26 @@ class AnnualReport extends React.Component {
</section>
</div>
</div>
<div>
<TitleBanner>
<div className="title-banner">
<div className="donate-section">
<FlexRow className="donate-info">
<img src="/images/annual-report/donate-illustration.svg" width="300" height="300"/>
<div>
<h1 className="title-banner-h1 section-heading">
<img src="/images/annual-report/donate-illustration.svg" />
<div className="donate-content">
<h1 className="donate-h1">
<FormattedMessage id="annualReport.donateTitle" />
</h1>
<p className="donate-p">
<FormattedMessage id="annualReport.donateMessage" />
</p>
<a href="/projects/editor/?tutorial=all">
<Button className="ideas-button">
<img src="/images/ideas/bulb-icon.svg" />
<a href="https://secure.donationpay.org/scratchfoundation/">
<Button className="donate-button">
<FormattedMessage id="annualReport.donateButton" />
</Button>
</a>
</div>
</FlexRow>
</div>
</TitleBanner>
</div>
</div>
);
}
}
AnnualReport.propTypes = {
intl: intlShape
};
);
render(
<Page><AnnualReport /></Page>, document.getElementById('app'));

75
src/views/annual-report/annual-report.scss
View file

@ -127,16 +127,77 @@ $base-bg: $ui-white;
margin-bottom: 0;
}
.donate-p {
.donate-section {
height: 500px;
background-color: #0EBD8C;
.donate-info {
justify-content: center;
align-items: flex-start;
padding: 82px 0px;
}
.donate-content {
margin-left: 20px;
img {
width: 300px;
height: 300px;
}
h1 {
height: 62px;
width: 460px;
color: $ui-white;
font-family: "Helvetica Neue";
font-size: 52px;
font-weight: bold;
letter-spacing: 0;
line-height: 64px;
}
p {
height: 160px;
width: 460px;
color: #FFFFFF;
font-family: "Helvetica Neue";
font-size: 20px;
text-align: left;
color: $type-white;
max-width: 500px;
letter-spacing: 0;
line-height: 32px;
}
}
.donate-button {
// margin-right: .75rem;
background-color: $ui-white;
color: $ui-blue;
height: 66px;
width: 176px;
padding: 0px;
margin: 0px;
border-radius: 6px;
// font-size: 1rem;
font-family: "Helvetica Neue";
font-size: 24px;
font-weight: bold;
letter-spacing: 0;
line-height: 29px;
a { // do we need this?
color: $ui-blue;
}
span {
vertical-align: middle;
}
}
}
.donate-info {
justify-content: center;
}
img.tips-icon {
height: 1.75rem;