Skip to content

Commit 6e24e2e

Browse files
ap-justinap-justin
committed
remove computed
1 parent cddd62b commit 6e24e2e

File tree

9 files changed

+66
-56
lines changed

9 files changed

+66
-56
lines changed

‎src/pages/donation-calculator/pdf-export/footer.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -73,14 +73,14 @@ export function Footer({ style = {} }: { style?: object }) {
7373
display: "flex",
7474
flexDirection: "row",
7575
alignItems: "center",
76-
padding: w["14"] + 10,
76+
padding: w["24"],
7777
color: gray.l6,
7878
...style,
7979
}}
8080
>
8181
<T
8282
style={{
83-
fontSize: fs.xl - 2,
83+
fontSize: fs.xlm,
8484
fontWeight: fw.b,
8585
}}
8686
>

‎src/pages/donation-calculator/pdf-export/page1/impact-card.tsx

+14-14
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@ interface Props extends Growth {
88
}
99

1010
export function ImpactCard(p: Props) {
11-
const fontSizeIncrease = 1.1;
11+
const fontSize = fs.base;
1212
return (
1313
<V style={{ width: "33%" }}>
1414
<V style={{ backgroundColor: green.l5, padding: w["4"] }}>
1515
<T
1616
style={{
1717
textAlign: "right",
1818
fontWeight: fw.sb,
19-
fontSize: fs.sm * fontSizeIncrease,
19+
fontSize: fontSize,
2020
marginBottom: w["2"],
2121
}}
2222
>
@@ -27,7 +27,7 @@ export function ImpactCard(p: Props) {
2727
textAlign: "right",
2828
fontWeight: fw.b,
2929
color: green.d,
30-
fontSize: fs.sm * fontSizeIncrease,
30+
fontSize: fontSize,
3131
}}
3232
>
3333
{toUsd(p.total)}
@@ -38,7 +38,7 @@ export function ImpactCard(p: Props) {
3838
style={{
3939
fontWeight: fw.sb,
4040
textAlign: "right",
41-
fontSize: fs.sm * fontSizeIncrease,
41+
fontSize: fontSize,
4242
marginTop: w["6"],
4343
paddingRight: w["4"],
4444
}}
@@ -48,7 +48,7 @@ export function ImpactCard(p: Props) {
4848
<V
4949
style={{
5050
justifyContent: "flex-end",
51-
fontSize: fs.sm * fontSizeIncrease,
51+
fontSize: fontSize,
5252
display: "flex",
5353
flexDirection: "row",
5454
marginTop: w["2"],
@@ -61,7 +61,7 @@ export function ImpactCard(p: Props) {
6161
<V
6262
style={{
6363
justifyContent: "flex-end",
64-
fontSize: fs.sm * fontSizeIncrease,
64+
fontSize: fontSize,
6565
display: "flex",
6666
flexDirection: "row",
6767
marginTop: w["2"],
@@ -74,7 +74,7 @@ export function ImpactCard(p: Props) {
7474
<V
7575
style={{
7676
justifyContent: "flex-end",
77-
fontSize: fs.sm * fontSizeIncrease,
77+
fontSize: fontSize,
7878
display: "flex",
7979
flexDirection: "row",
8080
marginTop: w["2"],
@@ -89,7 +89,7 @@ export function ImpactCard(p: Props) {
8989
style={{
9090
fontWeight: fw.sb,
9191
textAlign: "right",
92-
fontSize: fs.sm * fontSizeIncrease,
92+
fontSize: fontSize,
9393
marginTop: w["6"],
9494
paddingRight: w["4"],
9595
}}
@@ -99,7 +99,7 @@ export function ImpactCard(p: Props) {
9999
<V
100100
style={{
101101
justifyContent: "flex-end",
102-
fontSize: fs.sm * fontSizeIncrease,
102+
fontSize: fontSize,
103103
display: "flex",
104104
flexDirection: "row",
105105
marginTop: w["2"],
@@ -112,7 +112,7 @@ export function ImpactCard(p: Props) {
112112
<V
113113
style={{
114114
justifyContent: "flex-end",
115-
fontSize: fs.sm * fontSizeIncrease,
115+
fontSize: fontSize,
116116
display: "flex",
117117
flexDirection: "row",
118118
marginTop: w["2"],
@@ -127,7 +127,7 @@ export function ImpactCard(p: Props) {
127127
<V
128128
style={{
129129
justifyContent: "flex-end",
130-
fontSize: fs.sm * fontSizeIncrease,
130+
fontSize: fontSize,
131131
display: "flex",
132132
flexDirection: "row",
133133
marginTop: w["2"],
@@ -141,7 +141,7 @@ export function ImpactCard(p: Props) {
141141
<V
142142
style={{
143143
justifyContent: "flex-end",
144-
fontSize: fs.sm * fontSizeIncrease,
144+
fontSize: fontSize,
145145
display: "flex",
146146
flexDirection: "row",
147147
marginTop: w["2"],
@@ -163,7 +163,7 @@ export function ImpactCard(p: Props) {
163163
style={{
164164
textAlign: "right",
165165
fontWeight: fw.sb,
166-
fontSize: fs.sm * fontSizeIncrease,
166+
fontSize: fontSize,
167167
marginBottom: w["2"],
168168
}}
169169
>
@@ -174,7 +174,7 @@ export function ImpactCard(p: Props) {
174174
textAlign: "right",
175175
fontWeight: fw.b,
176176
color: green.d,
177-
fontSize: fs.sm * fontSizeIncrease,
177+
fontSize: fontSize,
178178
}}
179179
>
180180
{toUsd(p.end.total)}

‎src/pages/donation-calculator/pdf-export/page1/index.tsx

+15-15
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export function Page1({ v }: Props) {
2727
<V
2828
style={{
2929
...styles.header,
30-
padding: w["10"] + 10,
30+
padding: w["20"],
3131
display: "flex",
3232
flexDirection: "row",
3333
justifyContent: "space-between",
@@ -67,7 +67,7 @@ export function Page1({ v }: Props) {
6767
</V>
6868
<V
6969
style={{
70-
paddingHorizontal: w["10"] + 10,
70+
paddingHorizontal: w["20"],
7171
paddingTop: w["10"],
7272
display: "flex",
7373
flexDirection: "row",
@@ -91,7 +91,7 @@ export function Page1({ v }: Props) {
9191
style={{
9292
display: "flex",
9393
flexDirection: "row",
94-
paddingHorizontal: w["14"] + 10,
94+
paddingHorizontal: w["24"],
9595
gap: w["20"],
9696
marginTop: w["6"],
9797
}}
@@ -129,7 +129,7 @@ export function Page1({ v }: Props) {
129129
style={{
130130
display: "flex",
131131
flexDirection: "row",
132-
paddingHorizontal: w["14"] + 10,
132+
paddingHorizontal: w["24"],
133133
gap: w["10"],
134134
marginTop: w["4"],
135135
}}
@@ -141,7 +141,7 @@ export function Page1({ v }: Props) {
141141
style={{
142142
padding: w["10"],
143143
marginTop: w["6"],
144-
marginHorizontal: w["14"] + 9,
144+
marginHorizontal: w["23"],
145145
backgroundColor: gray.l4,
146146
display: "flex",
147147
flexDirection: "row",
@@ -167,7 +167,7 @@ export function Page1({ v }: Props) {
167167
</V>
168168
<V
169169
style={{
170-
paddingHorizontal: w["10"] + 10,
170+
paddingHorizontal: w["20"],
171171
display: "flex",
172172
flexDirection: "row",
173173
justifyContent: "space-between",
@@ -191,7 +191,7 @@ export function Page1({ v }: Props) {
191191
style={{
192192
display: "flex",
193193
flexDirection: "row",
194-
paddingHorizontal: w["14"] + 10,
194+
paddingHorizontal: w["24"],
195195
gap: w["20"],
196196
marginTop: w["6"],
197197
}}
@@ -225,7 +225,7 @@ export function Page1({ v }: Props) {
225225
style={{
226226
display: "flex",
227227
flexDirection: "row",
228-
paddingHorizontal: w["14"] + 10,
228+
paddingHorizontal: w["24"],
229229
gap: w["10"],
230230
marginTop: w["6"],
231231
}}
@@ -237,7 +237,7 @@ export function Page1({ v }: Props) {
237237
style={{
238238
marginTop: w["6"],
239239
padding: w["10"],
240-
marginHorizontal: w["14"] + 8,
240+
marginHorizontal: w["22"],
241241
backgroundColor: gray.l4,
242242
display: "flex",
243243
flexDirection: "row",
@@ -268,7 +268,7 @@ export function Page1({ v }: Props) {
268268
<V
269269
style={{
270270
padding: w["10"],
271-
marginHorizontal: w["14"] + 8,
271+
marginHorizontal: w["22"],
272272
backgroundColor: green.l5,
273273
display: "flex",
274274
alignItems: "center",
@@ -284,7 +284,7 @@ export function Page1({ v }: Props) {
284284
<V
285285
style={{
286286
marginTop: w["10"],
287-
paddingHorizontal: w["10"] + 10,
287+
paddingHorizontal: w["20"],
288288
display: "flex",
289289
flexDirection: "row",
290290
justifyContent: "space-between",
@@ -306,7 +306,7 @@ export function Page1({ v }: Props) {
306306
<T
307307
style={{
308308
marginTop: w["6"],
309-
paddingHorizontal: w["10"] + 10,
309+
paddingHorizontal: w["20"],
310310
fontSize: fs.base,
311311
fontWeight: fw.sb,
312312
}}
@@ -318,7 +318,7 @@ export function Page1({ v }: Props) {
318318
<V
319319
style={{
320320
fontSize: fs.base,
321-
paddingHorizontal: w["20"] + 10,
321+
paddingHorizontal: w["30"],
322322
marginTop: w["4"],
323323
}}
324324
>
@@ -327,7 +327,7 @@ export function Page1({ v }: Props) {
327327
<T style={{ fontWeight: fw.sb }}> 10%</T> of Annual Donations
328328
Allocated to Savings/Investments
329329
</T>
330-
<T style={{ fontSize: fs.sm - 1 }}>
330+
<T style={{ fontSize: fs.xxs2 }}>
331331
({toUsd(v.amount)}{" "}
332332
<T style={{ fontWeight: fw.sb }}>with Better Giving</T> ×{" "}
333333
{(v.notGrantedRate * 100).toFixed(2)}% = {toUsd(v.notGranted)})
@@ -358,7 +358,7 @@ export function Page1({ v }: Props) {
358358
display: "flex",
359359
flexDirection: "row",
360360
paddingTop: w["14"],
361-
paddingHorizontal: w["14"] + 6,
361+
paddingHorizontal: w["20"],
362362
}}
363363
>
364364
<ImpactCard yr={1} {...v.projection[0]} />

‎src/pages/donation-calculator/pdf-export/page2.tsx

+13-13
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export function Page2({ v }: { v: View }) {
2929
<Pg size="A4">
3030
<V
3131
style={{
32-
padding: w["10"] + 10,
32+
padding: w["20"],
3333
paddingBottom: 0,
3434
display: "flex",
3535
flexDirection: "row",
@@ -41,7 +41,7 @@ export function Page2({ v }: { v: View }) {
4141
style={{
4242
color: blue.d,
4343
fontWeight: fw.sb,
44-
fontSize: fs.xl - 4,
44+
fontSize: fs.lg2,
4545
textTransform: "uppercase",
4646
}}
4747
>
@@ -51,10 +51,10 @@ export function Page2({ v }: { v: View }) {
5151
</V>
5252
<T
5353
style={{
54-
paddingHorizontal: w["10"] + 10,
54+
paddingHorizontal: w["20"],
5555
color: blue.d,
5656
fontWeight: fw.sb,
57-
fontSize: fs.xl - 4,
57+
fontSize: fs.lg2,
5858
textTransform: "uppercase",
5959
}}
6060
>
@@ -63,7 +63,7 @@ export function Page2({ v }: { v: View }) {
6363
<T
6464
style={{
6565
fontWeight: fw.b,
66-
paddingHorizontal: w["10"] + 10,
66+
paddingHorizontal: w["20"],
6767
fontSize: fs.lg,
6868
marginVertical: w["6"],
6969
}}
@@ -74,7 +74,7 @@ export function Page2({ v }: { v: View }) {
7474
style={{
7575
display: "flex",
7676
flexDirection: "row",
77-
paddingHorizontal: w["10"] + 4,
77+
paddingHorizontal: w["14"],
7878
gap: w["10"],
7979
}}
8080
>
@@ -93,7 +93,7 @@ export function Page2({ v }: { v: View }) {
9393

9494
return (
9595
<V key={row.key} style={{ width: "50%", display: "flex" }}>
96-
<T style={{ fontSize: fs.base, marginLeft: w["6"] + 2 }}>
96+
<T style={{ fontSize: fs.base, marginLeft: w["8"] }}>
9797
{row.label}
9898
</T>
9999
<Splits
@@ -113,7 +113,7 @@ export function Page2({ v }: { v: View }) {
113113
style={{
114114
display: "flex",
115115
flexDirection: "row",
116-
paddingHorizontal: w["10"] + 4,
116+
paddingHorizontal: w["14"],
117117
gap: w["10"],
118118
}}
119119
>
@@ -132,7 +132,7 @@ export function Page2({ v }: { v: View }) {
132132

133133
return (
134134
<V key={row.key} style={{ width: "50%" }}>
135-
<T style={{ fontSize: fs.base, marginLeft: w["6"] + 2 }}>
135+
<T style={{ fontSize: fs.base, marginLeft: w["8"] }}>
136136
{row.label}
137137
</T>
138138
<Splits
@@ -242,15 +242,15 @@ export function Page2({ v }: { v: View }) {
242242
<V
243243
style={{
244244
backgroundColor: amber.l4,
245-
marginHorizontal: w["14"] + 8,
245+
marginHorizontal: w["22"],
246246
padding: w["10"],
247247
borderRadius: 6,
248248
marginTop: w["10"],
249249
}}
250250
>
251251
<T
252252
style={{
253-
fontSize: fs.base + 1,
253+
fontSize: fs.sm2,
254254
color: amber.d3,
255255
}}
256256
>
@@ -260,7 +260,7 @@ export function Page2({ v }: { v: View }) {
260260
</V>
261261
<V
262262
style={{
263-
marginHorizontal: w["14"] + 8,
263+
marginHorizontal: w["22"],
264264
padding: w["10"],
265265
backgroundColor: blue.l4,
266266
borderRadius: 6,
@@ -277,7 +277,7 @@ export function Page2({ v }: { v: View }) {
277277
>
278278
The Power of Compound Growth
279279
</T>
280-
<T style={{ color: blue.d2, fontSize: fs.base + 1 }}>
280+
<T style={{ color: blue.d2, fontSize: fs.sm2 }}>
281281
These projections demonstrate how Better Giving's integrated approach
282282
compounds over time. Our organization could accumulate significant
283283
additional funds through the combination of reduced processing fees,

0 commit comments

Comments
 (0)