Rewrite all buttons

2020-12-26 23:05:17 +01:00 · 2020-12-26 23:05:17 +01:00 · da79674548
parent 3ea88d025b
commit da79674548
25 changed files with 497 additions and 583 deletions
--- a/package.json
+++ b/package.json
@ -43,6 +43,7 @@
    "react-dom": "16.13.1",
    "react-i18next": "^11.8.4",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.0.tar.gz",
+    "react-native-animated-spinkit": "^1.4.2",
    "react-native-expo-image-cache": "^4.1.0",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-htmlview": "^0.16.0",
--- a/src/components/BottomSheet.tsx
+++ b/src/components/BottomSheet.tsx
@ -10,7 +10,7 @@ import {
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { StyleConstants } from '@utils/styles/constants'
-import { ButtonRow } from '@components/Button'
+import Button from '@components/Button'

 export interface Props {
  children: React.ReactNode
@ -84,12 +84,12 @@ const BottomSheet: React.FC<Props> = ({ children, visible, handleDismiss }) => {
            style={[styles.handle, { backgroundColor: theme.background }]}
          />
          {children}
-          <View style={styles.button}>
-            <ButtonRow
-              onPress={() => closeModal.start(() => handleDismiss())}
-              text='取消'
-            />
-          </View>
+          <Button
+            type='text'
+            content='取消'
+            onPress={() => closeModal.start(() => handleDismiss())}
+            style={styles.button}
+          />
        </Animated.View>
      </View>
    </Modal>
@ -112,8 +112,7 @@ const styles = StyleSheet.create({
    top: -StyleConstants.Spacing.M * 2
  },
  button: {
-    paddingLeft: StyleConstants.Spacing.Global.PagePadding * 2,
-    paddingRight: StyleConstants.Spacing.Global.PagePadding * 2
+    marginHorizontal: StyleConstants.Spacing.Global.PagePadding * 2
  }
 })

--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@ -1,4 +1,166 @@
-import ButtonRound from '@components/Button/ButtonRound'
-import ButtonRow from '@components/Button/ButtonRow'
+import { Feather } from '@expo/vector-icons'
+import React, { useLayoutEffect, useMemo } from 'react'
+import {
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  Text,
+  View,
+  ViewStyle
+} from 'react-native'
+import { Chase } from 'react-native-animated-spinkit'
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import layoutAnimation from '@root/utils/styles/layoutAnimation'

-export { ButtonRound, ButtonRow }
+export interface Props {
+  style?: StyleProp<ViewStyle>
+
+  type: 'icon' | 'text'
+  content: string
+
+  loading?: boolean
+  destructive?: boolean
+  disabled?: boolean
+
+  size?: 'S' | 'M' | 'L'
+  spacing?: 'XS' | 'S' | 'M' | 'L'
+  round?: boolean
+  overlay?: boolean
+
+  onPress: () => void
+}
+
+const Button: React.FC<Props> = ({
+  style: customStyle,
+  type,
+  content,
+  loading = false,
+  destructive = false,
+  disabled = false,
+  size = 'M',
+  spacing = 'S',
+  round = false,
+  overlay = false,
+  onPress
+}) => {
+  const { theme } = useTheme()
+
+  useLayoutEffect(() => layoutAnimation(), [loading, disabled])
+
+  const loadingSpinkit = useMemo(
+    () => (
+      <View style={{ position: 'absolute' }}>
+        <Chase size={StyleConstants.Font.Size[size]} color={theme.secondary} />
+      </View>
+    ),
+    [theme]
+  )
+
+  const colorContent = useMemo(() => {
+    if (overlay) {
+      return theme.primaryOverlay
+    } else {
+      if (disabled) {
+        return theme.secondary
+      } else {
+        if (destructive) {
+          return theme.red
+        } else {
+          return theme.primary
+        }
+      }
+    }
+  }, [theme, disabled])
+
+  const children = useMemo(() => {
+    switch (type) {
+      case 'icon':
+        return (
+          <>
+            <Feather
+              name={content as any}
+              size={StyleConstants.Font.Size[size] * (size === 'M' ? 1 : 1.5)}
+              color={colorContent}
+              style={{ opacity: loading ? 0 : 1 }}
+            />
+            {loading && loadingSpinkit}
+          </>
+        )
+      case 'text':
+        return (
+          <>
+            <Text
+              style={{
+                color: colorContent,
+                fontSize:
+                  StyleConstants.Font.Size[size] * (size === 'M' ? 1 : 1.5),
+                fontWeight: destructive
+                  ? StyleConstants.Font.Weight.Bold
+                  : undefined,
+                opacity: loading ? 0 : 1
+              }}
+              children={content}
+            />
+            {loading && loadingSpinkit}
+          </>
+        )
+    }
+  }, [theme, content, loading, disabled])
+
+  const colorBorder = useMemo(() => {
+    if (disabled || loading) {
+      return theme.secondary
+    } else {
+      if (destructive) {
+        return theme.red
+      } else {
+        return theme.primary
+      }
+    }
+  }, [theme, loading, disabled])
+  const colorBackground = useMemo(() => {
+    if (overlay) {
+      return theme.backgroundOverlay
+    } else {
+      return theme.background
+    }
+  }, [theme])
+
+  enum spacingMapping {
+    XS = 'S',
+    S = 'M',
+    M = 'L',
+    L = 'XL'
+  }
+
+  return (
+    <Pressable
+      {...(!disabled && !loading && { onPress })}
+      children={children}
+      style={[
+        styles.button,
+        {
+          borderWidth: overlay ? 0 : 1,
+          borderColor: colorBorder,
+          backgroundColor: colorBackground,
+          paddingVertical: StyleConstants.Spacing[spacing],
+          paddingHorizontal:
+            StyleConstants.Spacing[round ? spacing : spacingMapping[spacing]]
+        },
+        customStyle
+      ]}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  button: {
+    borderRadius: 100,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+})
+
+export default Button
--- a/src/components/Button/ButtonRound.tsx
+++ b/src/components/Button/ButtonRound.tsx
@ -1,60 +0,0 @@
-import { Feather } from '@expo/vector-icons'
-import React from 'react'
-import { Pressable, StyleSheet } from 'react-native'
-import { StyleConstants } from '@utils/styles/constants'
-import { useTheme } from '@utils/styles/ThemeManager'
-
-export interface Props {
-  styles: any
-  onPress: () => void
-  icon: any
-  size?: 'S' | 'M' | 'L'
-  coordinate?: 'center' | 'default'
-}
-
-const ButtomRound: React.FC<Props> = ({
-  styles: extraStyles,
-  onPress,
-  icon,
-  size = 'M',
-  coordinate = 'default'
-}) => {
-  const { theme } = useTheme()
-  const dimension =
-    StyleConstants.Spacing.S * 1.5 + StyleConstants.Font.Size[size]
-
-  return (
-    <Pressable
-      style={[
-        styles.base,
-        extraStyles,
-        {
-          backgroundColor: theme.backgroundOverlay,
-          ...(coordinate === 'center' && {
-            transform: [
-              { translateX: -dimension / 2 },
-              { translateY: -dimension / 2 }
-            ]
-          })
-        }
-      ]}
-      onPress={onPress}
-    >
-      <Feather
-        name={icon}
-        size={StyleConstants.Font.Size[size]}
-        color={theme.primaryOverlay}
-      />
-    </Pressable>
-  )
-}
-
-const styles = StyleSheet.create({
-  base: {
-    position: 'absolute',
-    padding: StyleConstants.Spacing.S * 1.5,
-    borderRadius: StyleConstants.Spacing.XL
-  }
-})
-
-export default ButtomRound
--- a/src/components/Button/ButtonRow.tsx
+++ b/src/components/Button/ButtonRow.tsx
@ -1,89 +0,0 @@
-import { Feather } from '@expo/vector-icons'
-import React from 'react'
-import { Pressable, StyleProp, StyleSheet, Text, ViewStyle } from 'react-native'
-import { StyleConstants } from '@utils/styles/constants'
-import { useTheme } from '@utils/styles/ThemeManager'
-
-type PropsBase = {
-  onPress: () => void
-  disabled?: boolean
-  buttonSize?: 'S' | 'M'
-  size?: 'S' | 'M' | 'L'
-  style?: StyleProp<ViewStyle>
-}
-
-export interface PropsText extends PropsBase {
-  text: string
-  icon?: any
-}
-
-export interface PropsIcon extends PropsBase {
-  text?: string
-  icon: any
-}
-
-const ButtonRow: React.FC<PropsText | PropsIcon> = ({
-  onPress,
-  disabled = false,
-  buttonSize = 'M',
-  text,
-  icon,
-  size = 'M',
-  style: customStyle
-}) => {
-  const { theme } = useTheme()
-
-  return (
-    <Pressable
-      {...(!disabled && { onPress })}
-      style={[
-        customStyle,
-        styles.button,
-        {
-          paddingLeft:
-            StyleConstants.Spacing.M -
-            (icon ? StyleConstants.Font.Size[size] / 2 : 0),
-          paddingRight:
-            StyleConstants.Spacing.M -
-            (icon ? StyleConstants.Font.Size[size] / 2 : 0),
-          borderColor: disabled ? theme.secondary : theme.primary,
-          paddingTop: StyleConstants.Spacing[buttonSize === 'M' ? 'S' : 'XS'],
-          paddingBottom: StyleConstants.Spacing[buttonSize === 'M' ? 'S' : 'XS']
-        }
-      ]}
-    >
-      {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: {
-    borderWidth: 1.25,
-    borderRadius: 100,
-    alignItems: 'center'
-  },
-  text: {
-    textAlign: 'center'
-  }
-})
-
-export default ButtonRow
--- a/src/components/Menu/Button.tsx
+++ b/src/components/Menu/Button.tsx
@ -1,78 +0,0 @@
-import React from 'react'
-import {
-  Alert,
-  AlertButton,
-  AlertOptions,
-  Pressable,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native'
-import { useTheme } from '@utils/styles/ThemeManager'
-import { StyleConstants } from '@utils/styles/constants'
-
-export interface Props {
-  text: string
-  destructive?: boolean
-  alertOption?: {
-    title: string
-    message?: string | undefined
-    buttons?: AlertButton[] | undefined
-    options?: AlertOptions | undefined
-  }
-}
-
-const Core: React.FC<Props> = ({ text, destructive = false }) => {
-  const { theme } = useTheme()
-
-  return (
-    <View style={styles.core}>
-      <Text
-        style={{
-          color: destructive ? theme.red : theme.primary,
-          fontWeight: destructive ? StyleConstants.Font.Weight.Bold : undefined
-        }}
-      >
-        {text}
-      </Text>
-    </View>
-  )
-}
-
-const MenuButton: React.FC<Props> = ({ ...props }) => {
-  const { theme } = useTheme()
-
-  return (
-    <Pressable
-      style={[styles.base, { borderBottomColor: theme.separator }]}
-      onPress={() =>
-        props.alertOption &&
-        Alert.alert(
-          props.alertOption.title,
-          props.alertOption.message,
-          props.alertOption.buttons,
-          props.alertOption.options
-        )
-      }
-    >
-      <Core {...props} />
-    </Pressable>
-  )
-}
-
-const styles = StyleSheet.create({
-  base: {
-    height: 50,
-    borderBottomWidth: 1
-  },
-  core: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingLeft: StyleConstants.Spacing.Global.PagePadding,
-    paddingRight: StyleConstants.Spacing.Global.PagePadding
-  }
-})
-
-export default MenuButton
--- a/src/components/Menu/Container.tsx
+++ b/src/components/Menu/Container.tsx
@ -1,6 +1,5 @@
-import React, { Children } from 'react'
+import React from 'react'
 import { StyleSheet, View } from 'react-native'
-import { useTheme } from '@utils/styles/ThemeManager'
 import { StyleConstants } from '@utils/styles/constants'

 export interface Props {
@ -8,25 +7,7 @@ export interface Props {
 }

 const MenuContainer: React.FC<Props> = ({ children }) => {
-  const { theme } = useTheme()
-  // @ts-ignore
-  const firstChild = Children.toArray(children)[0].type.name
-
-  return (
-    <View
-      style={[
-        styles.base,
-        {
-          ...(firstChild !== 'MenuHeader' && {
-            borderTopColor: theme.separator,
-            borderTopWidth: 1
-          })
-        }
-      ]}
-    >
-      {children}
-    </View>
-  )
+  return <View style={styles.base}>{children}</View>
 }

 const styles = StyleSheet.create({
--- a/src/components/Menu/Header.tsx
+++ b/src/components/Menu/Header.tsx
@ -11,21 +11,21 @@ const MenuHeader: React.FC<Props> = ({ heading }) => {
  const { theme } = useTheme()

  return (
-    <View style={[styles.base, { borderBottomColor: theme.separator }]}>
-      <Text style={[styles.text, { color: theme.primary }]}>{heading}</Text>
+    <View style={styles.base}>
+      <Text style={[styles.text, { color: theme.secondary }]}>{heading}</Text>
    </View>
  )
 }

 const styles = StyleSheet.create({
  base: {
-    borderBottomWidth: 1,
    paddingLeft: StyleConstants.Spacing.Global.PagePadding,
    paddingRight: StyleConstants.Spacing.Global.PagePadding,
    paddingBottom: StyleConstants.Spacing.S
  },
  text: {
-    fontSize: StyleConstants.Font.Size.S
+    fontSize: StyleConstants.Font.Size.S,
+    fontWeight: StyleConstants.Font.Weight.Bold
  }
 })

--- a/src/components/Menu/Row.tsx
+++ b/src/components/Menu/Row.tsx
@ -71,14 +71,11 @@ const MenuRow: React.FC<Props> = ({ ...props }) => {
  const { theme } = useTheme()

  return props.onPress ? (
-    <Pressable
-      style={[styles.base, { borderBottomColor: theme.separator }]}
-      onPress={props.onPress}
-    >
+    <Pressable style={styles.base} onPress={props.onPress}>
      <Core {...props} />
    </Pressable>
  ) : (
-    <View style={[styles.base, { borderBottomColor: theme.separator }]}>
+    <View style={styles.base}>
      <Core {...props} />
    </View>
  )
@ -86,8 +83,7 @@ const MenuRow: React.FC<Props> = ({ ...props }) => {

 const styles = StyleSheet.create({
  base: {
-    height: 50,
-    borderBottomWidth: 1
+    height: 50
  },
  core: {
    flex: 1,
--- a/src/components/ParseContent.tsx
+++ b/src/components/ParseContent.tsx
@ -152,83 +152,86 @@ const ParseContent: React.FC<Props> = ({
      return null
    }
  }, [])
-  const rootComponent = useCallback(({ children }) => {
-    const lineHeight = StyleConstants.Font.LineHeight[size]
+  const rootComponent = useCallback(
+    ({ children }) => {
+      const lineHeight = StyleConstants.Font.LineHeight[size]

-    const [heightOriginal, setHeightOriginal] = useState<number>()
-    const [heightTruncated, setHeightTruncated] = useState<number>()
-    const [allowExpand, setAllowExpand] = useState(false)
-    const [showAllText, setShowAllText] = useState(false)
+      const [heightOriginal, setHeightOriginal] = useState<number>()
+      const [heightTruncated, setHeightTruncated] = useState<number>()
+      const [allowExpand, setAllowExpand] = useState(false)
+      const [showAllText, setShowAllText] = useState(false)

-    const calNumberOfLines = useMemo(() => {
-      if (heightOriginal) {
-        if (!heightTruncated) {
-          return numberOfLines
-        } else {
-          if (allowExpand && !showAllText) {
+      const calNumberOfLines = useMemo(() => {
+        if (heightOriginal) {
+          if (!heightTruncated) {
            return numberOfLines
          } else {
-            return undefined
-          }
-        }
-      } else {
-        return undefined
-      }
-    }, [heightOriginal, heightTruncated, allowExpand, showAllText])
-
-    return (
-      <View>
-        <Text
-          style={{ lineHeight }}
-          children={children}
-          numberOfLines={calNumberOfLines}
-          onLayout={({ nativeEvent }) => {
-            if (!heightOriginal) {
-              setHeightOriginal(nativeEvent.layout.height)
+            if (allowExpand && !showAllText) {
+              return numberOfLines
            } else {
-              if (!heightTruncated) {
-                setHeightTruncated(nativeEvent.layout.height)
+              return undefined
+            }
+          }
+        } else {
+          return undefined
+        }
+      }, [heightOriginal, heightTruncated, allowExpand, showAllText])
+
+      return (
+        <View>
+          <Text
+            style={{ lineHeight, color: theme.primary }}
+            children={children}
+            numberOfLines={calNumberOfLines}
+            onLayout={({ nativeEvent }) => {
+              if (!heightOriginal) {
+                setHeightOriginal(nativeEvent.layout.height)
              } else {
-                if (heightOriginal > heightTruncated) {
-                  setAllowExpand(true)
+                if (!heightTruncated) {
+                  setHeightTruncated(nativeEvent.layout.height)
+                } else {
+                  if (heightOriginal > heightTruncated) {
+                    setAllowExpand(true)
+                  }
                }
              }
-            }
-          }}
-        />
-        {allowExpand && (
-          <Pressable
-            onPress={() => {
-              setShowAllText(!showAllText)
            }}
-            style={{ marginTop: showAllText ? 0 : -lineHeight * 1.25 }}
-          >
-            <LinearGradient
-              colors={[
-                theme.backgroundGradientStart,
-                theme.backgroundGradientEnd
-              ]}
-              locations={[0, lineHeight / (StyleConstants.Font.Size.S * 4)]}
-              style={{
-                paddingTop: StyleConstants.Font.Size.S * 2,
-                paddingBottom: StyleConstants.Font.Size.S
+          />
+          {allowExpand && (
+            <Pressable
+              onPress={() => {
+                setShowAllText(!showAllText)
              }}
+              style={{ marginTop: showAllText ? 0 : -lineHeight * 1.25 }}
            >
-              <Text
+              <LinearGradient
+                colors={[
+                  theme.backgroundGradientStart,
+                  theme.backgroundGradientEnd
+                ]}
+                locations={[0, lineHeight / (StyleConstants.Font.Size.S * 4)]}
                style={{
-                  textAlign: 'center',
-                  fontSize: StyleConstants.Font.Size.S,
-                  color: theme.primary
+                  paddingTop: StyleConstants.Font.Size.S * 2,
+                  paddingBottom: StyleConstants.Font.Size.S
                }}
              >
-                {`${showAllText ? '折叠' : '展开'}${expandHint}`}
-              </Text>
-            </LinearGradient>
-          </Pressable>
-        )}
-      </View>
-    )
-  }, [])
+                <Text
+                  style={{
+                    textAlign: 'center',
+                    fontSize: StyleConstants.Font.Size.S,
+                    color: theme.primary
+                  }}
+                >
+                  {`${showAllText ? '折叠' : '展开'}${expandHint}`}
+                </Text>
+              </LinearGradient>
+            </Pressable>
+          )}
+        </View>
+      )
+    },
+    [theme]
+  )

  return (
    <HTMLView
--- a/src/components/Timelines/Timeline/Empty.tsx
+++ b/src/components/Timelines/Timeline/Empty.tsx
@ -2,7 +2,7 @@ import { Feather } from '@expo/vector-icons'
 import React, { useMemo } from 'react'
 import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
 import { QueryStatus } from 'react-query'
-import { ButtonRow } from '@components/Button'
+import Button from '@components/Button'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'

@ -29,7 +29,7 @@ const TimelineEmpty: React.FC<Props> = ({ status, refetch }) => {
            <Text style={[styles.error, { color: theme.primary }]}>
              加载错误
            </Text>
-            <ButtonRow text='重试' onPress={() => refetch()} />
+            <Button type='text' content='重试' onPress={() => refetch()} />
          </>
        )
      case 'success':
--- a/src/components/Timelines/Timeline/Separator.tsx
+++ b/src/components/Timelines/Timeline/Separator.tsx
@ -16,7 +16,7 @@ const TimelineSeparator: React.FC<Props> = ({ highlighted = false }) => {
      style={[
        styles.base,
        {
-          borderTopColor: theme.separator,
+          borderTopColor: theme.border,
          marginLeft: highlighted
            ? StyleConstants.Spacing.Global.PagePadding
            : StyleConstants.Spacing.Global.PagePadding +
@ -30,7 +30,7 @@ const TimelineSeparator: React.FC<Props> = ({ highlighted = false }) => {

 const styles = StyleSheet.create({
  base: {
-    borderTopWidth: 1,
+    borderTopWidth: StyleSheet.hairlineWidth,
    marginRight: StyleConstants.Spacing.Global.PagePadding
  }
 })
--- a/src/components/Timelines/Timeline/Shared/Actions.tsx
+++ b/src/components/Timelines/Timeline/Shared/Actions.tsx
@ -78,7 +78,7 @@ const TimelineActions: React.FC<Props> = ({
        case 'reblog':
        case 'bookmark':
          if (type === 'favourite' && queryKey[0] === 'Favourites') {
-            queryClient.invalidateQueries(['Favourites'])
+            queryClient.invalidateQueries(['Favourites', {}])
            break
          }
          if (
@ -91,7 +91,7 @@ const TimelineActions: React.FC<Props> = ({
            break
          }
          if (type === 'bookmark' && queryKey[0] === 'Bookmarks') {
-            queryClient.invalidateQueries(['Bookmarks'])
+            queryClient.invalidateQueries(['Bookmarks', {}])
            break
          }

--- a/src/components/Timelines/Timeline/Shared/Attachment/Audio.tsx
+++ b/src/components/Timelines/Timeline/Shared/Attachment/Audio.tsx
@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react'
 import { Image, Pressable, StyleSheet, View } from 'react-native'
 import { Audio } from 'expo-av'
-import { ButtonRow } from '@components/Button'
+import Button from '@components/Button'
 import { Surface } from 'gl-react-expo'
 import { Blurhash } from 'gl-react-blurhash'
 import Slider from '@react-native-community/slider'
@ -21,7 +21,10 @@ const AttachmentAudio: React.FC<Props> = ({ sensitiveShown, audio }) => {
  const [audioPosition, setAudioPosition] = useState(0)
  const playAudio = useCallback(async () => {
    if (!audioPlayer) {
-      await Audio.setAudioModeAsync({ interruptionModeIOS: 1 })
+      await Audio.setAudioModeAsync({
+        playsInSilentModeIOS: true,
+        interruptionModeIOS: 1
+      })
      const { sound } = await Audio.Sound.createAsync(
        { uri: audio.url },
        {},
@ -42,7 +45,7 @@ const AttachmentAudio: React.FC<Props> = ({ sensitiveShown, audio }) => {

  return (
    <>
-      <Pressable style={styles.overlay}>
+      <View style={styles.overlay}>
        {sensitiveShown ? (
          audio.blurhash && (
            <Surface
@ -62,16 +65,18 @@ const AttachmentAudio: React.FC<Props> = ({ sensitiveShown, audio }) => {
                source={{ uri: audio.preview_url || audio.preview_remote_url }}
              />
            )}
-            <ButtonRow
-              icon={audioPlaying ? 'pause' : 'play'}
+            <Button
+              type='icon'
+              content={audioPlaying ? 'pause' : 'play'}
              size='L'
+              overlay
              {...(audioPlaying
                ? { onPress: pauseAudio }
                : { onPress: playAudio })}
            />
          </>
        )}
-      </Pressable>
+      </View>
      <View
        style={{
          flex: 1,
--- a/src/components/Timelines/Timeline/Shared/Attachment/Unsupported.tsx
+++ b/src/components/Timelines/Timeline/Shared/Attachment/Unsupported.tsx
@ -1,6 +1,6 @@
 import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
-import { ButtonRow } from '@components/Button'
+import Button from '@components/Button'
 import { useTheme } from '@root/utils/styles/ThemeManager'
 import { StyleConstants } from '@root/utils/styles/constants'
 import openLink from '@root/utils/openLink'
@ -15,8 +15,9 @@ const AttachmentUnsupported: React.FC<Props> = ({ attachment }) => {
    <View style={styles.base}>
      <Text style={[styles.text, { color: theme.primary }]}>文件不支持</Text>
      {attachment.remote_url ? (
-        <ButtonRow
-          text='尝试远程链接'
+        <Button
+          type='text'
+          content='尝试远程链接'
          size='S'
          onPress={async () => await openLink(attachment.remote_url!)}
        />
--- a/src/components/Timelines/Timeline/Shared/Attachment/Video.tsx
+++ b/src/components/Timelines/Timeline/Shared/Attachment/Video.tsx
@ -1,7 +1,7 @@
 import React, { useCallback, useRef, useState } from 'react'
 import { Pressable, StyleSheet } from 'react-native'
 import { Video } from 'expo-av'
-import { ButtonRow } from '@components/Button'
+import Button from '@components/Button'
 import { Surface } from 'gl-react-expo'
 import { Blurhash } from 'gl-react-blurhash'

@ -64,7 +64,13 @@ const AttachmentVideo: React.FC<Props> = ({
            <Blurhash hash={video.blurhash} />
          </Surface>
        ) : (
-          <ButtonRow icon='play' size='L' onPress={playOnPress} />
+          <Button
+            type='icon'
+            content='play'
+            size='L'
+            overlay
+            onPress={playOnPress}
+          />
        )}
      </Pressable>
    </>
--- a/src/components/Timelines/Timeline/Shared/Poll.tsx
+++ b/src/components/Timelines/Timeline/Shared/Poll.tsx
@ -1,9 +1,9 @@
 import { Feather } from '@expo/vector-icons'
-import React, { useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
 import { useMutation, useQueryClient } from 'react-query'
 import client from '@api/client'
-import { ButtonRow } from '@components/Button'
+import Button from '@components/Button'
 import { toast } from '@components/toast'
 import relativeTime from '@utils/relativeTime'
 import { StyleConstants } from '@utils/styles/constants'
@ -18,14 +18,13 @@ const fireMutation = async ({
  options
 }: {
  id: string
-  options?: { [key: number]: boolean }
+  options?: boolean[]
 }) => {
  const formData = new FormData()
  options &&
-    Object.keys(options).forEach(option => {
-      // @ts-ignore
-      if (options[option]) {
-        formData.append('choices[]', option)
+    options.forEach((o, i) => {
+      if (options[i]) {
+        formData.append('choices[]', i.toString())
      }
    })

@ -63,6 +62,11 @@ const TimelinePoll: React.FC<Props> = ({
 }) => {
  const { theme } = useTheme()
  const queryClient = useQueryClient()
+
+  const [allOptions, setAllOptions] = useState(
+    new Array(poll.options.length).fill(false)
+  )
+
  const mutation = useMutation(fireMutation, {
    onSuccess: (data, { id }) => {
      queryClient.cancelQueries(queryKey)
@ -99,26 +103,26 @@ const TimelinePoll: React.FC<Props> = ({
      if (!sameAccount && !poll.voted) {
        return (
          <View style={styles.button}>
-            <ButtonRow
-              onPress={() => {
-                if (poll.multiple) {
-                  mutation.mutate({ id: poll.id, options: multipleOptions })
-                } else {
-                  mutation.mutate({ id: poll.id, options: singleOptions })
-                }
-              }}
-              {...(mutation.isLoading ? { icon: 'loader' } : { text: '投票' })}
-              disabled={mutation.isLoading}
+            <Button
+              onPress={() =>
+                mutation.mutate({ id: poll.id, options: allOptions })
+              }
+              type='text'
+              content='投票'
+              loading={mutation.isLoading}
+              disabled={allOptions.filter(o => o !== false).length === 0}
            />
          </View>
        )
      } else {
        return (
          <View style={styles.button}>
-            <ButtonRow
+            <Button
              onPress={() => mutation.mutate({ id: poll.id })}
              {...(mutation.isLoading ? { icon: 'loader' } : { text: '刷新' })}
-              disabled={mutation.isLoading}
+              type='text'
+              content='刷新'
+              loading={mutation.isLoading}
            />
          </View>
        )
@ -142,19 +146,13 @@ const TimelinePoll: React.FC<Props> = ({
    }
  }, [])

-  const [singleOptions, setSingleOptions] = useState({
-    ...[false, false, false, false].slice(0, poll.options.length)
-  })
-  const [multipleOptions, setMultipleOptions] = useState({
-    ...[false, false, false, false].slice(0, poll.options.length)
-  })
-  const isSelected = (index: number) => {
-    if (poll.multiple) {
-      return multipleOptions[index] ? 'check-square' : 'square'
-    } else {
-      return singleOptions[index] ? 'check-circle' : 'circle'
-    }
-  }
+  const isSelected = useCallback(
+    (index: number): any =>
+      allOptions[index]
+        ? `check-${poll.multiple ? 'square' : 'circle'}`
+        : `${poll.multiple ? 'square' : 'circle'}`,
+    [allOptions]
+  )

  return (
    <View style={styles.base}>
@ -162,21 +160,23 @@ const TimelinePoll: React.FC<Props> = ({
        poll.voted ? (
          <View key={index} style={styles.poll}>
            <View style={styles.optionSelected}>
+              <Feather
+                style={styles.voted}
+                name={poll.multiple ? 'check-square' : 'check-circle'}
+                size={StyleConstants.Font.Size.M}
+                color={
+                  poll.own_votes!.includes(index)
+                    ? theme.primary
+                    : theme.background
+                }
+              />
              <View style={styles.contentSelected}>
                <Emojis
                  content={option.title}
                  emojis={poll.emojis}
                  size={StyleConstants.Font.Size.M}
-                  numberOfLines={1}
+                  numberOfLines={2}
                />
-                {poll.own_votes!.includes(index) && (
-                  <Feather
-                    style={styles.voted}
-                    name={poll.multiple ? 'check-square' : 'check-circle'}
-                    size={StyleConstants.Font.Size.M}
-                    color={theme.primary}
-                  />
-                )}
              </View>
              <Text style={[styles.percentage, { color: theme.primary }]}>
                {poll.votes_count
@ -193,7 +193,7 @@ const TimelinePoll: React.FC<Props> = ({
                  width: `${Math.round(
                    (option.votes_count / poll.voters_count) * 100
                  )}%`,
-                  backgroundColor: theme.border
+                  backgroundColor: theme.disabled
                }
              ]}
            />
@ -204,19 +204,15 @@ const TimelinePoll: React.FC<Props> = ({
              style={[styles.optionUnselected]}
              onPress={() => {
                if (poll.multiple) {
-                  setMultipleOptions({
-                    ...multipleOptions,
-                    [index]: !multipleOptions[index]
-                  })
+                  setAllOptions(
+                    allOptions.map((o, i) => (i === index ? !o : o))
+                  )
                } else {
-                  setSingleOptions({
-                    ...[
-                      index === 0,
-                      index === 1,
-                      index === 2,
-                      index === 3
-                    ].slice(0, poll.options.length)
-                  })
+                  setAllOptions(
+                    allOptions.map((o, i) =>
+                      i === index ? !allOptions[index] : allOptions[index]
+                    )
+                  )
                }
              }}
            >
@ -231,6 +227,7 @@ const TimelinePoll: React.FC<Props> = ({
                  content={option.title}
                  emojis={poll.emojis}
                  size={StyleConstants.Font.Size.M}
+                  numberOfLines={2}
                />
              </View>
            </Pressable>
@ -253,15 +250,15 @@ const styles = StyleSheet.create({
    marginTop: StyleConstants.Spacing.M
  },
  poll: {
-    minHeight: StyleConstants.Font.LineHeight.M * 1.5,
-    marginBottom: StyleConstants.Spacing.XS
+    flex: 1,
+    minHeight: StyleConstants.Font.LineHeight.M * 2,
+    paddingVertical: StyleConstants.Spacing.XS
  },
  optionSelected: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
-    paddingLeft: StyleConstants.Spacing.M,
    paddingRight: StyleConstants.Spacing.M
  },
  optionUnselected: {
@ -269,30 +266,30 @@ const styles = StyleSheet.create({
    flexDirection: 'row'
  },
  contentSelected: {
-    flexBasis: '80%',
+    flexShrink: 1,
    flexDirection: 'row',
-    alignItems: 'center'
+    alignItems: 'center',
+    paddingRight: StyleConstants.Spacing.S
  },
  contentUnselected: {
-    flexBasis: '90%'
+    flexShrink: 1
  },
  voted: {
-    marginLeft: StyleConstants.Spacing.S
+    marginRight: StyleConstants.Spacing.S
  },
  votedNot: {
-    marginRight: StyleConstants.Spacing.S
+    paddingRight: StyleConstants.Spacing.S
  },
  percentage: {
    fontSize: StyleConstants.Font.Size.M
  },
  background: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    height: '100%',
+    height: StyleConstants.Spacing.XS,
    minWidth: 2,
-    borderTopRightRadius: 6,
-    borderBottomRightRadius: 6
+    borderTopRightRadius: 10,
+    borderBottomRightRadius: 10,
+    marginTop: StyleConstants.Spacing.XS,
+    marginBottom: StyleConstants.Spacing.S
  },
  meta: {
    flex: 1,
--- a/src/screens/Me/Root/Login.tsx
+++ b/src/screens/Me/Root/Login.tsx
@ -19,7 +19,7 @@ import { useTheme } from '@utils/styles/ThemeManager'

 import { useTranslation } from 'react-i18next'
 import { StyleConstants } from '@utils/styles/constants'
-import { ButtonRow } from '@components/Button'
+import Button from '@components/Button'
 import ParseContent from '@root/components/ParseContent'
 import { createShimmerPlaceholder } from 'react-native-shimmer-placeholder'
 import { Feather } from '@expo/vector-icons'
@ -124,15 +124,7 @@ const Login: React.FC = () => {
  }, [instanceDomain])

  const instanceInfo = useCallback(
-    ({
-      header,
-      content,
-      parse
-    }: {
-      header: string
-      content?: string
-      parse?: boolean
-    }) => {
+    ({ header, content }: { header: string; content?: string }) => {
      return (
        <View style={styles.instanceInfo}>
          <Text style={[styles.instanceInfoHeader, { color: theme.primary }]}>
@ -147,15 +139,7 @@ const Login: React.FC = () => {
            }
            height={StyleConstants.Font.Size.M}
          >
-            <Text
-              style={[styles.instanceInfoContent, { color: theme.primary }]}
-            >
-              {parse ? (
-                <ParseContent content={content!} size={'M'} numberOfLines={5} />
-              ) : (
-                content
-              )}
-            </Text>
+            <ParseContent content={content!} size={'M'} numberOfLines={5} />
          </ShimmerPlaceholder>
        </View>
      )
@ -204,18 +188,12 @@ const Login: React.FC = () => {
            placeholderTextColor={theme.secondary}
            returnKeyType='go'
          />
-          <ButtonRow
-            onPress={() => {
-              applicationQuery.refetch()
-            }}
-            {...(instanceQuery.isFetching || applicationQuery.isFetching
-              ? { icon: 'loader' }
-              : { text: t('content.login.button') as string })}
-            disabled={
-              !instanceQuery.data?.uri ||
-              instanceQuery.isFetching ||
-              applicationQuery.isFetching
-            }
+          <Button
+            type='text'
+            content={t('content.login.button')}
+            onPress={() => applicationQuery.refetch()}
+            disabled={!instanceQuery.data?.uri}
+            loading={instanceQuery.isFetching || applicationQuery.isFetching}
          />
        </View>
        <View>
@ -225,8 +203,7 @@ const Login: React.FC = () => {
          })}
          {instanceInfo({
            header: '实例介绍',
-            content: instanceQuery.data?.short_description,
-            parse: true
+            content: instanceQuery.data?.short_description
          })}
          <View style={styles.instanceStats}>
            <View style={styles.instanceStat}>
@ -306,18 +283,15 @@ const styles = StyleSheet.create({
    padding: StyleConstants.Spacing.Global.PagePadding
  },
  inputRow: {
-    flex: 1,
    flexDirection: 'row'
  },
  textInput: {
    flex: 1,
-    borderBottomWidth: 1.25,
-    paddingTop: StyleConstants.Spacing.S - 1.5,
-    paddingBottom: StyleConstants.Spacing.S - 1.5,
+    borderBottomWidth: 1,
    paddingLeft: StyleConstants.Spacing.Global.PagePadding,
    paddingRight: StyleConstants.Spacing.Global.PagePadding,
    fontSize: StyleConstants.Font.Size.M,
-    marginRight: StyleConstants.Spacing.M
+    marginRight: StyleConstants.Spacing.S
  },
  instanceInfo: {
    marginTop: StyleConstants.Spacing.M,
--- a/src/screens/Me/Root/Logout.tsx
+++ b/src/screens/Me/Root/Logout.tsx
@ -1,12 +1,12 @@
 import React from 'react'
-
 import { useDispatch } from 'react-redux'
 import { resetLocal } from '@utils/slices/instancesSlice'
-import MenuButton from '@components/Menu/Button'
-import { MenuContainer } from '@components/Menu'
 import { useNavigation } from '@react-navigation/native'
 import { useTranslation } from 'react-i18next'
 import { useQueryClient } from 'react-query'
+import Button from '@root/components/Button'
+import { Alert } from 'react-native'
+import { StyleConstants } from '@root/utils/styles/constants'

 const Logout: React.FC = () => {
  const { t } = useTranslation('meRoot')
@ -14,37 +14,40 @@ const Logout: React.FC = () => {
  const navigation = useNavigation()
  const queryClient = useQueryClient()

-  const alertOption = {
-    title: t('content.logout.alert.title'),
-    message: t('content.logout.alert.message'),
-    buttons: [
-      {
-        text: t('content.logout.alert.buttons.logout'),
-        style: 'destructive' as const,
-        onPress: () => {
-          queryClient.clear()
-          dispatch(resetLocal())
-          navigation.navigate('Screen-Public', {
-            screen: 'Screen-Public-Root',
-            params: { publicTab: true }
-          })
-        }
-      },
-      {
-        text: t('content.logout.alert.buttons.cancel'),
-        style: 'cancel' as const
-      }
-    ]
-  }
-
  return (
-    <MenuContainer>
-      <MenuButton
-        text={t('content.logout.button')}
-        destructive={true}
-        alertOption={alertOption}
-      />
-    </MenuContainer>
+    <Button
+      type='text'
+      content={t('content.logout.button')}
+      style={{
+        marginHorizontal: StyleConstants.Spacing.Global.PagePadding * 2,
+        marginBottom: StyleConstants.Spacing.Global.PagePadding * 2
+      }}
+      destructive
+      onPress={() =>
+        Alert.alert(
+          t('content.logout.alert.title'),
+          t('content.logout.alert.message'),
+          [
+            {
+              text: t('content.logout.alert.buttons.logout'),
+              style: 'destructive' as const,
+              onPress: () => {
+                queryClient.clear()
+                dispatch(resetLocal())
+                navigation.navigate('Screen-Public', {
+                  screen: 'Screen-Public-Root',
+                  params: { publicTab: true }
+                })
+              }
+            },
+            {
+              text: t('content.logout.alert.buttons.cancel'),
+              style: 'cancel' as const
+            }
+          ]
+        )
+      }
+    />
  )
 }

--- a/src/screens/Shared/Account/Information.tsx
+++ b/src/screens/Shared/Account/Information.tsx
@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next'
 import Emojis from '@components/Timelines/Timeline/Shared/Emojis'
 import { LinearGradient } from 'expo-linear-gradient'
 import { AccountAction } from '../Account'
-import { ButtonRow } from '@root/components/Button'
+import Button from '@root/components/Button'
 import { useMutation, useQuery, useQueryClient } from 'react-query'
 import { relationshipFetch } from '@root/utils/fetches/relationshipFetch'
 import client from '@root/api/client'
@ -121,13 +121,9 @@ const AccountInformation: React.FC<Props> = ({

  const followingButton = useMemo(
    () => (
-      <ButtonRow
-        {...(data
-          ? status !== 'success' ||
-            (mutateStatus !== 'success' && mutateStatus !== 'idle')
-            ? { icon: 'loader' }
-            : { text: `${data.following ? '正在' : ''}关注` }
-          : { icon: 'loader' })}
+      <Button
+        type='text'
+        content={`${data?.following ? '正在' : ''}关注`}
        onPress={() =>
          mutate({
            type: 'follow',
@ -136,7 +132,7 @@ const AccountInformation: React.FC<Props> = ({
            prevState: data!.following
          })
        }
-        disabled={
+        loading={
          status !== 'success' ||
          (mutateStatus !== 'success' && mutateStatus !== 'idle')
        }
@ -175,8 +171,10 @@ const AccountInformation: React.FC<Props> = ({
        </ShimmerPlaceholder>
        {!disableActions && (
          <View style={styles.actions}>
-            <ButtonRow
-              icon='mail'
+            <Button
+              type='icon'
+              content='mail'
+              round
              onPress={() =>
                navigation.navigate(getCurrentTab(navigation), {
                  screen: 'Screen-Shared-Compose',
@ -294,7 +292,8 @@ const AccountInformation: React.FC<Props> = ({
        </View>
      )}

-      {account?.note && (
+      {account?.note && account.note.length && account.note !== '<p></p>' ? (
+        // Empty notes might generate empty p tag
        <View style={styles.note}>
          <ParseContent
            content={account.note}
@ -302,7 +301,7 @@ const AccountInformation: React.FC<Props> = ({
            emojis={account.emojis}
          />
        </View>
-      )}
+      ) : null}

      <ShimmerPlaceholder
        ref={shimmerCreatedRef}
--- a/src/screens/Shared/Announcements.tsx
+++ b/src/screens/Shared/Announcements.tsx
@ -1,6 +1,6 @@
 import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs'
 import client from '@root/api/client'
-import { ButtonRow } from '@root/components/Button'
+import Button from '@root/components/Button'
 import ParseContent from '@root/components/ParseContent'
 import { announcementFetch } from '@root/utils/fetches/announcementsFetch'
 import relativeTime from '@root/utils/relativeTime'
@ -147,8 +147,9 @@ const ScreenSharedAnnouncements: React.FC = ({
              </Pressable> */}
            </View>
          ) : null}
-          <ButtonRow
-            text='标记已读'
+          <Button
+            type='text'
+            content='标记已读'
            onPress={() => mutate({ type: 'dismiss', announcementId: item.id })}
            style={styles.button}
          />
--- a/src/screens/Shared/Compose/Attachments.tsx
+++ b/src/screens/Shared/Compose/Attachments.tsx
@ -13,7 +13,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { useNavigation } from '@react-navigation/native'
 import { createShimmerPlaceholder } from 'react-native-shimmer-placeholder'
-import { ButtonRound } from '@components/Button'
+import Button from '@components/Button'
 import addAttachments from '@screens/Shared/Compose/addAttachments'
 import { Feather } from '@expo/vector-icons'
 import { LinearGradient } from 'expo-linear-gradient'
@ -67,8 +67,13 @@ const ComposeAttachments: React.FC = () => {
              {(item as Mastodon.AttachmentVideo).meta?.original.duration}
            </Text>
          )}
-          <ButtonRound
-            icon='x'
+          <Button
+            type='icon'
+            content='x'
+            spacing='M'
+            round
+            overlay
+            style={styles.delete}
            onPress={() =>
              composeDispatch({
                type: 'attachments',
@ -79,17 +84,20 @@ const ComposeAttachments: React.FC = () => {
                }
              })
            }
-            styles={styles.delete}
          />
-          <ButtonRound
-            icon='edit'
+          <Button
+            type='icon'
+            content='edit'
+            spacing='M'
+            round
+            overlay
+            style={styles.edit}
            onPress={() =>
              navigation.navigate('Screen-Shared-Compose-EditAttachment', {
                attachment: item,
                composeDispatch
              })
            }
-            styles={styles.edit}
          />
        </View>
      )
@ -123,22 +131,28 @@ const ComposeAttachments: React.FC = () => {
                await addAttachments({ composeState, composeDispatch })
              }
            >
-              <ButtonRound
-                icon='upload-cloud'
+              <Button
+                type='icon'
+                content='upload-cloud'
+                spacing='M'
+                round
+                overlay
                onPress={async () =>
                  await addAttachments({ composeState, composeDispatch })
                }
-                styles={{
+                style={{
+                  position: 'absolute',
                  top:
                    (DEFAULT_HEIGHT -
-                      StyleConstants.Spacing.Global.PagePadding) /
+                      StyleConstants.Spacing.M * 2 -
+                      StyleConstants.Font.Size.M) /
                    2,
                  left:
                    (DEFAULT_HEIGHT -
-                      StyleConstants.Spacing.Global.PagePadding) /
+                      StyleConstants.Spacing.M * 2 -
+                      StyleConstants.Font.Size.M) /
                    2
                }}
-                coordinate='center'
              />
            </Pressable>
          )}
@ -217,13 +231,15 @@ const styles = StyleSheet.create({
    paddingTop: StyleConstants.Spacing.XS,
    paddingBottom: StyleConstants.Spacing.XS
  },
-  edit: {
-    bottom:
-      StyleConstants.Spacing.Global.PagePadding + StyleConstants.Spacing.S,
+  delete: {
+    position: 'absolute',
+    top: StyleConstants.Spacing.Global.PagePadding + StyleConstants.Spacing.S,
    right: StyleConstants.Spacing.S
  },
-  delete: {
-    top: StyleConstants.Spacing.Global.PagePadding + StyleConstants.Spacing.S,
+  edit: {
+    position: 'absolute',
+    bottom:
+      StyleConstants.Spacing.Global.PagePadding + StyleConstants.Spacing.S,
    right: StyleConstants.Spacing.S
  },
  progressContainer: {
--- a/src/screens/Shared/Compose/Poll.tsx
+++ b/src/screens/Shared/Compose/Poll.tsx
@ -5,8 +5,8 @@ import { Feather } from '@expo/vector-icons'
 import { ComposeContext } from '@screens/Shared/Compose'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { StyleConstants } from '@utils/styles/constants'
-import { ButtonRow } from '@components/Button'
-import { MenuContainer, MenuRow } from '@components/Menu'
+import Button from '@components/Button'
+import { MenuRow } from '@components/Menu'

 const ComposePoll: React.FC = () => {
  const {
@ -80,8 +80,7 @@ const ComposePoll: React.FC = () => {
      </View>
      <View style={styles.controlAmount}>
        <View style={styles.firstButton}>
-          <ButtonRow
-            key={total + 'minus'}
+          <Button
            onPress={() => {
              total > 2 &&
                composeDispatch({
@ -89,13 +88,13 @@ const ComposePoll: React.FC = () => {
                  payload: { total: total - 1 }
                })
            }}
-            icon='minus'
+            type='icon'
+            content='minus'
+            round
            disabled={!(total > 2)}
-            buttonSize='S'
          />
        </View>
-        <ButtonRow
-          key={total + 'plus'}
+        <Button
          onPress={() => {
            total < 4 &&
              composeDispatch({
@ -103,51 +102,50 @@ const ComposePoll: React.FC = () => {
                payload: { total: total + 1 }
              })
          }}
-          icon='plus'
+          type='icon'
+          content='plus'
+          round
          disabled={!(total < 4)}
-          buttonSize='S'
        />
      </View>
-      <MenuContainer>
-        <MenuRow
-          title='可选项'
-          content={multiple ? '多选' : '单选'}
-          onPress={() =>
-            ActionSheetIOS.showActionSheetWithOptions(
-              {
-                options: ['单选', '多选', '取消'],
-                cancelButtonIndex: 2
-              },
-              index =>
-                index < 2 &&
-                composeDispatch({
-                  type: 'poll',
-                  payload: { multiple: index === 1 }
-                })
-            )
-          }
-          iconBack='chevron-right'
-        />
-        <MenuRow
-          title='有效期'
-          content={expireMapping[expire]}
-          onPress={() =>
-            ActionSheetIOS.showActionSheetWithOptions(
-              {
-                options: [...Object.values(expireMapping), '取消'],
-                cancelButtonIndex: 7
-              },
-              index =>
-                index < 7 &&
-                composeDispatch({
-                  type: 'poll',
-                  payload: { expire: Object.keys(expireMapping)[index] }
-                })
-            )
-          }
-          iconBack='chevron-right'
-        />
-      </MenuContainer>
+      <MenuRow
+        title='可选项'
+        content={multiple ? '多选' : '单选'}
+        onPress={() =>
+          ActionSheetIOS.showActionSheetWithOptions(
+            {
+              options: ['单选', '多选', '取消'],
+              cancelButtonIndex: 2
+            },
+            index =>
+              index < 2 &&
+              composeDispatch({
+                type: 'poll',
+                payload: { multiple: index === 1 }
+              })
+          )
+        }
+        iconBack='chevron-right'
+      />
+      <MenuRow
+        title='有效期'
+        content={expireMapping[expire]}
+        onPress={() =>
+          ActionSheetIOS.showActionSheetWithOptions(
+            {
+              options: [...Object.values(expireMapping), '取消'],
+              cancelButtonIndex: 7
+            },
+            index =>
+              index < 7 &&
+              composeDispatch({
+                type: 'poll',
+                payload: { expire: Object.keys(expireMapping)[index] }
+              })
+          )
+        }
+        iconBack='chevron-right'
+      />
    </View>
  )
 }
@ -181,8 +179,7 @@ const styles = StyleSheet.create({
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
-    marginRight: StyleConstants.Spacing.M,
-    marginBottom: StyleConstants.Spacing.M
+    marginRight: StyleConstants.Spacing.M
  },
  firstButton: {
    marginRight: StyleConstants.Spacing.S
--- a/src/utils/styles/themes.ts
+++ b/src/utils/styles/themes.ts
@ -12,7 +12,6 @@ export type ColorDefinitions =
  | 'backgroundGradientEnd'
  | 'backgroundOverlay'
  | 'border'
-  | 'separator'

 const themeColors: {
  [key in ColorDefinitions]: {
@ -62,12 +61,8 @@ const themeColors: {
    dark: 'rgba(0, 0, 0, 0.5)'
  },
  border: {
-    light: 'rgba(0, 0, 0, 0.3)',
-    dark: 'rgba(255, 255, 255, 0.16)'
-  },
-  separator: {
-    light: 'rgba(0, 0, 0, 0.1)',
-    dark: 'rgba(255, 255, 255, 0.1)'
+    light: 'rgba(18, 18, 18, 0.3)',
+    dark: 'rgba(255, 255, 255, 0.3)'
  }
 }

--- a/yarn.lock
+++ b/yarn.lock
@ -5389,6 +5389,11 @@ react-is@^17.0.1:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
  integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==

+react-native-animated-spinkit@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/react-native-animated-spinkit/-/react-native-animated-spinkit-1.4.2.tgz#cb60ff8bcc2bb848409d9aa85ed528646ad1f953"
+  integrity sha512-CLFkynkqRueQK/XUknleiYQr3T0E8cY0KbuaV78JGiHhnF12C3k0ngDAOk6FHssZn3JXnTOVkJsrIBOYkttRmA==
+
 react-native-expo-image-cache@^4.1.0:
  version "4.1.0"
  resolved "https://registry.yarnpkg.com/react-native-expo-image-cache/-/react-native-expo-image-cache-4.1.0.tgz#649cbe9786249134d3eafed5baba50bbfa80c029"