From 53267d755b583765d68062bd5879230d10a5dfa1 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Fri, 30 Dec 2022 15:42:09 -0600
Subject: [PATCH] Integrate composer into design system

---
 src/view/com/composer/Autocomplete.tsx        | 19 +++++----
 src/view/com/composer/ComposePost.tsx         | 41 ++++++++-----------
 src/view/com/composer/PhotoCarouselPicker.tsx | 21 ++++------
 3 files changed, 36 insertions(+), 45 deletions(-)

diff --git a/src/view/com/composer/Autocomplete.tsx b/src/view/com/composer/Autocomplete.tsx
index b151e0d9..4ee527ee 100644
--- a/src/view/com/composer/Autocomplete.tsx
+++ b/src/view/com/composer/Autocomplete.tsx
@@ -8,6 +8,7 @@ import {
 import {useAnimatedValue} from '../../lib/hooks/useAnimatedValue'
 import {Text} from '../util/text/Text'
 import {colors} from '../../lib/styles'
+import {usePalette} from '../../lib/hooks/usePalette'
 
 interface AutocompleteItem {
   handle: string
@@ -23,6 +24,7 @@ export function Autocomplete({
   items: AutocompleteItem[]
   onSelect: (item: string) => void
 }) {
+  const pal = usePalette('default')
   const winDim = useWindowDimensions()
   const positionInterp = useAnimatedValue(0)
 
@@ -41,13 +43,18 @@ export function Autocomplete({
     }),
   }
   return (
-    <Animated.View style={[styles.outer, topAnimStyle]}>
+    <Animated.View style={[styles.outer, pal.view, pal.border, topAnimStyle]}>
       {items.map((item, i) => (
         <TouchableOpacity
           key={i}
-          style={styles.item}
+          style={[pal.border, styles.item]}
           onPress={() => onSelect(item.handle)}>
-          <Text style={styles.itemText}>@{item.handle}</Text>
+          <Text style={pal.text}>
+            {item.displayName || item.handle}
+            <Text type="body2" style={pal.textLight}>
+              &nbsp;@{item.handle}
+            </Text>
+          </Text>
         </TouchableOpacity>
       ))}
     </Animated.View>
@@ -60,17 +67,11 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     bottom: 0,
-    backgroundColor: colors.white,
     borderTopWidth: 1,
-    borderTopColor: colors.gray2,
   },
   item: {
     borderBottomWidth: 1,
-    borderBottomColor: colors.gray1,
     paddingVertical: 16,
     paddingHorizontal: 16,
   },
-  itemText: {
-    fontSize: 16,
-  },
 })
diff --git a/src/view/com/composer/ComposePost.tsx b/src/view/com/composer/ComposePost.tsx
index fe310f19..dc0bec13 100644
--- a/src/view/com/composer/ComposePost.tsx
+++ b/src/view/com/composer/ComposePost.tsx
@@ -31,6 +31,7 @@ import {detectLinkables} from '../../../lib/strings'
 import {UserLocalPhotosModel} from '../../../state/models/user-local-photos'
 import {PhotoCarouselPicker} from './PhotoCarouselPicker'
 import {SelectedPhoto} from './SelectedPhoto'
+import {usePalette} from '../../lib/hooks/usePalette'
 
 const MAX_TEXT_LENGTH = 256
 const DANGER_TEXT_LENGTH = MAX_TEXT_LENGTH
