From ee051d4db2158781035426fdbe1c6fa68db45a85 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Mon, 10 Dec 2018 21:52:45 -0300
Subject: [PATCH] feature: add label prop in dropdown

---
 app/components/dropdown.js       | 28 ++++++++++++++++++++++------
 app/components/dropdown.mdx      |  1 +
 app/components/wallet-summary.js |  1 +
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/app/components/dropdown.js b/app/components/dropdown.js
index 19b953f..a73112a 100644
--- a/app/components/dropdown.js
+++ b/app/components/dropdown.js
@@ -11,11 +11,10 @@ import { TextComponent } from './text';
 
 /* eslint-disable max-len  */
 const MenuWrapper = styled.div`
-  background-image: ${props => `linear-gradient(to right, ${darken(0.005, props.theme.colors.activeItem)}, ${props.theme.colors.activeItem})`};
-  padding: 10px;
+  background-image: ${props => `linear-gradient(to right, ${darken(0.05, props.theme.colors.activeItem)}, ${props.theme.colors.activeItem})`};
+  padding: 10px 20px;
   border-radius: 10px;
   margin-left: -10px;
-  min-width: 400px;
 `;
 
 const MenuItem = styled.button`
@@ -28,10 +27,19 @@ const MenuItem = styled.button`
   padding: 15px 0;
   cursor: pointer;
   width: 100%;
+  text-align: left;
 
   &:hover {
     opacity: 0.9;
   }
+
+  &:disabled {
+    cursor: default;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
 `;
 
 const PopoverWithStyle = styled(Popover)`
@@ -43,6 +51,7 @@ const PopoverWithStyle = styled(Popover)`
 type Props = {
   renderTrigger: (toggleVisibility: () => void, isOpen: boolean) => Node,
   options: Array<{ label: string, onClick: () => void }>,
+  label?: string | null,
 };
 
 type State = {
@@ -54,16 +63,23 @@ export class DropdownComponent extends Component<Props, State> {
     isOpen: false,
   };
 
+  static defaultProps = {
+    label: null,
+  };
+
   render() {
     return (
       <PopoverWithStyle
         isOpen={this.state.isOpen}
-        place={null}
         preferPlace='below'
         body={[
           <ClickOutside onClickOutside={() => this.setState(() => ({ isOpen: false }))}>
             <MenuWrapper>
-              <TextComponent value='All Addresses' isBold />
+              {this.props.label && (
+                <MenuItem disabled>
+                  <TextComponent value={this.props.label} isBold />
+                </MenuItem>
+              )}
               {this.props.options.map(({ label, onClick }) => (
                 <MenuItem onClick={onClick}>
                   <TextComponent value={label} />
@@ -72,7 +88,7 @@ export class DropdownComponent extends Component<Props, State> {
             </MenuWrapper>
           </ClickOutside>,
         ]}
-        tipSize={10}
+        tipSize={7}
       >
         {this.props.renderTrigger(() => this.setState(state => ({ isOpen: !state.isOpen })), this.state.isOpen)}
       </PopoverWithStyle>
diff --git a/app/components/dropdown.mdx b/app/components/dropdown.mdx
index 9ba4007..87af250 100644
--- a/app/components/dropdown.mdx
+++ b/app/components/dropdown.mdx
@@ -18,6 +18,7 @@ import { DoczWrapper } from '../theme.js'
     {() => (
       <div style={{ height: '500px' }}>
         <DropdownComponent
+          label="Addresses"
           options={[
             { label: 'asbh1yeasbdh23848asdasd', onClick: console.log },
             { label: 'urtyruhjr374hbfdjdhuh', onClick: console.log },
diff --git a/app/components/wallet-summary.js b/app/components/wallet-summary.js
index dfd9596..ddc2724 100644
--- a/app/components/wallet-summary.js
+++ b/app/components/wallet-summary.js
@@ -73,6 +73,7 @@ export const WalletSummaryComponent = ({
 }: Props) => (
   <Wrapper>
     <DropdownComponent
+      label='All Addresses'
       renderTrigger={(toggleVisibility, isOpen) => (
         <SeeMoreButton onClick={toggleVisibility} isOpen={isOpen}>
           <IoIosMore color={theme.colors.text} size={35} />