Skip to content

Commit 9a66048

Browse files
jaybuidljaybuidl
committed
chore: ux experiment, court stats without accordion
1 parent 87e62e1 commit 9a66048

File tree

1 file changed

+95
-108
lines changed

1 file changed

+95
-108
lines changed

‎web/src/pages/Courts/CourtDetails/Stats.tsx

+95-108
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,52 @@
11
import React from "react";
22
import styled, { css } from "styled-components";
3-
import { responsiveSize } from "styles/responsiveSize";
4-
import { landscapeStyle } from "styles/landscapeStyle";
53

64
import { useParams } from "react-router-dom";
7-
import { Accordion } from "@kleros/ui-components-library";
85

9-
import EthereumIcon from "svgs/icons/ethereum.svg";
6+
import ChartIcon from "svgs/icons/chart.svg";
107
import EthereumVoteIcon from "svgs/icons/ethereum-vote.svg";
11-
import BalanceIcon from "svgs/icons/law-balance.svg";
8+
import EthereumIcon from "svgs/icons/ethereum.svg";
129
import BalanceWithHourglassIcon from "svgs/icons/law-balance-hourglass.svg";
13-
import JurorIcon from "svgs/icons/user.svg";
10+
import BalanceIcon from "svgs/icons/law-balance.svg";
1411
import MinStake from "svgs/icons/min-stake.svg";
1512
import PNKIcon from "svgs/icons/pnk.svg";
1613
import PNKRedistributedIcon from "svgs/icons/redistributed-pnk.svg";
14+
import JurorIcon from "svgs/icons/user.svg";
1715
import VoteStake from "svgs/icons/vote-stake.svg";
18-
import ChartIcon from "svgs/icons/chart.svg";
1916

2017
import { CoinIds } from "consts/coingecko";
21-
2218
import { useCoinPrice } from "hooks/useCoinPrice";
23-
import { useCourtDetails, CourtDetailsQuery } from "queries/useCourtDetails";
24-
2519
import { calculateSubtextRender } from "utils/calculateSubtextRender";
2620
import { formatETH, formatPNK, formatUnitsWei, formatUSD } from "utils/format";
2721
import { isUndefined } from "utils/index";
2822

23+
import { useCourtDetails, CourtDetailsQuery } from "queries/useCourtDetails";
24+
25+
import { responsiveSize } from "styles/responsiveSize";
26+
27+
import { Divider } from "components/Divider";
2928
import StatDisplay, { IStatDisplay } from "components/StatDisplay";
3029
import { StyledSkeleton } from "components/StyledSkeleton";
3130

