fix: suggestions background

Author: isekovanic

package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx

@@ -73,7 +73,7 @@ export const CommandSuggestionItem = (item: CommandSuggestion) => {
   const { args, name } = item;
   const {
     theme: {
-      colors: { black, grey },
+      semantics,
       messageInput: {
         suggestions: {
           command: { args: argsStyle, container: commandContainer, title },
@@ -86,10 +86,16 @@ export const CommandSuggestionItem = (item: CommandSuggestion) => {
   return (
     <View style={[styles.commandContainer, commandContainer]}>
       {name ? <AutoCompleteSuggestionCommandIcon name={name} /> : null}
-      <Text style={[styles.title, { color: black }, title]} testID='commands-item-title'>
+      <Text
+        style={[styles.title, { color: semantics.textPrimary }, title]}
+        testID='commands-item-title'
+      >
         {(name || '').replace(/^\w/, (char) => char.toUpperCase())}
       </Text>
-      <Text style={[styles.args, { color: grey }, argsStyle]} testID='commands-item-args'>
+      <Text
+        style={[styles.args, { color: semantics.textTertiary }, argsStyle]}
+        testID='commands-item-args'
+      >
         {`/${name} ${args}`}
       </Text>
     </View>

package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx

@@ -62,7 +62,6 @@ export const AutoCompleteSuggestionList = ({
 
   const {
     theme: {
-      colors: { black, white },
       messageInput: {
         container: { maxHeight },
       },
@@ -106,7 +105,7 @@ export const AutoCompleteSuggestionList = ({
         onEndReached={loadMore}
         onEndReachedThreshold={0.1}
         renderItem={renderItem}
-        style={[styles.flatlist, { backgroundColor: white, maxHeight, shadowColor: black }]}
+        style={[styles.flatlist, { maxHeight }]}
         testID={'auto-complete-suggestion-list'}
       />
     </Animated.View>
@@ -132,6 +131,8 @@ const useStyles = () => {
           borderColor: semantics.borderCoreDefault,
         },
         flatlist: {
+          backgroundColor: semantics.composerBg,
+          shadowColor: semantics.accentBlack,
           borderRadius: 8,
           elevation: 3,
           marginHorizontal: 8,