diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html
index c7c5ec0f..678729ff 100644
--- a/bskyweb/templates/base.html
+++ b/bskyweb/templates/base.html
@@ -44,7 +44,7 @@
scrollbar-gutter: stable both-edges;
}
html, body {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif;
}
/* Buttons and inputs have a font set by UA, so we'll have to reset that */
@@ -141,7 +141,7 @@
/* ProseMirror */
.ProseMirror {
- font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+ font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif;
min-height: 140px;
}
.ProseMirror-dark {
diff --git a/src/lib/hooks/useWebBodyScrollLock.ts b/src/lib/hooks/useWebBodyScrollLock.ts
index 585f193f..0dcf911f 100644
--- a/src/lib/hooks/useWebBodyScrollLock.ts
+++ b/src/lib/hooks/useWebBodyScrollLock.ts
@@ -6,6 +6,7 @@ let refCount = 0
function incrementRefCount() {
if (refCount === 0) {
document.body.style.overflow = 'hidden'
+ document.documentElement.style.scrollbarGutter = 'auto'
}
refCount++
}
@@ -14,6 +15,7 @@ function decrementRefCount() {
refCount--
if (refCount === 0) {
document.body.style.overflow = ''
+ document.documentElement.style.scrollbarGutter = ''
}
}
diff --git a/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx b/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx
index 3872919d..88476c8e 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 (
- ✕
+
)
@@ -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',
@@ -51,13 +57,10 @@ const styles = StyleSheet.create({
borderRadius: 22,
backgroundColor: '#00000077',
},
- closeText: {
- lineHeight: 22,
- fontSize: 19,
- textAlign: 'center',
- 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 fb97c30a..942c9a68 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 (
)}
{canGoRight && (
)}
@@ -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,
})
diff --git a/src/view/com/util/forms/NativeDropdown.web.tsx b/src/view/com/util/forms/NativeDropdown.web.tsx
index 6abeb16c..94591d39 100644
--- a/src/view/com/util/forms/NativeDropdown.web.tsx
+++ b/src/view/com/util/forms/NativeDropdown.web.tsx
@@ -237,7 +237,7 @@ const styles = StyleSheet.create({
paddingRight: 12,
borderRadius: 8,
fontFamily:
- '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+ '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif',
outline: 0,
border: 0,
},
diff --git a/src/view/com/util/text/Text.tsx b/src/view/com/util/text/Text.tsx
index ccb51bfc..37d66558 100644
--- a/src/view/com/util/text/Text.tsx
+++ b/src/view/com/util/text/Text.tsx
@@ -2,7 +2,7 @@ import React from 'react'
import {Text as RNText, TextProps} from 'react-native'
import {s, lh} from 'lib/styles'
import {useTheme, TypographyVariant} from 'lib/ThemeContext'
-import {isIOS} from 'platform/detection'
+import {isIOS, isWeb} from 'platform/detection'
import {UITextView} from 'react-native-ui-text-view'
export type CustomTextProps = TextProps & {
@@ -13,6 +13,11 @@ export type CustomTextProps = TextProps & {
selectable?: boolean
}
+const fontFamilyStyle = {
+ fontFamily:
+ '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif',
+}
+
export function Text({
type = 'md',
children,
@@ -39,7 +44,13 @@ export function Text({
return (