💄 (llm) update old reborn banners (#8417)

.changeset/eighty-pants-give.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+Update old reborn banner

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

@@ -4,42 +4,74 @@ import { useTheme } from "styled-components/native";
 import { Flex } from "@ledgerhq/native-ui";
 import { StyleProp, ViewStyle } from "react-native";
 
+type Direction = "top-to-bottom" | "left-to-right" | "bottom-to-top" | "right-to-left";
 type Props = {
   color?: string;
   containerStyle?: StyleProp<ViewStyle>;
   gradientStyle?: StyleProp<ViewStyle>;
   children?: React.ReactNode;
   startOpacity?: number;
   endOpacity?: number;
+  direction?: Direction;
+  borderRadius?: number;
 };
 
+function getPositions(direction: Direction) {
+  let x1 = "0%";
+  let y1 = "0%";
+  let x2 = "0%";
+  let y2 = "100%";
+
+  switch (direction) {
+    case "left-to-right":
+      x2 = "100%";
+      y2 = "0%";
+      break;
+    case "bottom-to-top":
+      y1 = "100%";
+      y2 = "0%";
+      break;
+    case "right-to-left":
+      x1 = "100%";
+      x2 = "0%";
+      break;
+  }
+
+  return {
+    x1,
+    x2,
+    y1,
+    y2,
+  };
+}
+
 export default function GradientContainer({
   color,
   containerStyle,
   gradientStyle,
   children,
   startOpacity = 1,
   endOpacity = 0,
+  direction = "top-to-bottom",
+  borderRadius,
 }: Props) {
   const { colors } = useTheme();
 
+  const gradientPositions = getPositions(direction);
+
   return (
-    <Flex flex={1} borderRadius={8} overflow="hidden" style={containerStyle}>
-      <Svg style={[{ position: "absolute" }, gradientStyle]} preserveAspectRatio="xMinYMin slice">
+    <Flex borderRadius={8} overflow="hidden" style={containerStyle}>
+      <Svg
+        style={[{ position: "absolute", width: "100%", height: "100%" }, gradientStyle]}
+        preserveAspectRatio="xMinYMin slice"
+      >
         <Defs>
-          <LinearGradient
-            id="myGradient"
-            x1="0%"
-            y1="0%"
-            x2="0%"
-            y2="100%"
-            gradientUnits="userSpaceOnUse"
-          >
+          <LinearGradient {...gradientPositions} id="myGradient" gradientUnits="userSpaceOnUse">
             <Stop offset="0%" stopOpacity={startOpacity} stopColor={color || colors.neutral.c30} />
             <Stop offset="100%" stopOpacity={endOpacity} stopColor={color || colors.neutral.c30} />
           </LinearGradient>
         </Defs>
-        <Rect x="0" y="0" width="100%" height="100%" fill="url(#myGradient)" />
+        <Rect x="0" y="0" rx={borderRadius} width="100%" height="100%" fill="url(#myGradient)" />
       </Svg>
       {children}
     </Flex>

apps/ledger-live-mobile/src/components/TabBar/TransferDrawer.tsx

@@ -13,8 +13,10 @@ import { NavigatorName } from "~/const";
 import { hasOrderedNanoSelector, readOnlyModeEnabledSelector } from "~/reducers/settings";
 import { Props as ModalProps } from "../QueuedDrawer";
 import TransferButton from "../TransferButton";
-import BuyDeviceBanner, { IMAGE_PROPS_SMALL_NANO } from "../BuyDeviceBanner";
-import SetupDeviceBanner from "../SetupDeviceBanner";
+import BuyDeviceBanner, {
+  IMAGE_PROPS_BUY_DEVICE_FLEX_BOX,
+} from "LLM/features/Reborn/components/BuyDeviceBanner";
+import SetupDeviceBanner from "LLM/features/Reborn/components/SetupDeviceBanner";
 import { track, useAnalytics } from "~/analytics";
 import { useToasts } from "@ledgerhq/live-common/notifications/ToastProvider/index";
 import useQuickActions from "~/hooks/useQuickActions";
@@ -241,39 +243,41 @@ export default function TransferDrawer({ onClose }: Omit<ModalProps, "isRequesti
   }
 
   return (
-    <Flex flexDirection="column" alignItems="flex-start" p={7} pt={9} flex={1}>
-      <ScrollView
-        alwaysBounceVertical={false}
-        style={{ width: "100%" }}
-        testID="transfer-scroll-list"
-      >
-        {buttonsList.map((button, index) => (
-          <Box mb={index === buttonsList.length - 1 ? 0 : 8} key={button.title}>
-            <TransferButton {...button} testID={button.testID} />
-          </Box>
-        ))}
-      </ScrollView>
+    <>
+      <Flex flexDirection="column" alignItems="flex-start" p={7} pt={9} flex={1}>
+        <ScrollView
+          alwaysBounceVertical={false}
+          style={{ width: "100%" }}
+          testID="transfer-scroll-list"
+        >
+          {buttonsList.map((button, index) => (
+            <Box mb={index === buttonsList.length - 1 ? 0 : 8} key={button.title}>
+              <TransferButton {...button} testID={button.testID} />
+            </Box>
+          ))}
+        </ScrollView>
+      </Flex>
       {readOnlyModeEnabled && !hasOrderedNano && (
         <BuyDeviceBanner
+          {...IMAGE_PROPS_BUY_DEVICE_FLEX_BOX}
+          image="buyDoubleFlex"
           topLeft={
-            <Text color="primary.c40" uppercase mb={3} fontSize="11px" fontWeight="semiBold">
+            <Text color="neutral.c00" mb={6} minHeight={36} fontSize="14px" fontWeight="semiBold">
               {t("buyDevice.bannerTitle2")}
             </Text>
           }
-          style={{ marginTop: 36, paddingTop: 13.5, paddingBottom: 13.5 }}
           buttonLabel={t("buyDevice.bannerButtonTitle2")}
           buttonSize="small"
           event="button_clicked"
           eventProperties={bannerEventProperties}
           screen={screen}
-          {...IMAGE_PROPS_SMALL_NANO}
         />
       )}
       {readOnlyModeEnabled && hasOrderedNano ? (
         <Box mt={8} width={"100%"}>
           <SetupDeviceBanner screen={screen} />
         </Box>
       ) : null}
-    </Flex>
+    </>
   );
 }

apps/ledger-live-mobile/src/components/theme/ForceTheme.tsx

@@ -1,12 +1,11 @@
 import React from "react";
 import StyleProvider from "../../StyleProvider";
 
-export default function ForceTheme({
-  children,
-  selectedPalette,
-}: {
+export type Props = {
   children?: React.ReactNode;
   selectedPalette: "light" | "dark";
-}): React.ReactElement {
+};
+
+export default function ForceTheme({ children, selectedPalette }: Props): React.ReactElement {
   return <StyleProvider selectedPalette={selectedPalette}>{children}</StyleProvider>;
 }

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

@@ -1287,20 +1287,20 @@
     "title": "You need a Ledger",
     "desc": "For your security, Ledger Live only works with a device. You need a device in order to continue.",
     "cta": "Buy your Ledger now",
-    "footer": "I already have a device, set it up now",
-    "bannerTitle": "Keep your crypto and NFTs safe",
-    "bannerTitle2": "You'll need a Nano to trade",
-    "bannerSubtitle": "with a Ledger Device",
-    "bannerButtonTitle": "Discover the Nano",
-    "bannerButtonTitle2": "Buy a device",
-    "setupCta": "I already have a device, set it up"
+    "footer": "I already have a Ledger, set it up",
+    "bannerTitle": "Top-notch security for your crypto and NFTs",
+    "bannerTitle2": "You will need a Ledger to be able to trade",
+    "bannerSubtitle": "with a Ledger Flex",
+    "bannerButtonTitle": "Discover the Flex",
+    "bannerButtonTitle2": "Buy a Ledger",
+    "setupCta": "I already have a Ledger, set it up"
   },
   "postBuyDeviceSetupNanoWall": {
     "title": "Have you received your device?",
     "desc": "Once you receive your device, you can start its setup through Ledger Live!",
     "cta": "Setup my device",
-    "bannerTitle": "Received your device?",
-    "bannerCta": "Begin the setup",
+    "bannerTitle": "Received your Ledger?",
+    "bannerCta": "Begin setup",
     "continue": "Continue"
   },
   "purchaseDevice": {