Profiles polish (#3269)

* Improve GIF playback speed on ProMotion devices Bumps react-native-fast-image's SDWebImage dependency to include this change: SDWebImage/SDWebImage#3280 There's still an issue where if a GIF is in a sheet and you're dragging the sheet, the speed changes while dragging, but otherwise this fixes the issue * Update TintButton styles * Adjust colors * Remove SearchFab * Clean up avatar, cover styles * Clean up discover * Fix wallet sheet "Watching" badge positioning, improve styles * Design system: add sizing, spacing values * Design system: adjust shadows and text, add text sizes * Clean up profiles * owner = registrant, manager = controller * Clean up copy * Fix ActionButton types * Account for reversed colors in lightGreyTransparent gradient * Polish intro screen, SelectENSSheet * Remove unused ColorModeProvider * Clean up discover search, ENS avatar shadows * Fix send contact list scrollview bounds KeyboardArea height was wrong, was causing watched wallets to be cut off by the keyboard * Fix swap button color regression Caused by https://github.com/rainbow-me/rainbow/pull/2989/files#diff-5408fa5b27b810b3ad4777e8659d9dc65f602f803134286fe1bac59167397c71R314 * Improve profiles status bar handling Fixes most cases where the status bar displays in the wrong color * Polish search component * Adjust gas button fee copy * Clean up ENS search screen * Clean up create profile screen, reorder records * Partially clean up confirm registration sheets * Add more intro screen wallets * Adjust intro screen content layout, fix MaskedView type warning * Improve profiles sheet transitions * Disable shortForm profile preview sheet after transition to longForm, adjust height * Fix Telegram record * Clean up ENS expanded state * Don't goBack() when editing an ENS name from the NFT expanded state * Fix missing NFT expanded state background images lowResUrl is more predictably a standard image file * Remove unused isENS on ZoomableWrapper * Fix ZoomableWrapper status bar handling * Prevent pinch to enter ZoomableWrappers on profiles * Use blurred background image in ImagePreviewOverlay, position overlay properly within sheets * Make sure ZoomableWrapper GestureBlocker covers the screen Fixes a bug where you could dismiss the sheet from the zoomed state of ZoomableWrapper by dragging from certain points * Remove unnecessary zIndex transition Seems to make the animation slightly less smooth, behavior is otherwise the same with or without this being set * Make ZoomableWrapper pan speed consistent Previously wasn't accounting for differing scale factors * Set ZoomableWrapper bounds correctly within sheets * Design system: use hex codes for solid colors * Match disabled step button color to spec * lint * comments Co-authored-by: Esteban Miño <efmino@uc.cl>
rainbow-me · Apr 28, 2022 · 701dc8c · 701dc8c
1 parent 1076bf7
commit 701dc8c
Show file tree

Hide file tree

Showing 81 changed files with 1,125 additions and 760 deletions.
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -508,7 +508,7 @@ PODS:
     - React
   - RNFastImage (8.5.11):
     - React-Core
-    - SDWebImage (~> 5.11.1)
+    - SDWebImage (~> 5.12.5)
     - SDWebImageWebPCoder (~> 0.8.4)
   - RNFBApp (14.7.0):
     - Firebase/CoreOnly (= 8.14.0)
@@ -590,9 +590,9 @@ PODS:
     - React-Core
   - RNTextSize (4.0.0-rc.1):
     - React
-  - SDWebImage (5.11.1):
-    - SDWebImage/Core (= 5.11.1)
-  - SDWebImage/Core (5.11.1)
+  - SDWebImage (5.12.5):
+    - SDWebImage/Core (= 5.12.5)
+  - SDWebImage/Core (5.12.5)
   - SDWebImageWebPCoder (0.8.4):
     - libwebp (~> 1.0)
     - SDWebImage/Core (~> 5.10)
@@ -1076,7 +1076,7 @@ SPEC CHECKSUMS:
   RNCMaskedView: c298b644a10c0c142055b3ae24d83879ecb13ccd
   RNDeviceInfo: 6f20764111df002b4484f90cbe0a861be29bcc6c
   RNExitApp: c4e052df2568b43bec8a37c7cd61194d4cfee2c3
-  RNFastImage: 1f2cab428712a4baaf78d6169eaec7f622556dd7
+  RNFastImage: 945abf54742505d790d9024d230c69b1e866bc88
   RNFBApp: 097a31d372b3db15b41c7a1a5c429433b0609e12
   RNFBCrashlytics: 4ec9aae1a1dbb6572d095417392483bec82b07bb
   RNFBMessaging: 06a7a73883f3f43da61507dbfcf4db2245c22869
@@ -1097,7 +1097,7 @@ SPEC CHECKSUMS:
   RNStoreReview: 62d6afd7c37db711a594bbffca6b0ea3a812b7a8
   RNSVG: 91e9ee67766408d08cb08f5bd80cd57c9d2a6691
   RNTextSize: 21c94a67819fbf2c358a219bf6d251e3be9e5f29
-  SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
+  SDWebImage: 0905f1b7760fc8ac4198cae0036600d67478751e
   SDWebImageWebPCoder: f93010f3f6c031e2f8fb3081ca4ee6966c539815
   Sentry: 0c5cd63d714187b4a39c331c1f0eb04ba7868341
   Shimmer: c5374be1c2b0c9e292fb05b339a513cf291cac86

diff --git a/patches/react-native-fast-image+8.5.11.patch b/patches/react-native-fast-image+8.5.11.patch
@@ -0,0 +1,12 @@
+diff --git a/node_modules/react-native-fast-image/RNFastImage.podspec b/node_modules/react-native-fast-image/RNFastImage.podspec
+index db0fada..54d8d5b 100644
+--- a/node_modules/react-native-fast-image/RNFastImage.podspec
++++ b/node_modules/react-native-fast-image/RNFastImage.podspec
+@@ -16,6 +16,6 @@ Pod::Spec.new do |s|
+   s.source_files  = "ios/**/*.{h,m}"
+
+   s.dependency 'React-Core'
+-  s.dependency 'SDWebImage', '~> 5.11.1'
++  s.dependency 'SDWebImage', '~> 5.12.5'
+   s.dependency 'SDWebImageWebPCoder', '~> 0.8.4'
+ end
diff --git a/src/components/buttons/TintButton.tsx b/src/components/buttons/TintButton.tsx
@@ -1,10 +1,14 @@
 import React, { ReactNode } from 'react';
 import { ButtonProps } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
 import { TextColor } from '../../design-system/typography/typography';
 import ButtonPressAnimation from '../animations/ButtonPressAnimation';
-import { useTheme } from '@rainbow-me/context';
-import { Box, Cover, Text } from '@rainbow-me/design-system';
+import {
+  AccentColorProvider,
+  Box,
+  Cover,
+  Text,
+  useForegroundColor,
+} from '@rainbow-me/design-system';
 
 const TintButton = ({
   children,
@@ -19,7 +23,7 @@ const TintButton = ({
   color: TextColor;
   testID?: string;
 }) => {
-  const { colors } = useTheme();
+  const secondary06 = useForegroundColor('secondary06');
 
   const height = 56;
 
@@ -39,17 +43,16 @@ const TintButton = ({
       testID={testID}
     >
       <Cover>
-        <Box
-          alignItems="center"
-          as={LinearGradient}
-          borderRadius={46}
-          colors={colors.gradients.transparentToLightGrey}
-          end={{ x: 0.6, y: 0 }}
-          height={`${height}px`}
-          justifyContent="center"
-          start={{ x: 0, y: 0.6 }}
-          width="full"
-        />
+        <AccentColorProvider color={secondary06}>
+          <Box
+            alignItems="center"
+            background="accent"
+            borderRadius={46}
+            height={`${height}px`}
+            justifyContent="center"
+            width="full"
+          />
+        </AccentColorProvider>
       </Cover>
       <Text color={color} size="20px" weight="heavy">
         {children}

diff --git a/src/components/buttons/hold-to-authorize/HoldToAuthorizeButton.js b/src/components/buttons/hold-to-authorize/HoldToAuthorizeButton.js
@@ -67,7 +67,7 @@ const Label = styled(BiometricButtonContent).attrs(
     weight: 'heavy',
   })
 )({
-  bottom: 2,
+  bottom: 1,
 });
 
 const LoadingSpinner = styled(android ? Spinner : ActivityIndicator).attrs(
@@ -296,7 +296,6 @@ class HoldToAuthorizeButton extends PureComponent {
 const HoldToAuthorizeButtonWithBiometrics = ({
   disableLongPress,
   label,
-  color,
   ...props
 }) => {
   const biometryType = useBiometryType();
@@ -311,7 +310,6 @@ const HoldToAuthorizeButtonWithBiometrics = ({
   return (
     <HoldToAuthorizeButton
       {...props}
-      backgroundColor={color}
       colors={colors}
       deviceDimensions={deviceDimensions}
       enableLongPress={!disableLongPress && isLongPressAvailableForBiometryType}

diff --git a/src/components/change-wallet/AddressRow.js b/src/components/change-wallet/AddressRow.js
@@ -52,7 +52,8 @@ const sx = StyleSheet.create({
   gradient: {
     alignSelf: 'center',
     borderRadius: 24,
-    height: 24,
+    height: 26,
+    justifyContent: 'center',
     marginLeft: 19,
     textAlign: 'center',
   },
@@ -80,12 +81,11 @@ const StyledBottomRowText = styled(BottomRowText)({
 
 const ReadOnlyText = styled(Text).attrs({
   align: 'center',
-  letterSpacing: 'roundedTight',
-  lineHeight: 'paragraphSmall',
+  letterSpacing: 'roundedMedium',
+  size: 'smedium',
   weight: 'semibold',
 })({
-  paddingHorizontal: 6.5,
-  paddingVertical: 1,
+  paddingHorizontal: 8,
 });
 
 const OptionsIcon = ({ onPress }) => {
@@ -122,7 +122,7 @@ export default function AddressRow({
     walletId,
   } = data;
 
-  const { colors } = useTheme();
+  const { colors, isDarkMode } = useTheme();
 
   let cleanedUpBalance = balance;
   if (balance === '0.00') {
@@ -142,13 +142,13 @@ export default function AddressRow({
     () => ({
       ...gradientProps,
       colors: [
-        colors.alpha(colors.gradients.lightGrey[0], 0.6),
-        colors.gradients.lightGrey[1],
+        colors.alpha(colors.blueGreyDark, 0.03),
+        colors.alpha(colors.blueGreyDark, isDarkMode ? 0.02 : 0.06),
       ],
       end: { x: 1, y: 1 },
       start: { x: 0, y: 0 },
     }),
-    [colors]
+    [colors, isDarkMode]
   );
 
   return (

diff --git a/src/components/contacts/ContactRow.js b/src/components/contacts/ContactRow.js
@@ -51,9 +51,15 @@ const ContactName = styled(TruncatedText).attrs(({ lite }) => ({
   width: ({ deviceWidth }) => deviceWidth - 90,
 });
 
-const css = margin.object(6, 19, 13);
+const css = {
+  default: margin.object(6, 19, 13),
+  symmetrical: margin.object(9.5, 19),
+};
 
-const ContactRow = ({ address, color, nickname, ...props }, ref) => {
+const ContactRow = (
+  { address, color, nickname, symmetricalMargins, ...props },
+  ref
+) => {
   const { width: deviceWidth } = useDimensions();
   const { colors } = useTheme();
   const {
@@ -107,7 +113,7 @@ const ContactRow = ({ address, color, nickname, ...props }, ref) => {
       <RowWithMargins
         height={40}
         margin={10}
-        style={css}
+        style={symmetricalMargins ? css.symmetrical : css.default}
         testID={`${testID}-contact-row-${
           removeFirstEmojiFromString(nickname) || ''
         }`}

diff --git a/src/components/contacts/ImageAvatar.js b/src/components/contacts/ImageAvatar.js
@@ -10,7 +10,11 @@ const buildSmallShadows = (color, colors) => [
   [0, 6, 10, colors.avatarBackgrounds[color] || color, 0.2],
 ];
 
-const sizeConfigs = colors => ({
+const sizeConfigs = (colors, isDarkMode) => ({
+  header: {
+    dimensions: 34,
+    textSize: 'large',
+  },
   large: {
     dimensions: 65,
     shadow: [
@@ -29,15 +33,13 @@ const sizeConfigs = colors => ({
   },
   medium: {
     dimensions: 40,
-    shadow: [
-      [0, 4, 6, colors.shadow, 0.04],
-      [0, 1, 3, colors.shadow, 0.08],
-    ],
+    shadow: [[0, 4, 12, colors.shadow, isDarkMode ? 0.3 : 0.15]],
     textSize: 'larger',
   },
   small: {
-    dimensions: 34,
-    textSize: 'large',
+    dimensions: 30,
+    shadow: [[0, 3, 9, colors.shadow, 0.1]],
+    textSize: 'lmedium',
   },
   smaller: {
     dimensions: 20,
@@ -51,15 +53,15 @@ const Avatar = styled(ImgixImage)(({ dimensions }) => ({
 }));
 
 const ImageAvatar = ({ image, size = 'medium', ...props }) => {
-  const { colors } = useTheme();
-  const { dimensions, shadow } = useMemo(() => sizeConfigs(colors)[size], [
-    colors,
-    size,
-  ]);
+  const { colors, isDarkMode } = useTheme();
+  const { dimensions, shadow } = useMemo(
+    () => sizeConfigs(colors, isDarkMode)[size],
+    [colors, isDarkMode, size]
+  );
 
   const shadows = useMemo(
     () =>
-      size === 'small' || size === 'smaller'
+      size === 'header' || size === 'smaller'
         ? buildSmallShadows(colors.shadow, colors)
         : shadow,
     [shadow, size, colors]

diff --git a/src/components/discover-sheet/DiscoverSearch.js b/src/components/discover-sheet/DiscoverSearch.js
@@ -57,6 +57,8 @@ export default function DiscoverSearch() {
     uniswapCurrencyListLoading,
   } = useUniswapCurrencyList(searchQueryForSearch);
 
+  const { colors } = useTheme();
+
   const currencyList = useMemo(() => [...uniswapCurrencyList, ...ensResults], [
     uniswapCurrencyList,
     ensResults,
@@ -133,20 +135,23 @@ export default function DiscoverSearch() {
     [handleActionAsset, handlePress]
   );
 
-  const addEnsResults = useCallback(ensResults => {
-    let ensSearchResults = [];
-    if (ensResults && ensResults.length) {
-      ensSearchResults = [
-        {
-          color: '#5893ff',
-          data: ensResults,
-          key: `􀏼 ${lang.t('discover.search.ethereum_name_service')}`,
-          title: `􀏼 ${lang.t('discover.search.ethereum_name_service')}`,
-        },
-      ];
-    }
-    setEnsResults(ensSearchResults);
-  }, []);
+  const addEnsResults = useCallback(
+    ensResults => {
+      let ensSearchResults = [];
+      if (ensResults && ensResults.length) {
+        ensSearchResults = [
+          {
+            color: colors.appleBlue,
+            data: ensResults,
+            key: `􀉮 ${lang.t('discover.search.profiles')}`,
+            title: `􀉮 ${lang.t('discover.search.profiles')}`,
+          },
+        ];
+      }
+      setEnsResults(ensSearchResults);
+    },
+    [colors.appleBlue]
+  );
 
   useEffect(() => {
     const searching = searchQuery !== '';
@@ -200,6 +205,7 @@ export default function DiscoverSearch() {
           loading={uniswapCurrencyListLoading || isFetchingEns}
           query={searchQueryForSearch}
           ref={currencySelectionListRef}
+          scrollIndicatorInsets={{ bottom: 53, top: 8 }}
           showList
           testID="discover-currency-select-list"
           type={CurrencySelectionTypes.output}

diff --git a/src/components/discover-sheet/DiscoverSheetContent.js b/src/components/discover-sheet/DiscoverSheetContent.js
@@ -10,12 +10,14 @@ import styled from '@rainbow-me/styled-components';
 
 const HeaderTitle = styled(Text).attrs(({ theme: { colors } }) => ({
   align: 'center',
-  color: colors.alpha(colors.blueGreyDark, 0.8),
+  color: colors.dark,
   letterSpacing: 'roundedMedium',
   lineHeight: 'loose',
   size: 'large',
   weight: 'heavy',
-}))({});
+}))({
+  marginTop: 2,
+});
 
 const Spacer = styled.View({
   height: 16,

diff --git a/src/components/discover-sheet/DiscoverSheetHeader.js b/src/components/discover-sheet/DiscoverSheetHeader.js
@@ -195,12 +195,7 @@ export default function DiscoverSheetHeader(props) {
         onPress={() => !isSearchModeEnabled && navigate(Routes.WALLET_SCREEN)}
         translateX={android ? 4 : 5}
       >
-        <Icon
-          color={colors.alpha(colors.blueGreyDark, 0.8)}
-          direction="left"
-          name="caret"
-          {...props}
-        />
+        <Icon color={colors.dark} direction="left" name="caret" {...props} />
         <Icon
           color={colors.whiteLabel}
           direction="left"
@@ -215,11 +210,7 @@ export default function DiscoverSheetHeader(props) {
         left={18.5}
         onPress={handleScannerPress}
       >
-        <Icon
-          bottom={1}
-          color={colors.alpha(colors.blueGreyDark, 0.8)}
-          name="scanner"
-        />
+        <Icon bottom={1} color={colors.dark} name="scanner" />
         <Icon bottom={1} color={colors.whiteLabel} name="scanner" />
       </Stack>
     </Header>

diff --git a/src/components/discover-sheet/PulseIndexSection.js b/src/components/discover-sheet/PulseIndexSection.js
@@ -167,7 +167,7 @@ const PulseIndex = () => {
             color={colors.dpiLight}
             numberOfLines={1}
             size="smedium"
-            weight="semibold"
+            weight="bold"
           >
             Trading at{' '}
             <Text
@@ -194,7 +194,7 @@ const PulseIndex = () => {
               align="right"
               color={item.isPositive ? colors.green : colors.red}
               size="smedium"
-              weight="semibold"
+              weight="bold"
             >
               {' '}
               {lang.t('discover.pulse.today_suffix')}