Use Pills in SettingsPage, and remove Tabs component

src/components/SettingsPage/index.js

@@ -13,9 +13,8 @@ import type { FetchCounterValues } from 'actions/counterValues'
 import { saveSettings } from 'actions/settings'
 import { fetchCounterValues } from 'actions/counterValues'
 
+import Pills from 'components/base/Pills'
 import Box from 'components/base/Box'
-import Text from 'components/base/Text'
-import Tabs from 'components/base/Tabs'
 
 import TabDisplay from './Display'
 import TabProfile from './Profile'
@@ -48,7 +47,12 @@ class SettingsPage extends PureComponent<Props, State> {
     tab: 0,
   }
 
-  handleChangeTab = (tab: number) => this.setState({ tab })
+  _items = []
+
+  handleChangeTab = (item: any) => {
+    const tab = this._items.indexOf(item)
+    this.setState({ tab })
+  }
 
   handleSaveSettings = newSettings => {
     const { fetchCounterValues, saveSettings, i18n, settings } = this.props
@@ -75,53 +79,56 @@ class SettingsPage extends PureComponent<Props, State> {
       onSaveSettings: this.handleSaveSettings,
     }
 
+    this._items = [
+      {
+        key: 'display',
+        label: t('settings:tabs.display'),
+        value: () => <TabDisplay {...props} />,
+      },
+      {
+        key: 'money',
+        label: t('settings:tabs.money'),
+        value: () => <TabMoney {...props} />,
+      },
+      {
+        key: 'material',
+        isDisabled: true,
+        label: t('settings:tabs.material'),
+        value: () => <div>{'Matériel'}</div>,
+      },
+      {
+        key: 'app',
+        isDisabled: true,
+        label: t('settings:tabs.app'),
+        value: () => <div>{'App (beta)'}</div>,
+      },
+      {
+        key: 'tools',
+        label: t('settings:tabs.tools'),
+        value: () => <TabTools {...props} />,
+      },
+      {
+        key: 'blockchain',
+        isDisabled: true,
+        label: t('settings:tabs.blockchain'),
+        value: () => <div>{'Blockchain'}</div>,
+      },
+      {
+        key: 'profile',
+        label: t('settings:tabs.profile'),
+        value: () => <TabProfile {...props} />,
+      },
+    ]
+
+    const item = this._items[tab]
+
     return (
-      <Box flow={6}>
-        <Text fontSize={7}>{t('settings:title')}</Text>
-        <Tabs
-          index={tab}
-          onTabClick={this.handleChangeTab}
-          items={[
-            {
-              key: 'display',
-              title: t('settings:tabs.display'),
-              render: () => <TabDisplay {...props} />,
-            },
-            {
-              key: 'money',
-              title: t('settings:tabs.money'),
-              render: () => <TabMoney {...props} />,
-            },
-            {
-              key: 'material',
-              isDisabled: true,
-              title: t('settings:tabs.material'),
-              render: () => <div>{'Matériel'}</div>,
-            },
-            {
-              key: 'app',
-              isDisabled: true,
-              title: t('settings:tabs.app'),
-              render: () => <div>{'App (beta)'}</div>,
-            },
-            {
-              key: 'tools',
-              title: t('settings:tabs.tools'),
-              render: () => <TabTools {...props} />,
-            },
-            {
-              key: 'blockchain',
-              isDisabled: true,
-              title: t('settings:tabs.blockchain'),
-              render: () => <div>{'Blockchain'}</div>,
-            },
-            {
-              key: 'profile',
-              title: t('settings:tabs.profile'),
-              render: () => <TabProfile {...props} />,
-            },
-          ]}
-        />
+      <Box>
+        <Box fontSize={7} mb={4}>
+          {t('settings:title')}
+        </Box>
+        <Pills mb={6} items={this._items} activeKey={item.key} onChange={this.handleChangeTab} />
+        {item.value && item.value()}
       </Box>
     )
   }

src/components/base/Tabs/index.js

@@ -1,68 +0,0 @@
-// @flow
-
-import React, { Fragment } from 'react'
-import styled from 'styled-components'
-
-import type { Element } from 'react'
-
-import Box, { Tabbable } from 'components/base/Box'
-
-const WrapperTab = styled(Box).attrs({
-  horizontal: true,
-})`
-  border-bottom: 1px solid ${p => p.theme.colors.fog};
-`
-
-const Tab = styled(Tabbable).attrs({
-  flex: 1,
-  pb: 2,
-  alignItems: 'center',
-  justifyContent: 'center',
-  fontSize: 3,
-})`
-  border-bottom: 2px solid transparent;
-  border-bottom-color: ${p => (p.isActive ? p.theme.colors.wallet : '')};
-  color: ${p =>
-    p.isActive
-      ? p.theme.colors.wallet
-      : p.isDisabled
-        ? p.theme.colors.grey
-        : p.theme.colors.graphite};
-  margin-bottom: -1px;
-  outline: none;
-  cursor: ${p => (p.isActive ? 'default' : p.isDisabled ? 'not-allowed' : 'pointer')};
-  max-width: 200px;
-`
-
-type Item = {
-  key: string | number,
-  isDisabled?: boolean,
-  title: string | Element<any>,
-  render: () => Element<any>,
-}
-
-type Props = {
-  items: Array<Item>,
-  index: number,
-  onTabClick: number => void,
-}
-
-const Tabs = ({ items, index, onTabClick }: Props) => (
-  <Fragment>
-    <WrapperTab>
-      {items.map((item, i) => (
-        <Tab
-          key={item.key}
-          isDisabled={item.isDisabled}
-          isActive={index === i}
-          onClick={item.isDisabled ? void 0 : () => onTabClick(i)}
-        >
-          {item.title}
-        </Tab>
-      ))}
-    </WrapperTab>
-    {items[index] && items[index].render()}
-  </Fragment>
-)
-
-export default Tabs

src/components/base/Tabs/stories.js

@@ -1,31 +0,0 @@
-import React from 'react'
-
-import { number } from '@storybook/addon-knobs'
-import { action } from '@storybook/addon-actions'
-import { storiesOf } from '@storybook/react'
-
-import Tabs from 'components/base/Tabs'
-
-const stories = storiesOf('Components/base', module)
-
-stories.add('Tabs', () => (
-  <Tabs
-    index={number('index', 0, {
-      min: 0,
-      max: 1,
-    })}
-    onTabClick={action('onTabClick')}
-    items={[
-      {
-        key: 'first',
-        title: 'first tab',
-        render: () => <div>{'first tab content'}</div>,
-      },
-      {
-        key: 'second',
-        title: 'second tab',
-        render: () => <div>{'second tab content'}</div>,
-      },
-    ]}
-  />
-))