Skip to content

Commit 417f6ae

Browse files
HaudinFlorenceHaudinFlorence
committed
Take comments into account and fix various issues.
1 parent b54cef5 commit 417f6ae

File tree

8 files changed

+115
-102
lines changed

8 files changed

+115
-102
lines changed

‎src/components/fundable/GetAQuoteForm.tsx

Lines changed: 77 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,88 @@
11
import styles from "./styles.module.css";
22

33
export default function GetAQuoteForm() {
4-
return (
5-
<>
6-
<form
7-
action="https://formspree.io/f/xjvndwdq"
8-
method="POST"
9-
className={styles.get_a_quote_form}
10-
>
11-
<div className="form-group">
12-
<div>
13-
<label className={styles.get_a_quote_form_label}>Project name</label>
14-
</div>
15-
<div className={styles.input_container}>
16-
<input
17-
type="text"
18-
className={styles.small_input}
19-
name="Project name"
20-
id="Project name"
21-
/>
22-
</div>
23-
<div>
24-
<label className={styles.get_a_quote_form_label}>Your name</label>
25-
</div>
26-
<div className={styles.input_container}>
27-
<input
28-
type="text"
29-
className={styles.small_input}
30-
name="name"
31-
id="name"
32-
/>
33-
</div>
4+
return (
5+
<div className="flex-horizontally-centered">
6+
<form
7+
action="https://formspree.io/f/xjvndwdq"
8+
method="POST"
9+
className={styles.get_a_quote_form}
10+
>
11+
<div className="form-group">
12+
<div>
13+
<label className={styles.get_a_quote_form_label}>Project name</label>
14+
</div>
15+
<div className={styles.input_container}>
16+
<input
17+
type="text"
18+
className={styles.small_input}
19+
name="Project name"
20+
id="Project name"
21+
/>
3422
</div>
35-
<div className="form-group">
36-
<div>
37-
<label className={styles.get_a_quote_form_label}>Your company</label>
38-
</div>
39-
<div className={styles.input_container}>
40-
<input className={styles.small_input} name="company" id="company" />
41-
</div>
23+
<div>
24+
<label className={styles.get_a_quote_form_label}>Your name</label>
4225
</div>
43-
<div className="form-group">
44-
<div>
45-
<label className={styles.get_a_quote_form_label}>Your email</label>
46-
</div>
47-
<div className={styles.input_container}>
48-
<input
49-
type="text"
50-
className={styles.small_input}
51-
name="email"
52-
id="email"
53-
/>
54-
</div>
26+
<div className={styles.input_container}>
27+
<input
28+
type="text"
29+
className={styles.small_input}
30+
name="name"
31+
id="name"
32+
/>
5533
</div>
56-
<div className="form-group">
57-
<div>
58-
<label className={styles.get_a_quote_form_label}>Your phone number</label>
59-
</div>
60-
<div className={styles.input_container}>
61-
<input
62-
type="text"
63-
className={styles.small_input}
64-
name="phone-number"
65-
id="phone-number"
66-
/>
67-
</div>
34+
</div>
35+
<div className="form-group">
36+
<div>
37+
<label className={styles.get_a_quote_form_label}>Your company</label>
6838
</div>
69-
<div className="form-group">
70-
<div>
71-
<label className={styles.get_a_quote_form_label}>Your message to us</label>
72-
</div>
73-
<div>
74-
<textarea
75-
className={styles.large_input}
76-
placeholder="Please explain your interests in funding this project"
77-
name="message"
78-
id="message"
79-
></textarea>
80-
</div>
39+
<div className={styles.input_container}>
40+
<input className={styles.small_input} name="company" id="company" />
8141
</div>
42+
</div>
43+
<div className="form-group">
8244
<div>
83-
<div className={"flex-full-centered" + " "+ styles.send_button_container}>
84-
<input type="submit" value="SEND" className={"link-to-button" + " " + styles.send_button} />
45+
<label className={styles.get_a_quote_form_label}>Your email</label>
46+
</div>
47+
<div className={styles.input_container}>
48+
<input
49+
type="text"
50+
className={styles.small_input}
51+
name="email"
52+
id="email"
53+
/>
8554
</div>
55+
</div>
56+
<div className="form-group">
57+
<div>
58+
<label className={styles.get_a_quote_form_label}>Your phone number</label>
59+
</div>
60+
<div className={styles.input_container}>
61+
<input
62+
type="text"
63+
className={styles.small_input}
64+
name="phone-number"
65+
id="phone-number"
66+
/>
67+
</div>
68+
</div>
69+
<div className="form-group">
70+
<div>
71+
<label className={styles.get_a_quote_form_label}>Your message to us</label>
72+
</div>
73+
<div>
74+
<textarea
75+
className={styles.large_input}
76+
placeholder="Please explain your interests in funding this project"
77+
name="message"
78+
id="message"
79+
></textarea>
8680
</div>
87-
</form>
88-
</>
89-
);
90-
}
81+
</div>
82+
<div className={"flex-full-centered" + " " + styles.send_button_container}>
83+
<input type="submit" value="SEND" className={"link-to-button" + " " + styles.send_button} />
84+
</div>
85+
</form>
86+
</div>
87+
);
88+
}

