Skip to content

Commit a54c5b5

Browse files
kyrerskyrers
committed
refactor: migrate Home page + related components to tailwind
1 parent e81d068 commit a54c5b5

File tree

15 files changed

+169
-437
lines changed

15 files changed

+169
-437
lines changed

‎web/src/components/HeroImage.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React from "react";
2-
import { useTheme } from "styled-components";
2+
import { useTheme } from "~src/hooks/useToggleThemeContext";
33
import HeroLightMobile from "svgs/hero/hero-lightmode-mobile.svg";
44
import HeroDarkMobile from "svgs/hero/hero-darkmode-mobile.svg";
55
import HeroLightDesktop from "svgs/hero/hero-lightmode-desktop.svg";
66
import HeroDarkDesktop from "svgs/hero/hero-darkmode-desktop.svg";
77
import useIsDesktop from "hooks/useIsDesktop";
88

99
const HeroImage = () => {
10-
const theme = useTheme();
11-
const themeIsLight = theme.name === "light";
10+
const [theme] = useTheme();
11+
const themeIsLight = theme === "light";
1212
const isDesktop = useIsDesktop();
1313
return <div>{isDesktop ? <HeroDesktop {...{ themeIsLight }} /> : <HeroMobile {...{ themeIsLight }} />}</div>;
1414
};

‎web/src/components/RegistryCard/RegistryInfo.tsx‎

Lines changed: 38 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React, { useEffect, useState } from "react";
2-
import styled, { css } from "styled-components";
32
import { responsiveSize } from "styles/responsiveSize";
4-
import { landscapeStyle } from "styles/landscapeStyle";
53
import Skeleton from "react-loading-skeleton";
64
import { Button } from "@kleros/ui-components-library";
75
import ArrowIcon from "svgs/icons/arrow.svg";
@@ -10,85 +8,7 @@ import { getIpfsUrl } from "utils/getIpfsUrl";
108
import StatusBanner from "./StatusBanner";
119
import { DEFAULT_LIST_LOGO } from "consts/index";
1210
import TruncatedText from "../TruncatedText";
13-
14-
const Container = styled.div<{ isListView: boolean }>`
15-
height: calc(100% - 45px);
16-
display: flex;
17-
flex-direction: column;
18-
justify-content: center;
19-
align-items: center;
20-
gap: 8px;
21-
22-
// css for isList view
23-
${({ isListView }) =>
24-
isListView &&
25-
css`
26-
width: 100%;
27-
height: max-content;
28-
display: grid;
29-
grid-template-rows: repeat(3, min-content);
30-
grid-template-columns: 21px max-content 1fr max-content;
31-
column-gap: ${responsiveSize(8, 24, 900)};
32-
row-gap: 16px;
33-
padding: 16px;
34-
h3,
35-
img {
36-
grid-column: span 4;
37-
}
38-
${landscapeStyle(
39-
() => css`
40-
height: 64px;
41-
justify-content: space-between;
42-
grid-template-rows: 1fr;
43-
grid-template-columns: auto 1fr ${responsiveSize(80, 100, 900)} ${responsiveSize(100, 150, 900)} max-content;
44-
padding: 0 32px;
45-
img {
46-
grid-column: 1;
47-
}
48-
h3 {
49-
grid-column: 2;
50-
}
51-
`
52-
)}
53-
`}
54-
`;
55-
56-
const StyledLogo = styled.img<{ isListView: boolean }>`
57-
width: ${({ isListView }) => (isListView ? "40px" : "125px")};
58-
height: ${({ isListView }) => (isListView ? "40px" : "125px")};
59-
object-fit: contain;
60-
margin-bottom: ${({ isListView }) => (isListView ? "0px" : "8px")};
61-
`;
62-
63-
const StyledLabel = styled.label`
64-
color: ${({ theme }) => theme.secondaryText};
65-
`;
66-
67-
const StyledButton = styled(Button)`
68-
background-color: transparent;
69-
padding: 0;
70-
flex-direction: row-reverse;
71-
gap: 8px;
72-
.button-text {
73-
color: ${({ theme }) => theme.primaryBlue};
74-
font-weight: 400;
75-
}
76-
.button-svg {
77-
fill: ${({ theme }) => theme.secondaryPurple};
78-
}
79-
80-
:focus,
81-
:hover {
82-
background-color: transparent;
83-
}
84-
`;
85-
86-
const SkeletonLogo = styled(Skeleton)<{ isListView: boolean }>`
87-
width: ${({ isListView }) => (isListView ? "40px" : "125px")};
88-
height: ${({ isListView }) => (isListView ? "40px" : "125px")};
89-
border-radius: ${({ isListView }) => (isListView ? "24px" : "62.5px")};
90-
margin-bottom: ${({ isListView }) => (isListView ? "0px" : "8px")};
91-
`;
11+
import { cn } from "~src/utils";
9212

