Off-chain polls new UI

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
         }}
       >
-        <Typography variant="body1" color="textPrimary">
-          {choice.name}
-        </Typography>
+        <Text color="textPrimary">{choice.name}</Text>
       </StyledButton>
     </StyledContainer>
   )

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,

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 (
     <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>

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 (
     <>
-      <GridContainer container style={{ gap: 50 }}>
-        <Grid container style={{ gap: 25 }}>
+      <LinearContainer container style={{ gap: 50 }}>
+        <Grid container style={{ gap: 20 }}>
           <Grid
             item
             container
@@ -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
@@ -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>
     </>
   )
 }