Skip to content

Commit 9a17b2f

Browse files
marcoaciernomarcoacierno
authored
Remove more usages of theme-ui (#3784)
1 parent d01f196 commit 9a17b2f

File tree

31 files changed

+188
-1159
lines changed

31 files changed

+188
-1159
lines changed

‎frontend/src/components/alert/index.tsx

Lines changed: 12 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,30 @@
1+
import clsx from "clsx";
12
import React from "react";
2-
import { Box } from "theme-ui";
33

44
type Props = {
55
variant: "alert" | "success" | "info";
6-
sx?: any;
76
};
87

98
export const Alert = ({
109
variant,
1110
children,
1211
...props
1312
}: React.PropsWithChildren<Props>) => {
14-
let backgroundColor: string;
15-
16-
switch (variant) {
17-
case "alert":
18-
backgroundColor = "red";
19-
break;
20-
case "success":
21-
backgroundColor = "green";
22-
break;
23-
case "info":
24-
backgroundColor = "blue";
25-
break;
26-
}
27-
2813
return (
29-
<Box
30-
sx={{
31-
display: "block",
32-
my: 2,
33-
}}
34-
>
35-
<Box
36-
sx={{
37-
display: "inline-block",
38-
39-
position: "relative",
40-
41-
width: "auto",
42-
py: 4,
43-
px: 3,
44-
border: "primary",
45-
46-
"::before": {
47-
content: "''",
48-
display: "block",
49-
50-
position: "absolute",
51-
top: 0,
52-
left: 0,
53-
54-
width: 10,
55-
height: "100%",
56-
57-
backgroundColor,
14+
<div className="block my-2">
15+
<div
16+
className={clsx(
17+
"relative inline-block px-8 py-8 border before:content-[''] before:absolute before:top-0 before:left-0 before:w-2.5 before:h-full",
18+
{
19+
"before:bg-red": variant === "alert",
20+
"before:bg-green": variant === "success",
21+
"before:bg-blue": variant === "info",
5822
},
59-
}}
23+
)}
6024
{...props}
6125
>
6226
{children}
63-
</Box>
64-
</Box>
27+
</div>
28+
</div>
6529
);
6630
};

‎frontend/src/components/cfp-form/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -341,7 +341,7 @@ export const CfpForm = ({
341341

342342
return (
343343
<Fragment>
344-
<Heading mt={5} mb={5} as="h1">
344+
<Heading mb={5} as="h1">
345345
<FormattedMessage id="cfp.youridea" />
346346
</Heading>
347347
<form onSubmit={submitSubmission} sx={{ mb: 4 }}>
@@ -686,13 +686,13 @@ export const CfpForm = ({
686686
</InputWrapper>
687687

688688
{getErrors("nonFieldErrors").map((error) => (
689-
<Alert sx={{ mb: 4 }} variant="alert" key={error}>
689+
<Alert variant="alert" key={error}>
690690
{error}
691691
</Alert>
692692
))}
693693

694694
{submissionError && (
695-
<Alert sx={{ mb: 4 }} variant="alert">
695+
<Alert variant="alert">
696696
<FormattedMessage
697697
id="global.tryAgain"
698698
values={{ error: submissionError.message }}
@@ -702,7 +702,7 @@ export const CfpForm = ({
702702

703703
{submissionData &&
704704
submissionData.mutationOp.__typename === "Submission" && (
705-
<Alert sx={{ mb: 4 }} variant="success">
705+
<Alert variant="success">
706706
<FormattedMessage id="cfp.submissionSent" />
707707
</Alert>
708708
)}

‎frontend/src/components/cfp-introduction/index.tsx

Lines changed: 44 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
/** @jsxRuntime classic */
2-
3-
/** @jsx jsx */
4-
import { Link } from "@python-italia/pycon-styleguide";
1+
import {
2+
Heading,
3+
Link,
4+
Section,
5+
Spacer,
6+
Text,
7+
} from "@python-italia/pycon-styleguide";
58
import { FormattedMessage } from "react-intl";
6-
import { Box, Grid, Heading, Text, jsx } from "theme-ui";
79

8-
import { CFPIllustration } from "~/components/illustrations/cfp";
910
import { formatDeadlineDateTime } from "~/helpers/deadlines";
1011
import { useCurrentLanguage } from "~/locale/context";
1112

@@ -14,102 +15,45 @@ import { createHref } from "../link";
1415
export const Introduction = ({ deadline }: { deadline?: string }) => {
1516
const language = useCurrentLanguage();
1617
return (
17-
<Box
18-
sx={{
19-
borderTop: "primary",
20-
borderBottom: "primary",
21-
}}
22-
>
23-
<Grid
24-
sx={{
25-
maxWidth: "container",
26-
mx: "auto",
27-
px: 3,
28-
my: 5,
29-
gridTemplateColumns: [null, null, "9fr 3fr 8fr"],
30-
}}
31-
>
32-
<Box>
33-
<Heading as="h1">
34-
<FormattedMessage id="cfp.introductionHeading" />
35-
</Heading>
36-
<Text
37-
as="p"
38-
sx={{
39-
color: "orange",
40-
mt: 4,
41-
fontSize: 2,
42-
}}
43-
>
44-
<FormattedMessage id="cfp.introductionSubtitle" />
45-
</Text>
46-
<Text
47-
sx={{
48-
mt: 4,
49-
fontSize: 2,
50-
}}
51-
as="p"
52-
>
53-
<FormattedMessage id="cfp.introductionCopy" />
54-
</Text>
18+
<Section illustration="snakeHead">
19+
<Heading size={1}>
20+
<FormattedMessage id="cfp.introductionHeading" />
21+
</Heading>
22+
<Spacer size="thin" />
5523

56-
{deadline && (
57-
<Text
58-
sx={{
59-
fontSize: 2,
60-
}}
61-
as="p"
62-
>
63-
<FormattedMessage
64-
id="cfp.introductionDeadline"
65-
values={{
66-
deadline: (
67-
<Text as="span" sx={{ fontWeight: "bold" }}>
68-
{formatDeadlineDateTime(deadline, language)}
69-
</Text>
70-
),
71-
}}
72-
/>
73-
</Text>
74-
)}
24+
<Heading size={3}>
25+
<FormattedMessage id="cfp.introductionSubtitle" />
26+
</Heading>
27+
<Spacer size="small" />
28+
<Text size={2} as="p">
29+
<FormattedMessage id="cfp.introductionCopy" />
30+
</Text>
7531

76-
<Link
77-
href={createHref({
78-
path: "/call-for-proposals",
79-
locale: language,
80-
})}
81-
className="mt-[4px]"
82-
>
83-
<FormattedMessage id="global.learnMore" />
84-
</Link>
85-
</Box>
86-
<Box
87-
sx={{
88-
gridColumnStart: [0, 0, 3],
89-
}}
90-
>
91-
<Box
92-
sx={{
93-
display: ["none", null, "block"],
94-
border: "primary",
95-
gridColumnStart: [0, 0, 3],
96-
backgroundColor: "#C4C4C4",
97-
position: "relative",
32+
{deadline && (
33+
<Text size={2} as="p">
34+
<FormattedMessage
35+
id="cfp.introductionDeadline"
36+
values={{
37+
deadline: (
38+
<Text size={2} as="span" weight="strong">
39+
{formatDeadlineDateTime(deadline, language)}
40+
</Text>
41+
),
9842
}}
99-
>
100-
<Box sx={{ display: "inline-block", pt: "100%", width: "100%" }} />
101-
<CFPIllustration
102-
sx={{
103-
position: "absolute",
104-
top: 0,
105-
left: "-4px",
106-
width: "100%",
107-
height: "100%",
108-
}}
109-
/>
110-
</Box>
111-
</Box>
112-
</Grid>
113-
</Box>
43+
/>
44+
</Text>
45+
)}
46+
<Spacer size="medium" />
47+
<Link
48+
href={createHref({
49+
path: "/call-for-proposals",
50+
locale: language,
51+
})}
52+
>
53+
<Text weight="strong" decoration="underline">
54+
<FormattedMessage id="global.learnMore" />
55+
</Text>
56+
</Link>
57+
</Section>
11458
);
11559
};

‎frontend/src/components/cfp-send-submission/index.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
/** @jsxRuntime classic */
2-
3-
/** @jsx jsx */
4-
import { jsx } from "theme-ui";
1+
import React from "react";
52

63
import { useRouter } from "next/router";
74

‎frontend/src/components/errors-list/index.tsx

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,29 @@
1-
/** @jsxRuntime classic */
2-
3-
/** @jsx jsx */
41
import { Text } from "@python-italia/pycon-styleguide";
2+
import clsx from "clsx";
53
import React from "react";
6-
import { Box, ThemeUIStyleObject, jsx } from "theme-ui";
74

85
export const ErrorsList = ({
96
errors,
10-
...props
7+
className,
118
}: {
129
errors?: (string | React.ReactNode)[];
13-
sx?: ThemeUIStyleObject;
10+
className?: string;
1411
}) => {
1512
if (!errors || errors.length === 0) {
1613
return null;
1714
}
1815

1916
return (
20-
<Box
21-
as="ul"
22-
sx={{
23-
listStyle: "none",
24-
color: "red",
25-
pl: 0,
26-
}}
27-
{...props}
28-
>
17+
<ul className={clsx("text-red list-none pl-0", className)}>
2918
{errors
3019
.filter((error) => !!error)
3120
.map((error, index) => (
32-
<Box as="li" key={index} sx={{ pl: 0 }}>
21+
<li key={index} className="pl-0">
3322
<Text size="label3" color="red">
3423
{error}
3524
</Text>
36-
</Box>
25+
</li>
3726
))}
38-
</Box>
27+
</ul>
3928
);
4029
};

‎frontend/src/components/file-input/index.tsx

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
1-
/** @jsxRuntime classic */
2-
3-
/** @jsx jsx */
41
import React, { ChangeEvent, useRef, useState } from "react";
52
import { FormattedMessage } from "react-intl";
6-
import { Box, jsx } from "theme-ui";
73

84
import { getTranslatedMessage } from "~/helpers/use-translated-message";
95
import { useCurrentLanguage } from "~/locale/context";
@@ -124,35 +120,25 @@ export const FileInput = ({
124120
const previewAvailable = filePreview || value;
125121

126122
return (
127-
<Box>
123+
<div>
128124
<input
129125
ref={fileInput}
130126
onChange={onChange}
131127
name={name}
132128
onBlur={onBlur}
133129
type="file"
134130
accept="image/png,image/jpg,image/jpeg,image/webp"
135-
sx={{
136-
width: "100%",
137-
}}
131+
className="w-full"
138132
/>
139133

140-
<canvas
141-
ref={canvas}
142-
sx={{
143-
display: "none",
144-
}}
145-
/>
134+
<canvas ref={canvas} className="hidden" />
146135
{(error || errors) && (
147-
<ErrorsList sx={{ mt: 2 }} errors={[error, ...(errors || [])]} />
136+
<ErrorsList className="mt-2" errors={[error, ...(errors || [])]} />
148137
)}
149138

150139
{previewAvailable && (
151140
<img
152-
sx={{
153-
height: "200px",
154-
mt: 3,
155-
}}
141+
className="h-52 mt-3"
156142
alt="Selection preview"
157143
src={previewAvailable}
158144
/>
@@ -163,6 +149,6 @@ export const FileInput = ({
163149
<FormattedMessage id="fileInput.uploading" />
164150
</Alert>
165151
)}
166-
</Box>
152+
</div>
167153
);
168154
};

0 commit comments

Comments
 (0)