9313
interface IListInfo {
9414
title?: string;
@@ -108,21 +28,51 @@ const ListInfo: React.FC<IListInfo> = ({ title, totalItems, logoURI, status, isL
10828
}, [logoURI]);
10929

11030
return (
111-
<Container {...{ isListView }}>
112-
{!imageLoaded ? <SkeletonLogo isListView={isListView} /> : null}
113-
<StyledLogo
31+
<div
32+
className={cn(
33+
"flex flex-col justify-center items-center gap-2 h-[calc(100%-45px)]",
34+
isListView && [
35+
"grid grid-cols-[21px_max.content_1fr_max-content] grid-rows-[repeat(3,min-content)] gap-y-4",
36+
"w-full h-max lg:h-16 p-4",
37+
"[&_h3]:col-span-4 [&_img]:col-span-4",
38+
"lg:justify-between lg:grid-rows-[1fr] lg:px-8",
39+
"lg:grid-cols-[auto_1fr_calc(80px+(100-80)*(min(max(100vw,900px),1250px)-900px)/(1250-900))_calc(100px+(150-100)*(min(max(100vw,900px),1250px)-900px)/(1250-900))_max-content]",
40+
"lg:[&_img]:col-span-1 lg:[&_h3]:col-span-2",
41+
]
42+
)}
43+
style={{ columnGap: isListView ? responsiveSize(8, 24, 900) : undefined }}
44+
>
45+
{!imageLoaded ? (
46+
<Skeleton
47+
className={cn(isListView ? "mb-0" : "mb-2")}
48+
height={isListView ? 40 : 125}
49+
width={isListView ? 40 : 125}
50+
borderRadius={isListView ? "24px" : "62.5px"}
51+
/>
52+
) : null}
53+
<img
54+
className={cn("object-contain", isListView ? "w-10 h-10 mb-0" : "w-[125px] h-[125px] mb-2")}
11455
src={imageSrc}
11556
alt="List Img"
116-
isListView={isListView}
11757
onLoad={() => setImageLoaded(true)}
11858
onError={() => setImageSrc(getIpfsUrl(DEFAULT_LIST_LOGO))}
11959
style={{ display: imageLoaded ? "block" : "none" }}
12060
/>
12161
<TruncatedText text={title ?? ""} maxLength={100} />
122-
<StyledLabel>{totalItems} items</StyledLabel>
62+
<label className="text-klerosUIComponentsSecondaryText">{totalItems} items</label>
12363
{isListView && <StatusBanner {...{ status, isListView }} />}
124-
{isListView && <StyledButton text="Open" Icon={ArrowIcon} />}
125-
</Container>
64+
{isListView && (
65+
<Button
66+
className={cn(
67+
"flex-row-reverse gap-2 p-0 bg-transparent",
68+
"focus:bg-transparent hover:bg-transparent",
69+
"[&_.button-text]:text-klerosUIComponentsPrimaryBlue [&_.button-text]:font-normal [&_.button-svg]:fill-klerosUIComponentsSecondaryPurple"
70+
)}
71+
text="Open"
72+
Icon={ArrowIcon}
73+
/>
74+
)}
75+
</div>
12676
);
12777
};
12878

‎web/src/components/RegistryCard/StatusBanner.tsx‎

Lines changed: 21 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,13 @@
11
import React from "react";
2-
import styled, { Theme } from "styled-components";
32
import { Status } from "consts/status";
43
import { Status as SubgraphStatus } from "src/graphql/graphql";
5-
6-
const Container = styled.div<{ status: Status; isListView: boolean }>`
7-
height: ${({ isListView }) => (isListView ? "min-content" : "45px")};
8-
border-top-right-radius: 3px;
9-
border-top-left-radius: 3px;
10-
display: flex;
11-
align-items: center;
12-
justify-content: space-between;
13-
padding: 0 24px;
14-
.dot {
15-
::before {
16-
content: "";
17-
display: inline-block;
18-
height: 8px;
19-
width: 8px;
20-
border-radius: 50%;
21-
margin-right: 8px;
22-
}
23-
}
24-
${({ theme, status, isListView }) => {
25-
const [frontColor, backgroundColor] = getStatusColor(status, theme);
26-
return `
27-
${!isListView && `border-top: 5px solid ${frontColor}`};
28-
${!isListView && `background-color: ${backgroundColor}`};
29-
${isListView && `padding: 0px`};
30-
.front-color {
31-
color: ${frontColor};
32-
}
33-
.dot {
34-
::before {
35-
background-color: ${frontColor};
36-
}
37-
}
38-
`;
39-
}};
40-
`;
4+
import { cn } from "~src/utils";
415

426
interface IStatusBanner {
437
status: Status;
448
isListView?: boolean;
459
}
4610

