FAT-383 Custom image pixel polish + feature flag debug menu improveme…

…nts (#1243)

* Remove close button in steps header

* Simplify appearance of BottomButtonsContainer (transparent background)

* lint

* lint

* Change header font style (use h5)

* Fix layout of cropping step

* Fix color of contrast button pill

* Rename cropAspectRatio to targetDimensions

* changeset

* remove useless `Empty` component

* lint

* Improve feature flag debug menu

Add search input
Add "add missing flag" input
More compact UI
Enable/disable toggle
Fix overriding logic for resetting to actual remote value

* Fix parsing error

.changeset/plenty-guests-beg.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Change the navigation header font variant from h3 (Alpha) to h5 (Inter)

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

@@ -1,31 +1,11 @@
 import { Flex } from "@ledgerhq/native-ui";
-import React, { ReactNode } from "react";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import styled from "styled-components/native";
 
-type Props = {
-  children?: ReactNode | undefined;
-};
-
-const Container = styled(Flex).attrs({
+const BottomButtonsContainer = styled(Flex).attrs({
   flexDirection: "column",
   alignSelf: "stretch",
-  backgroundColor: "background.drawer",
-  borderTopLeftRadius: "16px",
-  borderTopRightRadius: "16px",
-})``;
-const Inner = styled(Flex).attrs({
   padding: 6,
   pb: 8,
 })``;
 
-const BottomButtonsContainer: React.FC<Props> = ({ children }) => {
-  const insets = useSafeAreaInsets();
-  return (
-    <Container paddingBottom={insets.bottom}>
-      <Inner>{children}</Inner>
-    </Container>
-  );
-};
-
 export default BottomButtonsContainer;

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

@@ -26,7 +26,7 @@ const Round = styled(Box).attrs({
 const PillBackground = styled(Box).attrs({
   height: "20px",
   width: "20px",
-  backgroundColor: "background.drawer",
+  backgroundColor: "background.main",
 })``;
 
 const PillForeground = styled(Icons.CircledCheckSolidMedium).attrs({

apps/ledger-live-mobile/src/components/FirebaseFeatureFlags.tsx

@@ -80,6 +80,11 @@ export const FirebaseFeatureFlagsProvider: React.FC<Props> = ({ children }) => {
           ...currentOverrides,
           [key]: overridenValue,
         }));
+      } else {
+        setLocalOverrides(currentOverrides => ({
+          ...currentOverrides,
+          [key]: undefined,
+        }));
       }
     },
     [appLanguage],

apps/ledger-live-mobile/src/components/HeaderTitle.tsx

@@ -6,7 +6,7 @@ import { scrollToTop } from "../navigation/utils";
 export default function HeaderTitle(props: any) {
   return (
     <TouchableWithoutFeedback onPress={scrollToTop}>
-      <Text {...props} variant={"h3"} mx={5} mt={1} />
+      <Text {...props} variant={"h5"} mx={5} mt={1} />
     </TouchableWithoutFeedback>
   );
 }

apps/ledger-live-mobile/src/components/RootNavigator/CustomImageNavigator.tsx

@@ -10,8 +10,6 @@ import Step2Preview from "../../screens/CustomImage/Step2Preview";
 import Step3Transfer from "../../screens/CustomImage/Step3Transfer";
 import ErrorScreen from "../../screens/CustomImage/ErrorScreen";
 
-const Empty = () => null;
-
 export type CustomImageParamList = ParamList;
 
 export default function CustomImageNavigator() {
@@ -27,12 +25,15 @@ export default function CustomImageNavigator() {
       <Stack.Screen
         name={ScreenName.CustomImageStep1Crop as "CustomImageStep1Crop"}
         component={Step1Cropping}
-        options={{ title: t("customImage.cropImage") }}
+        options={{ title: t("customImage.cropImage"), headerRight: undefined }}
       />
       <Stack.Screen
         name={ScreenName.CustomImageStep2Preview as "CustomImageStep2Preview"}
         component={Step2Preview}
-        options={{ title: t("customImage.chooseConstrast") }}
+        options={{
+          title: t("customImage.chooseConstrast"),
+          headerRight: undefined,
+        }}
       />
       <Stack.Screen
         name={ScreenName.CustomImageStep3Transfer as "CustomImageStep3Transfer"}
@@ -42,7 +43,7 @@ export default function CustomImageNavigator() {
       <Stack.Screen
         name={ScreenName.CustomImageErrorScreen as "CustomImageErrorScreen"}
         component={ErrorScreen}
-        options={{ title: "", headerLeft: Empty, gestureEnabled: false }}
+        options={{ title: "", headerLeft: undefined, gestureEnabled: false }}
       />
     </Stack.Navigator>
   );

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

@@ -2273,11 +2273,8 @@
     "debug": {
       "featureFlagsTitle": "Defined feature flags used in Ledger Live",
       "featureFlagsDesc": "Overridden values will be reset if the app is relaunched. Only valid JSON strings will be accepted.",
-      "featureFlagsOverride": "Override",
       "featureFlagsEdit": "Edit",
-      "featureFlagsRestore": "Restore",
-      "featureFlagsDisplayValue": "Display value",
-      "featureFlagsHideValue": "Hide value"
+      "featureFlagsRestore": "Restore"
     }
   },
   "notifications": {

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

@@ -3,6 +3,7 @@ import { Flex, Icons, InfiniteLoader } from "@ledgerhq/native-ui";
 import { CropView } from "react-native-image-crop-tools";
 import { useTranslation } from "react-i18next";
 import { StackScreenProps } from "@react-navigation/stack";
+import { SafeAreaView } from "react-native-safe-area-context";
 import ImageCropper, {
   Props as ImageCropperProps,
   CropResult,
@@ -12,7 +13,7 @@ import {
   ImageFileUri,
 } from "../../components/CustomImage/types";
 import { downloadImageToFile } from "../../components/CustomImage/imageUtils";
-import { cropAspectRatio } from "./shared";
+import { targetDimensions } from "./shared";
 import Button from "../../components/Button";
 import { ScreenName } from "../../const";
 import BottomContainer from "../../components/CustomImage/BottomButtonsContainer";
@@ -97,16 +98,12 @@ const Step1Cropping: React.FC<
 
   const [containerDimensions, setContainerDimensions] =
     useState<ImageDimensions | null>(null);
-  const onContainerLayout = useCallback(
-    ({ nativeEvent: { layout } }) => {
-      if (containerDimensions !== null) return;
-      setContainerDimensions({ height: layout.height, width: layout.width });
-    },
-    [containerDimensions],
-  );
+  const onContainerLayout = useCallback(({ nativeEvent: { layout } }) => {
+    setContainerDimensions({ height: layout.height, width: layout.width });
+  }, []);
 
   return (
-    <Flex flex={1}>
+    <SafeAreaView edges={["bottom"]} flex={1}>
       <Flex
         flex={1}
         flexDirection="column"
@@ -115,7 +112,7 @@ const Step1Cropping: React.FC<
       >
         <Flex
           flex={1}
-          onLayout={onContainerLayout}
+          onLayout={imageToCrop ? onContainerLayout : undefined}
           width="100%"
           justifyContent="center"
           alignItems="center"
@@ -124,7 +121,7 @@ const Step1Cropping: React.FC<
             <ImageCropper
               ref={cropperRef}
               imageFileUri={imageToCrop.imageFileUri}
-              aspectRatio={cropAspectRatio}
+              aspectRatio={targetDimensions}
               style={containerDimensions} // this native component needs absolute height & width values
               onError={handleError}
               onResult={handleCropResult}
@@ -161,7 +158,7 @@ const Step1Cropping: React.FC<
           </BottomContainer>
         ) : null}
       </Flex>
-    </Flex>
+    </SafeAreaView>
   );
 };
 

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

@@ -9,6 +9,7 @@ import {
   Pressable,
 } from "react-native";
 import { StackScreenProps } from "@react-navigation/stack";
+import { SafeAreaView } from "react-native-safe-area-context";
 import useResizedImage, {
   Params as ImageResizerParams,
   ResizeResult,
@@ -18,7 +19,7 @@ import ImageProcessor, {
   ProcessorPreviewResult,
   ProcessorRawResult,
 } from "../../components/CustomImage/ImageProcessor";
-import { cropAspectRatio } from "./shared";
+import { targetDimensions } from "./shared";
 import { fitImageContain } from "../../components/CustomImage/imageUtils";
 import BottomButtonsContainer from "../../components/CustomImage/BottomButtonsContainer";
 import ContrastChoice from "../../components/CustomImage/ContrastChoice";
@@ -91,7 +92,7 @@ const Step2Preview: React.FC<
   );
 
   useResizedImage({
-    targetDimensions: cropAspectRatio,
+    targetDimensions,
     imageFileUri: croppedImage?.imageFileUri,
     onError: handleError,
     onResult: handleResizeResult,
@@ -154,7 +155,7 @@ const Step2Preview: React.FC<
   );
 
   return (
-    <Flex flex={1}>
+    <SafeAreaView edges={["bottom"]} flex={1}>
       {resizedImage?.imageBase64DataUri && (
         <ImageProcessor
           ref={imageProcessorRef}
@@ -211,7 +212,7 @@ const Step2Preview: React.FC<
           {t("common.confirm")}
         </Button>
       </BottomButtonsContainer>
-    </Flex>
+    </SafeAreaView>
   );
 };
 

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

@@ -2,6 +2,7 @@ import React, { useCallback, useMemo, useState } from "react";
 import { Dimensions, ScrollView } from "react-native";
 import { Flex, InfiniteLoader, Text } from "@ledgerhq/native-ui";
 import { StackScreenProps } from "@react-navigation/stack";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ProcessorPreviewResult } from "../../components/CustomImage/ImageProcessor";
 import ResultDataTester from "../../components/CustomImage/ResultDataTester";
 import { fitImageContain } from "../../components/CustomImage/imageUtils";
@@ -82,8 +83,10 @@ const Step3Transfer: React.FC<
     [reconstructedPreviewResult?.height, reconstructedPreviewResult?.width],
   );
 
+  const insets = useSafeAreaInsets();
+
   return (
-    <ScrollView>
+    <ScrollView contentContainerStyle={{ paddingBottom: insets.bottom }}>
       <Flex p={6}>
         {rawData?.hexData && (
           <>

apps/ledger-live-mobile/src/screens/CustomImage/shared.ts

@@ -1,4 +1,4 @@
-export const cropAspectRatio = {
+export const targetDimensions = {
   width: 1080,
   height: 1400,
 };