mirror of
https://github.com/filecoin-project/slate.git
synced 2024-11-29 08:49:17 +03:00
86 lines
1.9 KiB
JavaScript
86 lines
1.9 KiB
JavaScript
import * as React from "react";
|
|
import * as Constants from "~/common/constants";
|
|
|
|
import { css } from "@emotion/react";
|
|
|
|
const STYLES_ISSUE_CARD = css`
|
|
width: 33.33%;
|
|
height: calc(100vh / 4);
|
|
margin: -1px 0 0 -1px;
|
|
transition: 200ms ease box-shadow;
|
|
border: 1px solid ${Constants.system.grayLight2};
|
|
:hover {
|
|
transition: 200ms ease box-shadow;
|
|
box-shadow: 0px 10px 40px 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
`;
|
|
|
|
const STYLES_ISSUE_CARD_TEXT = css`
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
align-items: left;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 12px;
|
|
`;
|
|
|
|
const STYLES_ISSUE_CARD_TITLE = css`
|
|
padding: 12px;
|
|
font-size: ${Constants.typescale.lvl1};
|
|
text-align: left;
|
|
width: 100%;
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
padding: 0px;
|
|
font-size: 1rem;
|
|
}
|
|
`;
|
|
|
|
const STYLES_ISSUE_CARD_EXPLAINER = css`
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
padding: 12px;
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
padding: 0px;
|
|
}
|
|
`;
|
|
|
|
const STYLES_ISSUE_CARD_PARAGRAPH = css`
|
|
font-size: ${Constants.typescale.lvl0};
|
|
text-align: left;
|
|
text-decoration: none;
|
|
color: ${Constants.system.black};
|
|
transition: 200ms ease all;
|
|
:hover,
|
|
:active {
|
|
color: ${Constants.system.black};
|
|
background-color: transparent;
|
|
}
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
font-size: 0.78rem;
|
|
}
|
|
`;
|
|
|
|
export default class Issue extends React.Component {
|
|
render() {
|
|
return (
|
|
<div css={STYLES_ISSUE_CARD}>
|
|
<a css={STYLES_ISSUE_CARD_PARAGRAPH} href={this.props.url} target="_blank">
|
|
<div css={STYLES_ISSUE_CARD_TEXT}>
|
|
<div css={STYLES_ISSUE_CARD_TITLE}>{this.props.title}</div>
|
|
<div css={STYLES_ISSUE_CARD_EXPLAINER}>
|
|
<div>View Issue</div>
|
|
<div>-></div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
);
|
|
}
|
|
}
|