Feat/new contrast selection cls (#1760)

apps/ledger-live-mobile/src/components/CustomImage/BottomButtonsContainer.tsx

@@ -3,6 +3,7 @@ import styled from "styled-components/native";
 
 const BottomButtonsContainer = styled(Flex).attrs({
   flexDirection: "column",
+  alignItems: "center",
   alignSelf: "stretch",
   padding: 6,
   pb: 8,

apps/ledger-live-mobile/src/components/CustomImage/ContrastChoice.tsx

@@ -1,62 +1,56 @@
-import { Box, Icons, InfiniteLoader } from "@ledgerhq/native-ui";
+import { Box, InfiniteLoader } from "@ledgerhq/native-ui";
 import React from "react";
 import styled from "styled-components/native";
 
 type Props = {
-  color: string;
+  color: { topLeft: string; bottomRight: string };
   selected: boolean;
   loading?: boolean;
+  isFirst?: boolean;
+  isLast?: boolean;
 };
 
 const Container = styled(Box).attrs((p: { selected: boolean }) => ({
-  height: 64,
-  width: 64,
+  height: 50,
+  width: 50,
+  borderRadius: "4px",
   justifyContent: "center",
   alignItems: "center",
-  borderWidth: p.selected ? 2 : 1,
-  borderColor: p.selected ? "primary.c80" : "neutral.c40",
-  borderRadius: "4px",
+  borderWidth: p.selected ? 2 : 0,
+  borderColor: p.selected ? "constant.white" : "neutral.c40",
 }))<{ selected: boolean }>``;
 
-const Round = styled(Box).attrs({
-  height: 28,
-  width: 28,
-  borderRadius: 28,
-})``;
-
-const PillBackground = styled(Box).attrs({
-  height: "20px",
-  width: "20px",
-  backgroundColor: "background.main",
-})``;
-
-const PillForeground = styled(Icons.CircledCheckSolidMedium).attrs({
-  color: "primary.c80",
-  size: "20px",
+const ContrastOption = styled(Box).attrs({
+  borderRadius: "4px",
+  height: 48,
+  width: 48,
+  overflow: "hidden",
 })``;
 
-const CheckContainer = styled(Box).attrs({
-  position: "absolute",
-  right: "-10px",
-  top: "-10px",
+const Triangle = styled(Box).attrs({
+  width: 0,
+  height: 0,
+  backgroundColor: "transparent",
+  borderRightWidth: 48,
+  borderTopWidth: 48,
+  borderRightColor: "transparent",
 })``;
 
-const CheckPill: React.FC<Record<string, never>> = () => (
-  <CheckContainer>
-    <PillBackground>
-      <PillForeground />
-    </PillBackground>
-  </CheckContainer>
-);
-
-const ContrastChoice: React.FC<Props> = ({ loading, selected, color }) => (
-  <Container selected={selected}>
+const ContrastChoice: React.FC<Props> = ({
+  loading,
+  selected,
+  color,
+  isFirst,
+  isLast,
+}) => (
+  <Container ml={isFirst ? 0 : 1} mr={isLast ? 0 : 1} selected={selected}>
     {selected && loading ? (
       <InfiniteLoader size={28} />
     ) : (
-      <Round backgroundColor={color} />
+      <ContrastOption backgroundColor={color.bottomRight}>
+        <Triangle borderTopColor={color.topLeft} />
+      </ContrastOption>
     )}
-    {selected ? <CheckPill /> : null}
   </Container>
 );
 

apps/ledger-live-mobile/src/components/CustomImage/imageUtils.ts

@@ -36,7 +36,8 @@ export async function importImageFromPhoneGallery(): Promise<ImageFileUri | null
                 `ImagePicker.launchImageLibrary Error (error code: ${res.errorCode}): ${res.errorMessage}`,
               );
             const assets = res?.assets || [];
-            if (assets.length === 0) throw new Error("Assets length is 0");
+            if (assets.length === 0 && !res.didCancel)
+              throw new Error("Assets length is 0");
             return {
               cancelled: res.didCancel,
               uri: assets[0]?.uri,

apps/ledger-live-mobile/src/locales/en/common.json

@@ -5448,17 +5448,19 @@
     "cropImage": "Crop image",
     "chooseConstrast": "Choose contrast",
     "uploadAnotherImage": "Upload another image",
-    "selectContrast": "Select your contrast",
+    "rotateImage": "Rotate",
     "allowPreview": "Allow picture preview on {{productName}}",
     "loadingPicture": "Loading picture on {{productName}}",
     "pictureLoaded": "Picture loaded",
     "timeDisclaimer": "This can take up to 30 seconds",
     "imageLoaded": "Image loaded on {{productName}}",
     "confirmPicture": "Confirm on {{productName}}",
-    "title": "Choose a picture.\nCreate a vibe.\nMake your Ledger yours.",
-    "subtitle": "Set a picture of your favourite NFT or a picture from your phone.",
+    "landingPage": {
+      "title": "Choose a picture.\nCreate a vibe.\nMake your Ledger yours.",
+      "subtitle": "Set a picture of your favourite NFT or a picture from your phone.",
+      "choosePicture": "Choose a picture"
+    },
     "customImage": "Custom picture",
-    "choosePicture": "Choose a picture",
     "doThisLater": "Maybe later"
   },
   "postOnboarding": {

apps/ledger-live-mobile/src/screens/CustomImage/Step0Welcome.tsx

@@ -43,20 +43,20 @@ const Step0Welcome: React.FC<
         </Flex>
         <Flex flex={1} px={7}>
           <Text variant="h4" fontWeight="semiBold" mt={7} textAlign="center">
-            {t("customImage.title")}
+            {t("customImage.landingPage.title")}
           </Text>
           <Text
             variant="bodyLineHeight"
             color="neutral.c70"
             textAlign="center"
             mt={6}
           >
-            {t("customImage.subtitle")}
+            {t("customImage.landingPage.subtitle")}
           </Text>
         </Flex>
         <BottomButtonsContainer>
           <Button size="large" type="main" onPress={openModal}>
-            {t("customImage.choosePicture")}
+            {t("customImage.landingPage.choosePicture")}
           </Button>
         </BottomButtonsContainer>
       </Flex>

apps/ledger-live-mobile/src/screens/CustomImage/Step1Crop.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { Box, Flex, Icons, InfiniteLoader } from "@ledgerhq/native-ui";
+import { Box, Flex, Icons, InfiniteLoader, Text } from "@ledgerhq/native-ui";
 import { CropView } from "react-native-image-crop-tools";
 import { useTranslation } from "react-i18next";
 import { StackNavigationEventMap } from "@react-navigation/stack";
@@ -203,12 +203,18 @@ const Step1Cropping = ({ navigation, route }: NavigationProps) => {
           <Box mb={7} alignSelf="center">
             <Touchable onPress={handlePressRotateLeft}>
               <Flex
-                px={7}
                 py={4}
+                px={6}
                 borderRadius={100}
                 backgroundColor="neutral.c30"
+                flexDirection="row"
+                justifyContent="center"
+                alignItems="center"
               >
-                <Icons.ReverseMedium size={24} />
+                <Text variant="paragraph" fontWeight="semiBold" mr={2} ml={2}>
+                  {t("customImage.rotateImage")}
+                </Text>
+                <Icons.ReverseMedium size={16} />
               </Flex>
             </Touchable>
           </Box>

apps/ledger-live-mobile/src/screens/CustomImage/Step2Preview.tsx

@@ -1,12 +1,18 @@
 import React, { useCallback, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components/native";
-import { Button, Flex, InfiniteLoader, Text } from "@ledgerhq/native-ui";
+import { Button, Flex, InfiniteLoader } from "@ledgerhq/native-ui";
 import {
+  Image,
   ImageErrorEventData,
   NativeSyntheticEvent,
   Pressable,
 } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { ImagePreviewError } from "@ledgerhq/live-common/customImage/errors";
 import useResizedImage, {
@@ -22,12 +28,12 @@ import { targetDimensions } from "./shared";
 import BottomButtonsContainer from "../../components/CustomImage/BottomButtonsContainer";
 import ContrastChoice from "../../components/CustomImage/ContrastChoice";
 import { ScreenName } from "../../const";
-import FramedImage from "../../components/CustomImage/FramedImage";
 import { CustomImageNavigatorParamList } from "../../components/RootNavigator/types/CustomImageNavigator";
 import {
   BaseComposite,
   StackNavigatorProps,
 } from "../../components/RootNavigator/types/helpers";
+import ForceTheme from "../../components/theme/ForceTheme";
 
 export const PreviewImage = styled.Image.attrs({
   resizeMode: "contain",
@@ -38,10 +44,22 @@ export const PreviewImage = styled.Image.attrs({
 `;
 
 const contrasts = [
-  { val: 1, color: "neutral.c70" },
-  { val: 1.5, color: "neutral.c50" },
-  { val: 2, color: "neutral.c40" },
-  { val: 3, color: "neutral.c30" },
+  {
+    val: 1,
+    color: { topLeft: "neutral.c40", bottomRight: "neutral.c30" },
+  },
+  {
+    val: 1.5,
+    color: { topLeft: "neutral.c50", bottomRight: "neutral.c30" },
+  },
+  {
+    val: 2,
+    color: { topLeft: "neutral.c60", bottomRight: "neutral.c30" },
+  },
+  {
+    val: 3,
+    color: { topLeft: "neutral.c70", bottomRight: "neutral.c30" },
+  },
 ];
 
 type NavigationProps = BaseComposite<
@@ -62,7 +80,9 @@ const Step2Preview = ({ navigation, route }: NavigationProps) => {
   const imageProcessorRef = useRef<ImageProcessor>(null);
   const [loading, setLoading] = useState(true);
   const [resizedImage, setResizedImage] = useState<ResizeResult | null>(null);
-  const [contrast, setContrast] = useState(1);
+  const initialIndex = 0;
+  const [selectedIndex, setSelectedIndex] = useState(initialIndex);
+  const animSelectedIndex = useSharedValue(initialIndex);
   const [processorPreviewImage, setProcessorPreviewImage] =
     useState<ProcessorPreviewResult | null>(null);
   const [rawResultLoading, setRawResultLoading] = useState(false);
@@ -140,6 +160,22 @@ const Step2Preview = ({ navigation, route }: NavigationProps) => {
     setRawResultLoading(true);
   }, [imageProcessorRef, setRawResultLoading]);
 
+  const setSelectedIndexWrapped = useCallback(
+    newIndex => {
+      setSelectedIndex(newIndex);
+      animSelectedIndex.value = withTiming(newIndex, { duration: 300 });
+    },
+    [animSelectedIndex],
+  );
+
+  const leftBoxAnimatedStyle = useAnimatedStyle(() => ({
+    width: (3 - animSelectedIndex.value) * 54,
+  }));
+
+  const rightBoxAnimatedStyle = useAnimatedStyle(() => ({
+    width: animSelectedIndex.value * 54,
+  }));
+
   return (
     <SafeAreaView edges={["bottom"]} style={{ flex: 1 }}>
       {resizedImage?.imageBase64DataUri && (
@@ -149,7 +185,7 @@ const Step2Preview = ({ navigation, route }: NavigationProps) => {
           onPreviewResult={handlePreviewResult}
           onError={handleError}
           onRawResult={handleRawResult}
-          contrast={contrast}
+          contrast={contrasts[selectedIndex].val}
         />
       )}
       <Flex
@@ -159,7 +195,8 @@ const Step2Preview = ({ navigation, route }: NavigationProps) => {
         justifyContent="center"
       >
         {processorPreviewImage?.imageBase64DataUri ? (
-          <FramedImage
+          <Image
+            style={{ width: 252, height: 406 }}
             onError={handlePreviewImageError}
             fadeDuration={0}
             source={{ uri: processorPreviewImage.imageBase64DataUri }}
@@ -169,43 +206,48 @@ const Step2Preview = ({ navigation, route }: NavigationProps) => {
         )}
       </Flex>
       <BottomButtonsContainer>
-        <Text fontSize="14px" lineHeight="17px">
-          {t("customImage.selectContrast")}
-        </Text>
         {resizedImage?.imageBase64DataUri && (
-          <Flex flexDirection="row" my={6} justifyContent="space-between">
-            {contrasts.map(({ val, color }) => (
-              <Pressable
-                disabled={loading}
-                key={val}
-                onPress={() => {
-                  if (contrast !== val) {
-                    setLoading(true);
-                    setContrast(val);
-                  }
-                }}
-              >
-                <ContrastChoice
-                  selected={contrast === val}
-                  loading={loading}
-                  color={color}
-                />
-              </Pressable>
-            ))}
-          </Flex>
+          <ForceTheme selectedPalette="dark">
+            <Flex flexDirection="row" my={6}>
+              <Animated.View style={leftBoxAnimatedStyle} />
+              {contrasts.map(({ val, color }, index, arr) => (
+                <Pressable
+                  disabled={loading}
+                  key={val}
+                  onPress={() => {
+                    if (selectedIndex !== index) {
+                      setLoading(true);
+                      setSelectedIndexWrapped(index);
+                    }
+                  }}
+                >
+                  <ContrastChoice
+                    selected={selectedIndex === index}
+                    loading={loading}
+                    color={color}
+                    isFirst={index === 0}
+                    isLast={index === arr.length - 1}
+                  />
+                </Pressable>
+              ))}
+              <Animated.View style={rightBoxAnimatedStyle} />
+            </Flex>
+          </ForceTheme>
         )}
-        <Button
-          disabled={!processorPreviewImage?.imageBase64DataUri}
-          mt={6}
-          size="large"
-          type="main"
-          outline={false}
-          onPress={requestRawResult}
-          pending={rawResultLoading}
-          displayContentWhenPending
-        >
-          {t("common.confirm")}
-        </Button>
+        <Flex width="100%">
+          <Button
+            disabled={!processorPreviewImage?.imageBase64DataUri}
+            mt={6}
+            size="large"
+            type="main"
+            outline={false}
+            onPress={requestRawResult}
+            pending={rawResultLoading}
+            displayContentWhenPending
+          >
+            {t("common.confirm")}
+          </Button>
+        </Flex>
       </BottomButtonsContainer>
     </SafeAreaView>
   );