Merge branch 'reintegrate-styled-classes'

17 files changed, 124 insertions, 154 deletions

diff --git a/app/components/Account.js b/app/components/Account.js
index f8ea3dc19b..9806c7e286 100644
--- a/app/components/Account.js
+++ b/app/components/Account.js
@@ -1,8 +1,8 @@
 // @flow
 import moment from 'moment';
 import * as React from 'react';
-import { Component, Text, View, App, Types } from 'reactxp';
-import { Button, RedButton, GreenButton, Label } from './styled';
+import { Button, Component, Text, View, App, Types } from 'reactxp';
+import * as AppButton from './AppButton';
 import { Layout, Container } from './Layout';
 import styles from './AccountStyles';
 import Img from './Img';
@@ -94,17 +94,17 @@ export default class Account extends Component<AccountProps, AccountState> {
                   </View>
 
                   <View style={styles.account__footer}>
-                    <GreenButton
+                    <AppButton.GreenButton
                       onPress={this.props.onBuyMore}
                       text="Buy more credit"
                       icon="icon-extLink"
                       testName="account__buymore">
-                      <Label>Buy more credit</Label>
+                      <AppButton.Label>Buy more credit</AppButton.Label>
                       <Img source="icon-extLink" height={16} width={16} />
-                    </GreenButton>
-                    <RedButton onPress={this.props.onLogout} testName="account__logout">
+                    </AppButton.GreenButton>
+                    <AppButton.RedButton onPress={this.props.onLogout} testName="account__logout">
                       Log out
-                    </RedButton>
+                    </AppButton.RedButton>
                   </View>
                 </View>
               </View>
diff --git a/app/components/AdvancedSettings.js b/app/components/AdvancedSettings.js
index ed865036e1..21afbcd97e 100644
--- a/app/components/AdvancedSettings.js
+++ b/app/components/AdvancedSettings.js
@@ -1,8 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { Component, Text, View } from 'reactxp';
-import { Button } from './styled';
+import { Button, Component, Text, View } from 'reactxp';
 import { Layout, Container } from './Layout';
 import CustomScrollbars from './CustomScrollbars';
 import styles from './AdvancedSettingsStyles';
diff --git a/app/components/AdvancedSettingsStyles.js b/app/components/AdvancedSettingsStyles.js
index f93b69d9eb..6dc9546d36 100644
--- a/app/components/AdvancedSettingsStyles.js
+++ b/app/components/AdvancedSettingsStyles.js
@@ -48,6 +48,7 @@ export default {
       overflow: 'visible',
     },
     advanced_settings__cell: {
+      cursor: 'default',
       backgroundColor: colors.green,
       flexDirection: 'row',
       paddingTop: 14,
@@ -74,6 +75,7 @@ export default {
       color: colors.white80,
     },
     advanced_settings__cell_dimmed: {
+      cursor: 'default',
       paddingTop: 14,
       paddingBottom: 14,
       paddingLeft: 24,
diff --git a/app/components/styled/AppButton.js b/app/components/AppButton.js
index f54bd18024..1b8f50cad2 100644
--- a/app/components/styled/AppButton.js
+++ b/app/components/AppButton.js
@@ -1,9 +1,9 @@
 // @flow
 import * as React from 'react';
-import { Text, Component } from 'reactxp';
-import { Button } from './Button';
+import { Button, Text, Component } from 'reactxp';
 import styles from './AppButtonStyles';
 import blurStyles from './BlurAppButtonStyles';
+import Img from './Img';
 
 export class Label extends Text {}
 
@@ -15,8 +15,8 @@ class BaseButton extends Component {
 
   state = { hovered: false };
 
-  textStyle = () => (this.state.hovered ? styles.white80 : styles.white);
-  iconStyle = () => (this.state.hovered ? styles.white80 : styles.white);
+  textStyle = () => styles.white;
+  iconStyle = () => styles.white;
   backgroundStyle = () => (this.state.hovered ? styles.white80 : styles.white);
 
   onHoverStart = () => (!this.props.disabled ? this.setState({ hovered: true }) : null);
@@ -33,11 +33,11 @@ class BaseButton extends Component {
           if (React.isValidElement(node)) {
             let updatedProps = {};
 
-            if (node.type.name === 'Label') {
+            if (node.type === Label) {
               updatedProps = { style: [styles.label, this.textStyle()] };
             }
 
-            if (node.type.name === 'Img') {
+            if (node.type === Img) {
               updatedProps = { tintColor: 'currentColor', style: [styles.icon, this.iconStyle()] };
             }
 
diff --git a/app/components/styled/AppButtonStyles.js b/app/components/AppButtonStyles.js
index 6049f227d5..d1cf500cdb 100644
--- a/app/components/styled/AppButtonStyles.js
+++ b/app/components/AppButtonStyles.js
@@ -1,14 +1,13 @@
-import { colors } from '../../config';
-
-import { createViewStyles, createTextStyles } from '../../lib/styles';
+import { createViewStyles, createTextStyles } from '../lib/styles';
+import { colors } from '../config';
 
 export default {
   ...createViewStyles({
     red: {
-      backgroundColor: colors.red95,
+      backgroundColor: colors.red,
     },
     redHover: {
-      backgroundColor: colors.red,
+      backgroundColor: colors.red95,
     },
     green: {
       backgroundColor: colors.green,
@@ -40,6 +39,7 @@ export default {
       right: 42,
     },
     common: {
+      cursor: 'default',
       paddingTop: 9,
       paddingLeft: 9,
       paddingRight: 9,
diff --git a/app/components/styled/BlurAppButtonStyles.android.js b/app/components/BlurAppButtonStyles.android.js
index c39e44cdd5..c39e44cdd5 100644
--- a/app/components/styled/BlurAppButtonStyles.android.js
+++ b/app/components/BlurAppButtonStyles.android.js
diff --git a/app/components/styled/BlurAppButtonStyles.js b/app/components/BlurAppButtonStyles.js
index 72d5398ea8..18c16013a1 100644
--- a/app/components/styled/BlurAppButtonStyles.js
+++ b/app/components/BlurAppButtonStyles.js
@@ -1,6 +1,5 @@
-import { colors } from '../../config';
-
-import { createViewStyles } from '../../lib/styles';
+import { createViewStyles } from '../lib/styles';
+import { colors } from '../config';
 
 export default {
   ...createViewStyles({
diff --git a/app/components/styled/CellButton.js b/app/components/Cell.js
index 709260d2e6..2b3c06a3b1 100644
--- a/app/components/styled/CellButton.js
+++ b/app/components/Cell.js
@@ -1,11 +1,10 @@
 // @flow
 
 import * as React from 'react';
-import { Text, Component, Types } from 'reactxp';
-import { Button } from './Button';
-import { colors } from '../../config';
-
-import { createViewStyles, createTextStyles } from '../../lib/styles';
+import { Button, Text, Component, Types } from 'reactxp';
+import Img from './Img';
+import { createViewStyles, createTextStyles } from '../lib/styles';
+import { colors } from '../config';
 
 const styles = {
   ...createViewStyles({
@@ -63,7 +62,7 @@ type CellButtonProps = {
 
 type State = { hovered: boolean };
 
-export default class CellButton extends Component<CellButtonProps, State> {
+export class CellButton extends Component<CellButtonProps, State> {
   state = { hovered: false };
 
   textStyle = (cellHoverStyle?: Types.ViewStyle) => (this.state.hovered ? cellHoverStyle : null);
@@ -87,20 +86,20 @@ export default class CellButton extends Component<CellButtonProps, State> {
           if (React.isValidElement(node)) {
             let updatedProps = {};
 
-            if (node.type.name === 'Label') {
+            if (node.type === Label) {
               updatedProps = {
                 style: [styles.label, node.props.style, this.textStyle(node.props.cellHoverStyle)],
               };
             }
 
-            if (node.type.name === 'Img') {
+            if (node.type === Img) {
               updatedProps = {
                 tintColor: 'currentColor',
                 style: [styles.icon, node.props.style, this.iconStyle(node.props.cellHoverStyle)],
               };
             }
 
-            if (node.type.name === 'SubText') {
+            if (node.type === SubText) {
               updatedProps = {
                 style: [
                   styles.subtext,
diff --git a/app/components/Connect.js b/app/components/Connect.js
index 79723e5672..4759f1619d 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -4,8 +4,8 @@ import moment from 'moment';
 import * as React from 'react';
 import { Layout, Container, Header } from './Layout';
 import { Component, Text, View, Types } from 'reactxp';
+import * as AppButton from './AppButton';
 import Img from './Img';
-import { TransparentButton, RedTransparentButton, GreenButton, Label } from './styled';
 import Accordion from './Accordion';
 import styles from './ConnectStyles';
 
@@ -93,10 +93,10 @@ export default class Connect extends Component<ConnectProps, ConnectState> {
           <View style={styles.error_message}>{message}</View>
           {error.type === 'NO_CREDIT' ? (
             <View>
-              <GreenButton onPress={this.onExternalLink.bind(this, 'purchase')}>
-                <Label>Buy more time</Label>
+              <AppButton.GreenButton onPress={this.onExternalLink.bind(this, 'purchase')}>
+                <AppButton.Label>Buy more time</AppButton.Label>
                 <Img source="icon-extLink" height={16} width={16} />
-              </GreenButton>
+              </AppButton.GreenButton>
             </View>
           ) : null}
         </View>
@@ -232,35 +232,39 @@ export default class Connect extends Component<ConnectProps, ConnectState> {
           {/* footer when disconnected */}
           {isDisconnected ? (
             <View style={styles.footer}>
-              <TransparentButton onPress={this.props.onSelectLocation}>
-                <Label>{this.props.selectedRelayName}</Label>
+              <AppButton.TransparentButton onPress={this.props.onSelectLocation}>
+                <AppButton.Label>{this.props.selectedRelayName}</AppButton.Label>
                 <Img height={12} width={7} source="icon-chevron" />
-              </TransparentButton>
-              <GreenButton onPress={this.props.onConnect} testName="secureConnection">
-                Secure my connection
-              </GreenButton>
+              </AppButton.TransparentButton>
+              <AppButton.GreenButton onPress={this.props.onConnect} testName="secureConnection">
+                {'Secure my connection'}
+              </AppButton.GreenButton>
             </View>
           ) : null}
 
           {/* footer when connecting */}
           {isConnecting ? (
             <View style={styles.footer}>
-              <TransparentButton onPress={this.props.onSelectLocation}>
-                Switch location
-              </TransparentButton>
-              <RedTransparentButton onPress={this.props.onDisconnect}>Cancel</RedTransparentButton>
+              <AppButton.TransparentButton onPress={this.props.onSelectLocation}>
+                {'Switch location'}
+              </AppButton.TransparentButton>
+              <AppButton.RedTransparentButton onPress={this.props.onDisconnect}>
+                {'Cancel'}
+              </AppButton.RedTransparentButton>
             </View>
           ) : null}
 
           {/* footer when connected */}
           {isConnected ? (
             <View style={styles.footer}>
-              <TransparentButton onPress={this.props.onSelectLocation}>
-                Switch location
-              </TransparentButton>
-              <RedTransparentButton onPress={this.props.onDisconnect} testName="disconnect">
-                Disconnect
-              </RedTransparentButton>
+              <AppButton.TransparentButton onPress={this.props.onSelectLocation}>
+                {'Switch location'}
+              </AppButton.TransparentButton>
+              <AppButton.RedTransparentButton
+                onPress={this.props.onDisconnect}
+                testName="disconnect">
+                {'Disconnect'}
+              </AppButton.RedTransparentButton>
             </View>
           ) : null}
 
diff --git a/app/components/HeaderBarStyles.js b/app/components/HeaderBarStyles.js
index 01b3c89f5c..5b869bc36b 100644
--- a/app/components/HeaderBarStyles.js
+++ b/app/components/HeaderBarStyles.js
@@ -35,6 +35,7 @@ export default {
       alignItems: 'center',
     },
     settings: {
+      cursor: 'default',
       padding: 0,
     },
     settings_icon: {
diff --git a/app/components/Login.js b/app/components/Login.js
index 355396a77c..e1a11d2071 100644
--- a/app/components/Login.js
+++ b/app/components/Login.js
@@ -6,7 +6,8 @@ import AccountInput from './AccountInput';
 import Accordion from './Accordion';
 import { formatAccount } from '../lib/formatters';
 import Img from './Img';
-import { BlueButton, Label, CellButton } from './styled';
+import * as Cell from './Cell';
+import * as AppButton from './AppButton';
 import styles from './LoginStyles';
 import { colors } from '../config';
 
@@ -388,10 +389,10 @@ export default class Login extends Component<Props, State> {
     return (
       <View>
         <Text style={styles.login_footer__prompt}>{"Don't have an account number?"}</Text>
-        <BlueButton onPress={this._onCreateAccount}>
-          <Label>Create account</Label>
+        <AppButton.BlueButton onPress={this._onCreateAccount}>
+          <AppButton.Label>Create account</AppButton.Label>
           <Img source="icon-extLink" height={16} width={16} />
-        </BlueButton>
+        </AppButton.BlueButton>
       </View>
     );
   }
@@ -434,15 +435,15 @@ class AccountDropdownItem extends React.Component<AccountDropdownItemProps> {
     return (
       <View>
         <View style={styles.account_dropdown__spacer} />
-        <CellButton
+        <Cell.CellButton
           style={styles.account_dropdown__item}
           cellHoverStyle={styles.account_dropdown__item_hover}>
-          <Label
+          <Cell.Label
             style={styles.account_dropdown__label}
             cellHoverStyle={styles.account_dropdown__label_hover}
             onPress={() => this.props.onSelect(this.props.value)}>
             {this.props.label}
-          </Label>
+          </Cell.Label>
           <Img
             style={styles.account_dropdown__remove}
             cellHoverStyle={styles.account_dropdown__remove_cell_hover}
@@ -452,7 +453,7 @@ class AccountDropdownItem extends React.Component<AccountDropdownItemProps> {
             width={16}
             onPress={() => this.props.onRemove(this.props.value)}
           />
-        </CellButton>
+        </Cell.CellButton>
       </View>
     );
   }
diff --git a/app/components/SelectLocation.js b/app/components/SelectLocation.js
index 14d0a04f9c..6c7087e451 100644
--- a/app/components/SelectLocation.js
+++ b/app/components/SelectLocation.js
@@ -1,9 +1,9 @@
 // @flow
 import * as React from 'react';
+import { Button, Text, View } from 'reactxp';
 import { Layout, Container } from './Layout';
 import CustomScrollbars from './CustomScrollbars';
-import { Text, View } from 'reactxp';
-import { Button, CellButton, Label } from './styled';
+import * as Cell from './Cell';
 import styles from './SelectLocationStyles';
 import Img from './Img';
 
@@ -27,7 +27,7 @@ type State = {
 };
 
 export default class SelectLocation extends React.Component<SelectLocationProps, State> {
-  _selectedCell: ?CellButton;
+  _selectedCell: ?Cell.CellButton;
   _scrollView: ?CustomScrollbars;
 
   state = {
@@ -163,7 +163,7 @@ export default class SelectLocation extends React.Component<SelectLocationProps,
 
     return (
       <View key={relayCountry.code} style={styles.country}>
-        <CellButton
+        <Cell.CellButton
           cellHoverStyle={isSelected ? styles.cell_selected : null}
           style={isSelected ? styles.cell_selected : styles.cell}
           onPress={handleSelect}
@@ -171,7 +171,7 @@ export default class SelectLocation extends React.Component<SelectLocationProps,
           testName="country">
           {this._relayStatusIndicator(relayCountry.hasActiveRelays, isSelected)}
 
-          <Label>{relayCountry.name}</Label>
+          <Cell.Label>{relayCountry.name}</Cell.Label>
 
           {relayCountry.cities.length > 1 ? (
             <Img
@@ -183,7 +183,7 @@ export default class SelectLocation extends React.Component<SelectLocationProps,
               width={24}
             />
           ) : null}
-        </CellButton>
+        </Cell.CellButton>
 
         {relayCountry.cities.length > 1 && (
           <Accordion height={isExpanded ? 'auto' : 0}>
@@ -213,7 +213,7 @@ export default class SelectLocation extends React.Component<SelectLocationProps,
         : undefined;
 
     return (
-      <CellButton
+      <Cell.CellButton
         key={`${countryCode}_${relayCity.code}`}
         onPress={handleSelect}
         disabled={!relayCity.hasActiveRelays}
@@ -223,8 +223,8 @@ export default class SelectLocation extends React.Component<SelectLocationProps,
         ref={onRef}>
         {this._relayStatusIndicator(relayCity.hasActiveRelays, isSelected)}
 
-        <Label>{relayCity.name}</Label>
-      </CellButton>
+        <Cell.Label>{relayCity.name}</Cell.Label>
+      </Cell.CellButton>
     );
   }
 }
diff --git a/app/components/Settings.js b/app/components/Settings.js
index ad90e034c4..1c57b026fc 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -1,8 +1,9 @@
 // @flow
 import moment from 'moment';
 import * as React from 'react';
-import { Component, Text, View } from 'reactxp';
-import { Button, CellButton, RedButton, Label, SubText } from './styled';
+import { Button, Component, Text, View } from 'reactxp';
+import * as AppButton from './AppButton';
+import * as Cell from './Cell';
 import { Layout, Container } from './Layout';
 import CustomScrollbars from './CustomScrollbars';
 import styles from './SettingsStyles';
@@ -79,37 +80,39 @@ export default class Settings extends Component<SettingsProps> {
       <View>
         <View style={styles.settings_account} testName="settings__account">
           {isOutOfTime ? (
-            <CellButton
+            <Cell.CellButton
               onPress={this.props.onViewAccount}
               testName="settings__account_paid_until_button">
-              <Label>Account</Label>
-              <SubText
+              <Cell.Label>Account</Cell.Label>
+              <Cell.SubText
                 testName="settings__account_paid_until_subtext"
                 style={styles.settings__account_paid_until_Label__error}>
                 OUT OF TIME
-              </SubText>
+              </Cell.SubText>
               <Img height={12} width={7} source="icon-chevron" />
-            </CellButton>
+            </Cell.CellButton>
           ) : (
-            <CellButton
+            <Cell.CellButton
               onPress={this.props.onViewAccount}
               testName="settings__account_paid_until_button">
-              <Label>Account</Label>
-              <SubText testName="settings__account_paid_until_subtext">{formattedExpiry}</SubText>
+              <Cell.Label>Account</Cell.Label>
+              <Cell.SubText testName="settings__account_paid_until_subtext">
+                {formattedExpiry}
+              </Cell.SubText>
               <Img height={12} width={7} source="icon-chevron" />
-            </CellButton>
+            </Cell.CellButton>
           )}
         </View>
 
-        <CellButton onPress={this.props.onViewPreferences} testName="settings__preferences">
-          <Label>Preferences</Label>
+        <Cell.CellButton onPress={this.props.onViewPreferences} testName="settings__preferences">
+          <Cell.Label>Preferences</Cell.Label>
           <Img height={12} width={7} source="icon-chevron" />
-        </CellButton>
+        </Cell.CellButton>
 
-        <CellButton onPress={this.props.onViewAdvancedSettings} testName="settings__advanced">
-          <Label>Advanced</Label>
+        <Cell.CellButton onPress={this.props.onViewAdvancedSettings} testName="settings__advanced">
+          <Cell.Label>Advanced</Cell.Label>
           <Img height={12} width={7} source="icon-chevron" />
-        </CellButton>
+        </Cell.CellButton>
         <View style={styles.settings__cell_spacer} />
       </View>
     );
@@ -118,13 +121,13 @@ export default class Settings extends Component<SettingsProps> {
   _renderMiddleButtons() {
     return (
       <View>
-        <CellButton
+        <Cell.CellButton
           onPress={this.props.onExternalLink.bind(this, 'download')}
           testName="settings__version">
-          <Label>App version</Label>
-          <SubText>{this._formattedVersion()}</SubText>
+          <Cell.Label>App version</Cell.Label>
+          <Cell.SubText>{this._formattedVersion()}</Cell.SubText>
           <Img height={16} width={16} source="icon-extLink" />
-        </CellButton>
+        </Cell.CellButton>
         <View style={styles.settings__cell_spacer} />
       </View>
     );
@@ -142,24 +145,24 @@ export default class Settings extends Component<SettingsProps> {
   _renderBottomButtons() {
     return (
       <View>
-        <CellButton
+        <Cell.CellButton
           onPress={this.props.onExternalLink.bind(this, 'faq')}
           testName="settings__external_link">
-          <Label>FAQs</Label>
+          <Cell.Label>FAQs</Cell.Label>
           <Img height={16} width={16} source="icon-extLink" />
-        </CellButton>
+        </Cell.CellButton>
 
-        <CellButton
+        <Cell.CellButton
           onPress={this.props.onExternalLink.bind(this, 'guides')}
           testName="settings__external_link">
-          <Label>Guides</Label>
+          <Cell.Label>Guides</Cell.Label>
           <Img height={16} width={16} source="icon-extLink" />
-        </CellButton>
+        </Cell.CellButton>
 
-        <CellButton onPress={this.props.onViewSupport} testName="settings__view_support">
-          <Label>Report a problem</Label>
+        <Cell.CellButton onPress={this.props.onViewSupport} testName="settings__view_support">
+          <Cell.Label>Report a problem</Cell.Label>
           <Img height={12} width={7} source="icon-chevron" />
-        </CellButton>
+        </Cell.CellButton>
       </View>
     );
   }
@@ -167,9 +170,9 @@ export default class Settings extends Component<SettingsProps> {
   _renderQuitButton() {
     return (
       <View style={styles.settings__footer}>
-        <RedButton onPress={this.props.onQuit} testName="settings__quit">
-          <Label>Quit app</Label>
-        </RedButton>
+        <AppButton.RedButton onPress={this.props.onQuit} testName="settings__quit">
+          <AppButton.Label>Quit app</AppButton.Label>
+        </AppButton.RedButton>
       </View>
     );
   }
diff --git a/app/components/Support.js b/app/components/Support.js
index 1f03d67375..9c411b1ff0 100644
--- a/app/components/Support.js
+++ b/app/components/Support.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
-import { Component, Text, View, TextInput } from 'reactxp';
-import { Button, BlueButton, GreenButton, Label } from './styled';
+import { Button, Component, Text, View, TextInput } from 'reactxp';
+import * as AppButton from './AppButton';
 import { Layout, Container } from './Layout';
 import styles from './SupportStyles';
 import Img from './Img';
@@ -230,29 +230,29 @@ export default class Support extends Component<SupportProps, SupportState> {
           You are about to send the problem report without a way for us to get back to you. If you
           want an answer to your report you will have to enter an email address.
         </Text>
-        <GreenButton
+        <AppButton.GreenButton
           disabled={!this.validate()}
           onPress={this.onSend}
           testName="support__send_logs">
           Send anyway
-        </GreenButton>
+        </AppButton.GreenButton>
       </View>
     );
   }
 
   _renderActionButtons() {
     return [
-      <BlueButton key={1} onPress={this.onViewLog} testName="support__view_logs">
-        <Label>View app logs</Label>
+      <AppButton.BlueButton key={1} onPress={this.onViewLog} testName="support__view_logs">
+        <AppButton.Label>View app logs</AppButton.Label>
         <Img source="icon-extLink" height={16} width={16} />
-      </BlueButton>,
-      <GreenButton
+      </AppButton.BlueButton>,
+      <AppButton.GreenButton
         key={2}
         disabled={!this.validate()}
         onPress={this.onSend}
         testName="support__send_logs">
         Send
-      </GreenButton>,
+      </AppButton.GreenButton>,
     ];
   }
 
@@ -309,12 +309,12 @@ export default class Support extends Component<SupportProps, SupportState> {
           </View>
         </View>
         <View style={styles.support__footer}>
-          <BlueButton onPress={() => this.setState({ sendState: 'INITIAL' })}>
+          <AppButton.BlueButton onPress={() => this.setState({ sendState: 'INITIAL' })}>
             Edit message
-          </BlueButton>
-          <GreenButton onPress={this.onSend} testName="support__send_logs">
+          </AppButton.BlueButton>
+          <AppButton.GreenButton onPress={this.onSend} testName="support__send_logs">
             Try again
-          </GreenButton>
+          </AppButton.GreenButton>
         </View>
       </View>
     );
diff --git a/app/components/SupportStyles.js b/app/components/SupportStyles.js
index ea1f26651d..e6323aafd1 100644
--- a/app/components/SupportStyles.js
+++ b/app/components/SupportStyles.js
@@ -20,6 +20,7 @@ export default Object.assign(
       paddingRight: 24,
     },
     support__close: {
+      cursor: 'default',
       paddingLeft: 12,
       paddingTop: 24,
       flexDirection: 'row',
diff --git a/app/components/styled/Button.js b/app/components/styled/Button.js
deleted file mode 100644
index c2b258c161..0000000000
--- a/app/components/styled/Button.js
+++ /dev/null
@@ -1,16 +0,0 @@
-// @flow
-
-import React from 'react';
-import ReactXP from 'reactxp';
-
-const defaultStyle = ReactXP.Styles.createViewStyle({
-  cursor: 'default',
-});
-
-export function Button(props: Object) {
-  const { style, ...rest } = props;
-
-  const concreteStyle = ReactXP.Styles.combine([defaultStyle, style]);
-
-  return <ReactXP.Button style={concreteStyle} {...rest} />;
-}
diff --git a/app/components/styled/index.js b/app/components/styled/index.js
deleted file mode 100644
index 6582da5e77..0000000000
--- a/app/components/styled/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-// @flow
-
-import { Button } from './Button';
-import CellButton, { Label, SubText } from './CellButton';
-import {
-  RedButton,
-  GreenButton,
-  BlueButton,
-  TransparentButton,
-  RedTransparentButton,
-} from './AppButton';
-
-export {
-  Button,
-  CellButton,
-  RedButton,
-  GreenButton,
-  BlueButton,
-  TransparentButton,
-  RedTransparentButton,
-  Label,
-  SubText,
-};