support(UI): Update text and ui for Add Account modal (#1277)

* support(UI): Update text and ui for Add Account modal * 💄 Add margin bottom
LedgerHQ · Sep 19, 2022 · 11d5917 · 11d5917
1 parent 20f3ec7
commit 11d5917
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 35 deletions.
diff --git a/.changeset/wild-otters-live.md b/.changeset/wild-otters-live.md
@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Update text and ui for Add Account modal
diff --git a/apps/ledger-live-mobile/src/locales/en/common.json b/apps/ledger-live-mobile/src/locales/en/common.json
@@ -1687,17 +1687,17 @@
     }
   },
   "addAccountsModal": {
+    "title": "Add account",
     "ctaAdd": "Add accounts",
     "ctaImport": "Import Desktop accounts",
-    "title": "Add Crypto",
-    "description": "You can choose to add crypto(s) directly with your Ledger, or import them from Ledger Live Desktop.",
+    "description": "You can choose to add crypto directly with your Ledger, or import them from Ledger Live Desktop.",
     "add": {
       "title": "With your Ledger",
-      "description": "Create or import asset(s) with your Ledger"
+      "description": "Create or import asset with your Ledger"
     },
     "import": {
       "title": "Import from desktop",
-      "description": "Import asset(s) from Ledger Live Desktop"
+      "description": "Import asset from Ledger Live Desktop"
     }
   },
   "byteSize": {
@@ -4784,4 +4784,4 @@
       "description": "Click here to finish setting up your {{productName}} with Ledger Live"
     }
   }
-}
+}
diff --git a/apps/ledger-live-mobile/src/screens/AddAccounts/AddAccountsModal.tsx b/apps/ledger-live-mobile/src/screens/AddAccounts/AddAccountsModal.tsx
@@ -1,24 +1,16 @@
 import React, { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
-import { BottomDrawer } from "@ledgerhq/native-ui";
+import { BottomDrawer, Text } from "@ledgerhq/native-ui";
 import { NavigatorName } from "../../const";
 import { readOnlyModeEnabledSelector } from "../../reducers/settings";
-import Illustration from "../../images/illustration/Illustration";
-import NanoXFolded from "../../images/devices/NanoXFolded";
 
-import ChoiceCard from "../../components/ChoiceCard";
+import AddAccountsModalCard from "./AddAccountsModalCard";
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const setupLedgerImg = require("../../images/illustration/Shared/_SetupLedger.png");
 
-const images = {
-  light: {
-    withYourLedger: require("../../images/illustration/Light/_067.png"),
-    importFromYourDesktop: require("../../images/illustration/Light/_074.png"),
-  },
-  dark: {
-    withYourLedger: require("../../images/illustration/Dark/_067.png"),
-    importFromYourDesktop: require("../../images/illustration/Dark/_074.png"),
-  },
-};
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const syncCryptoImg = require("../../images/illustration/Shared/_SyncFromDesktop.png");
 
 type Props = {
   navigation: any;
@@ -45,32 +37,35 @@ export default function AddAccountsModal({
   }, [navigation, onClose]);
 
   return (
-    <BottomDrawer
-      testId="AddAccountsModal"
-      isOpen={isOpened}
-      onClose={onClose}
-      title={t("portfolio.emptyState.addAccounts.addAccounts")}
-    >
+    <BottomDrawer testId="AddAccountsModal" isOpen={isOpened} onClose={onClose}>
+      <Text variant="h4" fontWeight="semiBold" fontSize="24px" mb={2}>
+        {t("addAccountsModal.title")}
+      </Text>
+      <Text
+        variant="large"
+        fontWeight="medium"
+        fontSize="14px"
+        color="neutral.c70"
+        mb="32px"
+      >
+        {t("addAccountsModal.description")}
+      </Text>
+
       {!readOnlyModeEnabled && (
-        <ChoiceCard
+        <AddAccountsModalCard
           title={t("addAccountsModal.add.title")}
           subTitle={t("addAccountsModal.add.description")}
-          Image={<NanoXFolded size={96} />}
           onPress={onClickAdd}
+          imageSource={setupLedgerImg}
+          hasMarginBottom
         />
       )}
 
-      <ChoiceCard
+      <AddAccountsModalCard
         title={t("addAccountsModal.import.title")}
         subTitle={t("addAccountsModal.import.description")}
-        Image={
-          <Illustration
-            lightSource={images.light.withYourLedger}
-            darkSource={images.dark.withYourLedger}
-            size={96}
-          />
-        }
         onPress={onClickImport}
+        imageSource={syncCryptoImg}
       />
     </BottomDrawer>
   );

diff --git a/apps/ledger-live-mobile/src/screens/AddAccounts/AddAccountsModalCard.tsx b/apps/ledger-live-mobile/src/screens/AddAccounts/AddAccountsModalCard.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import { ImageSourcePropType } from "react-native";
+import Illustration from "../../images/illustration/Illustration";
+import DiscoverCard from "../Discover/DiscoverCard";
+
+type Props = {
+  title: string;
+  subTitle: string;
+  onPress: () => void;
+  imageSource: ImageSourcePropType;
+  hasMarginBottom?: boolean;
+};
+export default function AddAccountsModalCard({
+  title,
+  subTitle,
+  onPress,
+  imageSource,
+  hasMarginBottom = false,
+}: Props) {
+  return (
+    <DiscoverCard
+      title={title}
+      titleProps={{ variant: "large" }}
+      subTitle={subTitle}
+      subTitleProps={{ variant: "paragraph" }}
+      onPress={onPress}
+      cardProps={{
+        mx: 0,
+        mb: hasMarginBottom ? "16px" : 0,
+      }}
+      Image={
+        <Illustration
+          size={130}
+          darkSource={imageSource}
+          lightSource={imageSource}
+        />
+      }
+    />
+  );
+}