diff --git a/src/modules/explorer/pages/DAOList/components/DAOItem.tsx b/src/modules/explorer/pages/DAOList/components/DAOItem.tsx
index d566d6a2..a6ba130b 100644
--- a/src/modules/explorer/pages/DAOList/components/DAOItem.tsx
+++ b/src/modules/explorer/pages/DAOList/components/DAOItem.tsx
@@ -6,6 +6,8 @@ import { useProposals } from "services/services/dao/hooks/useProposals"
import { ProposalStatus } from "services/services/dao/mappers/proposal/types"
import { usePolls } from "modules/lite/explorer/hooks/usePolls"
import dayjs from "dayjs"
+import { formatNumber } from "modules/explorer/utils/FormatNumber"
+import BigNumber from "bignumber.js"
const Container = styled(Grid)(({ theme }: { theme: Theme }) => ({
"background": theme.palette.primary.main,
@@ -18,7 +20,7 @@ const Container = styled(Grid)(({ theme }: { theme: Theme }) => ({
"padding": "34px 48px",
"minWidth": "340px",
"alignContent": "baseline",
- "gap": 18,
+ "gap": 30,
"maxHeight": 282,
["@media (max-width:760px)"]: {
@@ -38,16 +40,23 @@ const Container = styled(Grid)(({ theme }: { theme: Theme }) => ({
}
}))
-const SymbolText = styled(Typography)({
- fontSize: "18px",
+const SymbolText = styled(Typography)(({ theme }: { theme: Theme }) => ({
+ fontSize: "24px",
fontWeight: 300,
color: "#bfc5ca",
lineHeight: "normal",
+ marginTop: 8,
+ marginLeft: "12%",
- ["@media (max-width:1335px)"]: {
- fontSize: "16px"
+ [theme.breakpoints.down("md")]: {
+ fontSize: 18
+ },
+
+ [theme.breakpoints.down("sm")]: {
+ fontSize: 18,
+ marginLeft: "0%"
}
-})
+}))
const NameText = styled(Typography)(({ theme }) => ({
whiteSpace: "nowrap",
@@ -85,6 +94,11 @@ const ItemText = styled(Typography)({
whiteSpace: "pre"
})
+const ItemTextSmall = styled(Typography)({
+ fontWeight: 600,
+ fontSize: 16
+})
+
const Badge = styled(Grid)(({ theme, dao_type }: { theme: Theme; dao_type: string }) => ({
"borderRadius": "50px",
"padding": "8px 16px",
@@ -114,7 +128,7 @@ export const DAOItem: React.FC<{
}
}> = ({ dao }) => {
const theme = useTheme()
- const isExtraSmall = useMediaQuery(theme.breakpoints.down("xs"))
+ const isExtraSmall = useMediaQuery(theme.breakpoints.down("sm"))
const daoType = dao.dao_type.name
const daoHref =
daoType !== "lambda" && daoType !== "lite"
@@ -123,18 +137,6 @@ export const DAOItem: React.FC<{
? `dao/${dao.id}`
: `lite/dao/${dao.id}`
- const { data: activeProposals } = useProposals(dao.id, ProposalStatus.ACTIVE)
- const { data: polls } = usePolls(dao.id)
- const activeLiteProposals = polls?.filter(p => Number(p.endTime) > dayjs().valueOf())
-
- const getTotalActiveProposals = () => {
- if (daoType === "lite") {
- return activeLiteProposals?.length
- } else {
- return (activeProposals ? activeProposals?.length : 0) + (activeLiteProposals ? activeLiteProposals?.length : 0)
- }
- }
-
return (
@@ -151,20 +153,29 @@ export const DAOItem: React.FC<{
{ReactHtmlParser(dao.description)}
-
-
- DAO {"\n"}Token
- {dao?.symbol?.toUpperCase()}
-
-
- Voting {"\n"}Addresses{" "}
- {dao.votingAddressesCount}
+ {!isExtraSmall ? (
+
+
+ DAO {"\n"}Token
+ {dao?.symbol?.toUpperCase()}
+
+
+ Voting {"\n"}Addresses{" "}
+ {formatNumber(new BigNumber(dao.votingAddressesCount))}
+
-
- Active {"\n"}Proposals
- {getTotalActiveProposals()}
+ ) : (
+
+
+ DAO {"\n"}Token
+ {dao?.symbol?.toUpperCase()}
+
+
+ Voting Addresses
+ {formatNumber(new BigNumber(dao.votingAddressesCount))}
+
-
+ )}
)