Adds dark mode to the edit screen (#130)

* Adds dark mode to edit screen

* lint

* lint

* lint

src/view/com/modals/EditProfile.tsx

@@ -23,6 +23,7 @@ import {isNetworkError} from '../../../lib/errors'
 import {compressIfNeeded} from '../../../lib/images'
 import {UserBanner} from '../util/UserBanner'
 import {UserAvatar} from '../util/UserAvatar'
+import {usePalette} from '../../lib/hooks/usePalette'
 
 export const snapPoints = ['80%']
 
@@ -35,6 +36,8 @@ export function Component({
 }) {
   const store = useStores()
   const [error, setError] = useState<string>('')
+  const pal = usePalette('default')
+
   const [isProcessing, setProcessing] = useState<boolean>(false)
   const [displayName, setDisplayName] = useState<string>(
     profileView.displayName || '',
@@ -102,15 +105,15 @@ export function Component({
 
   return (
     <View style={s.flex1}>
-      <BottomSheetScrollView style={styles.inner}>
+      <BottomSheetScrollView style={[styles.inner, pal.view]}>
-        <Text style={styles.title}>Edit my profile</Text>
+        <Text style={[styles.title, pal.text]}>Edit my profile</Text>
         <View style={styles.photos}>
           <UserBanner
             banner={userBanner}
             onSelectNewBanner={onSelectNewBanner}
             handle={profileView.handle}
           />
-          <View style={styles.avi}>
+          <View style={[styles.avi, {borderColor: pal.colors.background}]}>
             <UserAvatar
               size={80}
               avatar={userAvatar}
@@ -126,17 +129,17 @@ export function Component({
           </View>
         )}
         <View>
-          <Text style={styles.label}>Display Name</Text>
+          <Text style={[styles.label, pal.text]}>Display Name</Text>
           <BottomSheetTextInput
-            style={styles.textInput}
+            style={[styles.textInput, pal.text]}
             placeholder="e.g. Alice Roberts"
-            placeholderTextColor={colors.gray4}
+            placeholderTextColor={pal.textLight}
             value={displayName}
             onChangeText={v => setDisplayName(enforceLen(v, MAX_DISPLAY_NAME))}
           />
         </View>
         <View style={s.pb10}>
-          <Text style={styles.label}>Description</Text>
+          <Text style={[styles.label, pal.text]}>Description</Text>
           <BottomSheetTextInput
             style={[styles.textArea]}
             placeholder="e.g. Artist, dog-lover, and memelord."
@@ -163,7 +166,7 @@ export function Component({
         )}
         <TouchableOpacity style={s.mt5} onPress={onPressCancel}>
           <View style={[styles.btn]}>
-            <Text style={[s.black, s.bold]}>Cancel</Text>
+            <Text style={[s.black, s.bold, pal.text]}>Cancel</Text>
           </View>
         </TouchableOpacity>
       </BottomSheetScrollView>

src/view/com/modals/Modal.tsx

@@ -12,13 +12,15 @@ import * as EditProfileModal from './EditProfile'
 import * as ServerInputModal from './ServerInput'
 import * as ReportPostModal from './ReportPost'
 import * as ReportAccountModal from './ReportAccount'
+import {usePalette} from '../../lib/hooks/usePalette'
+import {StyleSheet} from 'react-native'
 
 const CLOSED_SNAPPOINTS = ['10%']
 
 export const Modal = observer(function Modal() {
   const store = useStores()
   const bottomSheetRef = useRef<BottomSheet>(null)
-
+  const pal = usePalette('default')
   const onBottomSheetChange = (snapPoint: number) => {
     if (snapPoint === -1) {
       store.shell.closeModal()
@@ -88,8 +90,17 @@ export const Modal = observer(function Modal() {
       backdropComponent={
         store.shell.isModalActive ? createCustomBackdrop(onClose) : undefined
       }
+      handleIndicatorStyle={{backgroundColor: pal.text.color}}
+      handleStyle={[styles.handle, pal.view]}
       onChange={onBottomSheetChange}>
       {element}
     </BottomSheet>
   )
 })
+
+const styles = StyleSheet.create({
+  handle: {
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10,
+  },
+})

src/view/com/util/UserAvatar.tsx

@@ -11,6 +11,7 @@ import {
 } from 'react-native-image-crop-picker'
 import {colors, gradients} from '../../lib/styles'
 import {DropdownButton} from './forms/DropdownButton'
+import {usePalette} from '../../lib/hooks/usePalette'
 
 export function UserAvatar({
   size,
@@ -26,7 +27,7 @@ export function UserAvatar({
   onSelectNewAvatar?: (img: PickedImage) => void
 }) {
   const initials = getInitials(displayName || handle)
-
+  const pal = usePalette('default')
   const renderSvg = (svgSize: number, svgInitials: string) => (
     <Svg width={svgSize} height={svgSize} viewBox="0 0 100 100">
       <Defs>
@@ -117,11 +118,11 @@ export function UserAvatar({
       ) : (
         renderSvg(size, initials)
       )}
-      <View style={styles.editButtonContainer}>
+      <View style={[styles.editButtonContainer, pal.btn]}>
         <FontAwesomeIcon
           icon="camera"
           size={12}
-          style={{color: colors.white}}
+          color={pal.text.color as string}
         />
       </View>
     </DropdownButton>

src/view/com/util/UserBanner.tsx

@@ -11,6 +11,7 @@ import {
   openPicker,
 } from 'react-native-image-crop-picker'
 import {DropdownButton} from './forms/DropdownButton'
+import {usePalette} from '../../lib/hooks/usePalette'
 
 export function UserBanner({
   banner,
@@ -19,6 +20,7 @@ export function UserBanner({
   banner?: string | null
   onSelectNewBanner?: (img: PickedImage) => void
 }) {
+  const pal = usePalette('default')
   const dropdownItems = [
     {
       label: 'Camera',
@@ -100,11 +102,12 @@ export function UserBanner({
       ) : (
         renderSvg()
       )}
-      <View style={styles.editButtonContainer}>
+      <View style={[styles.editButtonContainer, pal.btn]}>
         <FontAwesomeIcon
           icon="camera"
           size={12}
           style={{color: colors.white}}
+          color={pal.text.color as string}
         />
       </View>
     </DropdownButton>