@@ -45,6 +46,7 @@ export const ComposePost = observer(function ComposePost({
   onPost?: ComposerOpts['onPost']
   onClose: () => void
 }) {
+  const pal = usePalette('default')
   const store = useStores()
   const textInput = useRef<TextInput>(null)
   const [isProcessing, setIsProcessing] = useState(false)
@@ -167,7 +169,7 @@ export const ComposePost = observer(function ComposePost({
         return v
       } else {
         return (
-          <Text key={i++} style={{color: colors.blue3}}>
+          <Text key={i++} style={pal.link}>
             {v.link}
           </Text>
         )
@@ -178,11 +180,11 @@ export const ComposePost = observer(function ComposePost({
   return (
     <KeyboardAvoidingView
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-      style={styles.outer}>
+      style={[pal.view, styles.outer]}>
       <SafeAreaView style={s.flex1}>
         <View style={styles.topbar}>
           <TouchableOpacity onPress={onPressCancel}>
-            <Text style={[s.blue3, s.f18]}>Cancel</Text>
+            <Text style={[pal.link, s.f18]}>Cancel</Text>
           </TouchableOpacity>
           <View style={s.flex1} />
           {isProcessing ? (
@@ -202,13 +204,13 @@ export const ComposePost = observer(function ComposePost({
               </LinearGradient>
             </TouchableOpacity>
           ) : (
-            <View style={[styles.postBtn, {backgroundColor: colors.gray1}]}>
-              <Text style={[s.gray5, s.f16, s.bold]}>Post</Text>
+            <View style={[styles.postBtn, pal.btn]}>
+              <Text style={[pal.textLight, s.f16, s.bold]}>Post</Text>
             </View>
           )}
         </View>
         {isProcessing ? (
-          <View style={styles.processingLine}>
+          <View style={[pal.btn, styles.processingLine]}>
             <Text style={s.black}>{processingState}</Text>
           </View>
         ) : undefined}
@@ -226,7 +228,7 @@ export const ComposePost = observer(function ComposePost({
         )}
         <ScrollView style={s.flex1}>
           {replyTo ? (
-            <View style={styles.replyToLayout}>
+            <View style={[pal.border, styles.replyToLayout]}>
               <UserAvatar
                 handle={replyTo.author.handle}
                 displayName={replyTo.author.displayName}
@@ -235,17 +237,19 @@ export const ComposePost = observer(function ComposePost({
               />
               <View style={styles.replyToPost}>
                 <TextLink
+                  type="h5"
                   href={`/profile/${replyTo.author.handle}`}
                   text={replyTo.author.displayName || replyTo.author.handle}
-                  style={[s.f16, s.bold, s.black]}
+                  style={[pal.text]}
                 />
-                <Text style={[s.f16, s['lh16-1.3'], s.black]} numberOfLines={6}>
+                <Text style={pal.text} numberOfLines={6}>
                   {replyTo.text}
                 </Text>
               </View>
             </View>
           ) : undefined}
-          <View style={[styles.textInputLayout, selectTextInputLayout]}>
+          <View
+            style={[pal.border, styles.textInputLayout, selectTextInputLayout]}>
             <UserAvatar
               handle={store.me.handle || ''}
               displayName={store.me.displayName}
@@ -258,8 +262,8 @@ export const ComposePost = observer(function ComposePost({
               scrollEnabled
               onChangeText={(text: string) => onChangeText(text)}
               placeholder={selectTextInputPlaceholder}
-              placeholderTextColor={colors.gray4}
-              style={styles.textInput}>
+              placeholderTextColor={pal.colors.textLight}
+              style={[pal.text, styles.textInput]}>
               {textDecorated}
             </TextInput>
           </View>
@@ -277,16 +281,14 @@ export const ComposePost = observer(function ComposePost({
               localPhotos={localPhotos}
             />
           )}
-        <View style={styles.bottomBar}>
+        <View style={[pal.border, styles.bottomBar]}>
           <TouchableOpacity
             onPress={onPressSelectPhotos}
             style={[s.pl5]}
             hitSlop={HITSLOP}>
             <FontAwesomeIcon
               icon={['far', 'image']}
-              style={{
-                color: selectedPhotos.length < 4 ? colors.blue3 : colors.gray3,
-              }}
+              style={selectedPhotos.length < 4 ? pal.link : pal.textLight}
               size={24}
             />
           </TouchableOpacity>
@@ -343,7 +345,6 @@ const styles = StyleSheet.create({
   outer: {
     flexDirection: 'column',
     flex: 1,
-    backgroundColor: '#fff',
     padding: 15,
     paddingBottom: Platform.OS === 'ios' ? 0 : 50,
     height: '100%',
@@ -361,7 +362,6 @@ const styles = StyleSheet.create({
     paddingVertical: 6,
   },
   processingLine: {
-    backgroundColor: colors.gray1,
     borderRadius: 6,
     paddingHorizontal: 8,
     paddingVertical: 6,
@@ -395,7 +395,6 @@ const styles = StyleSheet.create({
   textInputLayout: {
     flexDirection: 'row',
     borderTopWidth: 1,
-    borderTopColor: colors.gray2,
     paddingTop: 16,
   },
   textInput: {
@@ -404,12 +403,10 @@ const styles = StyleSheet.create({
     fontSize: 18,
     marginLeft: 8,
     alignSelf: 'flex-start',
-    color: colors.black,
   },
   replyToLayout: {
     flexDirection: 'row',
     borderTopWidth: 1,
-    borderTopColor: colors.gray2,
     paddingTop: 16,
     paddingBottom: 16,
   },
@@ -424,7 +421,5 @@ const styles = StyleSheet.create({
     paddingRight: 5,
     alignItems: 'center',
     borderTopWidth: 1,
-    borderTopColor: colors.gray2,
-    backgroundColor: colors.white,
   },
 })
diff --git a/src/view/com/composer/PhotoCarouselPicker.tsx b/src/view/com/composer/PhotoCarouselPicker.tsx
index 7f2c4e52..47c4c374 100644
--- a/src/view/com/composer/PhotoCarouselPicker.tsx
+++ b/src/view/com/composer/PhotoCarouselPicker.tsx
@@ -8,6 +8,7 @@ import {
   openCropper,
 } from 'react-native-image-crop-picker'
 import {compressIfNeeded} from '../../../lib/images'
+import {usePalette} from '../../lib/hooks/usePalette'
 
 const IMAGE_PARAMS = {
   width: 1000,
@@ -26,6 +27,7 @@ export const PhotoCarouselPicker = ({
   onSelectPhotos: (v: string[]) => void
   localPhotos: any
 }) => {
+  const pal = usePalette('default')
   const handleOpenCamera = useCallback(async () => {
     try {
       const cameraRes = await openCamera({
@@ -83,26 +85,22 @@ export const PhotoCarouselPicker = ({
   return (
     <ScrollView
       horizontal
-      style={styles.photosContainer}
+      style={[pal.view, styles.photosContainer]}
       showsHorizontalScrollIndicator={false}>
       <TouchableOpacity
-        style={[styles.galleryButton, styles.photo]}
+        style={[styles.galleryButton, pal.border, styles.photo]}
         onPress={handleOpenCamera}>
-        <FontAwesomeIcon
-          icon="camera"
-          size={24}
-          style={{color: colors.blue3}}
-        />
+        <FontAwesomeIcon icon="camera" size={24} style={pal.link} />
       </TouchableOpacity>
       <TouchableOpacity
-        style={[styles.galleryButton, styles.photo]}
+        style={[styles.galleryButton, pal.border, styles.photo]}
         onPress={handleOpenGallery}>
-        <FontAwesomeIcon icon="image" style={{color: colors.blue3}} size={24} />
+        <FontAwesomeIcon icon="image" style={pal.link} size={24} />
       </TouchableOpacity>
       {localPhotos.photos.map((item: any, index: number) => (
         <TouchableOpacity
           key={`local-image-${index}`}
-          style={styles.photoButton}
+          style={[pal.border, styles.photoButton]}
           onPress={() => handleSelectPhoto(item.node.image.uri)}>
           <Image style={styles.photo} source={{uri: item.node.image.uri}} />
         </TouchableOpacity>
@@ -117,11 +115,9 @@ const styles = StyleSheet.create({
     maxHeight: 96,
     padding: 8,
     overflow: 'hidden',
-    backgroundColor: colors.white,
   },
   galleryButton: {
     borderWidth: 1,
-    borderColor: colors.gray3,
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -131,7 +127,6 @@ const styles = StyleSheet.create({
     marginRight: 8,
     borderWidth: 1,
     borderRadius: 16,
-    borderColor: colors.gray3,
   },
   photo: {
     width: 75,