47-
export const getStatusColor = (status: Status, theme: Theme): [string, string] => {
48-
switch (status) {
49-
case Status.RegistrationPending:
50-
case Status.ClearingPending:
51-
return [theme.primaryBlue, theme.mediumBlue];
52-
case Status.Disputed:
53-
return [theme.secondaryPurple, theme.mediumPurple];
54-
case Status.Included:
55-
return [theme.success, theme.successLight];
56-
case Status.Removed:
57-
return [theme.error, theme.errorLight];
58-
default:
59-
return [theme.lightGrey, theme.lightGrey];
60-
}
61-
};
62-
6311
export const getStatusLabel = (status: Status): string => {
6412
switch (status) {
6513
case Status.RegistrationPending:
@@ -91,9 +39,27 @@ export const mapFromSubgraphStatus = (status: string, isDisputed: boolean) => {
9139
}
9240
};
9341
const StatusBanner: React.FC<IStatusBanner> = ({ status, isListView = false }) => (
94-
<Container {...{ status, isListView }}>
42+
<div
43+
className={cn(
44+
"flex items-center justify-between px-6 rounded-t-[3px]",
45+
isListView ? "h-min" : "h-11",
46+
isListView && "p-0",
47+
"[&_.dot::before]:content-[''] [&_.dot::before]:inline-block [&_.dot::before]:h-2 [&_.dot::before]:w-2 [&_.dot::before]:rounded-[50%] [&_.dot::before]:mr-2",
48+
!isListView && [
49+
"border-t-[5px]",
50+
(status === Status.RegistrationPending || status === Status.ClearingPending) &&
51+
"border-t-klerosUIComponentsPrimaryBlue bg-klerosUIComponentsMediumBlue [&_.front-color]:text-klerosUIComponentsPrimaryBlue [&_.dot::before]:bg-klerosUIComponentsPrimaryBlue",
52+
status === Status.Disputed &&
53+
"border-t-klerosUIComponentsSecondaryPurple bg-klerosUIComponentsMediumPurple [&_.front-color]:text-klerosUIComponentsSecondaryPurple [&_.dot::before]:bg-klerosUIComponentsSecondaryPurple",
54+
status === Status.Included &&
55+
"border-t-klerosUIComponentsSuccess bg-klerosUIComponentsSuccessLight [&_.front-color]:text-klerosUIComponentsSuccess [&_.dot::before]:bg-klerosUIComponentsSuccess",
56+
status === Status.Removed &&
57+
"border-t-klerosUIComponentsError bg-klerosUIComponentsErrorLight [&_.front-color]:text-klerosUIComponentsError [&_.dot::before]:bg-klerosUIComponentsError",
58+
]
59+
)}
60+
>
9561
<label className="front-color dot">{getStatusLabel(status)}</label>
96-
</Container>
62+
</div>
9763
);
9864

9965
export default StatusBanner;

‎web/src/components/RegistryCard/index.tsx‎

Lines changed: 9 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,12 @@
11
import React from "react";
2-
import styled, { css } from "styled-components";
32
import { Card } from "@kleros/ui-components-library";
43
import { useIsListView } from "context/IsListViewProvider";
5-
import { landscapeStyle } from "styles/landscapeStyle";
64
import StatusBanner from "./StatusBanner";
75
import RegistryInfo from "./RegistryInfo";
86
import { useNavigateAndScrollTop } from "hooks/useNavigateAndScrollTop";
97
import { GetRegistriesByIdsQuery } from "src/graphql/graphql";
108
import { Status } from "src/consts/status";
119

12-
const StyledCard = styled(Card)`
13-
width: 100%;
14-
height: 274px;
15-
`;
16-
17-
const StyledListItem = styled(Card)`
18-
display: flex;
19-
flex-grow: 1;
20-
width: 100%;
21-
height: max-content;
22-
${landscapeStyle(
23-
() => css`
24-
height: 64px;
25-
`
26-
)}
27-
`;
28-
2910
type List = GetRegistriesByIdsQuery["registries"][number];
3011
interface IListCard extends List {
3112
overrideIsListView?: boolean;
@@ -43,17 +24,22 @@ const RegistryCard: React.FC<IListCard> = ({ id, itemId, title, logoURI, totalIt
4324
return (
4425
<>
4526
{!isListView || overrideIsListView ? (
46-
<StyledCard hover onClick={() => navigateAndScrollTop(`/lists/${registryAddressAndItemId}/display/1/desc/all`)}>
27+
<Card
28+
className="w-full h-[274px]"
29+
hover
30+
onClick={() => navigateAndScrollTop(`/lists/${registryAddressAndItemId}/display/1/desc/all`)}
31+
>
4732
<StatusBanner {...{ status }} />
4833
<RegistryInfo {...{ title, logoURI, totalItems, status }} />
49-
</StyledCard>
34+
</Card>
5035
) : (
51-
<StyledListItem
36+
<Card
37+
className="flex grow w-full h-max lg:h-16"
5238
hover
5339
onClick={() => navigateAndScrollTop(`/lists/${registryAddressAndItemId}/display/desc/all`)}
5440
>
5541
<RegistryInfo {...{ title, logoURI, totalItems, status }} isListView />
56-
</StyledListItem>
42+
</Card>
5743
)}
5844
</>
5945
);

0 commit comments

Comments
 (0)