Skip to content

Commit

Permalink
new cards wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@fabiolalombardim
fabiolalombardim committed Nov 24, 2023
1 parent 5f02720 commit a533b27
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 55 deletions.
101 changes: 59 additions & 42 deletions src/modules/explorer/pages/DAOList/components/DAOItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ import hexToRgba from "hex-to-rgba"
import { startCase } from "lodash"
import React from "react"
import { EnvKey, getEnv } from "services/config"
import ReactHtmlParser from "react-html-parser"
import { useProposals } from "services/services/dao/hooks/useProposals"
import { ProposalStatus } from "services/services/dao/mappers/proposal/types"

const SectionNames = styled(Grid)(({ theme }: { theme: Theme }) => ({
width: "55%",
Expand All @@ -19,28 +22,17 @@ const SectionNames = styled(Grid)(({ theme }: { theme: Theme }) => ({

const Container = styled(Grid)(({ theme }: { theme: Theme }) => ({
"background": theme.palette.primary.main,
"minHeight": 138,
"minHeight": 282,
"wordBreak": "break-all",
"borderRadius": 8,
"boxSizing": "border-box",
"padding": 32,
"cursor": "pointer",
"transition": "0.15s ease-out",
"maxWidth": 490,

["@media (max-width:1335px)"]: {
minHeight: 130
},

["@media (max-width:1155px)"]: {
minHeight: 123
},

["@media (max-width:1030px)"]: {},

["@media (max-width:960px)"]: {
minHeight: 210
},
"padding": "34px 48px",
"minWidth": "340px",
"alignContent": "baseline",
"gap": 18,
"maxHeight": 282,

["@media (max-width:760px)"]: {
maxWidth: "86vw"
Expand All @@ -60,6 +52,8 @@ const Container = styled(Grid)(({ theme }: { theme: Theme }) => ({
const SymbolText = styled(Typography)({
fontSize: "18px",
fontWeight: 300,
color: "#bfc5ca",
lineHeight: "normal",

["@media (max-width:1335px)"]: {
fontSize: "16px"
Expand All @@ -71,18 +65,9 @@ const NameText = styled(Typography)(({ theme }) => ({
textOverflow: "ellipsis",
color: theme.palette.text.primary,
overflow: "hidden",
fontSize: "32px",
fontSize: 36,
maxWidth: 245,

["@media (max-width:1335px)"]: {
fontSize: "29px"
},

["@media (max-width:1155px)"]: {
fontSize: "26px"
},

["@media (max-width:1030px)"]: {},
fontWeight: 600,

["@media (max-width:960px)"]: {
fontSize: "28px",
Expand All @@ -91,6 +76,20 @@ const NameText = styled(Typography)(({ theme }) => ({
}
}))

const DescriptionText = styled(Typography)({
"color": "#bfc5ca",
"overflow": "hidden",
"height": 54,
"textOverflow": "ellipsis",
"fontSize": 18,
"fontWeight": 300,
"display": "-webkit-box",
"-webkit-line-clamp": 2 /* number of lines to show */,
"line-clamp": 2,
"-webkit-box-orient": "vertical",
"maxHeight": 60
})

const NumberText = styled(Typography)({
fontSize: "28px",
fontWeight: 300,
Expand Down Expand Up @@ -129,17 +128,22 @@ const VotingAddressesText = styled(Typography)({
}
})

const ItemText = styled(Typography)({
fontWeight: 600,
fontSize: 16,
whiteSpace: "pre"
})

const Badge = styled(Grid)(({ theme, dao_type }: { theme: Theme; dao_type: string }) => ({
"borderRadius": "50px",
"padding": "3px 8px 3px 8px",
"padding": "8px 16px",
"height": "auto",
"boxSizing": "border-box",
"width": "fit-content",
"textAlign": "center",
"float": "right",
"background":
dao_type === "lambda" ? hexToRgba(theme.palette.secondary.main, 0.4) : hexToRgba(theme.palette.warning.main, 0.4),
"color": dao_type === "lambda" ? theme.palette.secondary.main : theme.palette.warning.main,
"background": "#2d433c",
"color": theme.palette.secondary.main,
"& > div": {
height: "100%"
},
Expand All @@ -155,6 +159,7 @@ export const DAOItem: React.FC<{
votingAddresses: string[]
dao_type: { name: string }
votingAddressesCount: number
description: string
}
}> = ({ dao }) => {
const theme = useTheme()
Expand All @@ -167,23 +172,35 @@ export const DAOItem: React.FC<{
? `dao/${dao.id}`
: `lite/dao/${dao.id}`

const { data: activeProposals } = useProposals(dao.id, ProposalStatus.ACTIVE)

return (
<Link underline="none" href={daoHref}>
<Container container justifyContent="space-between">
<SectionNames>
<Grid>
<SymbolText color="secondary">{dao?.symbol?.toUpperCase()}</SymbolText>
<Container container justifyContent="space-between" alignItems="center">
<Grid container direction="row" justifyContent="space-between">
<Grid item xs={7} md={9}>
<NameText color="textPrimary">{dao.name}</NameText>
</Grid>
</SectionNames>
<Grid>
<Grid item xs={12} sm>
<Grid item>
{daoType === "lambda" ? <Badge dao_type={daoType}>V3</Badge> : null}
{daoType === "registry" || daoType === "treasury" ? <Badge dao_type={daoType}>V2</Badge> : null}
{daoType === "lite" ? <Badge dao_type={daoType}>Lite</Badge> : null}

<NumberText color="textPrimary"> {dao.votingAddressesCount}</NumberText>
<VotingAddressesText color="textPrimary">Voting Addresses</VotingAddressesText>
</Grid>
</Grid>
<Grid container direction="row">
<DescriptionText>{ReactHtmlParser(dao.description)}</DescriptionText>
</Grid>
<Grid container direction="row" justifyContent="space-between">
<Grid xs={3} container item direction="column">
<ItemText color="textPrimary">DAO {"\n"}Token</ItemText>
<SymbolText>{dao?.symbol?.toUpperCase()}</SymbolText>
</Grid>
<Grid xs={3} container item direction="column">
<ItemText color="textPrimary">Voting {"\n"}Addresses</ItemText>{" "}
<SymbolText>{dao.votingAddressesCount}</SymbolText>
</Grid>
<Grid xs={3} container item direction="column">
<ItemText color="textPrimary">Active {"\n"}Proposals</ItemText> <SymbolText>{"-"}</SymbolText>
</Grid>
</Grid>
</Container>
Expand Down
29 changes: 16 additions & 13 deletions src/modules/explorer/pages/DAOList/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,13 +46,15 @@ const PageContainer = styled("div")(({ theme }) => ({

const StyledTab = styled(Button)(({ theme, isSelected }: { theme: Theme; isSelected: boolean }) => ({
"fontSize": 18,
"height": 40,
"fontWeight": 400,
"paddingLeft": 20,
"paddingRight": 20,
"paddingTop": 0,
"paddingBottom": 0,
"borderRadius": 8,
"color": isSelected ? theme.palette.secondary.main : "#fff",
"backgroundColor": isSelected ? "rgba(129, 254, 183, 0.20)" : theme.palette.primary.main,
"backgroundColor": isSelected ? "rgba(129, 254, 183, 0.20)" : "inherit",
"&:hover": {
backgroundColor: isSelected ? "rgba(129, 254, 183, 0.20)" : theme.palette.secondary.dark,
borderRadius: 8,
Expand Down Expand Up @@ -84,21 +86,28 @@ const DAOItemGrid = styled(Grid)({
},

["@media (max-width:830px)"]: {
width: "86vw",
gap: "12px"
}
})

const DAOItemCard = styled(Grid)({
flexBasis: "48.5%",

["@media (max-width:1500px)"]: {
flexBasis: "48.5%"
},

["@media (max-width:1200px)"]: {
flexBasis: "47.5%"
},

["@media (max-width:760px)"]: {
minWidth: "100%"
}
})

const TabsContainer = styled(Grid)(({ theme }) => ({
background: theme.palette.primary.main,
padding: 12,
borderRadius: 8,
gap: 30
}))
Expand All @@ -107,6 +116,8 @@ export const DAOList: React.FC = () => {
const { network, account, tezos } = useTezos()
const { data: daos, isLoading } = useAllDAOs(network)

console.log(daos)

const theme = useTheme()
const isMobileExtraSmall = useMediaQuery(theme.breakpoints.down("xs"))
const isMobileSmall = useMediaQuery(theme.breakpoints.down("mobile"))
Expand All @@ -124,6 +135,7 @@ export const DAOList: React.FC = () => {
.map(dao => ({
id: dao.address,
name: dao.name,
description: dao.description,
symbol: dao.token.symbol,
votingAddresses: dao.ledgers ? dao.ledgers.map(l => l.holder.address) : [],
votingAddressesCount:
Expand Down Expand Up @@ -164,6 +176,7 @@ export const DAOList: React.FC = () => {
dao_type: {
name: dao.dao_type.name
},
description: dao.description,
allowPublicAccess: dao.dao_type.name === "lite" ? dao.allowPublicAccess : true
}))
.sort((a, b) => b.votingAddresses.length - a.votingAddresses.length)
Expand Down Expand Up @@ -243,11 +256,6 @@ export const DAOList: React.FC = () => {
<StyledTab
startIcon={selectedTab === 0 ? <TabsSelectedIcon /> : <TabsIcon />}
variant="contained"
style={
selectedTab !== 0
? { borderTopRightRadius: 0, borderBottomRightRadius: 0, zIndex: 0 }
: { borderRadius: 8, zIndex: 1 }
}
disableElevation={true}
onClick={() => handleChangeTab(0)}
isSelected={selectedTab === 0}
Expand All @@ -260,11 +268,6 @@ export const DAOList: React.FC = () => {
startIcon={selectedTab === 1 ? <MyDAOsSelectedIcon /> : <MyDAOsIcon />}
disableElevation={true}
variant="contained"
style={
selectedTab !== 1
? { borderTopLeftRadius: 0, borderBottomLeftRadius: 0, marginLeft: -1, zIndex: 0 }
: { borderRadius: 8, marginLeft: -1, zIndex: 1 }
}
onClick={() => handleChangeTab(1)}
isSelected={selectedTab === 1}
>
Expand Down

0 comments on commit a533b27

Please sign in to comment.