Skip to content

Commit b69a49e

Browse files
HaudinFlorenceSylvainCorlay
HaudinFlorence
authored and
SylvainCorlay
committed
Fix style issues and keep on working on dark mode.
1 parent ec0d246 commit b69a49e

25 files changed

+326
-243
lines changed

‎.docusaurus/client-manifest.json

+126-126
Large diffs are not rendered by default.

‎src/components/about/ArrowLeftHeader.tsx

+21-7
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,29 @@
11
import Link from "@docusaurus/Link";
2-
import ArrowLeft from "@site/static/img/icons/ArrowLeft.svg";
2+
import useBaseUrl from "@docusaurus/useBaseUrl";
3+
import ThemedImage from "@theme/ThemedImage";
4+
import ArrowLeft from "@site/static/img/icons/ArrowLeft.svg"
35

4-
export default function ArrowLeftHeader({route}) {
6+
7+
/*export function ArrowLeft() {
8+
return (
9+
<ThemedImage
10+
alt="Left Arrow to got back on the previous page"
11+
sources={{
12+
light: useBaseUrl("/img/icons/ArrowLeft-light.svg"),
13+
dark: useBaseUrl("/img/icons/ArrowLeft-dark.svg"),
14+
}}
15+
width={"32px"}
16+
height={"32px"}
17+
style={{ marginTop: "16px", marginLeft: "20px" }}
18+
/>
19+
);
20+
}*/
21+
22+
export default function ArrowLeftHeader({ route }) {
523
return (
624
<div className="header-page-mobile">
725
<Link href={route}>
8-
<ArrowLeft
9-
width={"32px"}
10-
height={"32px"}
11-
style={{ marginTop: "16px", marginLeft: "20px" }}
12-
/>
26+
<ArrowLeft />
1327
</Link>
1428
</div>
1529
);

‎src/components/about/FourValues.tsx

+24-16
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,12 @@ const cardColors = ["yellow", "white", "yellow", "white"];
7575

7676
export function FourValuesMobile() {
7777
return (
78-
<div className="four_values_container">
79-
<ul className={"row" + " " + styles.row_custom}>
78+
<div className={styles.four_values_container}>
79+
<ul
80+
className={
81+
"row" + " " + "row-flex-full-centered" + " " + "row-padding-none"
82+
}
83+
>
8084
{valuesNames.map((value, index) => (
8185
<li className="cards_list" key={index}>
8286
<div className="col">
@@ -96,27 +100,31 @@ export function FourValuesMobile() {
96100

97101
export function FourValuesDesktop() {
98102
return (
99-
<div className="main-container-with-margins">
100-
<div className="four_values_container">
101-
<div className="row">
102-
<div className="col col--10 col--offset-1">
103-
<h1 className="h1-padding-none">Our values </h1>
104-
</div>
103+
<div className={styles.four_values_container}>
104+
<div className="row">
105+
<div className="col">
106+
<h1 className="h1-padding-none">Our values </h1>
105107
</div>
106-
<ul className={"row" + " " + styles.row_custom}>
107-
{valuesNames.map((value, index) => (
108-
<li className="cards_list" key={index}>
109-
<div className="col">
108+
</div>
109+
<ul
110+
className={
111+
"row" + " " + "row-padding-none" + " " + styles.row_with_margins
112+
}
113+
>
114+
{valuesNames.map((value, index) => (
115+
<li className="cards_list" key={index}>
116+
<div className="col">
117+
<div className={styles.value_card_container}>
110118
<ValueCardDesktop
111119
value={value}
112120
ValuePicture={valuesPictures[index]}
113121
ValueComponent={valuesDescriptions[index]}
114122
/>
115123
</div>
116-
</li>
117-
))}
118-
</ul>
119-
</div>
124+
</div>
125+
</li>
126+
))}
127+
</ul>
120128
</div>
121129
);
122130
}

‎src/components/about/LargePortraitCard.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,17 @@ export function Distinction({ person }) {
2121
))}
2222
</ul>
2323
);
24-
} else return (<div></div>);
24+
} else return <div></div>;
2525
}
2626
export default function LargePortraitCard({ person, avatarUrl, BioComponent }) {
2727
return (
2828
<div className={styles.large_portrait_card}>
2929
<div className={"container"}>
30-
<div className={"row" + " " + styles.row_custom}>
30+
<div
31+
className={
32+
"row" + " " + "row-padding-none" + " " + styles.row_with_margins
33+
}
34+
>
3135
<div className="col col--12 col--offset-1">
3236
<div className={styles.large_card_complete_name}>
3337
{person.completeName}

‎src/components/about/SubTeam.tsx

+21-11
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,21 @@ import Popup from "reactjs-popup";
44
import LargePortraitCard from "./LargePortraitCard";
55
import Link from "@docusaurus/Link";
66

7-
87
export function SubTeamDesktop({
98
description,
109
subTeam,
1110
subTeamAvatarsUrls,
1211
subTeamBioComponents,
1312
}) {
1413
return (
15-
<div className="main-container-with-margins">
1614
<div className={styles.subteam_component}>
1715
<h2 style={{ textAlign: "center" }}> {description}</h2>
1816
<div className={"container" + " " + styles.subteam_container}>
19-
<ul className={"row" + " " + styles.row_custom}>
17+
<ul
18+
className={
19+
"row" + " " + "row-padding-none" + " " + styles.row_with_margins
20+
}
21+
>
2022
{subTeam.map((person, index) => (
2123
<li className="cards_list" key={index}>
2224
<div className="col">
@@ -30,7 +32,12 @@ export function SubTeamDesktop({
3032
/>
3133
</div>
3234
}
33-
overlayStyle={{ backgroundColor: "grey", opacity: "0.4", width: "100%", height: "100%"}}
35+
overlayStyle={{
36+
backgroundColor: "grey",
37+
opacity: "0.4",
38+
width: "100%",
39+
height: "100%",
40+
}}
3441
position={"center center"}
3542
>
3643
<LargePortraitCard
@@ -45,7 +52,6 @@ export function SubTeamDesktop({
4552
</ul>
4653
</div>
4754
</div>
48-
</div>
4955
);
5056
}
5157

@@ -54,15 +60,19 @@ export function SubTeamMobile({ description, subTeamAvatarsUrls, subTeam }) {
5460
<div className={styles.subteam_component}>
5561
<h2 style={{ textAlign: "center" }}> {description}</h2>
5662
<div className={"container" + " " + styles.subteam_container}>
57-
<ul className={"row" + " " + styles.row_custom}>
63+
<ul
64+
className={
65+
"row" + " " + "row-flex-full-centered" + " " + "row-padding-none"
66+
}
67+
>
5868
{subTeam.map((person, index) => (
5969
<li className="cards_list" key={index}>
6070
<div className="col">
61-
<Link href={'/about/' + person.firstName}>
62-
<SmallPortraitCard
63-
person={person}
64-
avatarUrl={subTeamAvatarsUrls[index]}
65-
></SmallPortraitCard>
71+
<Link href={"/about/" + person.firstName}>
72+
<SmallPortraitCard
73+
person={person}
74+
avatarUrl={subTeamAvatarsUrls[index]}
75+
></SmallPortraitCard>
6676
</Link>
6777
</div>
6878
</li>

‎src/components/about/index.tsx

+11-3
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,14 @@ export function AboutDesktop() {
3737
<div>
3838
<div className="main-container-with-margins">
3939
<div className={"container" + " " + styles.about_container}>
40-
<div className="row">
41-
<div className="col col--10 col--offset-1">
40+
<div className={"row"}>
41+
<div className={"col" + " " + "col-flex-full-centered"}>
4242
<FourValues />
43+
</div>
44+
</div>
4345

46+
<div className="row">
47+
<div className="col col--10 col--offset-1">
4448
<h1 className="h1-centered">Meet the QuantStack team</h1>
4549
<h4>
4650
A team of outliers, leaders in software projects adopted at the
@@ -99,7 +103,11 @@ export function AboutDesktop() {
99103
export function AboutMobile() {
100104
return (
101105
<div className={"container" + " " + styles.about_container}>
102-
<div className={"row" + " " + styles.row_custom}>
106+
<div
107+
className={
108+
"row" + " " + "row-flex-full-centered" + " " + "row-padding-none"
109+
}
110+
>
103111
<div className={"col col--12" + " " + "col--padding-none"}>
104112
<h2 className={styles.h2_custom}>
105113
A team of outliers, leaders in software projects adopted at the

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

+9-14
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,6 @@
4040
padding: var(--ifm-spacing-lg) var(--ifm-spacing-2xl);
4141
}
4242

43-
.row_custom {
44-
display: flex;
45-
align-items: center;
46-
justify-content: center;
47-
padding: 0;
48-
}
49-
5043
.join_the_team_container {
5144
background-color: var(--ifm-color-secondary-s1);
5245
padding: var(--ifm-spacing-3xl) var(--ifm-spacing-xl);
@@ -69,7 +62,6 @@
6962
}
7063

7164
.value_text {
72-
text-align: center;
7365
font-family: var(--ifm-font-family-roboto);
7466
font-size: 12px;
7567
font-style: normal;
@@ -80,6 +72,7 @@
8072

8173
.value_text p {
8274
color: var(--ifm-text-color-value-card);
75+
text-align: center;
8376
}
8477

8578
.value_image {
@@ -135,7 +128,6 @@
135128
}
136129

137130
.value_text {
138-
text-align: center;
139131
font-family: var(--ifm-font-family-roboto);
140132
font-size: 6px;
141133
font-style: normal;
@@ -146,14 +138,17 @@
146138

147139
.value_text p {
148140
color: var(--ifm-text-color-value-card);
141+
text-align: center;
149142
}
150143

151-
.row_custom {
152-
margin-top: var(--ifm-spacing-4xl);
153-
margin-bottom: var(--ifm-spacing-4xl);
154-
padding: 0;
144+
.row_with_margins {
145+
margin-top: var(--ifm-spacing-4xl) 0;
155146
}
156147

148+
div .row {
149+
margin-left: 0;
150+
margin-right: 0;
151+
}
157152
.about_container {
158153
margin-top: var(--ifm-spacing-6xl);
159154
}
@@ -266,7 +261,7 @@
266261
}
267262

268263
.four_values_container {
269-
margin-top: var(--ifm-spacing-5xl);
264+
margin: var(--ifm-spacing-5xl) 0;
270265
}
271266

272267
.join_the_team_container {

‎src/components/blog/BlogpostCard.tsx

+18-4
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import React from "react";
44
import styles from "./styles.module.css";
55
import Link from "@docusaurus/Link";
6-
import useBaseUrl from '@docusaurus/useBaseUrl';
6+
import useBaseUrl from "@docusaurus/useBaseUrl";
77

88
export default function BlogpostCard({ blogpost, timeIndex }) {
99
return (
@@ -14,11 +14,26 @@ export default function BlogpostCard({ blogpost, timeIndex }) {
1414
<div className={styles.blog_time_index}>{timeIndex}</div>
1515
<Link href={blogpost.url}>
1616
<div className="container">
17-
<div className={"row" + " " + styles.row_custom}></div>
17+
<div
18+
className={
19+
"row" +
20+
" " +
21+
"row-flex-full-centered" +
22+
" " +
23+
"row-padding-none" +
24+
" " +
25+
"row-margin-none"
26+
}
27+
></div>
1828

1929
<div className={styles.blogpost_image_container}>
2030
<div className={styles.blogpost_image}>
21-
<img src={useBaseUrl(blogpost.image)} id={blogpost.imageID} width={blogpost.imageRenderedWidth} height={blogpost.imageRenderedHeight} />
31+
<img
32+
src={useBaseUrl(blogpost.image)}
33+
id={blogpost.imageID}
34+
width={blogpost.imageRenderedWidth}
35+
height={blogpost.imageRenderedHeight}
36+
/>
2237
</div>
2338
</div>
2439

@@ -44,4 +59,3 @@ export default function BlogpostCard({ blogpost, timeIndex }) {
4459
</div>
4560
);
4661
}
47-

0 commit comments

Comments
 (0)