Merge pull request #240 from loeck/master

Fix CSS for SelectItem, and InputCurrency

src/components/AccountPage/index.js

@@ -81,13 +81,13 @@ class AccountPage extends PureComponent<Props, State> {
           <Box horizontal alignItems="center" justifyContent="flex-end" grow flow={2}>
             <Button small primary onClick={() => openModal(MODAL_SEND, { account })}>
               <Box horizontal flow={1} alignItems="center">
-                <IconArrowUp width={12} />
+                <IconArrowUp size={12} />
                 <Box>{t('send:title')}</Box>
               </Box>
             </Button>
             <Button small primary onClick={() => openModal(MODAL_RECEIVE, { account })}>
               <Box horizontal flow={1} alignItems="center">
-                <IconArrowDown width={12} />
+                <IconArrowDown size={12} />
                 <Box>{t('receive:title')}</Box>
               </Box>
             </Button>
@@ -97,7 +97,7 @@ class AccountPage extends PureComponent<Props, State> {
               onClick={() => openModal(MODAL_SETTINGS_ACCOUNT, { account })}
             >
               <Box align="center">
-                <IconControls width={16} />
+                <IconControls size={16} />
               </Box>
             </Button>
           </Box>

src/components/DashboardPage/AccountsOrder.js

@@ -142,11 +142,7 @@ class AccountsOrder extends Component<Props, State> {
           <BoldToggle isBold={isActive}>{item.label}</BoldToggle>
         </Box>
         <OrderIcon isActive={isActive}>
-          {order === 'desc' ? (
-            <IconArrowUp height={14} width={14} />
-          ) : (
-            <IconArrowDown height={14} width={14} />
-          )}
+          {order === 'desc' ? <IconArrowUp size={14} /> : <IconArrowDown size={14} />}
         </OrderIcon>
       </DropDownItem>
     )
@@ -193,7 +189,7 @@ class AccountsOrder extends Component<Props, State> {
           horizontal
         >
           <Text color="dark">{t(`accountsOrder:${this.getCurrentValue() || 'balance'}`)}</Text>
-          <IconAngleDown height={7} width={8} />
+          <IconAngleDown size={16} />
         </Box>
       </DropDown>
     )

src/components/GlobalSearch.js

@@ -61,7 +61,7 @@ class GlobalSearch extends PureComponent<Props, State> {
     return (
       <Container isFocused={isFocused}>
         <Box justifyContent="center" onClick={this.focusInput} pr={2}>
-          <IconSearch height={16} width={16} />
+          <IconSearch size={16} />
         </Box>
         <Input
           placeholder={t('common:search')}

src/components/OperationsList/ConfirmationCheck.js

@@ -40,7 +40,7 @@ const ConfirmationCheck = ({
       }
     >
       <Container isConfirmed={isConfirmed}>
-        {isConfirmed ? <IconCheck width={12} /> : <IconClock width={12} />}
+        {isConfirmed ? <IconCheck size={12} /> : <IconClock size={12} />}
       </Container>
     </Tooltip>
   )

src/components/OperationsList/index.js

@@ -12,6 +12,7 @@ import { getIconByCoinType } from '@ledgerhq/currencies/react'
 import type { Account, Operation as OperationType, T } from 'types/common'
 
 import IconAngleDown from 'icons/AngleDown'
+
 import Box, { Card } from 'components/base/Box'
 import Defer from 'components/base/Defer'
 import FormattedVal from 'components/base/FormattedVal'
@@ -269,7 +270,7 @@ class OperationsList extends Component<Props> {
           {canShowMore && (
             <ShowMore>
               <span>{t('operationsList:showMore')}</span>
-              <IconAngleDown width={8} height={8} />
+              <IconAngleDown size={12} />
             </ShowMore>
           )}
         </Card>

src/components/ReceiveBox.js

@@ -21,7 +21,7 @@ export const AddressBox = styled(Box).attrs({
   bg: 'lightGrey',
   p: 2,
 })`
-  border-radius: 3px;
+  border-radius: ${p => p.theme.radii[1]}px;
   border: 1px solid ${p => p.theme.colors.fog};
   cursor: text;
   text-align: center;

src/components/RecipientAddress/index.js

@@ -72,7 +72,7 @@ class RecipientAddress extends PureComponent<Props, State> {
           onChange={onChange}
           renderRight={
             <Right onClick={this.handleClickQrCode}>
-              <IconQrCode width={16} height={16} />
+              <IconQrCode size={16} />
               {qrReaderOpened && (
                 <WrapperQrCode>
                   <QrReader

src/components/RequestAmount/index.js

@@ -30,8 +30,11 @@ const InputCenter = styled(Box).attrs({
   ff: 'Rubik',
   color: 'graphite',
   fontSize: 4,
+  alignItems: 'center',
   justifyContent: 'center',
-})``
+})`
+  width: 30px;
+`
 
 const mapStateToProps = (state, { account }) => {
   const counterValue = getCounterValue(state)
@@ -258,23 +261,37 @@ export class RequestAmount extends PureComponent<Props, State> {
     })
 
     return (
-      <Box horizontal flow={2}>
-        <InputCurrency
-          unit={unit.left}
-          value={value.left}
-          onChange={this.handleChangeAmount('left')}
-          renderRight={<InputRight>{unit.left.code}</InputRight>}
-        />
-        <InputCenter>=</InputCenter>
-        <InputCurrency
-          unit={unit.right}
-          value={value.right}
-          onChange={this.handleChangeAmount('right')}
-          renderRight={<InputRight>{unit.right.code}</InputRight>}
-        />
-        <Button ml={5} primary onClick={this.handleClickMax}>
-          {t('common:max')}
-        </Button>
+      <Box horizontal flow={5}>
+        <Box horizontal>
+          <InputCurrency
+            containerProps={{
+              style: {
+                width: 156,
+              },
+            }}
+            unit={unit.left}
+            value={value.left}
+            onChange={this.handleChangeAmount('left')}
+            renderRight={<InputRight>{unit.left.code}</InputRight>}
+          />
+          <InputCenter>=</InputCenter>
+          <InputCurrency
+            containerProps={{
+              style: {
+                width: 156,
+              },
+            }}
+            unit={unit.right}
+            value={value.right}
+            onChange={this.handleChangeAmount('right')}
+            renderRight={<InputRight>{unit.right.code}</InputRight>}
+          />
+        </Box>
+        <Box grow justifyContent="flex-end">
+          <Button primary onClick={this.handleClickMax}>
+            {t('common:max')}
+          </Button>
+        </Box>
       </Box>
     )
   }

src/components/SideBar/index.js

@@ -74,16 +74,16 @@ class SideBar extends PureComponent<Props> {
           <Box flow={4}>
             <CapsSubtitle>{t('sidebar:menu')}</CapsSubtitle>
             <Box px={4} flow={2}>
-              <Item icon={<IconPieChart height={16} width={16} />} linkTo="/">
+              <Item icon={<IconPieChart size={16} />} linkTo="/">
                 {t('dashboard:title')}
               </Item>
-              <Item icon={<IconArrowUp height={16} width={16} />} modal={MODAL_SEND}>
+              <Item icon={<IconArrowUp size={16} />} modal={MODAL_SEND}>
                 {t('send:title')}
               </Item>
-              <Item icon={<IconArrowDown height={16} width={16} />} modal={MODAL_RECEIVE}>
+              <Item icon={<IconArrowDown size={16} />} modal={MODAL_RECEIVE}>
                 {t('receive:title')}
               </Item>
-              <Item icon={<IconSettings height={16} width={16} />} linkTo="/settings">
+              <Item icon={<IconSettings size={16} />} linkTo="/settings">
                 {t('settings:title')}
               </Item>
             </Box>
@@ -93,7 +93,7 @@ class SideBar extends PureComponent<Props> {
               <Box grow>{t('sidebar:accounts')}</Box>
               <Tooltip render={() => t('addAccount:title')}>
                 <PlusBtn onClick={() => openModal(MODAL_ADD_ACCOUNT)}>
-                  <IconPlus height={14} width={14} />
+                  <IconPlus size={14} />
                 </PlusBtn>
               </Tooltip>
             </CapsSubtitle>

src/components/TopBar.js

@@ -152,10 +152,10 @@ class TopBar extends PureComponent<Props, State> {
           <Box grow horizontal flow={4}>
             <GlobalSearch t={t} />
             <Box justifyContent="center">
-              <IconDevices height={16} width={16} />
+              <IconDevices size={16} />
             </Box>
             <Box justifyContent="center" relative>
-              <IconActivity height={16} width={16} />
+              <IconActivity size={16} />
               {hasAccounts && <Activity progress={sync.progress} fail={sync.fail} />}
             </Box>
             <Box justifyContent="center">
@@ -168,14 +168,14 @@ class TopBar extends PureComponent<Props, State> {
                 {
                   key: 'profile',
                   label: t('common:editProfile'),
-                  icon: <IconUser height={16} width={16} />,
+                  icon: <IconUser size={16} />,
                 },
                 ...(hasPassword
                   ? [
                       {
                         key: 'lock',
                         label: t('common:lockApplication'),
-                        icon: <IconUser height={16} width={16} />,
+                        icon: <IconUser size={16} />,
                         onClick: this.handleLock,
                       },
                     ]
@@ -196,7 +196,7 @@ class TopBar extends PureComponent<Props, State> {
               offsetTop={-2}
             >
               <Box>{'Khalil Benihoud'}</Box>
-              <IconAngleDown height={7} width={8} />
+              <IconAngleDown size={12} />
             </DropDown>
           </Box>
         </Inner>

src/components/base/Button/index.js

@@ -19,7 +19,7 @@ const Base = styled.button.attrs({
   ${fontSize};
   ${fontWeight};
   ${fontFamily};
-  border-radius: 4px;
+  border-radius: ${p => p.theme.radii[1]}px;
   border: ${p =>
     p.primary ? 'none' : `2px solid ${p.disabled ? 'transparent' : p.theme.colors.grey}`};
   cursor: ${p => (p.disabled ? 'default' : 'pointer')};

src/components/base/Input/index.js

@@ -14,7 +14,7 @@ const Container = styled(Box).attrs({
   horizontal: true,
 })`
   background: ${p => p.theme.colors.white};
-  border-radius: 3px;
+  border-radius: ${p => p.theme.radii[1]}px;
   border: 1px solid ${p => p.theme.colors.fog};
   box-shadow: ${p => (p.isFocus ? `rgba(0, 0, 0, 0.05) 0 2px 2px` : 'none')};
   height: 40px;
@@ -49,7 +49,7 @@ export const Textarea = styled.textarea.attrs({
   min-height: 80px;
   color: ${p => p.theme.colors.dark};
   background: ${p => p.theme.colors.white};
-  border-radius: 3px;
+  border-radius: ${p => p.theme.radii[1]}px;
   border: 1px solid ${p => p.theme.colors.fog};
   box-shadow: none;
   &:focus {

src/components/base/InputCurrency/index.js

@@ -43,6 +43,13 @@ const Currencies = styled(Box)`
   right: -1px;
 `
 
+const Currency = styled(Box).attrs({
+  color: 'grey',
+  fontSize: 2,
+  pl: 2,
+  pr: 1,
+})``
+
 type Value = string | number
 
 type Props = {
@@ -133,8 +140,6 @@ class InputCurrency extends PureComponent<Props, State> {
       return null
     }
 
-    const renderItem = item => item.code
-
     return (
       <Currencies onClick={e => e.stopPropagation()}>
         <Select
@@ -144,8 +149,8 @@ class InputCurrency extends PureComponent<Props, State> {
           onChange={item => onChange(unformat(item, value), item)}
           items={units}
           value={unit}
-          renderItem={renderItem}
-          renderSelected={renderItem}
+          renderItem={item => item.code}
+          renderSelected={item => <Currency>{item.code}</Currency>}
         />
       </Currencies>
     )

src/components/base/LabelInfoTooltip/index.js

@@ -15,7 +15,7 @@ function LabelInfoTooltip(props: Props) {
   return (
     <Box {...p}>
       <Tooltip render={() => text} style={{ height: 12 }}>
-        <IconInfoCircle width={12} height={12} />
+        <IconInfoCircle size={12} />
       </Tooltip>
     </Box>
   )

src/components/base/Modal/ModalBody.js

@@ -41,7 +41,7 @@ class ModalBody extends PureComponent<Props, State> {
       <Body style={{ height: isHidden && deferHeight ? deferHeight : undefined }}>
         {onClose && (
           <CloseContainer onClick={onClose}>
-            <IconCross height={16} width={16} />
+            <IconCross size={16} />
           </CloseContainer>
         )}
         {(!isHidden || !deferHeight) && <Inner {...props}>{children}</Inner>}

src/components/base/Modal/index.js

@@ -77,7 +77,7 @@ const Wrapper = styled(Tabbable).attrs({
   }),
 })`
   outline: none;
-  width: 570px;
+  width: 500px;
   z-index: 2;
 `
 

src/components/base/Select/index.js

@@ -63,15 +63,31 @@ const TriggerBtn = styled(Box).attrs({
 
 const Item = styled(Box).attrs({
   alignItems: 'center',
-  p: 2,
+  fontSize: 4,
+  ff: p => `Open Sans|${p.selected ? 'SemiBold' : 'Regular'}`,
+  px: 3,
+  py: 2,
+  color: 'dark',
 })`
   background: ${p => (p.highlighted ? p.theme.colors.lightGrey : p.theme.colors.white)};
+
+  ${p =>
+    p.first &&
+    `
+    border-top-left-radius: ${p.theme.radii[1]}px;
+    border-top-right-radius: ${p.theme.radii[1]}px;
+  `} ${p =>
+    p.last &&
+    `
+    border-bottom-left-radius: ${p.theme.radii[1]}px;
+    border-bottom-right-radius: ${p.theme.radii[1]}px;
+  `};
 `
 
 const Dropdown = styled(Box).attrs({
   mt: 1,
 })`
-  border-radius: 3px;
+  border-radius: ${p => p.theme.radii[1]}px;
   border: 1px solid ${p => p.theme.colors.fog};
   box-shadow: rgba(0, 0, 0, 0.05) 0 2px 2px;
   left: 0;
@@ -162,7 +178,14 @@ class Select extends PureComponent<Props> {
                 innerRef={n => (this._children[i] = n)}
                 {...getItemProps({ item })}
               >
-                <Item highlighted={i === highlightedIndex} horizontal flow={2}>
+                <Item
+                  first={i === 0}
+                  last={i === items.length - 1}
+                  highlighted={i === highlightedIndex}
+                  selected={selectedItem === item}
+                  horizontal
+                  flow={3}
+                >
                   <Box grow>
                     {renderItem ? (
                       renderItem(item)
@@ -172,7 +195,7 @@ class Select extends PureComponent<Props> {
                   </Box>
                   <Box>
                     <IconSelected selected={selectedItem === item}>
-                      <IconCheck height={12} width={12} />
+                      <IconCheck size={12} />
                     </IconSelected>
                   </Box>
                 </Item>
@@ -235,7 +258,7 @@ class Select extends PureComponent<Props> {
                 <Box relative>
                   <Input keepEvent {...getInputProps({ placeholder })} onClick={openMenu} />
                   <FloatingDown>
-                    <IconAngleDown width={10} height={10} />
+                    <IconAngleDown size={16} />
                   </FloatingDown>
                 </Box>
               ) : (
@@ -257,7 +280,7 @@ class Select extends PureComponent<Props> {
                     )}
                   </Box>
                   <FloatingDown>
-                    <IconAngleDown width={10} height={10} />
+                    <IconAngleDown size={16} />
                   </FloatingDown>
                 </TriggerBtn>
               )}

src/components/base/Spoiler/index.js

@@ -47,7 +47,7 @@ class Spoiler extends PureComponent<Props, State> {
       <Fragment>
         <Box horizontal flow={1} color="dark" align="center">
           <IconContainer isOpened={isOpened}>
-            <IconChevronRight width={12} height={12} />
+            <IconChevronRight size={12} />
           </IconContainer>
           <Title onClick={this.toggle}>{title}</Title>
         </Box>

src/components/modals/Send/01-step-amount.js

@@ -126,7 +126,7 @@ function Fees(props: PropsFees) {
   return (
     <Fragment>
       <Select
-        style={{ width: 200 }}
+        style={{ width: 156 }}
         items={[{ key: 'custom', name: 'Custom' }]}
         value={{ key: 'custom', name: 'Custom' }}
         renderSelected={item => item.name}

src/components/modals/SettingsAccount.js

@@ -195,7 +195,7 @@ class SettingsAccount extends PureComponent<Props, State> {
                   {!editName &&
                     nameHovered && (
                       <Box onClick={this.handleEditName(true)} style={{ cursor: 'pointer' }}>
-                        <IconEdit height={16} width={16} />
+                        <IconEdit size={16} />
                       </Box>
                     )}
                 </Box>

src/icons/Activity.js

@@ -1,7 +1,9 @@
+// @flow
+
 import React from 'react'
 
-export default props => (
-  <svg viewBox="0 0 16 16" {...props}>
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
     <path
       fill="currentColor"
       d="M11.488 8.063a.75.75 0 0 1 .712-.513H15a.75.75 0 1 1 0 1.5h-2.26l-1.928 5.787c-.228.684-1.196.684-1.424 0L5.9 4.372 4.512 8.537a.75.75 0 0 1-.712.513H1a.75.75 0 0 1 0-1.5h2.26l1.928-5.787c.228-.684 1.196-.684 1.424 0L10.1 12.228l1.388-4.165z"

src/icons/AngleDown.js

@@ -1,10 +1,12 @@
+// @flow
+
 import React from 'react'
 
-export default props => (
-  <svg viewBox="0 0 8 7" {...props}>
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
     <path
       fill="currentColor"
-      d="M4 3.76671849l2.19299639-2.05643618c.29899515-.28037641.78376209-.28037641 1.08275724 0 .29899516.28037641.29899516.73495639 0 1.0153328L4.54137862 5.28971769c-.29899515.28037641-.78376209.28037641-1.08275724 0L.72424637 2.72561511c-.29899516-.28037641-.29899516-.73495639 0-1.0153328.29899515-.28037641.78376209-.28037641 1.08275724 0L4 3.76671849z"
+      d="M7.70123023 10.2169906L3.62390158 6.53574061c-.16520211-.146875-.16520211-.384375 0-.53125l.24956063-.221875c.16520211-.146875.43233744-.146875.59753955 0L8 8.97949061l3.5289982-3.19375c.1652022-.146875.4323375-.146875.5975396 0l.2495606.221875c.1652021.146875.1652021.384375 0 .53125L8.29876977 10.2201156c-.16520211.14375-.43233743.14375-.59753954-.003125z"
     />
   </svg>
 )

src/icons/ArrowDown.js

@@ -2,8 +2,8 @@
 
 import React from 'react'
 
-export default (props: Object) => (
-  <svg viewBox="0 0 16 16" {...props}>
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
     <path
       fill="currentColor"
       transform="matrix(1, 0, 0, -1, 0, 16)"

src/icons/ArrowUp.js

@@ -1,7 +1,9 @@
+// @flow
+
 import React from 'react'
 
-export default props => (
-  <svg viewBox="0 0 16 16" {...props}>
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
     <path
       fill="currentColor"
       d="M7.25 3.81L4.53 6.53a.75.75 0 0 1-1.06-1.06l4-4a.75.75 0 0 1 1.06 0l4 4a.75.75 0 0 1-1.06 1.06L8.75 3.81V14a.75.75 0 1 1-1.5 0V3.81z"

src/icons/Check.js

@@ -1,7 +1,9 @@
+// @flow
+
 import React from 'react'
 
-export default props => (
-  <svg viewBox="0 0 16 16" {...props}>
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
     <path
       fill="currentColor"
       d="M13.62 2.608l-8.22 8.22-3.02-3.02a.375.375 0 0 0-.53 0l-.884.884a.375.375 0 0 0 0 .53l4.169 4.17a.375.375 0 0 0 .53 0l9.37-9.37a.375.375 0 0 0 0-.53l-.884-.884a.375.375 0 0 0-.53 0z"

src/icons/ChevronRight.js

@@ -1,7 +1,9 @@
+// @flow
+
 import React from 'react'
 
-export default props => (
-  <svg viewBox="0 0 16 16" {...props}>
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
     <path
       fill="currentColor"
       d="M10.869 8.266L6.28 12.89a.375.375 0 0 1-.531 0l-.619-.62a.375.375 0 0 1 0-.53L8.834 8 5.131 4.26a.375.375 0 0 1 0-.532l.619-.619a.375.375 0 0 1 .531 0l4.588 4.625a.375.375 0 0 1 0 .532z"

src/icons/Clock.js

@@ -1,7 +1,9 @@
+// @flow
+
 import React from 'react'
 
-export default props => (
-  <svg viewBox="0 0 16 16" {...props}>
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
     <path
       fill="currentColor"
       d="M8 .583a7.417 7.417 0 1 1 0 14.834A7.417 7.417 0 0 1 8 .583zm0 1.5a5.917 5.917 0 1 0 0 11.834A5.917 5.917 0 0 0 8 2.083zm.75 5.606l1.78 1.78a.75.75 0 0 1-1.06 1.061l-2-2A.75.75 0 0 1 7.25 8V4a.75.75 0 0 1 1.5 0v3.69z"

src/icons/Controls.js

@@ -1,7 +1,9 @@
+// @flow
+
 import React from 'react'
 
-export default props => (
-  <svg viewBox="0 0 16 16" {...props}>
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
     <path
       fill="currentColor"
       d="M3.417 14a.75.75 0 1 1-1.5 0V9.333a.75.75 0 1 1 1.5 0V14zm0-7.333a.75.75 0 0 1-1.5 0V2a.75.75 0 1 1 1.5 0v4.667zM8.75 14a.75.75 0 1 1-1.5 0V8a.75.75 0 0 1 1.5 0v6zm0-8.667a.75.75 0 1 1-1.5 0V2a.75.75 0 0 1 1.5 0v3.333zM14.083 14a.75.75 0 1 1-1.5 0v-3.333a.75.75 0 0 1 1.5 0V14zm0-6a.75.75 0 1 1-1.5 0V2a.75.75 0 0 1 1.5 0v6zM.667 10.083a.75.75 0 1 1 0-1.5h4a.75.75 0 0 1 0 1.5h-4zm5.333-4a.75.75 0 1 1 0-1.5h4a.75.75 0 1 1 0 1.5H6zm5.333 5.334a.75.75 0 0 1 0-1.5h4a.75.75 0 1 1 0 1.5h-4z"

src/icons/Cross.js

@@ -1,7 +1,9 @@
+// @flow
+
 import React from 'react'
 
-export default props => (
-  <svg viewBox="0 0 384 512" {...props}>
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 384 512" height={size} width={size} {...p}>
     <path
       fill="currentColor"
       d="M323.1 441l53.9-53.9c9.4-9.4 9.4-24.5 0-33.9L279.8 256l97.2-97.2c9.4-9.4 9.4-24.5 0-33.9L323.1 71c-9.4-9.4-24.5-9.4-33.9 0L192 168.2 94.8 71c-9.4-9.4-24.5-9.4-33.9 0L7 124.9c-9.4 9.4-9.4 24.5 0 33.9l97.2 97.2L7 353.2c-9.4 9.4-9.4 24.5 0 33.9L60.9 441c9.4 9.4 24.5 9.4 33.9 0l97.2-97.2 97.2 97.2c9.3 9.3 24.5 9.3 33.9 0z"

src/icons/Devices.js

@@ -1,7 +1,9 @@
+// @flow
+
 import React from 'react'
 
-export default props => (
-  <svg viewBox="0 0 16 16" {...props}>
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
     <path
       fill="currentColor"
       d="M13 2.5h-1.5v-1h-10v13h7V16h-7C.67157287 16 0 15.3284271 0 14.5v-13C0 .67157287.67157287 0 1.5 0h10c.8284271 0 1.5.67157287 1.5 1.5v1zm0 0h-1.5v-1h-10v13h7V16h-7C.67157287 16 0 15.3284271 0 14.5v-13C0 .67157287.67157287 0 1.5 0h10c.8284271 0 1.5.67157287 1.5 1.5v1zM12 4h1.9000001C15.059798 4 16 4.94020198 16 6.0999999V15c0 .5522847-.4477153 1-1 1h-4c-.5522847 0-1-.4477153-1-1V6c0-1.1045695.8954305-2 2-2zm-.5 10.5h3V6.0999999C14.5 5.76862911 14.2313709 5.5 13.9000001 5.5H12c-.2761424 0-.5.22385763-.5.5v8.5z"

src/icons/Edit.js

@@ -1,7 +1,9 @@
+// @flow
+
 import React from 'react'
 
-export default props => (
-  <svg viewBox="0 0 576 512" {...props}>
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 576 512" height={size} width={size} {...p}>
     <path
       fill="currentColor"
       d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"

src/icons/InfoCircle.js

@@ -1,7 +1,9 @@
+// @flow
+
 import React from 'react'
 
-export default props => (
-  <svg viewBox="0 0 16 16" {...props}>
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
     <path
       fill="currentColor"
       d="M8 .25a7.751 7.751 0 0 0 0 15.5A7.75 7.75 0 1 0 8 .25zm0 14A6.246 6.246 0 0 1 1.75 8 6.248 6.248 0 0 1 8 1.75 6.248 6.248 0 0 1 14.25 8 6.246 6.246 0 0 1 8 14.25zM8 3.687a1.312 1.312 0 1 1 0 2.625 1.312 1.312 0 0 1 0-2.625zm1.75 7.938a.375.375 0 0 1-.375.375h-2.75a.375.375 0 0 1-.375-.375v-.75c0-.207.168-.375.375-.375H7v-2h-.375a.375.375 0 0 1-.375-.375v-.75c0-.207.168-.375.375-.375h2c.207 0 .375.168.375.375V10.5h.375c.207 0 .375.168.375.375v.75z"

src/icons/PieChart.js

@@ -1,7 +1,9 @@
+// @flow
+
 import React from 'react'
 
-export default props => (
-  <svg viewBox="0 0 16 16" {...props}>
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
     <path
       fill="currentColor"
       d="M5.2 1.067V2.71a5.985 5.985 0 0 0 2.027 11.223A5.983 5.983 0 0 0 13.34 10.7h1.625a.759.759 0 0 1-.056.22A7.5 7.5 0 0 1 .575 9.052 7.502 7.502 0 0 1 5 1.123a.759.759 0 0 1 .2-.056zM15.5 8c0 .42-.34.759-.758.759H8A.758.758 0 0 1 7.242 8V1.26c0-.42.34-.759.758-.759a7.499 7.499 0 0 1 7.5 7.501zm-3.27-4.23a5.982 5.982 0 0 0-3.47-1.705v5.178h5.176a5.985 5.985 0 0 0-1.704-3.473z"

src/icons/Plus.js

@@ -1,7 +1,9 @@
+// @flow
+
 import React from 'react'
 
-export default props => (
-  <svg viewBox="0 0 16 16" {...props}>
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
     <path
       fill="currentColor"
       d="M12 7.5v1a.376.376 0 0 1-.375.375h-2.75v2.75A.376.376 0 0 1 8.5 12h-1a.376.376 0 0 1-.375-.375v-2.75h-2.75A.376.376 0 0 1 4 8.5v-1c0-.206.169-.375.375-.375h2.75v-2.75c0-.206.169-.375.375-.375h1c.206 0 .375.169.375.375v2.75h2.75c.206 0 .375.169.375.375zm3.75.5A7.749 7.749 0 0 1 8 15.75 7.749 7.749 0 0 1 .25 8 7.749 7.749 0 0 1 8 .25 7.749 7.749 0 0 1 15.75 8zm-1.5 0A6.248 6.248 0 0 0 8 1.75 6.248 6.248 0 0 0 1.75 8 6.248 6.248 0 0 0 8 14.25 6.248 6.248 0 0 0 14.25 8z"

src/icons/QrCode.js

@@ -1,7 +1,9 @@
+// @flow
+
 import React from 'react'
 
-export default props => (
-  <svg viewBox="0 0 448 512" {...props}>
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 448 512" height={size} width={size} {...p}>
     <path
       fill="currentColor"
       d="M0 224h192V32H0v192zM64 96h64v64H64V96zm192-64v192h192V32H256zm128 128h-64V96h64v64zM0 480h192V288H0v192zm64-128h64v64H64v-64zm352-64h32v128h-96v-32h-32v96h-64V288h96v32h64v-32zm0 160h32v32h-32v-32zm-64 0h32v32h-32v-32z"

src/icons/Search.js

@@ -1,7 +1,9 @@
+// @flow
+
 import React from 'react'
 
-export default props => (
-  <svg viewBox="0 0 16 16" {...props}>
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
     <path
       fill="currentColor"
       d="M12.654 11.594l2.876 2.876a.75.75 0 0 1-1.06 1.06l-2.876-2.876a6.972 6.972 0 1 1 1.06-1.06zm-1.492-.574a5.472 5.472 0 1 0-.142.142.757.757 0 0 1 .142-.142z"

src/icons/Settings.js

@@ -1,7 +1,9 @@
+// @flow
+
 import React from 'react'
 
-export default props => (
-  <svg viewBox="0 0 16 16" {...props}>
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
     <path
       fill="currentColor"
       d="M13.94 8.583H14a.583.583 0 0 0 0-1.166h-.116a1.85 1.85 0 0 1-1.693-1.122.75.75 0 0 1-.053-.189 1.854 1.854 0 0 1 .432-1.903l.04-.04a.583.583 0 1 0-.826-.826l-.046.046a1.847 1.847 0 0 1-2.033.373A1.851 1.851 0 0 1 8.583 2.06V2a.583.583 0 0 0-1.166 0v.116A1.85 1.85 0 0 1 6.295 3.81a.75.75 0 0 1-.189.053 1.854 1.854 0 0 1-1.903-.432l-.04-.04a.583.583 0 1 0-.826.826l.046.046c.529.54.675 1.349.388 1.997A1.856 1.856 0 0 1 2.06 7.47H2a.583.583 0 0 0 0 1.167h.116a1.847 1.847 0 0 1 1.69 1.114c.306.691.159 1.5-.376 2.046l-.04.04a.583.583 0 1 0 .826.826l.046-.046c.54-.529 1.349-.675 1.997-.388A1.856 1.856 0 0 1 7.47 13.94V14a.583.583 0 0 0 1.167 0v-.116a1.847 1.847 0 0 1 1.114-1.69 1.853 1.853 0 0 1 2.046.376l.04.04a.583.583 0 1 0 .826-.826l-.046-.046a1.85 1.85 0 0 1-.371-2.037 1.851 1.851 0 0 1 1.694-1.118zm-.33-2.807c.065.087.167.14.277.14H14a2.083 2.083 0 0 1 0 4.167h-.057a.35.35 0 0 0-.32.212.35.35 0 0 0 .06.388l.04.04a2.083 2.083 0 1 1-2.947 2.947c-.136-.134-.289-.162-.427-.1a.349.349 0 0 0-.212.317V14a2.083 2.083 0 0 1-4.167 0c-.003-.186-.094-.313-.273-.38a.348.348 0 0 0-.38.064l-.04.04a2.083 2.083 0 1 1-2.947-2.948c.134-.136.162-.289.1-.427a.349.349 0 0 0-.317-.212H2A2.083 2.083 0 0 1 2 5.97c.186-.003.313-.094.38-.273a.348.348 0 0 0-.064-.38l-.04-.04A2.083 2.083 0 1 1 5.225 2.33c.136.134.289.162.42.104a.75.75 0 0 1 .132-.044.348.348 0 0 0 .14-.277V2a2.083 2.083 0 1 1 4.167 0v.057c0 .14.084.265.22.324.13.057.284.03.38-.065l.04-.04a2.083 2.083 0 1 1 2.947 2.948c-.134.136-.162.289-.104.42a.75.75 0 0 1 .044.132zM8 5.25a2.75 2.75 0 1 0 0 5.5 2.75 2.75 0 0 0 0-5.5zm0 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5z"

src/icons/User.js

@@ -1,7 +1,9 @@
+// @flow
+
 import React from 'react'
 
-export default props => (
-  <svg viewBox="0 0 16 16" {...props}>
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
     <path
       fill="currentColor"
       d="M14.5055556 14.5c0 .4142136-.3357864.75-.75.75s-.75-.3357864-.75-.75v-1.4444444c0-1.1812758-.9576132-2.1388889-2.1388889-2.1388889H5.08888894c-1.18127572 0-2.13888889.9576131-2.13888889 2.1388889V14.5c0 .4142136-.33578644.75-.75.75s-.75-.3357864-.75-.75v-1.4444444c0-2.0097029 1.62918605-3.63888893 3.63888889-3.63888893h5.77777776c2.0097029 0 3.6388889 1.62918603 3.6388889 3.63888893V14.5zM7.97777783 8.02777778c-2.00970284 0-3.63888889-1.62918605-3.63888889-3.63888889S5.96807499.75 7.97777783.75s3.63888887 1.62918605 3.63888887 3.63888889-1.62918603 3.63888889-3.63888887 3.63888889zm0-1.5c1.18127571 0 2.13888887-.95761318 2.13888887-2.13888889C10.1166667 3.20761317 9.15905354 2.25 7.97777783 2.25c-1.18127572 0-2.13888889.95761317-2.13888889 2.13888889 0 1.18127571.95761317 2.13888889 2.13888889 2.13888889z"

src/stories/icons.stories.js

@@ -52,7 +52,7 @@ stories.add('Icons', () => (
       return (
         <IconWrapper onClick={copy(iconName)} key={iconName}>
           <div style={{ marginBottom: 15 }}>{iconName}</div>
-          <Component size={32} width={32} height={32} />
+          <Component size={32} />
         </IconWrapper>
       )
     })}