Profiles: More pixel pushing for small devices

src/components/ens-profile/ProfileAvatar/ProfileAvatar.tsx

@@ -7,7 +7,9 @@ import AvatarCoverPhotoMaskSvg from '../../svg/AvatarCoverPhotoMaskSvg';
 import { BackgroundProvider, Box, Cover } from '@rainbow-me/design-system';
 import { useFadeImage } from '@rainbow-me/hooks';
 import { ImgixImage } from '@rainbow-me/images';
+import { sharedCoolModalTopOffset } from '@rainbow-me/navigation/config';
 
+const imagePreviewOverlayTopOffset = ios ? 68 + sharedCoolModalTopOffset : 107;
 const size = 70;
 
 export default function ProfileAvatar({
@@ -58,7 +60,7 @@ export default function ProfileAvatar({
           hideStatusBar={false}
           imageUrl={avatarUrl || ''}
           onPress={handleOnPress}
-          topOffset={ios ? 112 : 107}
+          topOffset={imagePreviewOverlayTopOffset}
         >
           <>
             {showSkeleton && (

src/components/ens-profile/ProfileCover/ProfileCover.tsx

@@ -7,6 +7,9 @@ import Skeleton from '../../skeleton/Skeleton';
 import { Box, useForegroundColor } from '@rainbow-me/design-system';
 import { useFadeImage } from '@rainbow-me/hooks';
 import { ImgixImage } from '@rainbow-me/images';
+import { sharedCoolModalTopOffset } from '@rainbow-me/navigation/config';
+
+const imagePreviewOverlayTopOffset = ios ? 68 + sharedCoolModalTopOffset : 107;
 
 export default function ProfileCover({
   coverUrl,
@@ -73,7 +76,7 @@ export default function ProfileCover({
             hideStatusBar={false}
             imageUrl={coverUrl || ''}
             onPress={handleOnPress}
-            topOffset={ios ? 112 : 107}
+            topOffset={imagePreviewOverlayTopOffset}
           >
             <Box
               as={ImgixImage}

src/components/images/ImagePreviewOverlay.tsx

@@ -404,7 +404,7 @@ export function ImagePreviewOverlayTarget({
   disableEnteringWithPinch = false,
   enableZoomOnPress = true,
   hasShadow = false,
-  height: initialHeight,
+  height: givenHeight,
   hideStatusBar = true,
   imageUrl = '',
   onPress,
@@ -433,7 +433,8 @@ export function ImagePreviewOverlayTarget({
       uri?: never;
     }
 )) {
-  const { enableZoom } = useContext(ImageOverlayConfigContext);
+  const { enableZoom: enableZoom_ } = useContext(ImageOverlayConfigContext);
+  const enableZoom = enableZoom_ && imageUrl;
 
   const id = useMemo(() => uniqueId(), []);
 
@@ -567,7 +568,13 @@ export function ImagePreviewOverlayTarget({
     <Box flexShrink={1} width="full">
       <Box
         borderRadius={borderRadius}
-        height={height ? { custom: height } : initialHeight || { custom: 0 }}
+        height={
+          givenHeight
+            ? givenHeight
+            : height
+            ? { custom: height }
+            : { custom: 0 }
+        }
         onLayout={handleLayout}
         ref={zoomableWrapperRef}
         style={{ opacity: renderPlaceholder ? 1 : 0, overflow: 'hidden' }}

src/screens/ENSAssignRecordsSheet.tsx

@@ -51,6 +51,7 @@ import {
   textRecordFields,
 } from '@rainbow-me/helpers/ens';
 import {
+  useDimensions,
   useENSModifiedRegistration,
   useENSRegistration,
   useENSRegistrationCosts,
@@ -62,11 +63,13 @@ import {
 } from '@rainbow-me/hooks';
 import Routes from '@rainbow-me/routes';
 
-export const BottomActionHeight = ios ? 281 : 250;
+const BottomActionHeight = ios ? 281 : 250;
+const BottomActionHeightSmall = 215;
 
 export default function ENSAssignRecordsSheet() {
   const { params } = useRoute<any>();
   const { colors } = useTheme();
+  const { isSmallPhone } = useDimensions();
   const { name } = useENSRegistration();
   const {
     images: { avatarUrl: initialAvatarUrl },
@@ -115,6 +118,10 @@ export default function ENSAssignRecordsSheet() {
     avatarImage
   );
 
+  const bottomActionHeight = isSmallPhone
+    ? BottomActionHeightSmall
+    : BottomActionHeight;
+
   useFocusEffect(() => {
     if (dominantColor || (!dominantColor && !avatarImage)) {
       setAccentColor(dominantColor || colors.purple);
@@ -165,7 +172,7 @@ export default function ENSAssignRecordsSheet() {
       <Box
         background="body"
         flexGrow={1}
-        style={{ paddingBottom: BottomActionHeight + 20 }}
+        style={{ paddingBottom: bottomActionHeight + 20 }}
       >
         <Stack space="19px">
           <RegistrationCover
@@ -227,6 +234,7 @@ export function ENSAssignRecordsBottomActions({
   currentRouteName: string;
 }) {
   const { navigate, goBack } = useNavigation();
+  const { isSmallPhone } = useDimensions();
   const keyboardHeight = useKeyboardHeight();
   const { colors } = useTheme();
   const [accentColor, setAccentColor] = useRecoilState(accentColorAtom);
@@ -288,9 +296,13 @@ export function ENSAssignRecordsBottomActions({
     }
   }, [defaultVisible, mode, profileQuery.isSuccess]);
 
+  const bottomActionHeight = isSmallPhone
+    ? BottomActionHeightSmall
+    : BottomActionHeight;
+
   const animatedStyle = useAnimatedStyle(() => {
     return {
-      bottom: withSpring(visible ? 0 : -BottomActionHeight - 10, {
+      bottom: withSpring(visible ? 0 : -bottomActionHeight - 10, {
         damping: 40,
         mass: 1,
         stiffness: 420,
@@ -318,14 +330,11 @@ export function ENSAssignRecordsBottomActions({
         style={[animatedStyle, { position: 'absolute', width: '100%' }]}
       >
         <AccentColorProvider color={accentColor}>
-          <Box
-            paddingBottom="19px"
-            style={useMemo(() => ({ height: BottomActionHeight }), [])}
-          >
+          <Box paddingBottom="19px" style={{ height: bottomActionHeight }}>
             {ios ? <Shadow /> : null}
             <Rows>
               <Row>
-                <Inset horizontal="19px" top="30px">
+                <Inset horizontal="19px" top={isSmallPhone ? '19px' : '30px'}>
                   <SelectableAttributesButtons
                     navigateToAdditionalRecords={navigateToAdditionalRecords}
                     onAddField={onAddField}
@@ -344,7 +353,7 @@ export function ENSAssignRecordsBottomActions({
                       }
                     : {
                         ignorePaddingBottom: true,
-                        paddingBottom: 36,
+                        paddingBottom: isSmallPhone ? 0 : 36,
                       })}
                 >
                   {hasBackButton && (

src/screens/ProfileSheet.tsx

@@ -4,7 +4,6 @@ import React, { createContext, useEffect, useMemo } from 'react';
 import { StatusBar } from 'react-native';
 import RecyclerAssetList2 from '../components/asset-list/RecyclerAssetList2';
 import ProfileSheetHeader from '../components/ens-profile/ProfileSheetHeader';
-import { SheetHandleFixedToTopHeight } from '../components/sheet';
 import Skeleton from '../components/skeleton/Skeleton';
 import { useTheme } from '@rainbow-me/context';
 import {
@@ -27,6 +26,7 @@ import {
   useFirstTransactionTimestamp,
   usePersistentDominantColorFromImage,
 } from '@rainbow-me/hooks';
+import { sharedCoolModalTopOffset } from '@rainbow-me/navigation/config';
 import Routes from '@rainbow-me/routes';
 import { addressHashedColorIndex } from '@rainbow-me/utils/profileUtils';
 
@@ -42,7 +42,7 @@ export default function ProfileSheet() {
   const { accountAddress } = useAccountSettings();
 
   const { height: deviceHeight } = useDimensions();
-  const contentHeight = deviceHeight - SheetHandleFixedToTopHeight;
+  const contentHeight = deviceHeight - sharedCoolModalTopOffset;
 
   const ensName = params?.address;
   const { isSuccess } = useENSProfile(ensName);