Skip to content

Commit

Permalink
new ui implemented
Browse files Browse the repository at this point in the history
  • Loading branch information
@fabiolalombardim
fabiolalombardim committed Apr 30, 2024
1 parent 2303b54 commit d02562c
Show file tree
Hide file tree
Showing 5 changed files with 186 additions and 144 deletions.
20 changes: 11 additions & 9 deletions src/modules/lite/explorer/components/ChoiceItemSelected.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,22 @@ import { Button, Divider, Grid, styled, Theme, Typography, useMediaQuery, useThe
import { Choice } from "models/Choice"

const StyledContainer = styled(Grid)(({ theme }: { theme: Theme }) => ({
borderRadius: 4,
borderRadius: 8,
minHeight: 75,
border: "1px solid",
borderColor: theme.palette.primary.light,
cursor: "pointer"
border: "none",
cursor: "pointer",
backgroundColor: theme.palette.primary.main
}))

const Text = styled(Typography)({
fontWeight: 300
})

const StyledButton = styled(Button)({
"width": "100%",
"minHeight": "inherit",
"&:hover": {
background: "rgba(129, 254, 183, 0.62)"
background: "#2d433c"
}
})

Expand Down Expand Up @@ -60,7 +64,7 @@ export const ChoiceItemSelected: React.FC<{
isPartOfVotes()
? {
border: "1px solid",
borderColor: theme.palette.secondary.main,
borderColor: "#2D433C",
backgroundColor: "#334d43"
}
: {}
Expand All @@ -75,9 +79,7 @@ export const ChoiceItemSelected: React.FC<{
return
}}
>
<Typography variant="body1" color="textPrimary">
{choice.name}
</Typography>
<Text color="textPrimary">{choice.name}</Text>
</StyledButton>
</StyledContainer>
)
Expand Down
16 changes: 6 additions & 10 deletions src/modules/lite/explorer/components/CreatorBadge.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,18 @@
import React from "react"
import { Grid, Typography } from "@material-ui/core"
import { Grid, Typography, styled } from "@material-ui/core"
import { Blockie } from "modules/common/Blockie"
import { toShortAddress } from "services/contracts/utils"

