Skip to content

Commit 0738534

Browse files
HaudinFlorenceHaudinFlorence
committed
Simplify the logics around css variables and keep on fixing some styling issues.
1 parent 7892210 commit 0738534

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+1830
-604
lines changed

‎src/components/about/Avatar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Link from "@docusaurus/Link";
33

44
export default function Avatar({ person }) {
55
return (
6-
<div className={styles.avatar_container}>
6+
<div className="flex-full-centered">
77
<div className={styles.avatar}>
88
<img src={require(person.avatarRoute).default} width={"160px"} height={"160px"}></img>
99
</div>

‎src/components/about/FourValues.tsx

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -71,16 +71,12 @@ export function OptimismPicture() {
7171
}
7272

7373
const valuesNames = ["Openness", "Science", "Optimism", "Integrity"];
74-
const cardColors = ["yellow", "white", "yellow", "white"];
74+
const cardColors = ["white", "yellow", "white", "yellow"];
7575

7676
export function FourValuesMobile() {
7777
return (
7878
<div className={styles.four_values_container}>
79-
<ul
80-
className={
81-
"row" + " " + "row-flex-full-centered" + " " + "row-padding-none"
82-
}
83-
>
79+
<ul className={"row" + " " + "flex-full-centered" + " " + "padding-none"}>
8480
{valuesNames.map((value, index) => (
8581
<li className="cards_list" key={index}>
8682
<div className="col">
@@ -103,13 +99,11 @@ export function FourValuesDesktop() {
10399
<div className={styles.four_values_container}>
104100
<div className="row">
105101
<div className="col">
106-
<h1 className="h1-padding-none">Our values </h1>
102+
<h1 className="padding-none">Our values </h1>
107103
</div>
108104
</div>
109105
<ul
110-
className={
111-
"row" + " " + "row-padding-none" + " " + styles.row_with_margins
112-
}
106+
className={"row" + " " + "padding-none" + " " + styles.row_with_margins}
113107
>
114108
{valuesNames.map((value, index) => (
115109
<li className="cards_list" key={index}>

‎src/components/about/LargePortraitCard.tsx

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export default function LargePortraitCard({ person, avatarUrl, BioComponent }) {
2929
<div className={"container"}>
3030
<div
3131
className={
32-
"row" + " " + "row-padding-none" + " " + styles.row_with_margins
32+
"row" + " " + "padding-none" + " " + styles.row_with_margins
3333
}
3434
>
3535
<div className="col col--12 col--offset-1">
@@ -41,13 +41,9 @@ export default function LargePortraitCard({ person, avatarUrl, BioComponent }) {
4141
</div>
4242
<div className="row" style={{ marginBottom: "var(--ifm-spacing-4xl)" }}>
4343
<div
44-
className="col col--3 col--offset-1"
45-
style={{
46-
display: "flex",
47-
justifyContent: "center",
48-
}}
44+
className={"col col--3 col--offset-1" + " " + "flex-full-centered"}
4945
>
50-
<div className={styles.avatar_container}>
46+
<div className="flex-full-centered">
5147
<img src={avatarUrl} className={styles.avatar} />
5248
</div>
5349
</div>

‎src/components/about/SmallPortraitCard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import SocialMediaContacts from "./SocialMediaContacts";
44
export default function SmallPortraitCard({ person, avatarUrl }) {
55
return (
66
<div className={styles.small_portrait_card}>
7-
<div className={styles.avatar_container}>
7+
<div className="flex-full-centered">
88
<div className={styles.avatar}>
99
<img src={avatarUrl} width={"160px"} height={"160px"}/>
1010
</div>

‎src/components/about/SocialMediaContacts.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import XPicture from "@site/static/img/socialmedias/X.svg";
88
export default function SocialMediaContacts({ person }) {
99
return (
1010
<>
11-
<div className = {styles.social_media_contacts_container}>
11+
<div className = "flex-full-centered">
1212
<Link href={person.githubLink}>{<GHPicture/>}</Link>
1313
<Link href={person.LinkedInLink}>
1414
{<LinkedInPicture/>}

‎src/components/about/SubTeam.tsx

Lines changed: 42 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -11,59 +11,57 @@ export function SubTeamDesktop({
1111
subTeamBioComponents,
1212
}) {
1313
return (
14-
<div className={styles.subteam_component}>
15-
<h2 style={{ textAlign: "center" }}> {description}</h2>
16-
<div className={"container" + " " + styles.subteam_container}>
17-
<ul
18-
className={
19-
"row" + " " + "row-padding-none" + " " + styles.row_with_margins
20-
}
21-
>
22-
{subTeam.map((person, index) => (
23-
<li className="cards_list" key={index}>
24-
<div className="col">
25-
<Popup
26-
trigger={
27-
<div>
28-
{" "}
29-
<SmallPortraitCard
30-
person={person}
31-
avatarUrl={subTeamAvatarsUrls[index]}
32-
/>
33-
</div>
34-
}
35-
overlayStyle={{
36-
backgroundColor: "grey",
37-
opacity: "0.4",
38-
width: "100%",
39-
height: "100%",
40-
}}
41-
position={"center center"}
42-
>
43-
<LargePortraitCard
44-
person={person}
45-
avatarUrl={subTeamAvatarsUrls[index]}
46-
BioComponent={subTeamBioComponents[index]}
47-
></LargePortraitCard>
48-
</Popup>
49-
</div>
50-
</li>
51-
))}
52-
</ul>
53-
</div>
14+
<div className={styles.subteam_component}>
15+
<h2 className="text-centered"> {description}</h2>
16+
<div className={"container" + " " + styles.subteam_container}>
17+
<ul
18+
className={
19+
"row" + " " + "padding-none" + " " + styles.row_with_margins
20+
}
21+
>
22+
{subTeam.map((person, index) => (
23+
<li className="cards_list" key={index}>
24+
<div className="col">
25+
<Popup
26+
trigger={
27+
<div>
28+
<SmallPortraitCard
29+
person={person}
30+
avatarUrl={subTeamAvatarsUrls[index]}
31+
/>
32+
</div>
33+
}
34+
overlayStyle={{
35+
backgroundColor:
36+
"var(--ifm-background-color-popup-overlay)",
37+
opacity: "0.4",
38+
width: "100%",
39+
height: "100%",
40+
}}
41+
position={"center center"}
42+
>
43+
<LargePortraitCard
44+
person={person}
45+
avatarUrl={subTeamAvatarsUrls[index]}
46+
BioComponent={subTeamBioComponents[index]}
47+
></LargePortraitCard>
48+
</Popup>
49+
</div>
50+
</li>
51+
))}
52+
</ul>
5453
</div>
54+
</div>
5555
);
5656
}
5757

5858
export function SubTeamMobile({ description, subTeamAvatarsUrls, subTeam }) {
5959
return (
6060
<div className={styles.subteam_component}>
61-
<h2 style={{ textAlign: "center" }}> {description}</h2>
61+
<h2 className="text-centered"> {description}</h2>
6262
<div className={"container" + " " + styles.subteam_container}>
6363
<ul
64-
className={
65-
"row" + " " + "row-flex-full-centered" + " " + "row-padding-none"
66-
}
64+
className={"row" + " " + "flex-full-centered" + " " + "padding-none"}
6765
>
6866
{subTeam.map((person, index) => (
6967
<li className="cards_list" key={index}>

‎src/components/about/ValueCard.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@ import { useEffect, useState } from "react";
44
export function ValueCardDesktop({ value, ValuePicture, ValueComponent }) {
55
return (
66
<div className={"card " + styles.value_card}>
7-
<div className={styles.value_image}>
7+
<div
8+
className={"flex-full-centered"}
9+
style={{ marginBottom: "var(--ifm-spacing-lg)" }}
10+
>
811
<ValuePicture />
912
</div>
1013
<div className={styles.value_header}>{value}</div>
@@ -33,7 +36,10 @@ export function ValueCardMobile({
3336
: styles.value_card_white)
3437
}
3538
>
36-
<div className={styles.value_image}>
39+
<div
40+
className={"flex-full-centered"}
41+
style={{ marginBottom: "var(--ifm-spacing-lg)" }}
42+
>
3743
<ValuePicture />
3844
</div>
3945
<div className={styles.value_header}>{value}</div>

‎src/components/about/index.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,14 @@ export function AboutDesktop() {
3838
<div className="main-container-with-margins">
3939
<div className={"container" + " " + styles.about_container}>
4040
<div className={"row"}>
41-
<div className={"col" + " " + "col-flex-full-centered"}>
41+
<div className={"col" + " " + "flex-full-centered"}>
4242
<FourValues />
4343
</div>
4444
</div>
4545

4646
<div className="row">
4747
<div className="col col--10 col--offset-1">
48-
<h1 className="h1-centered">Meet the QuantStack team</h1>
48+
<h1 className="text-centered">Meet the QuantStack team</h1>
4949
<h4>
5050
A team of outliers, leaders in software projects adopted at the
5151
global scale, benefiting millions of people worldwide.
@@ -79,9 +79,9 @@ export function AboutDesktop() {
7979
<div className={styles.join_the_team_container}>
8080
<h1
8181
className={
82-
"h1-centered" +
82+
"text-centered" +
8383
" " +
84-
"h1-padding-none" +
84+
"padding-none" +
8585
" " +
8686
"h1-margin-none" +
8787
" " +
@@ -105,7 +105,7 @@ export function AboutMobile() {
105105
<div className={"container" + " " + styles.about_container}>
106106
<div
107107
className={
108-
"row" + " " + "row-flex-full-centered" + " " + "row-padding-none"
108+
"row" + " " + "flex-full-centered" + " " + "padding-none"
109109
}
110110
>
111111
<div className={"col col--12" + " " + "col--padding-none"}>
@@ -116,7 +116,7 @@ export function AboutMobile() {
116116
</div>
117117
</div>
118118
<div className="row">
119-
<div className={"col col--10 col--offset-1" + " " + "col-padding-none"}>
119+
<div className={"col col--10 col--offset-1" + " " + "padding-none"}>
120120
<div className={styles.four_values_div}>
121121
<FourValues />
122122
</div>

0 commit comments

Comments
 (0)