Fix background in web scroll elements and update settings screen for web

1 files changed, 33 insertions, 2 deletions

diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx
index 313dda9cd..2df534144 100644
--- a/src/view/com/util/Views.web.tsx
+++ b/src/view/com/util/Views.web.tsx
@@ -22,7 +22,9 @@ import {
   View,
   ViewProps,
 } from 'react-native'
+import {useTheme} from '../../lib/ThemeContext'
 import {addStyle} from '../../lib/addStyle'
+import {colors} from '../../lib/styles'
 
 export function CenteredView({
   style,
@@ -36,7 +38,15 @@ export function FlatList<ItemT>({
   contentContainerStyle,
   ...props
 }: React.PropsWithChildren<FlatListProps<ItemT>>) {
-  contentContainerStyle = addStyle(contentContainerStyle, styles.container)
+  const theme = useTheme()
+  contentContainerStyle = addStyle(
+    contentContainerStyle,
+    styles.containerScroll,
+  )
+  contentContainerStyle = addStyle(
+    contentContainerStyle,
+    theme.colorScheme === 'dark' ? styles.containerDark : styles.containerLight,
+  )
   return <RNFlatList contentContainerStyle={contentContainerStyle} {...props} />
 }
 
@@ -44,7 +54,15 @@ export function ScrollView({
   contentContainerStyle,
   ...props
 }: React.PropsWithChildren<ScrollViewProps>) {
-  contentContainerStyle = addStyle(contentContainerStyle, styles.container)
+  const theme = useTheme()
+  contentContainerStyle = addStyle(
+    contentContainerStyle,
+    styles.containerScroll,
+  )
+  contentContainerStyle = addStyle(
+    contentContainerStyle,
+    theme.colorScheme === 'dark' ? styles.containerDark : styles.containerLight,
+  )
   return (
     <RNScrollView contentContainerStyle={contentContainerStyle} {...props} />
   )
@@ -57,4 +75,17 @@ const styles = StyleSheet.create({
     marginLeft: 'auto',
     marginRight: 'auto',
   },
+  containerScroll: {
+    width: '100%',
+    height: '100%',
+    maxWidth: 600,
+    marginLeft: 'auto',
+    marginRight: 'auto',
+  },
+  containerLight: {
+    backgroundColor: colors.gray1,
+  },
+  containerDark: {
+    backgroundColor: colors.gray7,
+  },
 })