From d012240271e68e139e09ae378d93305c3e80cf55 Mon Sep 17 00:00:00 2001
From: Michael Piazza <michael.piazza.mp@gmail.com>
Date: Fri, 2 Jun 2023 15:34:26 -0400
Subject: [PATCH] [PAY-1318] Missing Shadow and Space Between Divider and
 Header (#3500)

---
 .../screens/chat-screen/ChatListScreen.tsx    |  8 ++----
 .../src/screens/chat-screen/ChatScreen.tsx    |  2 ++
 .../src/screens/chat-screen/HeaderShadow.tsx  | 26 +++++++++++++++++++
 packages/mobile/src/utils/zIndex.ts           |  3 ++-
 4 files changed, 32 insertions(+), 7 deletions(-)
 create mode 100644 packages/mobile/src/screens/chat-screen/HeaderShadow.tsx

diff --git a/packages/mobile/src/screens/chat-screen/ChatListScreen.tsx b/packages/mobile/src/screens/chat-screen/ChatListScreen.tsx
index 63d0d48b196..6b52f7c0dfc 100644
--- a/packages/mobile/src/screens/chat-screen/ChatListScreen.tsx
+++ b/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)
diff --git a/packages/mobile/src/screens/chat-screen/ChatScreen.tsx b/packages/mobile/src/screens/chat-screen/ChatScreen.tsx
index 48ea137fe76..67ecd9bcb11 100644
--- a/packages/mobile/src/screens/chat-screen/ChatScreen.tsx
+++ b/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 ? (
diff --git a/packages/mobile/src/screens/chat-screen/HeaderShadow.tsx b/packages/mobile/src/screens/chat-screen/HeaderShadow.tsx
new file mode 100644
index 00000000000..0dd3470967a
--- /dev/null
+++ b/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} />
+}
diff --git a/packages/mobile/src/utils/zIndex.ts b/packages/mobile/src/utils/zIndex.ts
index 85dbf7957af..f3bd62ee42b 100644
--- a/packages/mobile/src/utils/zIndex.ts
+++ b/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
 }