diff options
| author | fragosti <francesco.agosti93@gmail.com> | 2018-11-02 07:52:31 +0800 |
|---|---|---|
| committer | fragosti <francesco.agosti93@gmail.com> | 2018-11-02 07:52:31 +0800 |
| commit | 7de33c5dd9842ef0e83eac64c6e42c69608e4ad0 (patch) | |
| tree | 694f8dc1bd331b5badf0244f3696ffce47afa7de | |
| parent | 180f176716b57d43e2988b5db3a2423c7974177e (diff) | |
| download | dexon-sol-tools-7de33c5dd9842ef0e83eac64c6e42c69608e4ad0.tar.gz dexon-sol-tools-7de33c5dd9842ef0e83eac64c6e42c69608e4ad0.tar.zst dexon-sol-tools-7de33c5dd9842ef0e83eac64c6e42c69608e4ad0.zip | |
feat: implement panel title and close
| -rw-r--r-- | packages/instant/src/components/sliding_panel.tsx | 20 | ||||
| -rw-r--r-- | packages/instant/src/components/zero_ex_instant_container.tsx | 1 |
2 files changed, 16 insertions, 5 deletions
diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx index e83cf0fb5..678a60cea 100644 --- a/packages/instant/src/components/sliding_panel.tsx +++ b/packages/instant/src/components/sliding_panel.tsx @@ -5,16 +5,26 @@ import { zIndex } from '../style/z_index'; import { PositionAnimationSettings } from './animations/position_animation'; import { SlideAnimation, SlideAnimationState } from './animations/slide_animation'; -import { Container, Icon } from './ui'; +import { Container, Flex, Icon, Text } from './ui'; export interface PanelProps { + title?: string; onClose?: () => void; } -export const Panel: React.StatelessComponent<PanelProps> = ({ children, onClose }) => ( - <Container backgroundColor={ColorOption.white} width="100%" height="100%" zIndex={zIndex.panel}> - <Icon width={12} color={ColorOption.lightGrey} icon="closeX" onClick={onClose} /> - {children} +export const Panel: React.StatelessComponent<PanelProps> = ({ title, children, onClose }) => ( + <Container backgroundColor={ColorOption.white} width="100%" height="100%" zIndex={zIndex.panel} padding="20px"> + <Flex justify="space-between"> + {title && ( + <Container marginTop="3px"> + <Text fontColor={ColorOption.darkGrey} fontSize="18px" fontWeight="600" lineHeight="22px"> + {title} + </Text> + </Container> + )} + <Icon width={12} color={ColorOption.lightGrey} icon="closeX" onClick={onClose} /> + </Flex> + <Container marginTop="5px">{children}</Container> </Container> ); diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index 850beb49c..f734dcbd7 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -43,6 +43,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain </Container> </Flex> <SlidingPanel + title="Select Token" animationState={this.state.tokenSelectionPanelAnimationState} onClose={this._handlePanelClose} > |