blob: dc00bf74324e58dd186560edc15768d0e65b90a6 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
import { colors, Link } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import { Container } from 'ts/components/ui/container';
import { Text } from 'ts/components/ui/text';
import { Deco, Key, TutorialInfo } from 'ts/types';
import { Translate } from 'ts/utils/translate';
import { styled } from 'ts/style/theme';
export interface TutorialButtonProps {
className?: string;
translate: Translate;
tutorialInfo: TutorialInfo;
}
const PlainTutorialButton: React.StatelessComponent<TutorialButtonProps> = ({ translate, tutorialInfo, className }) => (
<Container className={className}>
<Link to={tutorialInfo.link.to} shouldOpenInNewTab={tutorialInfo.link.shouldOpenInNewTab}>
<div className="flex relative">
<div className="col col-1 flex items-center sm-pr3">
<img src={tutorialInfo.iconUrl} height={40} />
</div>
<div className="lg-pl2 md-pl2 sm-pl3 col col-10">
<Text Tag="div" fontSize="18" fontColor={colors.lightLinkBlue} fontWeight="bold">
{translate.get(tutorialInfo.link.title as Key, Deco.Cap)}
</Text>
<Text Tag="div" fontColor={colors.grey750} fontSize="16">
{translate.get(tutorialInfo.description as Key, Deco.Cap)}
</Text>
</div>
<div className="col col-1 flex items-center justify-end">
<div className="right">
<i
className="zmdi zmdi-chevron-right bold"
style={{ fontSize: 26, color: colors.lightLinkBlue }}
/>
</div>
</div>
</div>
</Link>
</Container>
);
export const TutorialButton = styled(PlainTutorialButton)`
border-radius: 4px;
border: 1px solid ${colors.grey325};
background-color: ${colors.white};
&:hover {
border: 1px solid ${colors.lightLinkBlue};
background-color: ${colors.lightestBlue};
}
padding: 20px;
margin-bottom: 15px;
`;
TutorialButton.defaultProps = {};
TutorialButton.displayName = 'TutorialButton';
|
