diff --git a/app/components/wallet-summary.js b/app/components/wallet-summary.js index 3b82664..069dc91 100644 --- a/app/components/wallet-summary.js +++ b/app/components/wallet-summary.js @@ -1,16 +1,20 @@ // @flow import React from 'react'; import styled from 'styled-components'; +import { IoIosMore } from 'react-icons/io'; import { TextComponent } from './text'; import { RowComponent } from './row'; +import { DropdownComponent } from './dropdown'; + +import theme from '../theme'; const Wrapper = styled.div` background-color: ${props => props.theme.colors.cardBackgroundColor}; border-radius: 10px; width: 100%; padding: 30px; - margin: 10px; + position: relative; `; const AllAddresses = styled(TextComponent)` @@ -35,6 +39,20 @@ const ShieldedValue = styled(Label)` color: ${props => props.theme.colors.activeItem}; `; +const SeeMoreButton = styled.button` + outline: none; + border-radius: 100%; + border-width: 1px; + border-color: ${props => (props.isOpen ? props.theme.colors.activeItem : props.theme.colors.text)}; + background-color: transparent; + width: 50px; + height: 50px; + cursor: pointer; + position: absolute; + right: 10px; + top: 10px; +`; + type Props = { total: number, shielded: number, @@ -48,6 +66,14 @@ export const WalletSummaryComponent = ({ total, shielded, transparent, dollarValue, }: Props) => ( + ( + + + + )} + options={[]} + /> diff --git a/app/components/wallet-summary.mdx b/app/components/wallet-summary.mdx new file mode 100644 index 0000000..d7d75b6 --- /dev/null +++ b/app/components/wallet-summary.mdx @@ -0,0 +1,24 @@ +--- +name: Wallet Summary +--- + +import { Playground, PropsTable } from 'docz' + +import { WalletSummaryComponent } from './wallet-summary.js' +import { DoczWrapper } from '../theme.js' + +# Wallet Summary + + + +## Basic usage + + + + {() => ( +
+ +
+ )} +
+