authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-07-03 00:05:38-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-07-03 07:05:38+00:00
logcabc93bad305c14e1b6919c6631deca153032f9f
treef265025fade3903d9180fa688774255b6318c084
parent5cda81562693f3bfa9a4d7a6bfa6cde3ae781256
signature Signed by PGP key B5690EEEBB952194

Make the thread composer read as elevated liquid glass (#3668)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

1 files changed, 36 insertions(+), 22 deletions(-)

apps/mobile/src/features/threads/ThreadComposer.tsx+36-22
......@@ -117,32 +117,46 @@ function ComposerSurface(props: {
117117 readonly style: ViewStyle;
118118 readonly isDarkMode: boolean;
119119}) {
120 // Drop shadow lives on a wrapper: `overflow: "hidden"` on the surface itself
121 // (needed to clip content to the pill shape) would clip the shadow on iOS.
122 const shadowStyle: ViewStyle = {
123 borderRadius: props.style.borderRadius,
124 shadowColor: "#000000",
125 shadowOpacity: props.isDarkMode ? 0.35 : 0.12,
126 shadowRadius: 14,
127 shadowOffset: { width: 0, height: 6 },
128 elevation: 10,
129 };
130
120131 if (isLiquidGlassSupported) {
121132 return (
122 <LiquidGlassView
123 effect="clear"
124 interactive
125 tintColor={props.isDarkMode ? "rgba(44,44,46,0.5)" : "rgba(255,255,255,0.45)"}
126 colorScheme={props.isDarkMode ? "dark" : "light"}
127 style={props.style}
128 >
129 {props.children}
130 </LiquidGlassView>
133 <View style={shadowStyle}>
134 <LiquidGlassView
135 effect="regular"
136 interactive
137 colorScheme={props.isDarkMode ? "dark" : "light"}
138 style={props.style}
139 >
140 {props.children}
141 </LiquidGlassView>
142 </View>
131143 );
132144 }
133145
134146 return (
135 <View
136 style={[
137 props.style,
138 {
139 backgroundColor: props.isDarkMode ? "rgba(44,44,46,0.96)" : "rgba(255,255,255,0.96)",
140 borderWidth: 1,
141 borderColor: props.isDarkMode ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.06)",
142 },
143 ]}
144 >
145 {props.children}
147 <View style={shadowStyle}>
148 <View
149 style={[
150 props.style,
151 {
152 backgroundColor: props.isDarkMode ? "rgba(44,44,46,0.96)" : "rgba(255,255,255,0.96)",
153 borderWidth: 1,
154 borderColor: props.isDarkMode ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.06)",
155 },
156 ]}
157 >
158 {props.children}
159 </View>
146160 </View>
147161 );
148162}
......@@ -661,8 +675,8 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
661675 paddingTop: isExpanded ? 8 : 6,
662676 paddingBottom: (props.bottomInset ?? 0) + (isExpanded ? 8 : 6),
663677 experimental_backgroundImage: isDarkMode
664 ? "linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 40%, rgba(0,0,0,0.95) 100%)"
665 : "linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 40%, rgba(255,255,255,0.95) 100%)",
678 ? "linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0.9) 100%)"
679 : "linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 55%, rgba(255,255,255,0.9) 100%)",
666680 }}
667681 >
668682 <View