32-
const StyledAccordion = styled(Accordion)`
33-
> * > button {
34-
justify-content: unset;
35-
background-color: ${({ theme }) => theme.whiteBackground} !important;
36-
border: 1px solid ${({ theme }) => theme.stroke} !important;
37-
> svg {
38-
fill: ${({ theme }) => theme.primaryText} !important;
39-
}
40-
> p {
41-
color: ${({ theme }) => theme.primaryText};
42-
}
43-
}
44-
//adds padding to body container
45-
> * > div > div {
46-
padding: 0;
47-
}
48-
[class*="accordion-item"] {
49-
margin: 0;
50-
}
31+
const Container = styled.div`
32+
display: flex;
33+
flex-direction: column;
34+
background-color: ${({ theme }) => theme.lightBlue};
35+
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
36+
padding: 20px;
37+
border-radius: 8px;
38+
border: 1px solid ${({ theme }) => theme.mediumBlue};
39+
justify-content: center;
40+
`;
41+
42+
const Title = styled.p`
43+
margin: 0;
44+
font-weight: 600;
45+
`;
5146

52-
${landscapeStyle(
53-
() => css`
54-
> * > div > div {
55-
padding: 0 24px;
56-
}
57-
`
58-
)}
47+
const StyledDivider = styled(Divider)`
48+
background-color: ${({ theme }) => theme.mediumBlue};
49+
margin: 12px 0 8px 0;
5950
`;
6051

6152
const TimeDisplayContainer = styled.div`
@@ -199,78 +190,74 @@ const Stats = () => {
199190
const { prices: pricesData } = useCoinPrice(coinIds);
200191

201192
return (
202-
<StyledAccordion
203-
defaultExpanded={0}
204-
items={[
205-
{
206-
title: "Statistics",
207-
body: (
208-
<AccordionContainer>
209-
<div>
210-
<AllTimeContainer>
211-
<StyledChartIcon />
212-
<StyledAllTimeText>Parameters</StyledAllTimeText>
213-
</AllTimeContainer>
214-
<StyledCard>
215-
{stats.slice(0, 3).map(({ title, coinId, getText, getSubtext, color, icon }) => {
216-
const coinPrice = !isUndefined(pricesData) ? pricesData[coinIds[coinId!]]?.price : undefined;
217-
return (
218-
<StatDisplay
219-
key={title}
220-
{...{ title, color, icon }}
221-
text={data ? getText(data.court) : <StyledSkeleton />}
222-
subtext={calculateSubtextRender(data?.court, getSubtext, coinPrice)}
223-
isSmallDisplay={true}
224-
/>
225-
);
226-
})}
227-
</StyledCard>
228-
</div>
229-
<div>
230-
<AllTimeContainer>
231-
<StyledChartIcon />
232-
<StyledAllTimeText>Activity</StyledAllTimeText>
233-
</AllTimeContainer>
234-
<StyledCard>
235-
{stats.slice(3, 7).map(({ title, coinId, getText, getSubtext, color, icon }) => {
236-
const coinPrice = !isUndefined(pricesData) ? pricesData[coinIds[coinId!]]?.price : undefined;
237-
return (
238-
<StatDisplay
239-
key={title}
240-
{...{ title, color, icon }}
241-
text={data ? getText(data.court) : <StyledSkeleton />}
242-
subtext={calculateSubtextRender(data?.court, getSubtext, coinPrice)}
243-
isSmallDisplay={true}
244-
/>
245-
);
246-
})}
247-
</StyledCard>
248-
</div>
249-
<div>
250-
<AllTimeContainer>
251-
<StyledChartIcon />
252-
<StyledAllTimeText>Total Rewards</StyledAllTimeText>
253-
</AllTimeContainer>
254-
<StyledCard>
255-
{stats.slice(7, 9).map(({ title, coinId, getText, getSubtext, color, icon }) => {
256-
const coinPrice = !isUndefined(pricesData) ? pricesData[coinIds[coinId!]]?.price : undefined;
257-
return (
258-
<StatDisplay
259-
key={title}
260-
{...{ title, color, icon }}
261-
text={data ? getText(data.court) : <StyledSkeleton />}
262-
subtext={calculateSubtextRender(data?.court, getSubtext, coinPrice)}
263-
isSmallDisplay={true}
264-
/>
265-
);
266-
})}
267-
</StyledCard>
268-
</div>
269-
</AccordionContainer>
270-
),
271-
},
272-
]}
273-
></StyledAccordion>
193+
<Container>
194+
{/* <Title>Statistics</Title>
195+
<StyledDivider /> */}
196+
<AccordionContainer>
197+
<div>
198+
<AllTimeContainer>
199+
<StyledChartIcon />
200+
<StyledAllTimeText>Parameters</StyledAllTimeText>
201+
</AllTimeContainer>
202+
<StyledCard>
203+
{stats.slice(0, 3).map(({ title, coinId, getText, getSubtext, color, icon }) => {
204+
const coinPrice = !isUndefined(pricesData) ? pricesData[coinIds[coinId!]]?.price : undefined;
205+
return (
206+
<StatDisplay
207+
key={title}
208+
{...{ title, color, icon }}
209+
text={data ? getText(data.court) : <StyledSkeleton />}
210+
subtext={calculateSubtextRender(data?.court, getSubtext, coinPrice)}
211+
isSmallDisplay={true}
212+
/>
213+
);
214+
})}
215+
</StyledCard>
216+
<StyledDivider />
217+
</div>
218+
<div>
219+
<AllTimeContainer>
220+
<StyledChartIcon />
221+
<StyledAllTimeText>Activity</StyledAllTimeText>
222+
</AllTimeContainer>
223+
<StyledCard>
224+
{stats.slice(3, 7).map(({ title, coinId, getText, getSubtext, color, icon }) => {
225+
const coinPrice = !isUndefined(pricesData) ? pricesData[coinIds[coinId!]]?.price : undefined;
226+
return (
227+
<StatDisplay
228+
key={title}
229+
{...{ title, color, icon }}
230+
text={data ? getText(data.court) : <StyledSkeleton />}
231+
subtext={calculateSubtextRender(data?.court, getSubtext, coinPrice)}
232+
isSmallDisplay={true}
233+
/>
234+
);
235+
})}
236+
</StyledCard>
237+
<StyledDivider />
238+
</div>
239+
<div>
240+
<AllTimeContainer>
241+
<StyledChartIcon />
242+
<StyledAllTimeText>Total Rewards</StyledAllTimeText>
243+
</AllTimeContainer>
244+
<StyledCard>
245+
{stats.slice(7, 9).map(({ title, coinId, getText, getSubtext, color, icon }) => {
246+
const coinPrice = !isUndefined(pricesData) ? pricesData[coinIds[coinId!]]?.price : undefined;
247+
return (
248+
<StatDisplay
249+
key={title}
250+
{...{ title, color, icon }}
251+
text={data ? getText(data.court) : <StyledSkeleton />}
252+
subtext={calculateSubtextRender(data?.court, getSubtext, coinPrice)}
253+
isSmallDisplay={true}
254+
/>
255+
);
256+
})}
257+
</StyledCard>
258+
</div>
259+
</AccordionContainer>
260+
</Container>
274261
);
275262
};
276263

0 commit comments

Comments
 (0)