Merge branch 'convert-imageview-to-styled-component'

1 files changed, 18 insertions, 20 deletions

diff --git a/gui/src/renderer/components/ChevronButton.tsx b/gui/src/renderer/components/ChevronButton.tsx
index 04aabf6a99..aed6bacaec 100644
--- a/gui/src/renderer/components/ChevronButton.tsx
+++ b/gui/src/renderer/components/ChevronButton.tsx
@@ -1,34 +1,32 @@
 import * as React from 'react';
-import { Component, Styles, Types } from 'reactxp';
+import styled from 'styled-components';
 import { colors } from '../../config.json';
 import * as Cell from './Cell';
 
 interface IProps {
   up: boolean;
-  onPress?: (event: Types.SyntheticEvent) => void;
-  style?: Types.StyleRuleSetRecursive<Types.ViewStyleRuleSet>;
+  onClick?: (event: React.MouseEvent) => void;
+  className?: string;
 }
 
-const style = Styles.createViewStyle({
+const Icon = styled(Cell.Icon)({
   flex: 0,
   alignSelf: 'stretch',
   justifyContent: 'center',
-  paddingRight: 16,
-  paddingLeft: 16,
+  paddingRight: '16px',
+  paddingLeft: '16px',
 });
 
-export default class ChevronButton extends Component<IProps> {
-  public render() {
-    return (
-      <Cell.Icon
-        style={[style, this.props.style]}
-        tintColor={colors.white80}
-        tintHoverColor={colors.white}
-        onPress={this.props.onPress}
-        source={this.props.up ? 'icon-chevron-up' : 'icon-chevron-down'}
-        height={24}
-        width={24}
-      />
-    );
-  }
+export default function ChevronButton(props: IProps) {
+  return (
+    <Icon
+      tintColor={colors.white80}
+      tintHoverColor={colors.white}
+      onClick={props.onClick}
+      source={props.up ? 'icon-chevron-up' : 'icon-chevron-down'}
+      height={24}
+      width={24}
+      className={props.className}
+    />
+  );
 }