Skip to content

Commit

Permalink
style: fixed styles for cases page and court modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@hbarcelos
hbarcelos committed Jul 20, 2021
1 parent 4bc90a4 commit 80f8874
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 115 deletions.
22 changes: 10 additions & 12 deletions src/components/court-cascader-modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ const CourtCascaderModal = ({ onClick }) => {
</>
}
onCancel={useCallback(() => onClick(), [onClick])}
title={<StyledTitleDiv>Join Court</StyledTitleDiv>}
title="Join Court"
visible
>
<StyledCascader
Expand Down Expand Up @@ -226,8 +226,8 @@ const StyledModal = styled(Modal)`
.ant-modal {
&-header {
padding: 0;
border: none;
background: #4004a3;
}
&-close-icon svg {
Expand All @@ -236,6 +236,14 @@ const StyledModal = styled(Modal)`
&-content {
height: 100%;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
&-title {
text-align: center;
color: #ffffff;
font-size: 20px;
}
&-body {
Expand Down Expand Up @@ -284,16 +292,6 @@ const StyledHeader = styled.div`
font-weight: bold;
`;

const StyledTitleDiv = styled.div`
background: #4004a3;
color: white;
font-size: 20px;
font-weight: bold;
height: 54px;
line-height: 54px;
text-align: center;
`;

const StyledCascader = styled(Cascader)`
display: none;
Expand Down
201 changes: 98 additions & 103 deletions src/containers/cases.js
View file
Original file line number Diff line number Diff line change
@@ -1,130 +1,80 @@
import { Col, Divider, Radio, Row, Spin } from 'antd'
import React, { useCallback, useMemo, useState } from 'react'
import { drizzleReactHooks } from '@drizzle/react-plugin'
import CaseCard from '../components/case-card'
import TopBanner from '../components/top-banner'
import styled from 'styled-components/macro'
import { VIEW_ONLY_ADDRESS } from '../bootstrap/dataloader'
import { Col, Divider, Radio, Row, Spin } from "antd";
import React, { useCallback, useMemo, useState } from "react";
import { drizzleReactHooks } from "@drizzle/react-plugin";
import CaseCard from "../components/case-card";
import TopBanner from "../components/top-banner";
import styled from "styled-components/macro";
import { VIEW_ONLY_ADDRESS } from "../bootstrap/dataloader";

const { useDrizzle, useDrizzleState } = drizzleReactHooks
const { useDrizzle, useDrizzleState } = drizzleReactHooks;

const StyledRadioGroup = styled(Radio.Group)`
float: right;
.ant-radio-button-wrapper {
border: 1px solid #4d00b4 !important;
border-radius: 300px;
color: #4d00b4;
margin-left: 10px;
@media (max-width: 500px) {
display: flex;
flex-direction: column;
}
&:before {
background-color: transparent;
}
&-checked {
background: #4d00b4 !important;
}
}
`

const StyledRadioButton = styled(Radio.Button)`
@media (max-width: 500px) {
text-align: center;
}
`

const StyledCol = styled(Col)`
color: #d09cff;
font-size: 24px;
font-weight: 500;
line-height: 28px;
text-align: center;
`
export default () => {
const { useCacheCall, useCacheEvents } = useDrizzle()
const drizzleState = useDrizzleState(drizzleState => ({
account: drizzleState.accounts[0] || VIEW_ONLY_ADDRESS
}))
const [filter, setFilter] = useState(0)
export default function Cases() {
const { useCacheCall, useCacheEvents } = useDrizzle();
const drizzleState = useDrizzleState((drizzleState) => ({
account: drizzleState.accounts[0] || VIEW_ONLY_ADDRESS,
}));
const [filter, setFilter] = useState(0);
const draws = useCacheEvents(
'KlerosLiquid',
'Draw',
"KlerosLiquid",
"Draw",
useMemo(
() => ({
filter: { _address: drizzleState.account },
fromBlock: process.env.REACT_APP_KLEROS_LIQUID_BLOCK_NUMBER
fromBlock: process.env.REACT_APP_KLEROS_LIQUID_BLOCK_NUMBER,
}),
[drizzleState.account]
)
)
const disputes = useCacheCall(['KlerosLiquid'], call =>
);
const disputes = useCacheCall(["KlerosLiquid"], (call) =>
draws
? Object.values(
draws.reduce((acc, d) => {
acc[d.returnValues._disputeID] = d
return acc
acc[d.returnValues._disputeID] = d;
return acc;
}, {})
).reduce(
(acc, d) => {
const dispute = call(
'KlerosLiquid',
'disputes',
d.returnValues._disputeID
)
const numberOfVotes = draws.filter(
_draw =>
_draw.returnValues._disputeID === d.returnValues._disputeID
)
const dispute = call("KlerosLiquid", "disputes", d.returnValues._disputeID);
const numberOfVotes = draws.filter((_draw) => _draw.returnValues._disputeID === d.returnValues._disputeID);
if (dispute)
if (dispute.period === '1' || dispute.period === '2') {
const dispute2 = call(
'KlerosLiquid',
'getDispute',
d.returnValues._disputeID
)
if (dispute.period === "1" || dispute.period === "2") {
const dispute2 = call("KlerosLiquid", "getDispute", d.returnValues._disputeID);
if (dispute2)
if (
Number(d.returnValues._appeal) ===
dispute2.votesLengths.length - 1
) {
if (Number(d.returnValues._appeal) === dispute2.votesLengths.length - 1) {
const vote = call(
'KlerosLiquid',
'getVote',
"KlerosLiquid",
"getVote",
d.returnValues._disputeID,
d.returnValues._appeal,
d.returnValues._voteID
)
);
if (vote)
acc[vote.voted ? 'active' : 'votePending'].push({
acc[vote.voted ? "active" : "votePending"].push({
ID: d.returnValues._disputeID,
draws: numberOfVotes
})
else acc.loading = true
draws: numberOfVotes,
});
else acc.loading = true;
} else
acc.active.push({
ID: d.returnValues._disputeID,
draws: numberOfVotes
})
else acc.loading = true
draws: numberOfVotes,
});
else acc.loading = true;
} else
acc[dispute.period === '4' ? 'executed' : 'active'].push({
acc[dispute.period === "4" ? "executed" : "active"].push({
ID: d.returnValues._disputeID,
draws: numberOfVotes
})
else acc.loading = true
return acc
draws: numberOfVotes,
});
else acc.loading = true;
return acc;
},
{ active: [], executed: [], loading: false, votePending: [] }
)
: { active: [], executed: [], loading: true, votePending: [] }
)
const filteredDisputes =
disputes[['votePending', 'active', 'executed'][filter]]
);

const filteredDisputes = disputes[["votePending", "active", "executed"][filter]];

return (
<>
<TopBanner
Expand All @@ -133,27 +83,23 @@ export default () => {
<StyledRadioGroup
buttonStyle="solid"
name="filter"
onChange={useCallback(e => setFilter(e.target.value), [])}
onChange={useCallback((e) => setFilter(e.target.value), [])}
value={filter}
>
<StyledRadioButton value={0}>Vote Pending</StyledRadioButton>
<StyledRadioButton value={1}>In Progress</StyledRadioButton>
<StyledRadioButton value={2}>Closed</StyledRadioButton>
</StyledRadioGroup>
}
extraLong
title="My Cases"
/>
<Divider />
<Spin spinning={disputes.loading}>
<Row gutter={48}>
{filteredDisputes.length === 0 ? (
<StyledCol>
You don't have any {['pending', 'active', 'closed'][filter]}{' '}
cases.
</StyledCol>
<StyledCol>You don&rsquo;t have any {["pending", "active", "closed"][filter]} cases.</StyledCol>
) : (
filteredDisputes.map(dispute => (
filteredDisputes.map((dispute) => (
<Col key={dispute.ID} md={12} xl={8}>
<CaseCard ID={dispute.ID} draws={dispute.draws} />
</Col>
Expand All @@ -162,5 +108,54 @@ export default () => {
</Row>
</Spin>
</>
)
);
}

const StyledRadioGroup = styled(Radio.Group)`
display: flex;
gap: 10px;
@media (max-width: 575.98px) {
flex-wrap: wrap;
}
.ant-radio-button-wrapper {
border: 1px solid #4d00b4 !important;
border-radius: 300px;
color: #4d00b4;
&:before {
background-color: transparent;
}
&-checked {
background: #4d00b4 !important;
}
}
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
box-shadow: none;
:focus-within {
outline: none;
}
::before {
display: none;
}
}
`;

const StyledRadioButton = styled(Radio.Button)`
@media (max-width: 575.98px) {
text-align: center;
}
`;

const StyledCol = styled(Col)`
color: #d09cff;
font-size: 24px;
font-weight: 500;
line-height: 28px;
text-align: center;
`;

0 comments on commit 80f8874

Please sign in to comment.