[PAY-1318] Missing Shadow and Space Between Divider and Header (#3500)

packages/mobile/src/screens/chat-screen/ChatListScreen.tsx

@@ -16,6 +16,7 @@ import { useThemePalette, useColor } from 'app/utils/theme'
 
 import { ChatListItem } from './ChatListItem'
 import { ChatListItemSkeleton } from './ChatListItemSkeleton'
+import { HeaderShadow } from './HeaderShadow'
 
 const { getChats, getChatsStatus } = chatSelectors
 const { fetchMoreMessages, fetchMoreChats } = chatActions
@@ -74,11 +75,6 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
   },
   writeMessageButton: {
     marginTop: spacing(6)
-  },
-  shadow: {
-    borderBottomColor: palette.neutralLight6,
-    borderBottomWidth: 3,
-    borderBottomLeftRadius: 1
   }
 }))
 
@@ -150,7 +146,7 @@ export const ChatListScreen = () => {
       topbarRight={iconCompose}
     >
       <ScreenContent>
-        <View style={styles.shadow} />
+        <HeaderShadow />
         <View style={styles.rootContainer}>
           {isLoadingFirstTime ? (
             Array(4)

packages/mobile/src/screens/chat-screen/ChatScreen.tsx

@@ -54,6 +54,7 @@ import { ChatMessageSeparator } from './ChatMessageSeparator'
 import { ChatTextInput } from './ChatTextInput'
 import { ChatUnavailable } from './ChatUnavailable'
 import { EmptyChatMessages } from './EmptyChatMessages'
+import { HeaderShadow } from './HeaderShadow'
 import { ReactionPopup } from './ReactionPopup'
 import { END_REACHED_OFFSET } from './constants'
 
@@ -506,6 +507,7 @@ export const ChatScreen = () => {
       topbarRight={topBarRight}
     >
       <ScreenContent>
+        <HeaderShadow />
         {/* Everything inside the portal displays on top of all other screen contents. */}
         <Portal hostName='ChatReactionsPortal'>
           {canSendMessage && shouldShowPopup && popupMessage ? (

packages/mobile/src/screens/chat-screen/HeaderShadow.tsx

@@ -0,0 +1,26 @@
+import { View } from 'react-native'
+
+import { makeStyles } from 'app/styles'
+import { zIndex } from 'app/utils/zIndex'
+
+const useStyles = makeStyles(({ palette }) => ({
+  shadow: {
+    height: 1,
+    borderBottomWidth: 0,
+    backgroundColor: palette.neutralLight8,
+    shadowColor: 'black',
+    shadowOpacity: 0.3,
+    shadowRadius: 3,
+    zIndex: zIndex.HEADER_SHADOW,
+    shadowOffset: { width: 0, height: 2 }
+  }
+}))
+
+/**
+ * Hack: temporary component to add a shadow below mobile headers for DMs.
+ * TODO: delete this and implement app wide header shadows [C-2709]
+ */
+export const HeaderShadow = () => {
+  const styles = useStyles()
+  return <View style={styles.shadow} />
+}

packages/mobile/src/utils/zIndex.ts

@@ -4,5 +4,6 @@ export enum zIndex {
   PREMIUM_TRACK_TILE_CORNER_TAG = 3,
   CHAT_REACTIONS_POPUP_DIM_BACKGROUND = 10,
   CHAT_REACTIONS_POPUP_CLOSE_PRESSABLES = 20,
-  CHAT_REACTIONS_POPUP_CONTENT = 30
+  CHAT_REACTIONS_POPUP_CONTENT = 30,
+  HEADER_SHADOW = 10
 }