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

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,
+  },
 })

src/view/screens/Settings.tsx

@@ -1,7 +1,6 @@
 import React, {useEffect} from 'react'
 import {
   ActivityIndicator,
-  ScrollView,
   StyleSheet,
   TouchableOpacity,
   View,
@@ -11,6 +10,7 @@ import {observer} from 'mobx-react-lite'
 import {useStores} from '../../state'
 import {ScreenParams} from '../routes'
 import {s} from '../lib/styles'
+import {ScrollView} from '../com/util/Views'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {Link} from '../com/util/Link'
 import {Text} from '../com/util/text/Text'
@@ -56,7 +56,8 @@ export const Settings = observer(function Settings({
   return (
     <View style={[s.h100pct]} testID="settingsScreen">
       <ViewHeader title="Settings" />
-      <ScrollView style={[s.mt10, s.pl10, s.pr10, s.h100pct]}>
+      <ScrollView style={s.h100pct}>
+        <View style={[s.mt10, s.pl10, s.pr10]}>
           <View style={[s.flexRow]}>
             <Text type="xl-bold" style={pal.text}>
               Signed in as
@@ -159,6 +160,7 @@ export const Settings = observer(function Settings({
             <Text style={pal.link}>Storybook</Text>
           </Link>
           <View style={s.footerSpacer} />
+        </View>
       </ScrollView>
     </View>
   )