support(UI-Improvment) : LLM- Sync from Desktop (#1359)

* 💄 Desktop Sync -1 * 💄 Sync Polishing - 2 * 📝 Changelog
LedgerHQ · Oct 13, 2022 · 32daa00 · 32daa00
1 parent c356580
commit 32daa00
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 9 deletions.
diff --git a/.changeset/silver-bobcats-deliver.md b/.changeset/silver-bobcats-deliver.md
@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+UI Improvment Sync from Desktop Screen - LLM
diff --git a/apps/ledger-live-mobile/src/locales/en/common.json b/apps/ledger-live-mobile/src/locales/en/common.json
@@ -1526,7 +1526,7 @@
       "cta": "I’m ready to scan",
       "bullets": {
         "0": {
-          "label": "On the Desktop app, select <1>Settings > Accounts > Account export</1>."
+          "label": "On the Desktop app, select\n<1>Settings > Accounts > Account export</1>."
         },
         "1": {
           "label": "Scan the LiveQR code with your phone."

diff --git a/apps/ledger-live-mobile/src/screens/Onboarding/steps/importAccounts.tsx b/apps/ledger-live-mobile/src/screens/Onboarding/steps/importAccounts.tsx
@@ -50,7 +50,7 @@ function OnboardingStepPairNew() {
       // @TODO: Replace this placeholder with the correct illustration asap
       illustration: (
         <Illustration
-          size={150}
+          size={200}
           darkSource={images.dark.Intro}
           lightSource={images.light.Intro}
         />

diff --git a/apps/ledger-live-mobile/src/screens/Onboarding/steps/setupDevice/scenes/BaseStepperView.tsx b/apps/ledger-live-mobile/src/screens/Onboarding/steps/setupDevice/scenes/BaseStepperView.tsx
@@ -68,7 +68,10 @@ const ImageHeader = ({
       width="100%"
       height={48}
     >
-      <Button Icon={Icons.ArrowLeftMedium} onPress={onBack} />
+      <Button
+        Icon={() => <Icons.ArrowLeftMedium size={24} />}
+        onPress={onBack}
+      />
       {metadata.length <= 1 ? null : (
         <SlideIndicator
           slidesLength={metadata.length}

diff --git a/apps/ledger-live-mobile/src/screens/Onboarding/steps/setupDevice/scenes/SyncDesktop.tsx b/apps/ledger-live-mobile/src/screens/Onboarding/steps/setupDevice/scenes/SyncDesktop.tsx
@@ -3,18 +3,22 @@ import { Trans, useTranslation } from "react-i18next";
 import { Text, IconBoxList, Icons } from "@ledgerhq/native-ui";
 import Button from "../../../../../components/PreventDoubleClickButton";
 
+const { ComputerMedium, QrCodeMedium, ListMedium } = Icons;
 const items = [
   {
     title: "onboarding.stepImportAccounts.bullets.0.label",
-    icon: Icons.ComputerMedium,
+    icon: <ComputerMedium color="primary.c90" />,
+    hasTemplateTitle: true,
   },
   {
     title: "onboarding.stepImportAccounts.bullets.1.label",
-    icon: Icons.QrCodeMedium,
+    icon: <QrCodeMedium color="primary.c90" />,
+    hasTemplateTitle: false,
   },
   {
     title: "onboarding.stepImportAccounts.bullets.2.label",
-    icon: Icons.CheckAloneMedium,
+    icon: <ListMedium color="primary.c90" />,
+    hasTemplateTitle: false,
   },
 ];
 
@@ -24,18 +28,35 @@ const SyncDesktopScene = () => {
   return (
     <>
       <Text variant="h2">{t("onboarding.stepImportAccounts.title")}</Text>
-      <Text variant="body" color="neutral.c80" mt={5} mb={8}>
+      <Text
+        variant="body"
+        color="neutral.c70"
+        mt={5}
+        mb={8}
+        lineHeight="23.8px"
+      >
         {t("onboarding.stepImportAccounts.desc")}
       </Text>
       <IconBoxList
+        iconShapes="circle"
+        iconVariants="plain"
         items={items.map(item => ({
           Icon: item.icon,
-          title: (
+          title: item.hasTemplateTitle ? (
             <Trans i18nKey={item.title}>
               {""}
-              <Text fontWeight="bold" />
+              <Text fontWeight="semiBold" color="primary.c80" />
               {""}
             </Trans>
+          ) : (
+            <Text
+              variant="body"
+              fontWeight="medium"
+              color="neutral.c100"
+              lineHeight="16.94px"
+            >
+              {t(item.title)}
+            </Text>
           ),
         }))}
       />