Skip to content

Commit

Permalink
user page - voting and proposals list item updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@fabiolalombardim
fabiolalombardim committed Jan 6, 2024
1 parent 56434b8 commit 735146f
Show file tree
Hide file tree
Showing 10 changed files with 128 additions and 95 deletions.
49 changes: 31 additions & 18 deletions src/modules/explorer/components/ProposalsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,10 @@ import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp"
import { ProposalTableRow } from "modules/lite/explorer/components/ProposalTableRow"
import { StyledDivider } from "modules/lite/explorer/components/ProposalList"
import { Poll } from "models/Polls"
import ReactPaginate from "react-paginate"
import "../pages/DAOList/styles.css"

const TableContainer = styled(ContentContainer)({
const TableContainer = styled(Grid)({
width: "100%"
})

Expand All @@ -21,7 +23,6 @@ const TableHeader = styled(Grid)({

const ProposalsFooter = styled(Grid)({
padding: "16px 46px",
borderTop: ".6px solid rgba(125,140,139, 0.2)",
minHeight: 34
})

Expand All @@ -42,25 +43,24 @@ export const ProposalsList: React.FC<Props> = ({
rightItem,
liteProposals
}) => {
const [currentPage, setCurrentPage] = useState(0)
const [open, setopen] = useState(true)
const [offset, setOffset] = useState(0)

const pageCount = Math.ceil(proposals && liteProposals ? proposals.length + liteProposals.length / 16 : 0)

// Invoke when user click to request another page.
const handlePageClick = (event: { selected: number }) => {
if (proposals) {
const newOffset = (event.selected * 4) % proposals.length
setOffset(newOffset)
setCurrentPage(event.selected)
}
}

return (
<TableContainer item>
<Grid container direction="column" wrap={"nowrap"}>
<TableHeader item container justifyContent="space-between">
<Grid item>
<Typography variant="body2" style={{ fontWeight: "500" }} color="textPrimary">
{title}
</Typography>
</Grid>
{proposals.length && proposals.length > 0 ? (
<Grid item>
<IconButton aria-label="expand row" size="small" onClick={() => setopen(!open)}>
{open ? <KeyboardArrowUpIcon htmlColor="#FFF" /> : <KeyboardArrowDownIcon htmlColor="#FFF" />}
</IconButton>
</Grid>
) : null}
</TableHeader>
<Grid container direction="column" wrap={"nowrap"} style={{ gap: 16 }}>
{proposals.length && proposals.length > 0 ? (
<Grid
item
Expand Down Expand Up @@ -88,7 +88,6 @@ export const ProposalsList: React.FC<Props> = ({
return (
<div key={`poll-${i}`}>
<ProposalTableRow poll={poll} />
{liteProposals.length - 1 !== i ? <StyledDivider key={`divider-${i}`} /> : null}
</div>
)
})
Expand All @@ -115,6 +114,20 @@ export const ProposalsList: React.FC<Props> = ({
</ProposalsFooter>
)}
</Grid>
{/* <Grid container direction="row" justifyContent="flex-end">
<ReactPaginate
previousLabel={"<"}
breakLabel="..."
nextLabel=">"
onPageChange={handlePageClick}
pageRangeDisplayed={4}
pageCount={pageCount}
renderOnZeroPageCount={null}
containerClassName={"pagination"}
activeClassName={"active"}
forcePage={currentPage}
/>
</Grid> */}
</TableContainer>
)
}
8 changes: 4 additions & 4 deletions src/modules/explorer/components/StatusBadge.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ const statusColors = (status: ProposalStatus | "all") => {
switch (status) {
case ProposalStatus.ACTIVE:
return {
background: "#0085ff33",
color: "#0085FF",
background: "#2A4660",
color: "#85C4FF",
text: "Active"
}
case ProposalStatus.PENDING:
Expand All @@ -30,8 +30,8 @@ const statusColors = (status: ProposalStatus | "all") => {
}
case ProposalStatus.REJECTED:
return {
background: "#ff5a6433",
color: "#ff5a64",
background: "#513438",
color: "#FF8FA0",
text: "Rejected"
}
case ProposalStatus.EXPIRED:
Expand Down
40 changes: 35 additions & 5 deletions src/modules/explorer/pages/User/components/UserMovements.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -283,23 +283,53 @@ export const UserMovements: React.FC<{
</TabPanel>
<TabPanel value={selectedTabVotes} index={1}>
<Grid item style={{ marginTop: 38 }}>
{proposalsCreated && cycleInfo && (
{proposalsVoted && cycleInfo && (
<ProposalsList
title={"Voting History"}
currentLevel={cycleInfo.currentLevel}
proposals={proposalsCreated}
title={"Proposals Posted"}
proposals={proposalsVoted}
rightItem={proposal => {
const voteDecision = getVoteDecision(proposal)
return (
<Grid container>
<Grid item>
<VotedText color="textPrimary">Voted</VotedText>
</Grid>
<Grid item>
<StatusText color={voteDecision ? "secondary" : "error"}>
{voteDecision ? "YES" : "NO"}
</StatusText>
</Grid>
</Grid>
)
}}
liteProposals={[]}
/>
)}
</Grid>
</TabPanel>
<TabPanel value={selectedTabVotes} index={2}>
<Grid item style={{ marginTop: 38 }}>
{proposalsCreated && cycleInfo && (
{pollsPosted && cycleInfo && (
<ProposalsList
title={"Voting History"}
currentLevel={cycleInfo.currentLevel}
proposals={[]}
title={"Proposals Posted"}
rightItem={proposal => {
const voteDecision = getVoteDecision(proposal)
return (
<Grid container>
<Grid item>
<VotedText color="textPrimary">Voted</VotedText>
</Grid>
<Grid item>
<StatusText color={voteDecision ? "secondary" : "error"}>
{voteDecision ? "YES" : "NO"}
</StatusText>
</Grid>
</Grid>
)
}}
liteProposals={pollsPosted}
/>
)}
Expand Down
9 changes: 5 additions & 4 deletions src/modules/explorer/pages/User/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,11 @@ import { useTokenDelegationSupported } from "services/contracts/token/hooks/useT
import { CopyButton } from "modules/common/CopyButton"
import { UserMovements } from "./components/UserMovements"

const ContentBlockItem = styled(Grid)({
padding: "35px 52px",
borderTop: `0.3px solid #4a4e4e`
})
const ContentBlockItem = styled(Grid)(({ theme }: { theme: Theme }) => ({
padding: "37px 42px",
background: theme.palette.primary.main,
borderRadius: 8
}))

const BalancesHeader = styled(Grid)(({ theme }: { theme: Theme }) => ({
minHeight: "178px",
Expand Down
11 changes: 2 additions & 9 deletions src/modules/lite/explorer/components/ProposalList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,6 @@ export enum ProposalPopularity {
POPULAR = "popular"
}

const ProposalListContainer = styled(Grid)(({ theme }) => ({
background: theme.palette.primary.main,
borderRadius: 8
}))

const Header = styled(Grid)({
padding: "24px 41px"
})
Expand Down Expand Up @@ -177,7 +172,7 @@ export const ProposalList: React.FC<{ polls: Poll[]; id: string | undefined; dao
)

return (
<ProposalListContainer container direction="column">
<Grid container direction="column" style={{ gap: 16 }}>
<Header container justifyContent="space-between" alignItems="center">
<Grid item xs={isMobileSmall ? 12 : 3}>
<Title variant={"body2"} color="textPrimary">
Expand Down Expand Up @@ -206,13 +201,11 @@ export const ProposalList: React.FC<{ polls: Poll[]; id: string | undefined; dao
/>
</Grid>
</Header>
<StyledDivider />
{communityPolls && communityPolls.length > 0 ? (
communityPolls.map((poll, i) => {
return (
<div style={{ width: "inherit" }} key={`poll-${i}`}>
<ProposalTableRow poll={poll} daoId={daoId} />
{communityPolls.length - 1 !== i ? <StyledDivider key={`divider-${i}`} /> : null}
</div>
)
})
Expand All @@ -221,6 +214,6 @@ export const ProposalList: React.FC<{ polls: Poll[]; id: string | undefined; dao
<NoProposalsText color="textPrimary">No proposals</NoProposalsText>
</Header>
)}
</ProposalListContainer>
</Grid>
)
}
45 changes: 20 additions & 25 deletions src/modules/lite/explorer/components/ProposalTableRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,34 @@ import { styled, Grid, Typography, useTheme, useMediaQuery, LinearProgress } fro
import { RowContainer } from "./tables/RowContainer"
import { ProposalStatus, TableStatusBadge } from "./ProposalTableRowStatusBadge"
import { useHistory } from "react-router"
import { Blockie } from "modules/common/Blockie"
import { toShortAddress } from "services/contracts/utils"
import { Poll } from "models/Polls"
import ReactHtmlParser from "react-html-parser"

import dayjs from "dayjs"
export interface ProposalTableRowData {
daoId?: string
id: string
}

const ArrowInfo = styled(Typography)(({ theme }) => ({
fontFamily: "Roboto Flex",
fontWeight: 500,
fontWeight: 300,
fontSize: 16,
color: "#bfc5ca",
[theme.breakpoints.down("xs")]: {
marginTop: 5
}
}))

const Address = styled(Typography)({
marginLeft: 12
})

const BlockieContainer = styled(Grid)({
marginBottom: 19
const Title = styled(Typography)({
fontWeight: 600,
fontSize: 18
})

const DescriptionText = styled(Typography)(({ theme }) => ({
fontWeight: 300,
fontSize: 18,
width: "inherit",
color: "#BFC5CA",
wordBreak: "break-word",
[theme.breakpoints.down("sm")]: {
fontSize: 16
Expand All @@ -48,37 +45,35 @@ export const ProposalTableRow: React.FC<{ poll: Poll; daoId?: string }> = ({ pol

return (
<RowContainer
style={{ background: "#2F3438", borderRadius: 8 }}
item
container
alignItems="center"
alignItems="baseline"
onClick={() =>
navigate.push(`/explorer/lite/dao/${poll.daoID}/community/proposal/${poll._id}`, { poll: poll, daoId: daoId })
}
>
<BlockieContainer container direction="row">
<Blockie address={"tz1bQgEea45ciBpYdFj4y4P3hNyDM8aMF6WB"} size={24} />
<Address color="textPrimary" variant="subtitle2">
{toShortAddress(poll.author)}
</Address>
</BlockieContainer>
<Grid container item style={{ gap: 25 }} xs={12} md={12} justifyContent={isMobile ? "center" : "flex-start"}>
<Typography variant="h4" color="textPrimary" align={isMobile ? "center" : "left"}>
<Grid container item style={{ gap: 16 }} xs={12} md={12} justifyContent={isMobile ? "center" : "flex-start"}>
<Title color="textPrimary" align={isMobile ? "center" : "left"}>
{poll.name}
</Typography>
</Title>

<Grid container direction="row">
<DescriptionText>{ReactHtmlParser(poll.description)}</DescriptionText>
</Grid>

<Grid
container
direction={isMobile ? "column" : "row"}
alignItems={isMobileSmall ? "center" : "flex-start"}
alignItems={isMobileSmall ? "center" : "center"}
wrap="nowrap"
style={{ gap: 18 }}
>
<TableStatusBadge status={poll.isActive || ProposalStatus.ACTIVE} />
<ArrowInfo color="textPrimary">{poll.timeFormatted}</ArrowInfo>
</Grid>

<Grid>
<DescriptionText color="textPrimary">{ReactHtmlParser(poll.description)}</DescriptionText>
{poll.isActive === ProposalStatus.ACTIVE ? (
<ArrowInfo> • &nbsp; Created {dayjs(poll.startTime).format("LL")}</ArrowInfo>
) : null}
</Grid>
</Grid>
</RowContainer>
Expand Down
13 changes: 7 additions & 6 deletions src/modules/lite/explorer/components/ProposalTableRowStatusBadge.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,19 @@ export enum ProposalStatus {

const getStatusColor = (status: ProposalStatus, theme: Theme): string => {
const statusToColor = {
[ProposalStatus.ACTIVE]: theme.palette.secondary.main,
[ProposalStatus.CLOSED]: "#7e496f"
[ProposalStatus.ACTIVE]: "#85c4ff",
[ProposalStatus.CLOSED]: "#cc8aff"
}

return statusToColor[status]
}

const Badge = styled(Grid)(({ status, theme }: { status: ProposalStatus; theme: Theme }) => ({
"borderRadius": 4,
"borderRadius": 50,
"boxSizing": "border-box",
"minWidth": 87,
"textAlign": "center",
"padding": "2px 16px",
"padding": "4px 16px",

"background": hexToRgba(getStatusColor(status, theme), 0.4),
"color": getStatusColor(status, theme),
Expand All @@ -34,14 +34,15 @@ const Badge = styled(Grid)(({ status, theme }: { status: ProposalStatus; theme:

const Text = styled(Typography)({
fontWeight: 500,
fontSize: 16
fontSize: 16,
textTransform: "capitalize"
})

export const TableStatusBadge: React.FC<{ status: ProposalStatus } & GridProps> = ({ status }) => (
<Badge status={status} theme={theme}>
<Grid container alignItems="center" justifyContent="center">
<Grid item>
<Text> {status.toUpperCase()} </Text>
<Text> {status} </Text>
</Grid>
</Grid>
</Badge>
Expand Down
4 changes: 2 additions & 2 deletions src/modules/lite/explorer/components/tables/RowContainer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { Grid, styled } from "@material-ui/core"

export const RowContainer = styled(Grid)(({ theme }) => ({
minHeight: 145,
padding: "44px 38px",
minHeight: 192,
padding: "37px 48px",
cursor: "pointer",
[theme.breakpoints.down("md")]: {
padding: "34px 38px",
Expand Down
Loading

0 comments on commit 735146f

Please sign in to comment.