diff --git a/src/views/annual-report/annual-report.jsx b/src/views/annual-report/annual-report.jsx index a19c9dce7..7dbf0abb8 100644 --- a/src/views/annual-report/annual-report.jsx +++ b/src/views/annual-report/annual-report.jsx @@ -184,33 +184,131 @@ const AnnualReport = () => ( -
-
+
+

-
-

- -

-
-
- -
-

- -

-

- -

+

+ +

+
+
+
+
+ +
+

+ +

+

+ $3,898,078 + (82.7%) +

+
+
+
+ +
+

+ +

+

+ $700,000 + (14.8%) +

+
+
+
+ +
+

+ +

+

+ $114,982 + (2.4%) +

+
+
+
+
+

+ +

+

+ $4,713,060 +

+
+
-
-

- -

-
+

+ +

+
+
+
+
+ +
+

+ +

+

+ $1,135,767 + (48.8%) +

+
+
+
+ +
+

+ +

+

+ $224,104 + (9.6%) +

+
+
+
+ +
+

+ +

+

+ $962,958 + (41.4%) +

+
+
+
+
+

+ +

+

+ $2,322,829 +

+
+
+
+ +
+
diff --git a/src/views/annual-report/annual-report.scss b/src/views/annual-report/annual-report.scss index d950b4045..79445b067 100644 --- a/src/views/annual-report/annual-report.scss +++ b/src/views/annual-report/annual-report.scss @@ -127,6 +127,140 @@ $base-bg: $ui-white; margin-bottom: 0; } +.financials-section { + .inner { + max-width: 780px; + padding: 72px 0; + } + + background-color: #575E75; + width: 100%; + color: #FFFFFF; + + h1, h2, p { + color: #FFFFFF; + } + + h1 { + font-size: 52px; + margin-bottom: 72px; + line-height: 64px; + } + + hr { + border: 0; + height: 0; + border-top: .5px solid #FFFFFF; + } + + .financials-content { + display: flex; + align-items: center; + justify-content: space-between; + } + + .financials-table { + display: flex; + flex-direction: column; + + margin: 64px 0; + } + + .circle-and-words { + display: flex; + align-items: flex-start; + padding: 8px 0px;; + + img { + margin-right: 16px; + } + + p { + text-align: left; + line-height: 24px; + font-size: 16px; + font-weight: bold; + margin: 0; + } + + .percentage { + font-weight: normal; + } + + .key { + width: 264px; + } + + .total { + margin-left: 36px; + margin-top: 52px; + + p { + font-size: 20px; + } + } + + .key-and-money { + display: flex; + } + } + + .financials-button-wrapper { + width: 100%; + text-align: center; + } + + .financials-button { + // margin-right: .75rem; + background-color: $ui-white; + color: $ui-blue; + padding: 20px; + border-radius: 6px; + + font-family: "Helvetica Neue"; + font-size: 24px; + font-weight: bold; + + .download-icon { + height: 1.75rem; + vertical-align: middle; + } + } + + @media #{$medium-and-smaller} { + h1 { + position: relative; + margin-bottom: 40px; + max-width: 300px; + left: 50%; + margin-left: -150px; + } + + .financials-content { + flex-direction: column-reverse; + text-align: center; + } + + .financials-table { + margin: 0 0 60px 0; + } + + .graph { + margin: 28px; + } + } + + @media #{$small} { + .key-and-money { + flex-direction: column; + } + + .key { + padding-bottom: 8px; + } + } +} + .donate-section { height: 500px; background-color: #0EBD8C; @@ -134,7 +268,7 @@ $base-bg: $ui-white; .donate-info { justify-content: center; align-items: flex-start; - padding: 82px 0px; + padding: 84px 0px; } .donate-content { @@ -177,8 +311,6 @@ $base-bg: $ui-white; margin: 0px; border-radius: 6px; - // font-size: 1rem; - font-family: "Helvetica Neue"; font-size: 24px; font-weight: bold; diff --git a/src/views/annual-report/l10n.json b/src/views/annual-report/l10n.json index c4cdfac71..1ea8e44bb 100644 --- a/src/views/annual-report/l10n.json +++ b/src/views/annual-report/l10n.json @@ -65,8 +65,14 @@ "annualReport.financialsTitle": "Financials - 2019", "annualReport.financialsRevenue": "Revenue", "annualReport.financialsGrants": "Grants, Individual, & Corporate Donations (Gala Included)", - "annualReport.financialsGrantsAmt": "$3,898,078 (82.7%)", + "annualReport.financialsEvents": "Events", + "annualReport.financialsOther": "Other", + "annualReport.financialsTotal": "Total", "annualReport.financialsExpenses": "Expenses", + "annualReport.financialsProgram": "Program", + "annualReport.financialsGeneral": "General & Administrative", + "annualReport.financialsFundraising": "Fundraising (Gala & Others)", + "annualReport.financialsButton": "2019 Audited Financials", "annualReport.donateTitle": "Donate", "annualReport.donateMessage": "Your support enables us to make Scratch free for everyone, keeps our servers running, and most importantly, we are able to provide kids around the world an opportunity to imagine, create and share. Thank you!", diff --git a/static/images/annual-report/blue-circle.svg b/static/images/annual-report/blue-circle.svg new file mode 100644 index 000000000..f51999c4b --- /dev/null +++ b/static/images/annual-report/blue-circle.svg @@ -0,0 +1,15 @@ + + + blue circle + + + + + + + + + + + + \ No newline at end of file diff --git a/static/images/annual-report/expenses-graph.svg b/static/images/annual-report/expenses-graph.svg new file mode 100644 index 000000000..94718b7ff --- /dev/null +++ b/static/images/annual-report/expenses-graph.svg @@ -0,0 +1,22 @@ + + + Expenses Graph + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/images/annual-report/green-circle.svg b/static/images/annual-report/green-circle.svg new file mode 100644 index 000000000..4dde45489 --- /dev/null +++ b/static/images/annual-report/green-circle.svg @@ -0,0 +1,15 @@ + + + green circle + + + + + + + + + + + + \ No newline at end of file diff --git a/static/images/annual-report/revenue-graph.svg b/static/images/annual-report/revenue-graph.svg new file mode 100644 index 000000000..7735efcaa --- /dev/null +++ b/static/images/annual-report/revenue-graph.svg @@ -0,0 +1,22 @@ + + + Revenue Graph + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/images/annual-report/yellow-circle.svg b/static/images/annual-report/yellow-circle.svg new file mode 100644 index 000000000..51e409c06 --- /dev/null +++ b/static/images/annual-report/yellow-circle.svg @@ -0,0 +1,15 @@ + + + yellow circle + + + + + + + + + + + + \ No newline at end of file