Skip to content

Commit c535061

Browse files
Man-JainMan-Jain
authored
Minor fixes mobile view proposal detail page (#670)
Signed-off-by: Manank Patni <manank321@gmail.com>
1 parent a6bb23c commit c535061

1 file changed

Lines changed: 88 additions & 93 deletions

File tree

‎src/modules/lite/explorer/components/ProposalDetailCard.tsx‎

Lines changed: 88 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -110,111 +110,106 @@ export const ProposalDetailCard: React.FC<{ poll: Poll | undefined; daoId: strin
110110

111111
return (
112112
<>
113-
{poll && poll !== undefined ? (
114-
<GridContainer container style={{ gap: 50 }}>
115-
<Grid container style={{ gap: 25 }}>
116-
<Grid
117-
item
118-
container
119-
alignItems="flex-end"
120-
direction="row"
121-
style={{ gap: isMobileSmall ? 25 : 0 }}
122-
justifyContent="space-between"
123-
>
124-
<Grid item>
125-
<Typography variant="h1" color="textPrimary">
126-
{poll?.name}
127-
</Typography>
128-
</Grid>
129-
<Grid item>
130-
<Grid container style={{ gap: 18 }} direction="row">
131-
<Grid item>
132-
<Grid
133-
container
134-
style={{ gap: 12, cursor: "pointer" }}
135-
alignItems="center"
136-
aria-describedby={id}
137-
onClick={handleClick}
138-
>
139-
<LogoItem src={Share} />
140-
<Typography color="secondary" variant="body2">
141-
Share
142-
</Typography>
143-
</Grid>
144-
<CustomPopover
145-
id={id}
146-
open={open}
147-
anchorEl={anchorEl}
148-
onClose={handleClose}
149-
anchorOrigin={{
150-
vertical: "bottom",
151-
horizontal: "left"
152-
}}
153-
>
154-
<Grid container direction="row" onClick={handleCopy}>
155-
<CopyIcon />
156-
<Typography variant="subtitle2">Copy link</Typography>
157-
</Grid>
158-
</CustomPopover>
113+
<GridContainer container style={{ gap: 50 }}>
114+
<Grid container style={{ gap: 25 }}>
115+
<Grid
116+
item
117+
container
118+
alignItems="flex-end"
119+
direction="row"
120+
style={{ gap: isMobileSmall ? 25 : 0 }}
121+
justifyContent={isMobileSmall ? "center" : "space-between"}
122+
>
123+
<Grid item>
124+
<Typography variant="h1" color="textPrimary">
125+
{poll?.name}
126+
</Typography>
127+
</Grid>
128+
<Grid item>
129+
<Grid container style={{ gap: 18 }} direction="row">
130+
<Grid item>
131+
<Grid
132+
container
133+
style={{ gap: 12, cursor: "pointer" }}
134+
alignItems="center"
135+
aria-describedby={id}
136+
onClick={handleClick}
137+
>
138+
<LogoItem src={Share} />
139+
<Typography color="secondary" variant="body2">
140+
Share
141+
</Typography>
159142
</Grid>
143+
<CustomPopover
144+
id={id}
145+
open={open}
146+
anchorEl={anchorEl}
147+
onClose={handleClose}
148+
anchorOrigin={{
149+
vertical: "bottom",
150+
horizontal: "left"
151+
}}
152+
>
153+
<Grid container direction="row" onClick={handleCopy}>
154+
<CopyIcon />
155+
<Typography variant="subtitle2">Copy link</Typography>
156+
</Grid>
157+
</CustomPopover>
160158
</Grid>
161159
</Grid>
162160
</Grid>
161+
</Grid>
163162

164-
<Grid container justifyContent={"space-between"} alignItems={"center"}>
165-
<Grid item>
166-
<Grid container justifyContent={isMobileSmall ? "space-evenly" : "flex-start"} style={{ gap: 23 }}>
167-
<Grid item>
168-
<TableStatusBadge status={poll?.isActive || ProposalStatus.ACTIVE} />
169-
</Grid>
170-
<Grid item>
171-
<CommunityBadge id={daoId} />
172-
</Grid>
173-
<Grid item>
174-
<CreatorBadge address={poll?.author} />
175-
</Grid>
163+
<Grid container justifyContent={isMobileSmall ? "center" : "space-between"} alignItems={"center"}>
164+
<Grid item>
165+
<Grid container style={{ gap: 23 }} justifyContent={isMobileSmall ? "center" : "flex-start"}>
166+
<Grid item>
167+
<TableStatusBadge status={poll?.isActive || ProposalStatus.ACTIVE} />
168+
</Grid>
169+
<Grid item>
170+
<CommunityBadge id={daoId} />
171+
</Grid>
172+
<Grid item>
173+
<CreatorBadge address={poll?.author} />
176174
</Grid>
177175
</Grid>
178176
</Grid>
179-
<Grid container direction="row">
180-
<Grid item container direction="row" spacing={2} alignItems="center">
181-
<TextContainer color="textPrimary" variant="body2">
182-
Start date:{" "}
183-
</TextContainer>
184-
<EndText variant="body2" color="textPrimary">
185-
{dayjs(Number(poll?.startTime)).format("lll")}
186-
</EndText>
187-
<Divider color="textPrimary">-</Divider>
188-
<EndTextContainer color="textPrimary" variant="body2">
189-
End date:{" "}
190-
</EndTextContainer>
191-
<EndText variant="body2" color="textPrimary">
192-
{dayjs(Number(poll?.endTime)).format("lll")}
193-
</EndText>
194-
</Grid>
195-
</Grid>
196-
197-
<Grid container>
198-
<Typography variant="body2" color="textPrimary">
199-
{poll?.description}
200-
</Typography>
177+
</Grid>
178+
<Grid container direction="row">
179+
<Grid item container direction="row" spacing={2} alignItems="center">
180+
<TextContainer color="textPrimary" variant="body2">
181+
Start date:{" "}
182+
</TextContainer>
183+
<EndText variant="body2" color="textPrimary">
184+
{dayjs(Number(poll?.startTime)).format("lll")}
185+
</EndText>
186+
<Divider color="textPrimary">-</Divider>
187+
<EndTextContainer color="textPrimary" variant="body2">
188+
End date:{" "}
189+
</EndTextContainer>
190+
<EndText variant="body2" color="textPrimary">
191+
{dayjs(Number(poll?.endTime)).format("lll")}
192+
</EndText>
201193
</Grid>
194+
</Grid>
202195

203-
{poll?.externalLink ? (
204-
<Grid style={{ display: isMobileSmall ? "block" : "flex" }} container alignItems="center">
205-
<LogoItem src={LinkIcon} />
206-
<StyledLink color="secondary" href={poll?.externalLink} target="_">
207-
{poll?.externalLink}
208-
</StyledLink>
209-
</Grid>
210-
) : null}
196+
<Grid container>
197+
<Typography variant="body2" color="textPrimary">
198+
{poll?.description}
199+
</Typography>
211200
</Grid>
212-
</GridContainer>
213-
) : (
214-
<Grid container direction="row">
215-
<Typography color="textPrimary">Could not load the requested proposal</Typography>
201+
202+
{poll?.externalLink ? (
203+
<Grid style={{ display: isMobileSmall ? "block" : "flex" }} container alignItems="center">
204+
<LogoItem src={LinkIcon} />
205+
<StyledLink color="secondary" href={poll?.externalLink} target="_">
206+
{poll?.externalLink}
207+
</StyledLink>
208+
</Grid>
209+
) : null}
216210
</Grid>
217-
)}
211+
</GridContainer>
212+
)
218213
</>
219214
)
220215
}

0 commit comments

Comments
 (0)