Skip to content

Commit 6cf84d1

Browse files
kyrerskyrers
committed
refactor: migrate SubmitList page and components to tailwind (WIP)
1 parent 1afa675 commit 6cf84d1

File tree

14 files changed

+94
-292
lines changed

14 files changed

+94
-292
lines changed

‎web/src/pages/SubmitList/Header.tsx‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,10 @@
11
import React from "react";
2-
import styled, { css } from "styled-components";
3-
import { landscapeStyle } from "styles/landscapeStyle";
4-
5-
const Container = styled.h1`
6-
width: 84vw;
7-
text-align: center;
8-
margin: 0px;
9-
${landscapeStyle(
10-
() => css`
11-
width: auto;
12-
`
13-
)}
14-
`;
152

163
interface IHeader {
174
text: string;
185
}
196

207
const Header: React.FC<IHeader> = ({ text }) => {
21-
return <Container>{text}</Container>;
8+
return <h1 className="text-center m-0 w-[84vw] lg:w-auto">{text}</h1>;
229
};
2310
export default Header;

‎web/src/pages/SubmitList/ListParameters/Description.tsx‎

Lines changed: 15 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,35 @@
11
import React from "react";
2-
import styled, { css } from "styled-components";
3-
import { landscapeStyle } from "styles/landscapeStyle";
4-
import { responsiveSize } from "styles/responsiveSize";
52
import NavigationButtons from "../NavigationButtons";
63
import InfoCard from "components/InfoCard";
74
import Header from "../Header";
8-
import { Field } from "@kleros/ui-components-library";
5+
import { TextField } from "@kleros/ui-components-library";
96
import { useSubmitListContext } from "context/SubmitListContext";
10-
11-
const Container = styled.div`
12-
display: flex;
13-
flex-direction: column;
14-
align-items: center;
15-
gap: 32px;
16-
width: 84vw;
17-
18-
${landscapeStyle(
19-
() => css`
20-
width: ${responsiveSize(442, 700, 900)};
21-
`
22-
)}
23-
`;
24-
25-
const FieldContainer = styled.div`
26-
width: 100%;
27-
display: flex;
28-
flex-direction: column;
29-
gap: 16px;
30-
`;
31-
32-
const StyledField = styled(Field)`
33-
width: 100%;
34-
`;
35-
36-
const StyledInfoCard = styled(InfoCard)`
37-
width: 100%;
38-
`;
39-
7+
import { cn } from "~src/utils";
8+
import { BASE_CONTAINER_LANDSCAPE_WIDTH_CALC, BASE_CONTAINER_STYLE } from "../constants";
409
const Description: React.FC = () => {
4110
const { listMetadata, setListMetadata } = useSubmitListContext();
4211

43-
const handleWrite = (event: React.ChangeEvent<HTMLInputElement>) => {
44-
setListMetadata({ ...listMetadata, description: event.target.value });
12+
const handleWrite = (value: string) => {
13+
setListMetadata({ ...listMetadata, description: value });
4514
};
4615
return (
47-
<Container>
16+
<div className={cn(BASE_CONTAINER_STYLE, BASE_CONTAINER_LANDSCAPE_WIDTH_CALC)}>
4817
<Header text="Description" />
49-
<FieldContainer>
50-
<StyledField
18+
<div className="flex flex-col gap-4 w-full">
19+
<TextField
20+
className="w-full"
5121
onChange={handleWrite}
5222
placeholder="eg. A list of public name tags, associated with Ethereum mainnet contract addresses."
5323
value={listMetadata.description}
5424
/>
55-
<StyledInfoCard msg="Type a short sentence describing the content of the list. eg. A list of public name tags, associated with Ethereum mainnet contract addresses." />
56-
</FieldContainer>
25+
<InfoCard
26+
className="w-full"
27+
msg="Type a short sentence describing the content of the list. eg. A list of public name tags, associated with Ethereum mainnet contract addresses."
28+
/>
29+
</div>
5730

5831
<NavigationButtons prevRoute="/submit-list/title" nextRoute="/submit-list/logo" />
59-
</Container>
32+
</div>
6033
);
6134
};
6235
export default Description;

‎web/src/pages/SubmitList/ListParameters/ListPreview/HomePageDisplay.tsx‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,17 @@
11
import React, { useMemo } from "react";
2-
import styled from "styled-components";
32
import { responsiveSize } from "styles/responsiveSize";
43
import RegistryCard from "components/RegistryCard";
54
import { useSubmitListContext } from "context/SubmitListContext";
65
import { Status } from "src/graphql/graphql";
76
import { mapFromSubgraphStatus } from "components/RegistryCard/StatusBanner";
87
import { DEFAULT_LIST_LOGO } from "src/consts";
98

10-
const Container = styled.div`
11-
display: flex;
12-
flex-direction: column;
13-
gap: ${responsiveSize(32, 24)};
14-
`;
15-
16-
const StyledP = styled.p`
17-
color: ${({ theme }) => theme.primaryBlue};
18-
margin: 0;
19-
`;
20-
219
const HomePageDisplay: React.FC = () => {
2210
const { listMetadata } = useSubmitListContext();
2311
const previewData = useMemo(() => listMetadata, [listMetadata]);
2412
return (
25-
<Container>
26-
<StyledP>Check how the list is displayed on the home page:</StyledP>
13+
<div className="flex flex-col" style={{ gap: responsiveSize(32, 24) }}>
14+
<p className="m-0 text-klerosUIComponentsPrimaryBlue">Check how the list is displayed on the home page:</p>
2715
<RegistryCard
2816
id={"1"}
2917
title={previewData.title}
@@ -32,7 +20,7 @@ const HomePageDisplay: React.FC = () => {
3220
totalItems={23}
3321
overrideIsListView
3422
/>
35-
</Container>
23+
</div>
3624
);
3725
};
3826
export default HomePageDisplay;

‎web/src/pages/SubmitList/ListParameters/ListPreview/ListPageDisplay.tsx‎

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,21 @@
11
import React, { useMemo } from "react";
2-
import styled from "styled-components";
32
import { responsiveSize } from "styles/responsiveSize";
43
import RegistryInformationCard from "components/InformationCards/RegistryInformationCard";
54
import { useSubmitListContext } from "context/SubmitListContext";
65
import { Status } from "src/graphql/graphql";
76
import { DEFAULT_LIST_LOGO, MAIN_CURATE_ADDRESS } from "src/consts";
87
import { useAccount } from "wagmi";
98

10-
const Container = styled.div`
11-
display: flex;
12-
flex-direction: column;
13-
gap: ${responsiveSize(32, 24)};
14-
`;
15-
16-
const StyledP = styled.p`
17-
color: ${({ theme }) => theme.primaryBlue};
18-
margin: 0;
19-
`;
20-
21-
const StyledInformationCard = styled(RegistryInformationCard)`
22-
margin: 0px;
23-
`;
24-
259
const ListPageDisplay: React.FC = () => {
2610
const { listMetadata } = useSubmitListContext();
2711
const { address } = useAccount();
2812
const previewData = useMemo(() => listMetadata, [listMetadata]);
2913

3014
return (
31-
<Container>
32-
<StyledP>Check how the list is displayed on the List page:</StyledP>
33-
<StyledInformationCard
15+
<div className="flex flex-col" style={{ gap: responsiveSize(32, 24) }}>
16+
<p className="m-0 text-klerosUIComponentsPrimaryBlue">Check how the list is displayed on the List page:</p>
17+
<RegistryInformationCard
18+
className="m-0"
3419
id={MAIN_CURATE_ADDRESS}
3520
parentRegistryAddress={MAIN_CURATE_ADDRESS}
3621
registerer={{ id: address }}
@@ -43,7 +28,7 @@ const ListPageDisplay: React.FC = () => {
4328
policyURI="https://cdn.kleros.link/ipfs/QmSxGYpXHBWBGvGnBeZD1pFxh8fRHj4Z7o3fBzrGiqNx4v/tokens-policy.pdf"
4429
isPreview
4530
/>
46-
</Container>
31+
</div>
4732
);
4833
};
4934
export default ListPageDisplay;

‎web/src/pages/SubmitList/ListParameters/ListPreview/index.tsx‎

Lines changed: 17 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,30 @@
11
import React from "react";
2-
import styled from "styled-components";
32
import { responsiveSize } from "styles/responsiveSize";
43
import { Card } from "@kleros/ui-components-library";
54
import ListPageDisplay from "./ListPageDisplay";
65
import HomePageDisplay from "./HomePageDisplay";
6+
import clsx from "clsx";
77

8-
const Container = styled.div`
9-
width: 100%;
10-
display: flex;
11-
flex-direction: column;
12-
align-items: center;
13-
gap: 32px;
14-
margin-top: 24px;
15-
`;
16-
17-
const StyledCard = styled(Card)`
18-
display: flex;
19-
flex-direction: column;
20-
width: 100%;
21-
border: 1px dashed ${({ theme }) => theme.primaryBlue};
22-
background-color: ${({ theme }) => theme.mediumBlue};
23-
height: auto;
24-
min-height: 100px;
25-
margin-bottom: ${responsiveSize(0, 16)};
26-
padding: ${responsiveSize(24, 48)} ${responsiveSize(24, 32)};
27-
gap: 32px;
28-
position: relative;
29-
`;
30-
31-
const Header = styled.h2`
32-
width: 100%;
33-
text-align: center;
34-
color: ${({ theme }) => theme.secondaryPurple};
35-
margin-bottom: 0px;
36-
`;
37-
38-
const Overlay = styled.div`
39-
width: 100%;
40-
height: 100%;
41-
position: absolute;
42-
`;
438
const ListPreview: React.FC = () => {
449
return (
45-
<Container>
46-
<Header>Preview</Header>
47-
<StyledCard>
10+
<div className="flex flex-col items-center w-full gap-8 mt-6">
11+
<h2 className="mb-0 w-full text-center text-klerosUIComponentsSecondaryPurple">Preview</h2>
12+
<Card
13+
className={clsx(
14+
"relative flex flex-col gap-8 w-full h-auto min-h-[100px]",
15+
"border-dashed border-klerosUIComponentsPrimaryBlue bg-klerosUIComponentsMediumBlue"
16+
)}
17+
style={{
18+
marginBottom: responsiveSize(0, 16),
19+
paddingBlock: responsiveSize(24, 48),
20+
paddingInline: responsiveSize(24, 32),
21+
}}
22+
>
4823
<HomePageDisplay />
4924
<ListPageDisplay />
50-
<Overlay />
51-
</StyledCard>
52-
</Container>
25+
<div className="absolute w-full h-full" />
26+
</Card>
27+
</div>
5328
);
5429
};
5530

‎web/src/pages/SubmitList/ListParameters/LogoUpload.tsx‎

Lines changed: 10 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,18 @@
11
import React from "react";
2-
import styled, { css } from "styled-components";
32
import NavigationButtons from "../NavigationButtons";
4-
import { landscapeStyle } from "styles/landscapeStyle";
5-
import { responsiveSize } from "styles/responsiveSize";
63
import { FileUploader } from "@kleros/ui-components-library";
74
import Header from "../Header";
85
import { useSubmitListContext } from "context/SubmitListContext";
96
import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
107
import ListPreview from "./ListPreview";
118
import { Roles, useAtlasProvider } from "@kleros/kleros-app";
12-
import { getFileUploaderMsg } from "src/utils";
9+
import { cn, getFileUploaderMsg } from "src/utils";
1310
import useIsDesktop from "hooks/useIsDesktop";
14-
15-
const Container = styled.div`
16-
display: flex;
17-
flex-direction: column;
18-
align-items: center;
19-
gap: 32px;
20-
width: 84vw;
21-
22-
${landscapeStyle(
23-
() => css`
24-
width: ${responsiveSize(442, 700, 900)};
25-
`
26-
)}
27-
`;
28-
29-
const StyledFileUploader = styled(FileUploader)`
30-
width: 100%;
31-
margin-bottom: ${responsiveSize(150, 72)};
32-
path {
33-
fill: ${({ theme }) => theme.primaryBlue};
34-
}
35-
small {
36-
white-space: pre-line;
37-
text-align: start;
38-
}
39-
`;
11+
import {
12+
BASE_CONTAINER_LANDSCAPE_WIDTH_CALC,
13+
BASE_CONTAINER_STYLE,
14+
FILE_UPLOADER_MARGIN_BOTTOM_CALC,
15+
} from "../constants";
4016

4117
const LogoUpload: React.FC = () => {
4218
const { listMetadata, setListMetadata, setIsLogoUploading } = useSubmitListContext();
@@ -79,9 +55,10 @@ const LogoUpload: React.FC = () => {
7955
reader.readAsDataURL(file);
8056
};
8157
return (
82-
<Container>
58+
<div className={cn(BASE_CONTAINER_STYLE, BASE_CONTAINER_LANDSCAPE_WIDTH_CALC)}>
8359
<Header text="Logo" />
84-
<StyledFileUploader
60+
<FileUploader
61+
className={cn("w-full", "[&_small]:whitespace-pre-line [&_small]:text-start", FILE_UPLOADER_MARGIN_BOTTOM_CALC)}
8562
callback={handleLoad}
8663
variant={isDesktop ? "info" : undefined}
8764
msg={
@@ -91,7 +68,7 @@ const LogoUpload: React.FC = () => {
9168
/>
9269
<ListPreview />
9370
<NavigationButtons prevRoute="/submit-list/description" nextRoute="/submit-list/policy" />
94-
</Container>
71+
</div>
9572
);
9673
};
9774
export default LogoUpload;

0 commit comments

Comments
 (0)