From da796745485d7db2b13ac7b11bdc422394dab7be Mon Sep 17 00:00:00 2001
From: Zhiyuan Zheng <me@xmflsct.com>
Date: Sat, 26 Dec 2020 23:05:17 +0100
Subject: [PATCH] Rewrite all buttons

---
 package.json                                  |   1 +
 src/components/BottomSheet.tsx                |  17 +-
 src/components/Button.tsx                     | 168 +++++++++++++++++-
 src/components/Button/ButtonRound.tsx         |  60 -------
 src/components/Button/ButtonRow.tsx           |  89 ----------
 src/components/Menu/Button.tsx                |  78 --------
 src/components/Menu/Container.tsx             |  23 +--
 src/components/Menu/Header.tsx                |   8 +-
 src/components/Menu/Row.tsx                   |  10 +-
 src/components/ParseContent.tsx               | 129 +++++++-------
 src/components/Timelines/Timeline/Empty.tsx   |   4 +-
 .../Timelines/Timeline/Separator.tsx          |   4 +-
 .../Timelines/Timeline/Shared/Actions.tsx     |   4 +-
 .../Timeline/Shared/Attachment/Audio.tsx      |  17 +-
 .../Shared/Attachment/Unsupported.tsx         |   7 +-
 .../Timeline/Shared/Attachment/Video.tsx      |  10 +-
 .../Timelines/Timeline/Shared/Poll.tsx        | 133 +++++++-------
 src/screens/Me/Root/Login.tsx                 |  50 ++----
 src/screens/Me/Root/Logout.tsx                |  69 +++----
 src/screens/Shared/Account/Information.tsx    |  25 ++-
 src/screens/Shared/Announcements.tsx          |   7 +-
 src/screens/Shared/Compose/Attachments.tsx    |  52 ++++--
 src/screens/Shared/Compose/Poll.tsx           | 101 +++++------
 src/utils/styles/themes.ts                    |   9 +-
 yarn.lock                                     |   5 +
 25 files changed, 497 insertions(+), 583 deletions(-)
 delete mode 100644 src/components/Button/ButtonRound.tsx
 delete mode 100644 src/components/Button/ButtonRow.tsx
 delete mode 100644 src/components/Menu/Button.tsx

diff --git a/package.json b/package.json
index 404314f0..07dd3ff5 100644
--- 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",
diff --git a/src/components/BottomSheet.tsx b/src/components/BottomSheet.tsx
index 03ab7521..93541c53 100644
--- 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
   }
 })
 
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 342b645a..88b9cfc1 100644
--- 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
diff --git a/src/components/Button/ButtonRound.tsx b/src/components/Button/ButtonRound.tsx
deleted file mode 100644
index 195d6d45..00000000
--- a/src/components/Button/ButtonRound.tsx
+++ /dev/null
@@ -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
diff --git a/src/components/Button/ButtonRow.tsx b/src/components/Button/ButtonRow.tsx
deleted file mode 100644
index 5fc34925..00000000
--- a/src/components/Button/ButtonRow.tsx
+++ /dev/null
@@ -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
diff --git a/src/components/Menu/Button.tsx b/src/components/Menu/Button.tsx
deleted file mode 100644
index d072ba5e..00000000
--- a/src/components/Menu/Button.tsx
+++ /dev/null
@@ -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
diff --git a/src/components/Menu/Container.tsx b/src/components/Menu/Container.tsx
index 6f37de22..0c4d730d 100644
--- 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({
diff --git a/src/components/Menu/Header.tsx b/src/components/Menu/Header.tsx
index a908206f..81929278 100644
--- 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
   }
 })
 
diff --git a/src/components/Menu/Row.tsx b/src/components/Menu/Row.tsx
index ac11b0c2..5f8fb177 100644
--- 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,
diff --git a/src/components/ParseContent.tsx b/src/components/ParseContent.tsx
index cda6231a..967f5e1f 100644
--- 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
diff --git a/src/components/Timelines/Timeline/Empty.tsx b/src/components/Timelines/Timeline/Empty.tsx
index df5c4bf2..6c0b5160 100644
--- 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':
diff --git a/src/components/Timelines/Timeline/Separator.tsx b/src/components/Timelines/Timeline/Separator.tsx
index 796c3ab4..0644d602 100644
--- 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
   }
 })
diff --git a/src/components/Timelines/Timeline/Shared/Actions.tsx b/src/components/Timelines/Timeline/Shared/Actions.tsx
index d2529bac..2b639a92 100644
--- 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
           }
 
diff --git a/src/components/Timelines/Timeline/Shared/Attachment/Audio.tsx b/src/components/Timelines/Timeline/Shared/Attachment/Audio.tsx
index 5f93a4d2..3541b614 100644
--- 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,
diff --git a/src/components/Timelines/Timeline/Shared/Attachment/Unsupported.tsx b/src/components/Timelines/Timeline/Shared/Attachment/Unsupported.tsx
index a555d3b1..d6f00448 100644
--- 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!)}
         />
diff --git a/src/components/Timelines/Timeline/Shared/Attachment/Video.tsx b/src/components/Timelines/Timeline/Shared/Attachment/Video.tsx
index 6e9280e5..17002568 100644
--- 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>
     </>
diff --git a/src/components/Timelines/Timeline/Shared/Poll.tsx b/src/components/Timelines/Timeline/Shared/Poll.tsx
index 022b0f41..e03ca96a 100644
--- 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,
diff --git a/src/screens/Me/Root/Login.tsx b/src/screens/Me/Root/Login.tsx
index 07539b07..32f463a7 100644
--- 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,
diff --git a/src/screens/Me/Root/Logout.tsx b/src/screens/Me/Root/Logout.tsx
index c44722d5..70dda565 100644
--- 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
+            }
+          ]
+        )
+      }
+    />
   )
 }
 
diff --git a/src/screens/Shared/Account/Information.tsx b/src/screens/Shared/Account/Information.tsx
index dd4f8a28..30c3a2cc 100644
--- 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}
diff --git a/src/screens/Shared/Announcements.tsx b/src/screens/Shared/Announcements.tsx
index 45b66a41..af729c25 100644
--- 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}
           />
diff --git a/src/screens/Shared/Compose/Attachments.tsx b/src/screens/Shared/Compose/Attachments.tsx
index 85def544..64aca909 100644
--- 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: {
diff --git a/src/screens/Shared/Compose/Poll.tsx b/src/screens/Shared/Compose/Poll.tsx
index 21593576..b2396333 100644
--- 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
diff --git a/src/utils/styles/themes.ts b/src/utils/styles/themes.ts
index 03c7df81..209f2c9f 100644
--- 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)'
   }
 }
 
diff --git a/yarn.lock b/yarn.lock
index 22191206..0d425183 100644
--- 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"