From 87aa06243ee0b58d30f14e918b160f608f751eee Mon Sep 17 00:00:00 2001 From: DIYgod Date: Fri, 11 Apr 2025 11:38:14 +0800 Subject: [PATCH] feat(mobile): ai summary card styles --- apps/mobile/package.json | 1 + apps/mobile/src/modules/ai/summary.tsx | 29 +++++++++++++++++--------- pnpm-lock.yaml | 14 +++++++++++++ 3 files changed, 34 insertions(+), 10 deletions(-) diff --git a/apps/mobile/package.json b/apps/mobile/package.json index b411cff6f..db16888a2 100644 --- a/apps/mobile/package.json +++ b/apps/mobile/package.json @@ -38,6 +38,7 @@ "@react-native-firebase/app-check": "21.13.0", "@react-native-firebase/crashlytics": "21.13.0", "@react-native-firebase/messaging": "21.13.0", + "@react-native-masked-view/masked-view": "0.3.2", "@react-native-menu/menu": "1.2.3", "@react-native-picker/picker": "2.11.0", "@shopify/flash-list": "1.7.3", diff --git a/apps/mobile/src/modules/ai/summary.tsx b/apps/mobile/src/modules/ai/summary.tsx index eb10e2412..baf6dea52 100644 --- a/apps/mobile/src/modules/ai/summary.tsx +++ b/apps/mobile/src/modules/ai/summary.tsx @@ -1,4 +1,6 @@ import { cn } from "@follow/utils" +import MaskedView from "@react-native-masked-view/masked-view" +import { LinearGradient } from "expo-linear-gradient" import type { FC } from "react" import * as React from "react" import type { LayoutChangeEvent } from "react-native" @@ -22,8 +24,6 @@ export const AISummary: FC<{ error?: string onRetry?: () => void }> = ({ className, summary, pending = false, error, onRetry }) => { - const labelColor = useColor("label") - const opacity = useSharedValue(0.3) const height = useSharedValue(0) @@ -56,18 +56,31 @@ export const AISummary: FC<{ }) } + const purpleColor = useColor("purple") + if (pending) return null return ( - - AI Summary + + + AI Summary + + } + > + + AI Summary + + @@ -110,7 +123,7 @@ export const AISummary: FC<{ )} ) : ( - {summary.trim()} + {summary.trim()} )} @@ -121,10 +134,6 @@ export const AISummary: FC<{ const styles = StyleSheet.create({ card: { borderWidth: 0.5, - shadowColor: "#000", - shadowOffset: { width: 0, height: 1 }, - shadowOpacity: 0.1, - shadowRadius: 2, elevation: 2, }, }) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 66f96c3a2..6483ef883 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -814,6 +814,9 @@ importers: '@react-native-firebase/messaging': specifier: 21.13.0 version: 21.13.0(2511037f97ab10cd056affaf5ecb511d) + '@react-native-masked-view/masked-view': + specifier: 0.3.2 + version: 0.3.2(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@6.0.5))(react@18.3.1) '@react-native-menu/menu': specifier: 1.2.3 version: 1.2.3(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@6.0.5))(react@18.3.1) @@ -5444,6 +5447,12 @@ packages: expo: optional: true + '@react-native-masked-view/masked-view@0.3.2': + resolution: {integrity: sha512-XwuQoW7/GEgWRMovOQtX3A4PrXhyaZm0lVUiY8qJDvdngjLms9Cpdck6SmGAUNqQwcj2EadHC1HwL0bEyoa/SQ==} + peerDependencies: + react: 18.3.1 + react-native: '>=0.57' + '@react-native-menu/menu@1.2.3': resolution: {integrity: sha512-sEfiVIivsa0lSelFm9Wbm/RAi+XoEHc75GGhjwvSrj9KSCVvNNXwr9F8l42e1t/lzYvVYzmkYxLG6VKxrDYJiw==} peerDependencies: @@ -20613,6 +20622,11 @@ snapshots: optionalDependencies: expo: 52.0.44(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@expo/metro-runtime@4.0.1(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@6.0.5)))(bufferutil@4.0.9)(encoding@0.1.13)(graphql@16.8.1)(react-native-webview@13.13.5(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@6.0.5))(react@18.3.1))(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@6.0.5))(react@18.3.1)(utf-8-validate@6.0.5) + '@react-native-masked-view/masked-view@0.3.2(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@6.0.5))(react@18.3.1)': + dependencies: + react: 18.3.1 + react-native: 0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@6.0.5) + '@react-native-menu/menu@1.2.3(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@6.0.5))(react@18.3.1)': dependencies: react: 18.3.1