aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-10-30 08:48:17 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-10-30 08:48:17 +0800
commit4cba70f32e4300cea7396f08687f2e53a7728e68 (patch)
tree30a22a3943e4fa3ddcb31994ce9f91e2fe24e834
parent475698ed92dc6310591ec9d0653eaa931d7e03f6 (diff)
downloaddexon-sol-tools-4cba70f32e4300cea7396f08687f2e53a7728e68.tar
dexon-sol-tools-4cba70f32e4300cea7396f08687f2e53a7728e68.tar.gz
dexon-sol-tools-4cba70f32e4300cea7396f08687f2e53a7728e68.tar.bz2
dexon-sol-tools-4cba70f32e4300cea7396f08687f2e53a7728e68.tar.lz
dexon-sol-tools-4cba70f32e4300cea7396f08687f2e53a7728e68.tar.xz
dexon-sol-tools-4cba70f32e4300cea7396f08687f2e53a7728e68.tar.zst
dexon-sol-tools-4cba70f32e4300cea7396f08687f2e53a7728e68.zip
feat: add chevron icon and add it to asset amount input
-rw-r--r--packages/instant/src/components/instant_heading.tsx5
-rw-r--r--packages/instant/src/components/ui/icon.tsx28
2 files changed, 27 insertions, 6 deletions
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 81aa62a77..00c45ba3a 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -21,7 +21,7 @@ export interface InstantHeadingProps {
const PLACEHOLDER_COLOR = ColorOption.white;
const ICON_WIDTH = 34;
const ICON_HEIGHT = 34;
-const ICON_COLOR = ColorOption.white;
+const ICON_COLOR = 'white';
export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
public render(): React.ReactNode {
@@ -48,6 +48,9 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
<Flex direction="row" justify="space-between">
<Flex height="60px">
<SelectedERC20AssetAmountInput startingFontSizePx={38} />
+ <Container marginLeft="5px">
+ <Icon icon="chevron" width={12} />
+ </Container>
</Flex>
<Flex direction="column" justify="space-between">
{iconOrAmounts}
diff --git a/packages/instant/src/components/ui/icon.tsx b/packages/instant/src/components/ui/icon.tsx
index 7373c3acd..61b382760 100644
--- a/packages/instant/src/components/ui/icon.tsx
+++ b/packages/instant/src/components/ui/icon.tsx
@@ -1,17 +1,21 @@
import * as React from 'react';
-import { ColorOption } from '../../style/theme';
-
type svgRule = 'evenodd' | 'nonzero' | 'inherit';
interface IconInfo {
viewBox: string;
+ path: string;
fillRule?: svgRule;
clipRule?: svgRule;
- path: string;
+ stroke?: string;
+ strokeOpacity?: number;
+ strokeWidth?: number;
+ strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';
+ strokeLinejoin?: 'miter' | 'round' | 'bevel' | 'inherit';
}
interface IconInfoMapping {
failed: IconInfo;
success: IconInfo;
+ chevron: IconInfo;
}
const ICONS: IconInfoMapping = {
failed: {
@@ -28,12 +32,21 @@ const ICONS: IconInfoMapping = {
path:
'M17 34C26.3887 34 34 26.3888 34 17C34 7.61121 26.3887 0 17 0C7.61133 0 0 7.61121 0 17C0 26.3888 7.61133 34 17 34ZM25.7539 13.0977C26.2969 12.4718 26.2295 11.5244 25.6035 10.9817C24.9775 10.439 24.0303 10.5063 23.4878 11.1323L15.731 20.0771L12.3936 16.7438C11.8071 16.1583 10.8574 16.1589 10.272 16.7451C9.68652 17.3313 9.6875 18.281 10.2734 18.8665L14.75 23.3373L15.8887 24.4746L16.9434 23.2587L25.7539 13.0977Z',
},
+ chevron: {
+ viewBox: '0 0 12 7',
+ path: 'M11 1L6 6L1 1',
+ stroke: 'white',
+ strokeOpacity: 0.5,
+ strokeWidth: 1.5,
+ strokeLinecap: 'round',
+ strokeLinejoin: 'round',
+ },
};
export interface IconProps {
width: number;
- height: number;
- color: ColorOption;
+ height?: number;
+ color?: string;
icon: keyof IconInfoMapping;
}
export const Icon: React.SFC<IconProps> = props => {
@@ -52,6 +65,11 @@ export const Icon: React.SFC<IconProps> = props => {
fill={props.color}
fillRule={iconInfo.fillRule || 'nonzero'}
clipRule={iconInfo.clipRule || 'nonzero'}
+ stroke={iconInfo.stroke}
+ strokeOpacity={iconInfo.strokeOpacity}
+ strokeWidth={iconInfo.strokeWidth}
+ strokeLinecap={iconInfo.strokeLinecap}
+ strokeLinejoin={iconInfo.strokeLinejoin}
/>
</svg>
);