feat(closeicon): add closeicon component

src/Icons/ChevronIcon.tsx

@@ -22,8 +22,11 @@ const ChevronIcon = ({
 }: Props) => {
   const theme = useContext(ThemeContext);
 
-  const segmentSizes = new Array(segments).fill(null).map((_, i) => 1 + i * 2);
+  let segmentSizes = new Array(segments).fill(null).map((_, i) => 1 + i * 2);
 
+  if (['right', 'bottom'].includes(direction)) {
+    segmentSizes = segmentSizes.reverse();
+  }
   const isHorizontal = ['left', 'right'].includes(direction);
 
   const SegmentPixel = () => (
@@ -47,27 +50,12 @@ const ChevronIcon = ({
     />
   );
 
-  const getFlexDirection = () => {
-    switch (direction) {
-      case 'left':
-        return 'row';
-      case 'top':
-        return 'column';
-      case 'right':
-        return 'row-reverse';
-      case 'bottom':
-        return 'column-reverse';
-      default:
-        return 'row';
-    }
-  };
-
   return (
     <View
       style={[
         styles.wrapper,
         {
-          flexDirection: getFlexDirection(),
+          flexDirection: isHorizontal ? 'row' : 'column',
         },
         style,
       ]}
@@ -85,7 +73,7 @@ const ChevronIcon = ({
             },
           ]}
         >
-          {i > 0 && <SegmentPixel />}
+          {segmentSize !== 1 && <SegmentPixel />}
           <SegmentPixel />
         </View>
       ))}

src/Icons/CloseIcon.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import { ChevronIcon } from '..';
+
+type Props = {
+  disabled?: boolean;
+  segments?: number;
+  style?: StyleProp<ViewStyle>;
+};
+
+const CloseIcon = ({
+  disabled = false,
+  segments = 4,
+  style,
+  ...rest
+}: Props) => {
+  return (
+    <View style={[styles.wrapper, style]} {...rest}>
+      <ChevronIcon disabled={disabled} segments={segments} direction='right' />
+      <ChevronIcon
+        disabled={disabled}
+        segments={segments}
+        direction='left'
+        style={{ marginLeft: -2, marginRight: 2 }}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+});
+
+export default CloseIcon;

src/Icons/index.ts

@@ -1,3 +1,4 @@
 export { default as ArrowIcon } from './ArrowIcon';
 export { default as ChevronIcon } from './ChevronIcon';
 export { default as CheckmarkIcon } from './CheckmarkIcon';
+export { default as CloseIcon } from './CloseIcon';

src/Window/Window.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
 
 import { ThemeContext } from '../common/theming/Theme';
 
-import { Panel, Button, Text } from '..';
+import { Panel, Button, Text, CloseIcon } from '..';
 
 type Props = React.ComponentPropsWithRef<typeof View> & {
   // TODO: allow for inserting custom buttons to title bar?
@@ -75,7 +75,7 @@ const Window = ({
           </View>
           {onClose && (
             <Button onPress={onClose} style={[styles.button]}>
-              X
+              <CloseIcon />
             </Button>
           )}
         </View>
@@ -120,8 +120,7 @@ const styles = StyleSheet.create({
   button: {
     height: 28,
     width: 32,
-    paddingVertical: 0,
-    paddingHorizontal: 0,
+    padding: 0,
   },
 });