Skip to content
This repository was archived by the owner on Jan 19, 2025. It is now read-only.

Commit dfbe58c

Browse files
chiciochicio
committed
Multiple fixes for dark/light themes 🚀
1 parent d8b8fd2 commit dfbe58c

File tree

11 files changed

+3835
-52
lines changed

11 files changed

+3835
-52
lines changed

‎graphql-types.ts‎

Lines changed: 3747 additions & 0 deletions
Large diffs are not rendered by default.

‎src/components/design-system/atoms/icon.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,8 @@ import { StyledIconBase } from "@styled-icons/styled-icon";
44
export const Icon = styled.div`
55
${StyledIconBase} {
66
color: ${(props) => props.theme.light.textAbovePrimaryColor};
7-
}
7+
8+
@media (prefers-color-scheme: dark) {
9+
color: ${(props) => props.theme.dark.textAbovePrimaryColor};
10+
}
811
`;

‎src/components/design-system/atoms/standard-link-style.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export const standardLinkStyle = css`
44
font-size: ${(props) => props.theme.fontSizes[2]};
55
color: ${(props) => props.theme.light.accentColor};
66
text-decoration: none;
7+
line-height: ${(props) => props.theme.lineHeight};
78
89
@media (prefers-color-scheme: dark) {
910
color: ${(props) => props.theme.dark.accentColor};

‎src/components/design-system/molecules/page-title.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,7 @@ import styled from "styled-components";
22
import { Heading1 } from "../atoms/heading1";
33

44
export const PageTitle = styled(Heading1)`
5+
margin-left: 0;
6+
margin-right: 0;
57
margin-bottom: ${(props) => props.theme.spacing[4]};
68
`;

‎src/components/design-system/molecules/project.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ type ProjectProps = ProjectContainerProps & {
4848
};
4949

5050
const CallToActionContainer = styled.div`
51-
margin: ${(props) => props.theme.spacing[5]} 0;
51+
margin: ${(props) => props.theme.spacing[6]} 0;
5252
`;
5353

5454
export const Project: React.FC<ProjectProps> = ({

‎src/components/design-system/molecules/tag.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const TagLink = styled(StandardInternalLink)<TagContentProps>`
2424

