LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat(2601): token homepage proposals should have their width halved on larger breakpoints (#2603)

Browse Source
This commit is contained in:
Sam Keen 2023-01-12 14:18:17 +00:00 committed by GitHub
parent 6410cb54b6
commit 47c0ec01eb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/token/src/components/heading/heading.tsx
View File

@ -43,7 +43,7 @@ export const SubHeading = ({
return ( return (
<h2 <h2
className={classNames('text-2xl font-alpha calt uppercase', { className={classNames('text-2xl font-alpha calt uppercase break-words', {
'mx-auto': centerContent, 'mx-auto': centerContent,
'mb-0': !marginBottom, 'mb-0': !marginBottom,
'mb-4': marginBottom, 'mb-4': marginBottom,

5
apps/token/src/routes/home/index.tsx
View File

@ -46,7 +46,10 @@ const HomeProposals = ({
{t(`readMoreGovernance`)} {t(`readMoreGovernance`)}
</ExternalLink> </ExternalLink>
</div> </div>
<ul data-testid="home-proposal-list"> <ul
data-testid="home-proposal-list"
className="grid md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 gap-6"
>
{proposals.map((proposal) => ( {proposals.map((proposal) => (
<ProposalsListItem key={proposal.id} proposal={proposal} /> <ProposalsListItem key={proposal.id} proposal={proposal} />
))} ))}

2
apps/token/src/routes/proposals/components/proposals-list-item/proposals-list-item.tsx
View File

@ -13,7 +13,7 @@ export const ProposalsListItem = ({ proposal }: ProposalsListItemProps) => {
return ( return (
<li id={proposal.id} data-testid="proposals-list-item"> <li id={proposal.id} data-testid="proposals-list-item">
<RoundedWrapper paddingBottom={true}> <RoundedWrapper paddingBottom={true} heightFull={true}>
<ProposalHeader proposal={proposal} /> <ProposalHeader proposal={proposal} />
<ProposalsListItemDetails proposal={proposal} /> <ProposalsListItemDetails proposal={proposal} />
</RoundedWrapper> </RoundedWrapper>

3
libs/ui-toolkit/src/components/rounded-wrapper/rounded-wrapper.tsx
View File

@ -6,6 +6,7 @@ export interface RoundedWrapperProps {
border?: boolean; border?: boolean;
paddingBottom?: boolean; paddingBottom?: boolean;
marginBottomLarge?: boolean; marginBottomLarge?: boolean;
heightFull?: boolean;
} }
export const RoundedWrapper = ({ export const RoundedWrapper = ({
@ -13,6 +14,7 @@ export const RoundedWrapper = ({
border = true, border = true,
paddingBottom = false, paddingBottom = false,
marginBottomLarge = false, marginBottomLarge = false,
heightFull = false,
}: RoundedWrapperProps) => ( }: RoundedWrapperProps) => (
<div <div
className={classnames('rounded-xl pt-4 px-4 overflow-hidden', { className={classnames('rounded-xl pt-4 px-4 overflow-hidden', {
@ -20,6 +22,7 @@ export const RoundedWrapper = ({
'pb-4': paddingBottom, 'pb-4': paddingBottom,
'mb-10': marginBottomLarge, 'mb-10': marginBottomLarge,
'mb-4': !marginBottomLarge, 'mb-4': !marginBottomLarge,
'h-full': heightFull,
})} })}
> >
{children} {children}