diff --git a/src/modules/lite/explorer/components/ChoiceItemSelected.tsx b/src/modules/lite/explorer/components/ChoiceItemSelected.tsx
index 317a74b6..7a4546c7 100644
--- a/src/modules/lite/explorer/components/ChoiceItemSelected.tsx
+++ b/src/modules/lite/explorer/components/ChoiceItemSelected.tsx
@@ -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"
}
})
@@ -60,7 +64,7 @@ export const ChoiceItemSelected: React.FC<{
isPartOfVotes()
? {
border: "1px solid",
- borderColor: theme.palette.secondary.main,
+ borderColor: "#2D433C",
backgroundColor: "#334d43"
}
: {}
@@ -75,9 +79,7 @@ export const ChoiceItemSelected: React.FC<{
return
}}
>
-
- {choice.name}
-
+ {choice.name}
)
diff --git a/src/modules/lite/explorer/components/Choices.tsx b/src/modules/lite/explorer/components/Choices.tsx
index f41e85f6..fbb9b458 100644
--- a/src/modules/lite/explorer/components/Choices.tsx
+++ b/src/modules/lite/explorer/components/Choices.tsx
@@ -20,7 +20,6 @@ import { useDAOID } from "modules/explorer/pages/DAO/router"
import { useDAO } from "services/services/dao/hooks/useDAO"
import { useTokenVoteWeight } from "services/contracts/token/hooks/useTokenVoteWeight"
import { useCommunity } from "../hooks/useCommunity"
-import BigNumber from "bignumber.js"
const ChoicesContainer = styled(Grid)(({ theme }) => ({
marginTop: 24,
diff --git a/src/modules/lite/explorer/components/CreatorBadge.tsx b/src/modules/lite/explorer/components/CreatorBadge.tsx
index 58d02a25..d2f60d6b 100644
--- a/src/modules/lite/explorer/components/CreatorBadge.tsx
+++ b/src/modules/lite/explorer/components/CreatorBadge.tsx
@@ -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 (
-
- by
-
-
-
-
+
-
- {toShortAddress(address || "")}
-
+ {toShortAddress(address || "")}
diff --git a/src/modules/lite/explorer/components/ProposalDetailCard.tsx b/src/modules/lite/explorer/components/ProposalDetailCard.tsx
index 78154080..26397f4c 100644
--- a/src/modules/lite/explorer/components/ProposalDetailCard.tsx
+++ b/src/modules/lite/explorer/components/ProposalDetailCard.tsx
@@ -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")]: {
@@ -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
@@ -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")]: {
@@ -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")]: {
@@ -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,
@@ -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"))
@@ -111,8 +155,8 @@ export const ProposalDetailCard: React.FC<{ poll: Poll | undefined; daoId: strin
return (
<>
-
-
+
+
-
- {poll?.name}
-
+ {poll?.name}
+
+
+
-
+
-
-
-
- Share
-
-
-
-
-
- Copy link
-
-
+ Off-Chain Proposal • Created by
+
+
+
-
-
-
-
-
+
+ Created
+ {dayjs(Number(poll?.startTime)).format("LL")}
+ •
+
+ {poll?.isActive === "closed" ? "Closed" : "End date"}{" "}
+
+ {dayjs(Number(poll?.endTime)).format("ll")}
+
-
-
-
- Start date:{" "}
-
-
- {dayjs(Number(poll?.startTime)).format("lll")}
-
- -
-
- End date:{" "}
-
-
- {dayjs(Number(poll?.endTime)).format("lll")}
-
-
-
-
-
- {ReactHtmlParser(poll?.description ? poll?.description : "")}
-
-
+
+ Details
+
+ {ReactHtmlParser(poll?.description ? poll?.description : "")}
+
- {poll?.externalLink ? (
+ {/* {poll?.externalLink ? (
{poll?.externalLink}
- ) : null}
+ ) : null} */}
-
+
)
}
diff --git a/src/modules/lite/explorer/components/VoteDetails.tsx b/src/modules/lite/explorer/components/VoteDetails.tsx
index e8060394..d4bf5a76 100644
--- a/src/modules/lite/explorer/components/VoteDetails.tsx
+++ b/src/modules/lite/explorer/components/VoteDetails.tsx
@@ -22,18 +22,33 @@ import { useCommunityToken } from "../hooks/useCommunityToken"
import { getTurnoutValue } from "services/utils/utils"
import { useTokenDelegationSupported } from "services/contracts/token/hooks/useTokenDelegationSupported"
import { DownloadCsvFile } from "./DownloadCsvFile"
+import { SmallButton } from "modules/common/SmallButton"
+
+const DescriptionText = styled(Typography)({
+ fontSize: 24,
+ fontWeight: 600
+})
+
+const TotalText = styled(Typography)({
+ fontSize: 18,
+ fontWeight: 600
+})
+
+const TotalValue = styled(Typography)({
+ fontSize: 18,
+ fontWeight: 300
+})
const Container = styled(Grid)(({ theme }) => ({
- background: theme.palette.primary.main,
+ background: theme.palette.secondary.light,
borderRadius: 8
}))
const TitleContainer = styled(Grid)(({ theme }) => ({
- paddingTop: 18,
- paddingLeft: 46,
- paddingRight: 46,
- paddingBottom: 18,
- borderBottom: `0.3px solid ${theme.palette.primary.light}`,
+ padding: "40px 48px 10px",
+ borderRadius: 8,
+ marginTop: 20,
+ gap: 32,
[theme.breakpoints.down("sm")]: {
padding: "18px 25px"
}
@@ -41,12 +56,15 @@ const TitleContainer = styled(Grid)(({ theme }) => ({
const LinearContainer = styled(GridContainer)({
paddingBottom: 0,
- minHeight: 110
+ minHeight: 70,
+ background: "inherit !important"
})
const LegendContainer = styled(GridContainer)({
minHeight: 30,
- paddingBottom: 0
+ paddingBottom: 0,
+ alignItems: "center",
+ background: "inherit"
})
const GraphicsContainer = styled(Grid)({
@@ -105,14 +123,12 @@ export const VoteDetails: React.FC<{
return (
-
- Results
-
+ Votes
{choices &&
choices.map((choice: Choice, index) => (
-
+
@@ -172,12 +188,12 @@ export const VoteDetails: React.FC<{
- handleClickOpen()}>
- {getTotalVoters(choices)}
-
- handleClickOpen()}>
- Votes
-
+ handleClickOpen()}>
+ Total Votes:
+
+
+ {numbro(calculateProposalTotal(choices, isXTZ ? 6 : tokenData?.decimals)).format(formatConfig)}
+
{isTokenDelegationSupported && turnout && !poll?.isXTZ ? (
({turnout.toFixed(2)} % Turnout)
@@ -194,13 +210,10 @@ export const VoteDetails: React.FC<{
sm={6}
lg={6}
style={{ gap: 10 }}
- alignItems="baseline"
+ alignItems="center"
justifyContent={isMobileSmall ? "flex-start" : "flex-end"}
>
-
- {numbro(calculateProposalTotal(choices, isXTZ ? 6 : tokenData?.decimals)).format(formatConfig)}
-
-
+ {/*
{isXTZ ? "XTZ" : poll?.tokenSymbol}
{!poll?.isXTZ && (
@@ -215,7 +228,7 @@ export const VoteDetails: React.FC<{
.toString()}
% of Total Supply)
- )}
+ )} */}
{getTotalVoters(choices) > 0 ? (
) : null}
+
+ setOpen(true)}> View Votes
({
+ background: theme.palette.secondary.light,
+ borderRadius: 8
+}))
+
export const ProposalDetails: React.FC<{ id: string }> = ({ id }) => {
const { proposalId } = useParams<{
proposalId: string
@@ -71,6 +81,7 @@ export const ProposalDetails: React.FC<{ id: string }> = ({ id }) => {
const { network } = useTezos()
const [selectedVotes, setSelectedVotes] = useState([])
const isMember = useIsMember(network, community?.tokenAddress || "", account)
+ const [isLoading, setIsLoading] = useState(false)
const votingPower = poll?.isXTZ ? voteWeight?.votingXTZWeight : voteWeight?.votingWeight
@@ -94,7 +105,7 @@ export const ProposalDetails: React.FC<{ id: string }> = ({ id }) => {
if (!wallet) {
return
}
-
+ setIsLoading(true)
try {
const publicKey = (await wallet?.client.getActiveAccount())?.publicKey
const { signature, payloadBytes } = await getSignature(account, wallet, JSON.stringify(votesData))
@@ -104,6 +115,7 @@ export const ProposalDetails: React.FC<{ id: string }> = ({ id }) => {
autoHideDuration: 3000,
variant: "error"
})
+ setIsLoading(false)
return
}
const resp = await voteOnLiteProposal(signature, publicKey, payloadBytes)
@@ -116,7 +128,9 @@ export const ProposalDetails: React.FC<{ id: string }> = ({ id }) => {
})
setRefresh(Math.random())
setSelectedVotes([])
+ setIsLoading(false)
} else {
+ setIsLoading(false)
console.log("Error: ", response.message)
openNotification({
message: response.message,
@@ -126,6 +140,7 @@ export const ProposalDetails: React.FC<{ id: string }> = ({ id }) => {
return
}
} catch (error) {
+ setIsLoading(false)
console.log("error: ", error)
openNotification({
message: `Could not submit vote, Please Try Again!`,
@@ -149,48 +164,58 @@ export const ProposalDetails: React.FC<{ id: string }> = ({ id }) => {
Back to community
-
+
{choices && choices.length > 0 ? (
-
-
- {choices.map((choice, index) => {
- return (
-
- )
- })}
-
- {poll?.isActive === ProposalStatus.ACTIVE ? (
-
- ) : null}
-
+ {choices.map((choice, index) => {
+ return (
+
+ )
+ })}
+
+ {poll?.isActive === ProposalStatus.ACTIVE ? (
+ !isLoading ? (
+ saveVote()}
+ style={{ marginTop: 20 }}
+ >
+ {votingPower && votingPower.gt(new BigNumber(0)) ? "Cast your vote" : "No Voting Weight"}
+
+ ) : (
+
+ )
+ ) : null}
+
+
) : null}
-
+
{poll && poll !== undefined ? (
{
diff --git a/src/theme/index.ts b/src/theme/index.ts
index fa4c0a9c..164e773e 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -261,6 +261,9 @@ export const theme = createTheme({
color: "#bfc5ca !important",
background: "inherit !important"
}
+ },
+ containedSecondary: {
+ backgroundColor: "#4ed092"
}
},
MuiInputBase: {