const Text = styled(Typography)(({ theme }) => ({
color: theme.palette.primary.light
}))
export const CreatorBadge: React.FC<{ address: string | undefined }> = ({ address }) => {
return (
<Grid container style={{ gap: 15 }}>
<Grid item>
<Typography color="textPrimary" variant="subtitle2">
by
</Typography>
</Grid>
<Grid item>
<Grid container style={{ gap: 9 }}>
<Grid container style={{ gap: 9 }} alignItems="center">
<Blockie address={address || ""} size={27} />
<Typography color="textPrimary" variant="subtitle2">
{toShortAddress(address || "")}
</Typography>
<Text variant="subtitle2">{toShortAddress(address || "")}</Text>
</Grid>
</Grid>
</Grid>
Expand Down
148 changes: 81 additions & 67 deletions src/modules/lite/explorer/components/ProposalDetailCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,24 @@ import { Grid, styled, Typography, Link, useTheme, useMediaQuery, Popover, withS
import { GridContainer } from "modules/common/GridContainer"
import { ProposalStatus, TableStatusBadge } from "./ProposalTableRowStatusBadge"
import { CreatorBadge } from "./CreatorBadge"
import { FileCopyOutlined, MoreHoriz, ShareOutlined } from "@material-ui/icons"
import Share from "assets/img/share.svg"
import { CommunityBadge } from "./CommunityBadge"
import LinkIcon from "assets/img/link.svg"
import { FileCopyOutlined } from "@material-ui/icons"
import { Poll } from "models/Polls"
import dayjs from "dayjs"
import { useNotification } from "modules/common/hooks/useNotification"
import ReactHtmlParser from "react-html-parser"

const Title = styled(Typography)({
fontSize: 32,
fontWeight: 600
})

const Subtitle = styled(Typography)(({ theme }) => ({
fontSize: 18,
fontWeight: 300,
lineHeight: "160%" /* 28.8px */,
color: theme.palette.primary.light
}))

const LogoItem = styled("img")(({ theme }) => ({
cursor: "pointer",
[theme.breakpoints.down("sm")]: {
Expand All @@ -21,8 +30,12 @@ const LogoItem = styled("img")(({ theme }) => ({

const TextContainer = styled(Typography)(({ theme }) => ({
display: "flex",
color: theme.palette.primary.light,
alignItems: "center",
gap: 10,
fontSize: 18,
fontWeight: 300,
lineHeight: "160%" /* 28.8px */,
marginRight: 8,
[theme.breakpoints.down("sm")]: {
marginTop: 20
Expand All @@ -32,6 +45,10 @@ const TextContainer = styled(Typography)(({ theme }) => ({
const EndTextContainer = styled(Typography)(({ theme }) => ({
display: "flex",
alignItems: "center",
fontSize: 18,
fontWeight: 300,
lineHeight: "160%" /* 28.8px */,
color: theme.palette.primary.light,
gap: 10,
marginRight: 8,
[theme.breakpoints.down("sm")]: {
Expand All @@ -40,12 +57,20 @@ const EndTextContainer = styled(Typography)(({ theme }) => ({
}))

const EndText = styled(Typography)(({ theme }) => ({
color: theme.palette.primary.light,
fontSize: 18,
fontWeight: 300,
lineHeight: "160%" /* 28.8px */,
[theme.breakpoints.down("sm")]: {
marginTop: 20
}
}))

const Divider = styled(Typography)(({ theme }) => ({
color: theme.palette.primary.light,
fontSize: 18,
fontWeight: 300,
lineHeight: "160%" /* 28.8px */,
marginLeft: 8,
marginRight: 8,
[theme.breakpoints.down("sm")]: {
Expand All @@ -69,6 +94,12 @@ const CopyIcon = styled(FileCopyOutlined)({
cursor: "pointer"
})

const LinearContainer = styled(GridContainer)({
background: "inherit !important",
backgroundColor: "inherit !important",
padding: "0px 0px 24px 0px"
})

const CustomPopover = withStyles({
paper: {
"marginTop": 10,
Expand All @@ -81,6 +112,19 @@ const CustomPopover = withStyles({
}
})(Popover)

const DescriptionContainer = styled(Grid)(({ theme }) => ({
background: theme.palette.secondary.light,
padding: "40px 48px 42px 48px",
borderRadius: 8,
marginTop: 20,
gap: 32
}))

const DescriptionText = styled(Typography)({
fontSize: 24,
fontWeight: 600
})

export const ProposalDetailCard: React.FC<{ poll: Poll | undefined; daoId: string }> = ({ poll, daoId }) => {
const theme = useTheme()
const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm"))
Expand Down Expand Up @@ -111,8 +155,8 @@ export const ProposalDetailCard: React.FC<{ poll: Poll | undefined; daoId: strin

return (
<>
<GridContainer container style={{ gap: 50 }}>
<Grid container style={{ gap: 25 }}>
<LinearContainer container style={{ gap: 50 }}>
<Grid container style={{ gap: 20 }}>
<Grid
item
container
Expand All @@ -122,45 +166,27 @@ export const ProposalDetailCard: React.FC<{ poll: Poll | undefined; daoId: strin
justifyContent={isMobileSmall ? "center" : "space-between"}
>
<Grid item>
<Typography variant="h1" color="textPrimary">
{poll?.name}
</Typography>
<Title color="textPrimary">{poll?.name}</Title>
</Grid>
</Grid>

<Grid container justifyContent={isMobileSmall ? "center" : "space-between"} alignItems={"center"}>
<Grid item>
<Grid container style={{ gap: 18 }} direction="row">
<Grid
container
style={{ gap: 10 }}
alignItems="center"
justifyContent={isMobileSmall ? "center" : "flex-start"}
>
<Grid item>
<Grid
container
style={{ gap: 12, cursor: "pointer" }}
alignItems="center"
aria-describedby={id}
onClick={handleClick}
>
<LogoItem src={Share} />
<Typography color="secondary" variant="body2">
Share
</Typography>
</Grid>
<CustomPopover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "left"
}}
>
<Grid container direction="row" onClick={handleCopy}>
<CopyIcon />
<Typography variant="subtitle2">Copy link</Typography>
</Grid>
</CustomPopover>
<Subtitle>Off-Chain Proposal • Created by</Subtitle>
</Grid>
<Grid item>
<CreatorBadge address={poll?.author} />
</Grid>
</Grid>
</Grid>
</Grid>

<Grid container justifyContent={isMobileSmall ? "center" : "space-between"} alignItems={"center"}>
<Grid item>
<Grid
Expand All @@ -173,48 +199,36 @@ export const ProposalDetailCard: React.FC<{ poll: Poll | undefined; daoId: strin
<TableStatusBadge status={poll?.isActive || ProposalStatus.ACTIVE} />
</Grid>
<Grid item>
<CommunityBadge id={daoId} />
</Grid>
<Grid item>
<CreatorBadge address={poll?.author} />
<Grid item container direction="row" spacing={2} alignItems="center">
<TextContainer variant="body2">Created</TextContainer>
<EndText variant="body2">{dayjs(Number(poll?.startTime)).format("LL")}</EndText>
<Divider>•</Divider>
<EndTextContainer variant="body2">
{poll?.isActive === "closed" ? "Closed" : "End date"}{" "}
</EndTextContainer>
<EndText variant="body2">{dayjs(Number(poll?.endTime)).format("ll")}</EndText>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid container direction="row">
<Grid item container direction="row" spacing={2} alignItems="center">
<TextContainer color="textPrimary" variant="body2">
Start date:{" "}
</TextContainer>
<EndText variant="body2" color="textPrimary">
{dayjs(Number(poll?.startTime)).format("lll")}
</EndText>
<Divider color="textPrimary">-</Divider>
<EndTextContainer color="textPrimary" variant="body2">
End date:{" "}
</EndTextContainer>
<EndText variant="body2" color="textPrimary">
{dayjs(Number(poll?.endTime)).format("lll")}
</EndText>
</Grid>
</Grid>

<Grid container>
<Typography variant="body2" color="textPrimary">
{ReactHtmlParser(poll?.description ? poll?.description : "")}
</Typography>
</Grid>
<DescriptionContainer container direction="column">
<DescriptionText color="textPrimary">Details</DescriptionText>

<Subtitle>{ReactHtmlParser(poll?.description ? poll?.description : "")}</Subtitle>
</DescriptionContainer>

{poll?.externalLink ? (
{/* {poll?.externalLink ? (
<Grid style={{ display: isMobileSmall ? "block" : "flex" }} container alignItems="center">
<LogoItem src={LinkIcon} />
<StyledLink color="secondary" href={poll?.externalLink} target="_">
{poll?.externalLink}
</StyledLink>
</Grid>
) : null}
) : null} */}
</Grid>
</GridContainer>
</LinearContainer>
</>
)
}
Loading

0 comments on commit d02562c

Please sign in to comment.