2 files changed, 59 insertions, 15 deletions
diff --git a/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx b/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx
index 3872919de..3a040b5d0 100644
--- a/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx
+++ b/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx
@@ -6,7 +6,13 @@
  *
  */
 import React from 'react'
-import {SafeAreaView, Text, TouchableOpacity, StyleSheet} from 'react-native'
+import {
+  SafeAreaView,
+  TouchableOpacity,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -23,14 +29,14 @@ const ImageDefaultHeader = ({onRequestClose}: Props) => {
   return (
     <SafeAreaView style={styles.root}>
       <TouchableOpacity
-        style={styles.closeButton}
+        style={[styles.closeButton, styles.blurredBackground]}
         onPress={onRequestClose}
         hitSlop={HIT_SLOP}
         accessibilityRole="button"
         accessibilityLabel={_(msg`Close image`)}
         accessibilityHint={_(msg`Closes viewer for header image`)}
         onAccessibilityEscape={onRequestClose}>
-        <Text style={styles.closeText}>✕</Text>
+        <FontAwesomeIcon icon="close" color={'#fff'} size={22} />
       </TouchableOpacity>
     </SafeAreaView>
   )
@@ -42,8 +48,8 @@ const styles = StyleSheet.create({
     pointerEvents: 'box-none',
   },
   closeButton: {
-    marginRight: 8,
-    marginTop: 8,
+    marginRight: 10,
+    marginTop: 10,
     width: 44,
     height: 44,
     alignItems: 'center',
@@ -58,6 +64,10 @@ const styles = StyleSheet.create({
     color: '#FFF',
     includeFontPadding: false,
   },
+  blurredBackground: {
+    backdropFilter: 'blur(10px)',
+    WebkitBackdropFilter: 'blur(10px)',
+  } as ViewStyle,
 })
 
 export default ImageDefaultHeader
diff --git a/src/view/com/lightbox/Lightbox.web.tsx b/src/view/com/lightbox/Lightbox.web.tsx
index fb97c30a4..942c9a686 100644
--- a/src/view/com/lightbox/Lightbox.web.tsx
+++ b/src/view/com/lightbox/Lightbox.web.tsx
@@ -7,6 +7,7 @@ import {
   StyleSheet,
   View,
   Pressable,
+  ViewStyle,
 } from 'react-native'
 import {
   FontAwesomeIcon,
@@ -24,6 +25,7 @@ import {
   ProfileImageLightbox,
 } from '#/state/lightbox'
 import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 
 interface Img {
   uri: string
@@ -111,6 +113,14 @@ function LightboxInner({
     return () => window.removeEventListener('keydown', onKeyDown)
   }, [onKeyDown])
 
+  const {isTabletOrDesktop} = useWebMediaQueries()
+  const btnStyle = React.useMemo(() => {
+    return isTabletOrDesktop ? styles.btnTablet : styles.btnMobile
+  }, [isTabletOrDesktop])
+  const iconSize = React.useMemo(() => {
+    return isTabletOrDesktop ? 32 : 24
+  }, [isTabletOrDesktop])
+
   return (
     <View style={styles.mask}>
       <TouchableWithoutFeedback
@@ -130,28 +140,38 @@ function LightboxInner({
           {canGoLeft && (
             <TouchableOpacity
               onPress={onPressLeft}
-              style={[styles.btn, styles.leftBtn]}
+              style={[
+                styles.btn,
+                btnStyle,
+                styles.leftBtn,
+                styles.blurredBackground,
+              ]}
               accessibilityRole="button"
               accessibilityLabel={_(msg`Previous image`)}
               accessibilityHint="">
               <FontAwesomeIcon
                 icon="angle-left"
                 style={styles.icon as FontAwesomeIconStyle}
-                size={40}
+                size={iconSize}
               />
             </TouchableOpacity>
           )}
           {canGoRight && (
             <TouchableOpacity
               onPress={onPressRight}
-              style={[styles.btn, styles.rightBtn]}
+              style={[
+                styles.btn,
+                btnStyle,
+                styles.rightBtn,
+                styles.blurredBackground,
+              ]}
               accessibilityRole="button"
               accessibilityLabel={_(msg`Next image`)}
               accessibilityHint="">
               <FontAwesomeIcon
                 icon="angle-right"
                 style={styles.icon as FontAwesomeIconStyle}
-                size={40}
+                size={iconSize}
               />
             </TouchableOpacity>
           )}
@@ -213,20 +233,30 @@ const styles = StyleSheet.create({
   },
   btn: {
     position: 'absolute',
-    backgroundColor: '#000',
-    width: 50,
-    height: 50,
+    backgroundColor: '#00000077',
     justifyContent: 'center',
     alignItems: 'center',
+  },
+  btnTablet: {
+    width: 50,
+    height: 50,
     borderRadius: 25,
+    left: 30,
+    right: 30,
+  },
+  btnMobile: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    left: 20,
+    right: 20,
   },
   leftBtn: {
-    left: 30,
+    right: 'auto',
     top: '50%',
   },
   rightBtn: {
-    position: 'absolute',
-    right: 30,
+    left: 'auto',
     top: '50%',
   },
   footer: {
@@ -234,4 +264,8 @@ const styles = StyleSheet.create({
     paddingVertical: 24,
     backgroundColor: colors.black,
   },
+  blurredBackground: {
+    backdropFilter: 'blur(10px)',
+    WebkitBackdropFilter: 'blur(10px)',
+  } as ViewStyle,
 })