authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-08-27 21:08:39-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-08-27 21:08:39-07:00
log850e4582e4c828b1533a400bf56a532721239198
tree82c712b3d576113a373fb2f69d25316632f0cabf
parentf1e6f0c9bbe527a76eaae9e3b498a5977ce3c7d6
signature Signed by PGP key B5690EEEBB952194

fix(mobile): refine Git action toast glass styling (#8399)

1 files changed, 14 insertions(+), 6 deletions(-)

apps/mobile/src/features/threads/GitActionProgressOverlay.tsx+14-6
...@@ -8,6 +8,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";...@@ -8,6 +8,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
88
9import { AppText as Text } from "../../components/AppText";9import { AppText as Text } from "../../components/AppText";
10import { APP_BAR_HEIGHT } from "../../lib/layoutMetrics";10import { APP_BAR_HEIGHT } from "../../lib/layoutMetrics";
11import { themeColorWithAlpha } from "../../lib/mobileTheme";
11import { tryOpenExternalUrl } from "../../lib/openExternalUrl";12import { tryOpenExternalUrl } from "../../lib/openExternalUrl";
12import { useThemeColor } from "../../lib/useThemeColor";13import { useThemeColor } from "../../lib/useThemeColor";
13import type { GitActionProgress } from "../../state/use-vcs-action-state";14import type { GitActionProgress } from "../../state/use-vcs-action-state";
...@@ -68,10 +69,13 @@ export function GitActionProgressOverlay(props: {...@@ -68,10 +69,13 @@ export function GitActionProgressOverlay(props: {
68function OverlayContent(props: { readonly progress: GitActionProgress }) {69function OverlayContent(props: { readonly progress: GitActionProgress }) {
69 const { progress } = props;70 const { progress } = props;
70 const iconColor = useThemeColor("--color-icon");71 const iconColor = useThemeColor("--color-icon");
71 const glassBorder = useThemeColor("--color-header-border");72 const glassSurface = useThemeColor("--color-glass-surface");
72 const glassTint = useThemeColor("--color-glass-tint");73 const foreground = useThemeColor("--color-foreground");
74 const shadowColor = useThemeColor("--color-primary-shadow");
73 const { themeAppearance } = useAppearancePreferences();75 const { themeAppearance } = useAppearancePreferences();
74 const isDarkMode = themeAppearance === "dark";76 const isDarkMode = themeAppearance === "dark";
77 const glassTint = themeColorWithAlpha(String(glassSurface), isDarkMode ? 0.48 : 0.38);
78 const glassBorder = themeColorWithAlpha(String(foreground), isDarkMode ? 0.18 : 0.12);
75 const content = (79 const content = (
76 <>80 <>
77 <OverlayIcon phase={progress.phase} iconColor={iconColor} />81 <OverlayIcon phase={progress.phase} iconColor={iconColor} />
...@@ -100,12 +104,13 @@ function OverlayContent(props: { readonly progress: GitActionProgress }) {...@@ -100,12 +104,13 @@ function OverlayContent(props: { readonly progress: GitActionProgress }) {
100 <Animated.View104 <Animated.View
101 layout={OVERLAY_LAYOUT_TRANSITION}105 layout={OVERLAY_LAYOUT_TRANSITION}
102 style={{106 style={{
103 backgroundColor: glassTint,
104 borderColor: glassBorder,
105 borderCurve: "continuous",107 borderCurve: "continuous",
106 borderRadius: 26,108 borderRadius: 26,
107 borderWidth: StyleSheet.hairlineWidth,109 elevation: 12,
108 overflow: "hidden",110 shadowColor,
111 shadowOffset: { width: 0, height: 8 },
112 shadowOpacity: isDarkMode ? 0.42 : 0.2,
113 shadowRadius: 18,
109 }}114 }}
110 >115 >
111 <AnimatedLiquidGlassView116 <AnimatedLiquidGlassView
...@@ -113,9 +118,12 @@ function OverlayContent(props: { readonly progress: GitActionProgress }) {...@@ -113,9 +118,12 @@ function OverlayContent(props: { readonly progress: GitActionProgress }) {
113 effect="regular"118 effect="regular"
114 interactive119 interactive
115 layout={OVERLAY_LAYOUT_TRANSITION}120 layout={OVERLAY_LAYOUT_TRANSITION}
121 tintColor={glassTint}
116 style={{122 style={{
123 borderColor: glassBorder,
117 borderCurve: "continuous",124 borderCurve: "continuous",
118 borderRadius: 26,125 borderRadius: 26,
126 borderWidth: StyleSheet.hairlineWidth,
119 overflow: "hidden",127 overflow: "hidden",
120 }}128 }}
121 >129 >