‎src/components/fundable/GetAQuotePage.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,17 @@ import FundableProjects from ".";
1111
function GetAQuoteComponent({ project }) {
1212
return (
1313
<div className={styles.get_a_quote_dialog}>
14-
<div className={"row" + " " + "flex-horizontally-centered"}>
14+
<div className={"row"}>
1515
<div className={"col col--6" + " " + styles.get_a_quote_text_col_desktop}>
1616
<LargeProjectCardContent project={project} />
1717
</div>
1818
<div className={"col col--5 col--offset-1" + " " + styles.get_a_quote_form_col_desktop}>
1919
<h1 className={"padding-none"}> Get a quote</h1>
20-
<div className="flex-horizontally-centered"><GetAQuoteForm /></div>
20+
<div ><GetAQuoteForm /></div>
2121
</div>
2222
<div className={"col col--12" + " " + styles.get_a_quote_form_col_mobile}>
2323
<h1 className={"padding-none text--center"}> Get a quote</h1>
24-
<div className="flex-horizontally-centered"><GetAQuoteForm /></div>
24+
<div><GetAQuoteForm /></div>
2525
</div>
2626
</div>
2727
</div >

‎src/components/fundable/MenuSideBar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import styles from "./styles.module.css";
44

55
const sections = [
66
{ id: 'jupyter-ecosystem', label: 'Jupyter Ecosystem' },
7-
{ id: 'project-management', label: 'Project Management' },
7+
{ id: 'package-management', label: 'Package Management' },
88
];
99

1010
export default function MenuSideBar() {

‎src/components/fundable/SmallProjectCard.tsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,6 @@ export function SmallProjectCard({ project }) {
4747
</div>
4848
</div>
4949
</div>
50-
<div>
51-
<LinkToMoreInformation label={"Read more"} pageName={project.pageName} />
52-
</div>
5350
<div className={styles.project_information_container}>
5451
<div className="flex-full-centered">
5552
<BlueCaretIcon />
@@ -79,8 +76,8 @@ export function SmallProjectCard({ project }) {
7976
Indicative price
8077
</div>
8178
<div>
82-
<div className={styles.small_project_card_financed_at_text}>
83-
Financed at {project.currentFundingPercentage} %
79+
<div className={styles.small_project_card_funded_at_text}>
80+
Funded at {project.currentFundingPercentage} %
8481
</div>
8582
<div>
8683
<ProgressBar value={project.currentFundingPercentage} color={'var(--ifm-color-secondary-s1'} />
@@ -97,7 +94,7 @@ export function SmallProjectCard({ project }) {
9794
<div><DollarIcon width="35px" height="26px" /></div>
9895
<div className={styles.shareable_text}>
9996
{project.currentNbOfFunders === 0
100-
? 'The project is not supported yet'
97+
? 'This project does not have any backers yet'
10198
: `Supported by ${project.currentNbOfFunders}
10299
${project.currentNbOfFunders === 1 ? 'funder' : 'funders'}
103100
`}

‎src/components/fundable/styles.module.css

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,9 @@
8888
}
8989

9090
.large_project_card_description_container {
91-
background-color: #F1F1F1
91+
background-color: #F1F1F1;
92+
text-align: justify;
93+
padding: var(--ifm-spacing-md);
9294
}
9395

9496
.large_project_card_description p {
@@ -170,8 +172,11 @@
170172
background: var(--ifm-color-blue-jupyter);
171173
}
172174

175+
176+
173177
.get_a_quote_form {
174178
margin-top: var(--ifm-spacing-xl);
179+
justify-content: center;
175180
}
176181

177182
.get_a_quote_form_label {
@@ -242,7 +247,7 @@
242247
text-transform: uppercase;
243248
}
244249

245-
.small_project_card_financed_at_text {
250+
.small_project_card_funded_at_text {
246251
font-family: var(--ifm-font-family-roboto);
247252
font-size: var(--ifm-font-size-small);
248253
font-style: normal;
@@ -335,9 +340,10 @@
335340
.large_project_card {
336341
width: 90vw;
337342
padding: var(--ifm-spacing-xl);
338-
overflow-y: auto;
339343
border-radius: 8px;
340344
padding: var(--ifm-spacing-xl) var(--ifm-spacing-xl);
345+
overflow-y: auto;
346+
max-height: 95vh;
341347
}
342348

343349
.small_input {
@@ -352,10 +358,15 @@
352358
border-radius: 4px;
353359
}
354360

361+
.send_button_containder {
362+
width: 300px;
363+
}
364+
355365
.get_a_quote_dialog {
356366
width: 90vw;
357367
padding: 40px;
358368
overflow-y: auto;
369+
max-height: 95vh;
359370
}
360371

361372
.get_a_quote_text_col_desktop {
@@ -396,16 +407,17 @@
396407
.large_project_card {
397408
width: 80vw;
398409
padding: 40px;
399-
overflow-y: auto;
400410
border-radius: 8px;
401411
padding: var(--ifm-spacing-xl) var(--ifm-spacing-xl);
412+
overflow-y: auto;
413+
max-height: 95vh;
402414
}
403415

404416
.main_area_desktop {
405417
display: none
406418
}
407419

408-
.small_input {
420+
.small_input {
409421
width: 400px;
410422
height: 56px;
411423
border-radius: 4px;
@@ -421,10 +433,11 @@
421433
display: none
422434
}
423435

424-
.get_a_quote_dialog {
436+
.get_a_quote_dialog {
425437
width: 80vw;
426438
padding: 40px;
427439
overflow-y: auto;
440+
max-height: 95vh;
428441
}
429442

430443
.get_a_quote_text_col_desktop {
@@ -455,10 +468,11 @@
455468
}
456469

457470
.large_project_card {
458-
width: 1000px;
471+
width: 800px;
459472
padding: 40px;
460-
overflow-y: auto;
461473
border-radius: 8px;
474+
overflow-y: auto;
475+
max-height: 95vh;
462476
}
463477

464478
.main_area_mobile {
@@ -479,18 +493,22 @@
479493

480494
.send_button_container {
481495
height: 59px;
482-
width: 508px;
483-
margin: var(--ifm-spacing-xl) 0;
496+
width: 400px;
484497
}
485498

486499
.get_a_quote_dialog {
487500
width: 90vw;
488501
padding: 40px;
489502
overflow-y: auto;
503+
max-height: 95vh;
490504
}
491505

492506
.get_a_quote_form_col_mobile {
493507
display: none;
494508
padding: var(--ifm-spacing-md)
495509
}
510+
511+
.get_a_quote_form_col_desktop {
512+
justify-content: center;
513+
}
496514
}

0 commit comments

Comments
 (0)