diff options
| -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} > |