move claim-grid link to bottom right

This commit is contained in:
Sean Yesmunt 2020-07-22 16:32:18 -04:00
parent 90327a72ed
commit aa092baec4
2 changed files with 17 additions and 11 deletions

View file

@ -61,21 +61,20 @@ function HomePage(props: Props) {
{rowData.map(({ title, link, help, options = {} }) => ( {rowData.map(({ title, link, help, options = {} }) => (
<div key={title} className="claim-grid__wrapper"> <div key={title} className="claim-grid__wrapper">
<h1 className="section__actions"> <h1 className="section__actions">
{link ? ( <span className="claim-grid__title">{title}</span>
{help}
</h1>
<ClaimTilesDiscover {...options} />
{link && (
<Button <Button
className="claim-grid__title" className="claim-grid__title--secondary"
button="link" button="link"
navigate={link} navigate={link}
iconRight={ICONS.ARROW_RIGHT} iconRight={ICONS.ARROW_RIGHT}
label={title} label={title}
/> />
) : (
<span className="claim-grid__title">{title}</span>
)} )}
{help}
</h1>
<ClaimTilesDiscover {...options} />
</div> </div>
))} ))}
</Page> </Page>

View file

@ -284,6 +284,8 @@
} }
.claim-grid__wrapper { .claim-grid__wrapper {
display: flex;
flex-direction: column;
&:not(:first-of-type) { &:not(:first-of-type) {
margin-top: var(--spacing-l); margin-top: var(--spacing-l);
} }
@ -303,6 +305,11 @@
} }
} }
.claim-grid__title--secondary {
margin-left: auto;
margin-top: calc(var(--spacing-m) * -1);
}
.claim-grid__help { .claim-grid__help {
margin-bottom: 12px; margin-bottom: 12px;