Update spoiler alert action

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

@@ -1,11 +1,12 @@
 import React, { useState } from 'react'
-import { Text } from 'react-native'
+import { Pressable, Text } from 'react-native'
 import Collapsible from 'react-native-collapsible'
 
 import ParseContent from 'src/components/ParseContent'
 
 import { useTheme } from 'src/utils/styles/ThemeManager'
 import { StyleConstants } from 'src/utils/styles/constants'
+import { LinearGradient } from 'expo-linear-gradient'
 
 export interface Props {
   status: Mastodon.Status
@@ -15,27 +16,18 @@ export interface Props {
 const TimelineContent: React.FC<Props> = ({ status, numberOfLines }) => {
   const { theme } = useTheme()
   const [spoilerCollapsed, setSpoilerCollapsed] = useState(true)
+  const lineHeight = 28
 
   return (
     <>
       {status.spoiler_text ? (
         <>
-          <Text style={{ fontSize: StyleConstants.Font.Size.M }}>
           <ParseContent
             content={status.spoiler_text}
             size={StyleConstants.Font.Size.M}
             emojis={status.emojis}
-            />{' '}
+          />
-            <Text
+          <Collapsible collapsed={spoilerCollapsed} collapsedHeight={20}>
-              onPress={() => setSpoilerCollapsed(!spoilerCollapsed)}
-              style={{
-                color: theme.link
-              }}
-            >
-              {spoilerCollapsed ? '点击展开' : '点击收起'}
-            </Text>
-          </Text>
-          <Collapsible collapsed={spoilerCollapsed}>
             <ParseContent
               content={status.content}
               size={StyleConstants.Font.Size.M}
@@ -44,6 +36,34 @@ const TimelineContent: React.FC<Props> = ({ status, numberOfLines }) => {
               {...(numberOfLines && { numberOfLines: numberOfLines })}
             />
           </Collapsible>
+          <Pressable
+            onPress={() => setSpoilerCollapsed(!spoilerCollapsed)}
+            style={{
+              marginTop: spoilerCollapsed ? -lineHeight : 0
+            }}
+          >
+            <LinearGradient
+              colors={[
+                theme.backgroundGradientStart,
+                theme.backgroundGradientEnd
+              ]}
+              locations={[0, lineHeight / (StyleConstants.Font.Size.S * 5)]}
+              style={{
+                paddingTop: StyleConstants.Font.Size.S * 2,
+                paddingBottom: StyleConstants.Font.Size.S
+              }}
+            >
+              <Text
+                style={{
+                  textAlign: 'center',
+                  fontSize: StyleConstants.Font.Size.S,
+                  color: theme.primary
+                }}
+              >
+                {spoilerCollapsed ? '展开' : '收起'}隐藏内容
+              </Text>
+            </LinearGradient>
+          </Pressable>
         </>
       ) : (
         <ParseContent