2525
const TagText = styled.span<TagContentProps>`
2626
background-color: ${(props) => props.theme.light.primaryColor};
27-
color: ${(props) => props.theme.light.primaryColorText};
27+
color: ${(props) => props.theme.light.textAbovePrimaryColor};
2828
margin-right: ${(props) => props.theme.spacing[0]};
2929
margin-bottom: ${(props) => props.theme.spacing[0]};
3030
border-radius: 3px;
@@ -38,7 +38,12 @@ const TagText = styled.span<TagContentProps>`
3838
display: block;
3939
margin-right: ${(props) => props.theme.spacing[4]};
4040
margin-bottom: ${(props) => props.theme.spacing[4]};
41-
`}
41+
`};
42+
43+
@media (prefers-color-scheme: dark) {
44+
background-color: ${(props) => props.theme.dark.primaryColor};
45+
color: ${(props) => props.theme.dark.textAbovePrimaryColor};
46+
}
4247
`;
4348

4449
type TagProps = TagContentProps & {

‎src/components/design-system/organism/footer.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,14 @@ const FooterAuthorDescription = styled.div`
4646
}
4747
`;
4848

49+
const MadeWithLoveParagraph = styled(Paragraph)`
50+
color: ${(props) => props.theme.light.textAbovePrimaryColor};
51+
52+
@media (prefers-color-scheme: dark) {
53+
color: ${(props) => props.theme.dark.textAbovePrimaryColor};
54+
}
55+
`;
56+
4957
interface FooterProps {
5058
author: string;
5159
trackingCategory: string;
@@ -127,7 +135,7 @@ export const Footer: React.FC<FooterProps> = ({ author, trackingCategory }) => (
127135
/>
128136
</FooterContentContainer>
129137
<FooterContentContainer>
130-
<Paragraph>{`Made with 💝 by ${author} 'Chicio'`}</Paragraph>
138+
<MadeWithLoveParagraph>{`Made with 💝 by ${author} 'Chicio'`}</MadeWithLoveParagraph>
131139
</FooterContentContainer>
132140
</FooterAuthorDescription>
133141
</FooterContainer>

‎src/components/design-system/organism/technologies.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,11 @@ const TechnologiesContainer = styled(ContainerFluid)`
1919
const TechnologyParagraph = styled(Paragraph)`
2020
text-align: center;
2121
margin-bottom: ${(props) => props.theme.spacing[7]};
22+
color: ${(props) => props.theme.light.textAbovePrimaryColor};
23+
24+
@media (prefers-color-scheme: dark) {
25+
color: ${(props) => props.theme.dark.textAbovePrimaryColor};
26+
}
2227
2328
@media (min-width: 992px) {
2429
padding: 0 ${(props) => props.theme.spacing[12]};

‎src/components/design-system/organism/timeline.tsx‎

Lines changed: 56 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const TimelineContainer = styled.ul`
3131
width: 3px;
3232
left: 50%;
3333
margin-left: -1.5px;
34+
background-color: ${(props) => props.theme.light.dividerColor};
3435
}
3536
3637
@media (min-width: 992px) {
@@ -47,7 +48,7 @@ const TimelineContainer = styled.ul`
4748
background-color: ${(props) => props.theme.dark.generalBackground};
4849
4950
&:before {
50-
background-color: ${(props) => props.theme.dark.generalBackgroundLight};
51+
background-color: ${(props) => props.theme.dark.dividerColor};
5152
}
5253
}
5354
`;
@@ -106,26 +107,6 @@ const TimelinePanel = styled.div<TimelinePanelProps>`
106107
content: " ";
107108
}
108109
109-
${(props) =>
110-
props.inverted &&
111-
css`
112-
float: right;
113-
114-
&:before {
115-
border-right-width: 15px;
116-
border-left-width: 0;
117-
left: -15px;
118-
right: auto;
119-
}
120-
121-
&:after {
122-
border-right-width: 0;
123-
border-left-width: 14px;
124-
left: -14px;
125-
right: auto;
126-
}
127-
`};
128-
129110
@media (max-width: 992px) {
130111
width: calc(100% - 90px);
131112
width: -moz-calc(100% - 90px);
@@ -134,8 +115,8 @@ const TimelinePanel = styled.div<TimelinePanelProps>`
134115
135116
&:before {
136117
border-left-width: 0;
137-
border-right-width: 15px;
138-
left: -15px;
118+
border-right-width: 14px;
119+
left: -14px;
139120
right: auto;
140121
}
141122
@@ -147,6 +128,26 @@ const TimelinePanel = styled.div<TimelinePanelProps>`
147128
}
148129
}
149130
131+
${(props) =>
132+
props.inverted &&
133+
css`
134+
float: right;
135+
136+
&:before {
137+
border-left-width: 0;
138+
border-right-width: 14px;
139+
left: -14px;
140+
right: auto;
141+
}
142+
143+
&:after {
144+
border-left-width: 0;
145+
border-right-width: 14px;
146+
left: -13px;
147+
right: auto;
148+
}
149+
`};
150+
150151
@media (prefers-color-scheme: dark) {
151152
background-color: ${(props) => props.theme.dark.generalBackgroundLight};
152153
border: ${(props) => props.theme.dark.dividerColor} 1px solid;
@@ -164,26 +165,6 @@ const TimelinePanel = styled.div<TimelinePanelProps>`
164165
solid;
165166
}
166167
167-
${(props) =>
168-
props.inverted &&
169-
css`
170-
float: right;
171-
172-
&:before {
173-
border-left-width: 0;
174-
border-right-width: 14px;
175-
left: -14px;
176-
right: auto;
177-
}
178-
179-
&:after {
180-
border-left-width: 0;
181-
border-right-width: 14px;
182-
left: -14px;
183-
right: auto;
184-
}
185-
`};
186-
187168
@media (max-width: 992px) {
188169
width: calc(100% - 90px);
189170
width: -moz-calc(100% - 90px);
@@ -204,12 +185,32 @@ const TimelinePanel = styled.div<TimelinePanelProps>`
204185
right: auto;
205186
}
206187
}
188+
189+
${(props) =>
190+
props.inverted &&
191+
css`
192+
float: right;
193+
194+
&:before {
195+
border-left-width: 0;
196+
border-right-width: 14px;
197+
left: -14px;
198+
right: auto;
199+
}
200+
201+
&:after {
202+
border-left-width: 0;
203+
border-right-width: 14px;
204+
left: -13px;
205+
right: auto;
206+
}
207+
`};
207208
}
208209
`;
209210

210211
const TimelineBadge = styled.div`
211212
background-color: ${(props) => props.theme.light.primaryColor};
212-
color: ${(props) => props.theme.light.primaryColorText};
213+
color: ${(props) => props.theme.light.textAbovePrimaryColor};
213214
width: 40px;
214215
height: 40px;
215216
line-height: 40px;
@@ -224,7 +225,7 @@ const TimelineBadge = styled.div`
224225
225226
@media (prefers-color-scheme: dark) {
226227
background-color: ${(props) => props.theme.dark.primaryColor};
227-
color: ${(props) => props.theme.dark.primaryColorText};
228+
color: ${(props) => props.theme.dark.textAbovePrimaryColor};
228229
}
229230
230231
@media (max-width: 992px) {
@@ -275,6 +276,9 @@ export const Timeline: React.FC = () => {
275276
display: "block",
276277
backgroundColor: "#fff",
277278
};
279+
const imgContainerStyle = {
280+
border: "1px solid gray",
281+
};
278282

279283
return (
280284
<TimelineContentContainer>
@@ -286,6 +290,7 @@ export const Timeline: React.FC = () => {
286290
src={"../../../images/carrier/lastminute-group.png"}
287291
alt={"lastminute"}
288292
imgStyle={imgStyle}
293+
style={imgContainerStyle}
289294
/>
290295
<TimelineTitle>Lastminute.com group</TimelineTitle>
291296
<TimelineSubtitle>Mobile application developer</TimelineSubtitle>
@@ -302,6 +307,7 @@ export const Timeline: React.FC = () => {
302307
src={"../../../images/carrier/unimib.jpg"}
303308
alt={"unimib"}
304309
imgStyle={imgStyle}
310+
style={imgContainerStyle}
305311
/>
306312
<TimelineTitle>Milano-Bicocca University</TimelineTitle>
307313
<TimelineSubtitle>
@@ -329,6 +335,7 @@ export const Timeline: React.FC = () => {
329335
src={"../../../images/carrier/condenast.png"}
330336
alt={"condenast"}
331337
imgStyle={imgStyle}
338+
style={imgContainerStyle}
332339
/>
333340
<TimelineTitle>Condé Nast Italia</TimelineTitle>
334341
<TimelineSubtitle>Mobile/Web application developer</TimelineSubtitle>
@@ -347,6 +354,7 @@ export const Timeline: React.FC = () => {
347354
src={"../../../images/carrier/shi.png"}
348355
alt={"shi"}
349356
imgStyle={imgStyle}
357+
style={imgContainerStyle}
350358
/>
351359
<TimelineTitle>SHI</TimelineTitle>
352360
<TimelineSubtitle>iOS/Web Developer</TimelineSubtitle>
@@ -366,6 +374,7 @@ export const Timeline: React.FC = () => {
366374
src={"../../../images/carrier/bottinelli-informatica.png"}
367375
alt={"bottinelli informatica"}
368376
imgStyle={imgStyle}
377+
style={imgContainerStyle}
369378
/>
370379
<TimelineTitle>Bottinelli informatica</TimelineTitle>
371380
<TimelineSubtitle>Developer</TimelineSubtitle>
@@ -379,6 +388,7 @@ export const Timeline: React.FC = () => {
379388
src={"../../../images/carrier/avanade.png"}
380389
alt={"avanade"}
381390
imgStyle={imgStyle}
391+
style={imgContainerStyle}
382392
/>
383393
<TimelineTitle>Avanade</TimelineTitle>
384394
<TimelineSubtitle>PMO Consultant</TimelineSubtitle>
@@ -414,6 +424,7 @@ export const Timeline: React.FC = () => {
414424
src={"../../../images/carrier/insubria.png"}
415425
alt={"insubria"}
416426
imgStyle={imgStyle}
427+
style={imgContainerStyle}
417428
/>
418429
<TimelineTitle>Insubria University</TimelineTitle>
419430
<TimelineSubtitle>

‎src/components/design-system/templates/blog-page.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { WindowLocation } from "@reach/router";
1010

1111
const BlogContainer = styled(Container)`
1212
margin-top: ${(props) => props.theme.spacing[12]};
13+
flex: 1 0 auto;
1314
`;
1415

1516
interface BlogPageProps {

0 commit comments

Comments
 (0)