| ... | ... | @@ -117,32 +117,46 @@ function ComposerSurface(props: { |
| 117 | 117 | readonly style: ViewStyle; |
| 118 | 118 | readonly isDarkMode: boolean; |
| 119 | 119 | }) { |
| 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 | |
| 120 | 131 | if (isLiquidGlassSupported) { |
| 121 | 132 | 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> |
| 131 | 143 | ); |
| 132 | 144 | } |
| 133 | 145 | |
| 134 | 146 | 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> |
| 146 | 160 | </View> |
| 147 | 161 | ); |
| 148 | 162 | } |
| ... | ... | @@ -661,8 +675,8 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer |
| 661 | 675 | paddingTop: isExpanded ? 8 : 6, |
| 662 | 676 | paddingBottom: (props.bottomInset ?? 0) + (isExpanded ? 8 : 6), |
| 663 | 677 | 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%)", |
| 666 | 680 | }} |
| 667 | 681 | > |
| 668 | 682 | <View |