aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-11-02 09:36:34 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-11-02 09:36:34 +0800
commitcdaa1407dacacc53e01a70b1e0ac46536342a4e0 (patch)
tree154ea733755d4fc7b793902e88c4d0448d8b73a7
parent92706a4b431e0023cf21adec62635447594d8ab3 (diff)
downloaddexon-sol-tools-cdaa1407dacacc53e01a70b1e0ac46536342a4e0.tar
dexon-sol-tools-cdaa1407dacacc53e01a70b1e0ac46536342a4e0.tar.gz
dexon-sol-tools-cdaa1407dacacc53e01a70b1e0ac46536342a4e0.tar.bz2
dexon-sol-tools-cdaa1407dacacc53e01a70b1e0ac46536342a4e0.tar.lz
dexon-sol-tools-cdaa1407dacacc53e01a70b1e0ac46536342a4e0.tar.xz
dexon-sol-tools-cdaa1407dacacc53e01a70b1e0ac46536342a4e0.tar.zst
dexon-sol-tools-cdaa1407dacacc53e01a70b1e0ac46536342a4e0.zip
feat: implement search bar UI
-rw-r--r--packages/instant/src/components/erc20_token_selector.tsx6
-rw-r--r--packages/instant/src/components/sliding_panel.tsx2
-rw-r--r--packages/instant/src/components/ui/icon.tsx8
-rw-r--r--packages/instant/src/components/ui/input.tsx1
-rw-r--r--packages/instant/src/style/theme.ts4
5 files changed, 16 insertions, 5 deletions
diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx
index 2f637a1a6..a9728365b 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -5,6 +5,7 @@ import { ColorOption } from '../style/theme';
import { ERC20Asset } from '../types';
import { assetUtils } from '../util/asset';
+import { SearchInput } from './search_input';
import { Circle, Container, Flex, Text } from './ui';
export interface ERC20TokenSelectorProps {
@@ -14,7 +15,8 @@ export interface ERC20TokenSelectorProps {
export const ERC20TokenSelector: React.StatelessComponent<ERC20TokenSelectorProps> = ({ tokens, onTokenSelect }) => (
<Container>
- <Container overflow="scroll" height="325px">
+ <SearchInput placeholder="Search tokens..." width="100%" />
+ <Container overflow="scroll" height="325px" marginTop="10px">
{_.map(tokens, token => <TokenSelectorRow key={token.assetData} token={token} onClick={onTokenSelect} />)}
</Container>
</Container>
@@ -40,7 +42,7 @@ class TokenSelectorRow extends React.Component<TokenSelectorRowProps> {
darkenOnHover={true}
cursor="pointer"
>
- <Container marginLeft="10px">
+ <Container marginLeft="5px">
<Flex justify="flex-start">
<Container marginRight="10px">
<Circle diameter={30} fillColor={token.metaData.primaryColor}>
diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx
index 678a60cea..9064c220c 100644
--- a/packages/instant/src/components/sliding_panel.tsx
+++ b/packages/instant/src/components/sliding_panel.tsx
@@ -24,7 +24,7 @@ export const Panel: React.StatelessComponent<PanelProps> = ({ title, children, o
)}
<Icon width={12} color={ColorOption.lightGrey} icon="closeX" onClick={onClose} />
</Flex>
- <Container marginTop="5px">{children}</Container>
+ <Container marginTop="10px">{children}</Container>
</Container>
);
diff --git a/packages/instant/src/components/ui/icon.tsx b/packages/instant/src/components/ui/icon.tsx
index 9b83d962a..94ea26900 100644
--- a/packages/instant/src/components/ui/icon.tsx
+++ b/packages/instant/src/components/ui/icon.tsx
@@ -20,6 +20,7 @@ interface IconInfoMapping {
failed: IconInfo;
success: IconInfo;
chevron: IconInfo;
+ search: IconInfo;
}
const ICONS: IconInfoMapping = {
closeX: {
@@ -52,6 +53,13 @@ const ICONS: IconInfoMapping = {
strokeLinecap: 'round',
strokeLinejoin: 'round',
},
+ search: {
+ viewBox: '0 0 14 14',
+ fillRule: 'evenodd',
+ clipRule: 'evenodd',
+ path:
+ 'M8.39404 5.19727C8.39404 6.96289 6.96265 8.39453 5.19702 8.39453C3.4314 8.39453 2 6.96289 2 5.19727C2 3.43164 3.4314 2 5.19702 2C6.96265 2 8.39404 3.43164 8.39404 5.19727ZM8.09668 9.51074C7.26855 10.0684 6.27075 10.3945 5.19702 10.3945C2.3269 10.3945 0 8.06738 0 5.19727C0 2.32715 2.3269 0 5.19702 0C8.06738 0 10.394 2.32715 10.394 5.19727C10.394 6.27051 10.0686 7.26855 9.51074 8.09668L13.6997 12.2861L12.2854 13.7002L8.09668 9.51074Z',
+ },
};
export interface IconProps {
diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
index a884ff7cb..65cf838b0 100644
--- a/packages/instant/src/components/ui/input.tsx
+++ b/packages/instant/src/components/ui/input.tsx
@@ -9,7 +9,6 @@ export interface InputProps {
fontSize?: string;
fontColor?: ColorOption;
placeholder?: string;
- onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
}
export const Input =
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 8a5d56927..d10c9b72c 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -10,6 +10,7 @@ export enum ColorOption {
lightGrey = 'lightGrey',
grey = 'grey',
feintGrey = 'feintGrey',
+ lightestGrey = 'lightestGrey',
darkGrey = 'darkGrey',
white = 'white',
lightOrange = 'lightOrange',
@@ -17,11 +18,12 @@ export enum ColorOption {
}
export const theme: Theme = {
- primaryColor: '#512D80',
+ primaryColor: '#333',
black: 'black',
lightGrey: '#999999',
grey: '#666666',
feintGrey: '#DEDEDE',
+ lightestGrey: '#EEEEEE',
darkGrey: '#333333',
white: 'white',
lightOrange: '#F9F2ED',