Emoji done

src/components/BottomSheet.tsx

@@ -12,6 +12,7 @@ import {
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'src/utils/styles/ThemeManager'
 import { StyleConstants } from 'src/utils/styles/constants'
+import Button from './Button'
 
 export interface Props {
   children: React.ReactNode
@@ -85,12 +86,10 @@ const BottomSheet: React.FC<Props> = ({ children, visible, handleDismiss }) => {
             style={[styles.handle, { backgroundColor: theme.background }]}
           />
           {children}
-          <Pressable
+          <Button
             onPress={() => closeModal.start(() => handleDismiss())}
-            style={[styles.cancel, { borderColor: theme.primary }]}
-          >
-            <Text style={[styles.text, { color: theme.primary }]}>取消</Text>
-          </Pressable>
+            text='取消'
+          />
         </Animated.View>
       </View>
     </Modal>
@@ -111,17 +110,6 @@ const styles = StyleSheet.create({
     height: StyleConstants.Spacing.S / 2,
     borderRadius: 100,
     top: -StyleConstants.Spacing.M * 2
-  },
-  cancel: {
-    padding: StyleConstants.Spacing.S,
-    marginLeft: StyleConstants.Spacing.L,
-    marginRight: StyleConstants.Spacing.L,
-    borderWidth: 1,
-    borderRadius: 100
-  },
-  text: {
-    fontSize: StyleConstants.Font.Size.L,
-    textAlign: 'center'
   }
 })
 

src/components/Button.tsx

@@ -1,38 +1,74 @@
+import { Feather } from '@expo/vector-icons'
 import React from 'react'
 import { Pressable, StyleSheet, Text } from 'react-native'
 import { StyleConstants } from 'src/utils/styles/constants'
 import { useTheme } from 'src/utils/styles/ThemeManager'
 
-export interface Props {
+type PropsBase = {
   onPress: () => void
-  text: string
-  fontSize?: 'S' | 'M' | 'L'
+  disabled?: boolean
+  buttonSize?: 'S' | 'M'
 }
 
-const Button: React.FC<Props> = ({ onPress, text, fontSize = 'M' }) => {
+export interface PropsText extends PropsBase {
+  text: string
+  icon?: string
+  size?: 'S' | 'M' | 'L'
+}
+
+export interface PropsIcon extends PropsBase {
+  text?: string
+  icon: string
+  size?: 'S' | 'M' | 'L'
+}
+
+const Button: React.FC<PropsText | PropsIcon> = ({
+  onPress,
+  disabled = false,
+  buttonSize = 'M',
+  text,
+  icon,
+  size = 'M'
+}) => {
   const { theme } = useTheme()
 
   return (
     <Pressable
-      onPress={onPress}
-      style={[styles.button, { borderColor: theme.primary }]}
+      {...(!disabled && { onPress })}
+      style={[
+        styles.button,
+        {
+          borderColor: disabled ? theme.secondary : theme.primary,
+          paddingTop: StyleConstants.Spacing[buttonSize === 'M' ? 'S' : 'XS'],
+          paddingBottom: StyleConstants.Spacing[buttonSize === 'M' ? 'S' : 'XS']
+        }
+      ]}
     >
-      <Text
-        style={[
-          styles.text,
-          { color: theme.primary, fontSize: StyleConstants.Font.Size[fontSize] }
-        ]}
-      >
-        {text}
-      </Text>
+      {icon ? (
+        <Feather
+          name={icon}
+          size={StyleConstants.Font.Size[size]}
+          color={disabled ? theme.secondary : theme.primary}
+        />
+      ) : (
+        <Text
+          style={[
+            styles.text,
+            {
+              color: disabled ? theme.secondary : theme.primary,
+              fontSize: StyleConstants.Font.Size[size]
+            }
+          ]}
+        >
+          {text}
+        </Text>
+      )}
     </Pressable>
   )
 }
 
 const styles = StyleSheet.create({
   button: {
-    paddingTop: StyleConstants.Spacing.S,
-    paddingBottom: StyleConstants.Spacing.S,
     paddingLeft: StyleConstants.Spacing.M,
     paddingRight: StyleConstants.Spacing.M,
     borderWidth: 1,

src/components/Timelines/Timeline/Shared/Card.tsx

@@ -58,7 +58,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     height: StyleConstants.Avatar.L,
     marginTop: StyleConstants.Spacing.M,
-    borderWidth: 0.5,
+    borderWidth: StyleSheet.hairlineWidth,
     borderRadius: 6
   },
   left: {