Use default-styled button in the settings view

3 files changed, 32 insertions, 1 deletions

diff --git a/app/components/Settings.js b/app/components/Settings.js
index 907f210f5d..fe73ffd0af 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -1,7 +1,8 @@
 // @flow
 import moment from 'moment';
 import React from 'react';
-import { Component, Text, Button, View } from 'reactxp';
+import { Component, Text, View } from 'reactxp';
+import { Button } from './styled';
 import { Layout, Container, Header } from './Layout';
 import CustomScrollbars from './CustomScrollbars';
 import styles from './SettingsStyles';
diff --git a/app/components/styled/Button.js b/app/components/styled/Button.js
new file mode 100644
index 0000000000..df880701cd
--- /dev/null
+++ b/app/components/styled/Button.js
@@ -0,0 +1,23 @@
+// @flow
+
+import React from 'react';
+import ReactXP from 'reactxp';
+
+const defaultStyle = ReactXP.Styles.createViewStyle({
+  cursor: 'default',
+});
+
+export function Button(props: *) {
+  const { style, cursor, ...rest } = props;
+
+  const stylePropArray = Array.isArray(props.style)
+    ? props.style
+    : [props.style];
+
+  const concreteStyle = ReactXP.Styles.combine([defaultStyle, ...stylePropArray]);
+
+  // Can be removed when we upgrade to ReactXP 0.51
+  const concreteCursor = cursor || concreteStyle.cursor || 'default';
+
+  return <ReactXP.Button style={concreteStyle} cursor={concreteCursor} {...rest} />;
+}
diff --git a/app/components/styled/index.js b/app/components/styled/index.js
new file mode 100644
index 0000000000..6699594f18
--- /dev/null
+++ b/app/components/styled/index.js
@@ -0,0 +1,7 @@
+// @flow
+
+import { Button } from './Button';
+
+export {
+  Button
+};