[C-3888] Add header-shadow to sign-up-screen (#7750)

AudiusProject · Feb 29, 2024 · 375f5b5 · 375f5b5
1 parent dbbbc88
commit 375f5b5
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 22 deletions.
diff --git a/.../src/screens/chat-screen/HeaderShadow.tsx → ...c/components/core/Screen/HeaderShadow.tsx b/.../src/screens/chat-screen/HeaderShadow.tsx → ...c/components/core/Screen/HeaderShadow.tsx
diff --git a/...bile/src/components/core/Screen/index.tsx → ...obile/src/components/core/Screen/index.ts b/...bile/src/components/core/Screen/index.tsx → ...obile/src/components/core/Screen/index.ts
@@ -3,3 +3,4 @@ export * from './SafeAreaScreen'
 export * from './ScreenContent'
 export * from './ScreenHeader'
 export * from './ScreenHeaderButton'
+export * from './HeaderShadow'
diff --git a/packages/mobile/src/screens/chat-screen/ChatListScreen.tsx b/packages/mobile/src/screens/chat-screen/ChatListScreen.tsx
@@ -7,7 +7,13 @@ import { useDispatch, useSelector } from 'react-redux'
 
 import { IconCompose, IconMessage } from '@audius/harmony-native'
 import Button, { ButtonType } from 'app/components/button'
-import { Text, Screen, FlatList, ScreenContent } from 'app/components/core'
+import {
+  Text,
+  Screen,
+  FlatList,
+  ScreenContent,
+  HeaderShadow
+} from 'app/components/core'
 import { useNavigation } from 'app/hooks/useNavigation'
 import type { AppTabScreenParamList } from 'app/screens/app-screen'
 import { makeStyles } from 'app/styles'
@@ -16,7 +22,6 @@ import { useThemePalette, useColor } from 'app/utils/theme'
 
 import { ChatListItem } from './ChatListItem'
 import { ChatListItemSkeleton } from './ChatListItemSkeleton'
-import { HeaderShadow } from './HeaderShadow'
 
 const { getChats, getChatsStatus, getHasMoreChats } = chatSelectors
 const { fetchMoreMessages, fetchLatestChats, fetchMoreChats } = chatActions

diff --git a/packages/mobile/src/screens/chat-screen/ChatScreen.tsx b/packages/mobile/src/screens/chat-screen/ChatScreen.tsx
@@ -35,6 +35,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { IconKebabHorizontal, IconMessage } from '@audius/harmony-native'
 import { BOTTOM_BAR_HEIGHT } from 'app/components/bottom-tab-bar'
 import {
+  HeaderShadow,
   KeyboardAvoidingView,
   Screen,
   ScreenContent,
@@ -59,7 +60,6 @@ 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_MIN_MESSAGES,

diff --git a/packages/mobile/src/screens/chat-screen/ChatUserListScreen.tsx b/packages/mobile/src/screens/chat-screen/ChatUserListScreen.tsx
@@ -23,13 +23,18 @@ import { useDebounce } from 'react-use'
 
 import { IconCompose, IconSearch } from '@audius/harmony-native'
 import MagnifyingGlass from 'app/assets/images/leftPointingMagnifyingGlass.png'
-import { Screen, ScreenContent, Text, TextInput } from 'app/components/core'
+import {
+  Screen,
+  ScreenContent,
+  Text,
+  TextInput,
+  HeaderShadow
+} from 'app/components/core'
 import LoadingSpinner from 'app/components/loading-spinner'
 import { useRoute } from 'app/hooks/useRoute'
 import { makeStyles } from 'app/styles'
 
 import { ChatUserListItem } from './ChatUserListItem'
-import { HeaderShadow } from './HeaderShadow'
 
 const { getAccountUser } = accountSelectors
 const { searchUsers } = searchUsersModalActions

diff --git a/packages/mobile/src/screens/sign-on-screen/components/layout.tsx b/packages/mobile/src/screens/sign-on-screen/components/layout.tsx
@@ -12,7 +12,7 @@ import type {
   ButtonProps
 } from '@audius/harmony-native'
 import { Button, Flex, Paper, Text, useTheme } from '@audius/harmony-native'
-import { KeyboardAvoidingView } from 'app/components/core'
+import { KeyboardAvoidingView, HeaderShadow } from 'app/components/core'
 
 const messages = {
   continue: 'Continue'
@@ -41,22 +41,25 @@ export const Page = (props: PageProps) => {
   }
 
   return (
-    // 1 zIndex is to appear below
-    <Flex
-      {...layoutProps}
-      style={[
-        css({
-          zIndex: 1,
-          minHeight:
-            Dimensions.get('window').height - insets.top - insets.bottom,
-          paddingBottom: insets.bottom
-        }),
-        style
-      ]}
-      {...other}
-    >
-      {children}
-    </Flex>
+    <>
+      <HeaderShadow />
+      {/* // 1 zIndex is to appear below */}
+      <Flex
+        {...layoutProps}
+        style={[
+          css({
+            zIndex: 1,
+            minHeight:
+              Dimensions.get('window').height - insets.top - insets.bottom,
+            paddingBottom: insets.bottom
+          }),
+          style
+        ]}
+        {...other}
+      >
+        {children}
+      </Flex>
+    </>
   )
 }