Bugfix/live 4308 "Language" row bad layout in My Ledger (#1623)

* Fix layout issue in device options + make reusable component for device options * lint * lint
LedgerHQ · Oct 20, 2022 · 9d90943 · 9d90943
1 parent a048793
commit 9d90943
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 34 deletions.
diff --git a/.changeset/short-adults-grow.md b/.changeset/short-adults-grow.md
@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Fix device localization button layout in My Ledger
diff --git a/apps/ledger-live-mobile/src/screens/Manager/Device/CustomLockScreen.tsx b/apps/ledger-live-mobile/src/screens/Manager/Device/CustomLockScreen.tsx
@@ -1,34 +1,31 @@
 import React, { useState } from "react";
-import { Flex, Icons, Link, Text } from "@ledgerhq/native-ui";
+import { Icons } from "@ledgerhq/native-ui";
 import { Device } from "@ledgerhq/types-devices";
 import { useTranslation } from "react-i18next";
 
 import CustomImageBottomModal from "../../../components/CustomImage/CustomImageBottomModal";
+import DeviceOptionRow from "./DeviceOptionRow";
 
 const CustomLockScreen: React.FC<{ device: Device }> = ({ device }) => {
   const [isCustomImageOpen, setIsCustomImageOpen] = useState(false);
 
   const { t } = useTranslation();
 
   return (
-    <Flex flex={1} flexDirection="row" alignItems="center">
-      <Icons.BracketsMedium size={20} color="neutral.c80" />
-      <Text ml={3} flex={1} variant="bodyLineHeight" color="neutral.c80">
-        {t("customImage.customImage")}
-      </Text>
-      <Link
+    <>
+      <DeviceOptionRow
+        Icon={Icons.BracketsMedium}
+        iconSize={20}
+        label={t("customImage.customImage")}
         onPress={() => setIsCustomImageOpen(true)}
-        type="color"
-        Icon={Icons.ChevronRightMedium}
-      >
-        {t("customImage.replace")}
-      </Link>
+        linkLabel={t("customImage.replace")}
+      />
       <CustomImageBottomModal
         device={device}
         isOpened={isCustomImageOpen}
         onClose={() => setIsCustomImageOpen(false)}
       />
-    </Flex>
+    </>
   );
 };
 

diff --git a/apps/ledger-live-mobile/src/screens/Manager/Device/DeviceLanguage.tsx b/apps/ledger-live-mobile/src/screens/Manager/Device/DeviceLanguage.tsx
@@ -1,4 +1,4 @@
-import { Flex, Icons, Link, Text } from "@ledgerhq/native-ui";
+import { Icons, Text } from "@ledgerhq/native-ui";
 import React, { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Language, DeviceInfo } from "@ledgerhq/types-live";
@@ -8,6 +8,7 @@ import BottomModal from "../../../components/BottomModal";
 import DeviceLanguageSelection from "./DeviceLanguageSelection";
 import ChangeDeviceLanguageActionModal from "../../../components/ChangeDeviceLanguageActionModal";
 import { track } from "../../../analytics";
+import DeviceOptionRow from "./DeviceOptionRow";
 
 type Props = {
   pendingInstalls: boolean;
@@ -69,29 +70,23 @@ const DeviceLanguage: React.FC<Props> = ({
   const refreshDeviceLanguage = useCallback(() => {
     track("Page Manager LanguageInstalled", { selectedLanguage });
     onLanguageChange();
-  }, [selectedLanguage]);
+  }, [selectedLanguage, onLanguageChange]);
 
   return (
     <>
-      <Flex flex={1} flexDirection="row" alignItems="center">
-        <Icons.LanguageMedium size={24} color="neutral.c80" />
-        <Text ml={3} flex={1} variant="bodyLineHeight" color="neutral.c80">
-          {t("deviceLocalization.language")}
-        </Text>
-        {availableLanguages.length ? (
-          <Link
-            onPress={pendingInstalls ? undefined : openChangeLanguageModal}
-            type="color"
-            Icon={Icons.ChevronRightMedium}
-          >
-            {t(`deviceLocalization.languages.${currentDeviceLanguage}`)}
-          </Link>
-        ) : (
-          <Text>
-            {t(`deviceLocalization.languages.${currentDeviceLanguage}`)}
-          </Text>
-        )}
-      </Flex>
+      <DeviceOptionRow
+        Icon={Icons.LanguageMedium}
+        label={t("deviceLocalization.language")}
+        onPress={pendingInstalls ? undefined : openChangeLanguageModal}
+        linkLabel={t(`deviceLocalization.languages.${currentDeviceLanguage}`)}
+        right={
+          availableLanguages.length ? undefined : (
+            <Text>
+              {t(`deviceLocalization.languages.${currentDeviceLanguage}`)}
+            </Text>
+          )
+        }
+      />
       <BottomModal
         isOpened={isChangeLanguageOpen}
         onClose={closeChangeLanguageModal}

diff --git a/apps/ledger-live-mobile/src/screens/Manager/Device/DeviceOptionRow.tsx b/apps/ledger-live-mobile/src/screens/Manager/Device/DeviceOptionRow.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { Flex, Icons, Link, Text } from "@ledgerhq/native-ui";
+import { IconType } from "@ledgerhq/native-ui/components/Icon/type";
+
+type Props = {
+  Icon: IconType;
+  iconSize?: number;
+  label: string;
+  linkLabel: string;
+  onPress?: () => void;
+  right?: React.ReactNode;
+};
+
+const DeviceOptionRow: React.FC<Props> = props => {
+  const { Icon, iconSize, label, right, linkLabel, onPress } = props;
+  return (
+    <Flex flexDirection="row" alignItems="center">
+      <Icon size={iconSize || 24} color="neutral.c80" />
+      <Text ml={3} variant="bodyLineHeight" color="neutral.c80">
+        {label}
+      </Text>
+      <Flex flex={1} />
+      {right || (
+        <Link
+          onPress={onPress}
+          disabled={!onPress}
+          type="color"
+          Icon={Icons.ChevronRightMedium}
+        >
+          {linkLabel}
+        </Link>
+      )}
+    </Flex>
+  );
+};
+
+export default DeviceOptionRow;