💅 (LLD): Firmware update banner rework

LedgerHQ · Jul 31, 2024 · 03766ae · 03766ae
1 parent 53f08e6
commit 03766ae
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 19 deletions.
diff --git a/.changeset/chatty-snakes-drum.md b/.changeset/chatty-snakes-drum.md
@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+Update Firmware update banner
diff --git a/apps/ledger-live-desktop/src/renderer/components/FirmwareUpdateBanner.tsx b/apps/ledger-live-desktop/src/renderer/components/FirmwareUpdateBanner.tsx
@@ -2,13 +2,18 @@ import React, { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 import { useLocation, useHistory } from "react-router-dom";
+import { useTheme } from "styled-components";
 import { getEnv } from "@ledgerhq/live-env";
+import { Button, Text } from "@ledgerhq/react-ui";
 import { latestFirmwareSelector } from "~/renderer/reducers/settings";
-import TopBanner, { FakeLink } from "~/renderer/components/TopBanner";
+import TopBanner from "~/renderer/components/TopBanner";
 import getCleanVersion from "~/renderer/screens/manager/FirmwareUpdate/getCleanVersion";
 import { UpdaterContext } from "~/renderer/components/Updater/UpdaterContext";
+import { radii } from "~/renderer/styles/theme";
 import { VISIBLE_STATUS } from "./Updater/Banner";
-import { IconsLegacy, Text } from "@ledgerhq/react-ui";
+import Box from "./Box";
+import StyleProvider from "../styles/StyleProvider";
+
 const FirmwareUpdateBanner = ({ old, right }: { old?: boolean; right?: React.ReactNode }) => {
   const history = useHistory();
   const { t } = useTranslation();
@@ -17,6 +22,7 @@ const FirmwareUpdateBanner = ({ old, right }: { old?: boolean; right?: React.Rea
   const visibleFirmwareVersion =
     process.env.DEBUG_FW_VERSION ??
     (latestFirmware ? getCleanVersion(latestFirmware.final.name) : "");
+  const { colors } = useTheme();
 
   // The 2.1.0-rc2 release caused issues with localization e2e tests because it
   // displayed a banner for updating the FW, which would continue to show with
@@ -41,27 +47,48 @@ const FirmwareUpdateBanner = ({ old, right }: { old?: boolean; right?: React.Rea
   return (
     <TopBanner
       id={"fw-update-banner"}
+      containerStyle={{
+        background: `linear-gradient(to left, ${colors.primary.c70}, ${colors.primary.c60})`,
+        borderRadius: radii[2],
+        padding: "12px 16px",
+      }}
       content={{
-        Icon: IconsLegacy.NanoFoldedMedium,
         message: (
-          <Text color="neutral.c00">
-            {t(old ? "manager.firmware.banner.old.warning" : "manager.firmware.banner.warning", {
-              latestFirmware: visibleFirmwareVersion,
-            })}
-          </Text>
+          <Box>
+            <Text fontFamily="Inter|Bold" fontSize={5} color="neutral.c100">
+              {t(old ? "manager.firmware.banner.old.warning" : "manager.firmware.banner.warning")}
+            </Text>
+            {old ? null : (
+              <Text color="neutral.c90">
+                {t("manager.firmware.banner.version", {
+                  latestFirmware: visibleFirmwareVersion,
+                })}
+              </Text>
+            )}
+          </Box>
+        ),
+        right: right || (
+          <Button variant="main" onClick={onClick}>
+            {t("manager.firmware.banner.cta")}
+          </Button>
         ),
-        right: right || <FakeLink onClick={onClick}>{t("manager.firmware.banner.cta")}</FakeLink>,
       }}
-      status={"warning"}
     />
   );
 };
+
 const FirmwareUpdateBannerEntry = ({ old, right }: { old?: boolean; right?: React.ReactNode }) => {
   const context = useContext(UpdaterContext);
   if (context && context.version) {
     const { status } = context;
     if (VISIBLE_STATUS.includes(status)) return null;
   }
-  return <FirmwareUpdateBanner old={old} right={right} />;
+
+  return (
+    <StyleProvider selectedPalette="dark">
+      <FirmwareUpdateBanner old={old} right={right} />
+    </StyleProvider>
+  );
 };
+
 export default FirmwareUpdateBannerEntry;
diff --git a/apps/ledger-live-desktop/src/renderer/components/TopBanner.tsx b/apps/ledger-live-desktop/src/renderer/components/TopBanner.tsx
@@ -84,6 +84,7 @@ type Props = {
   bannerId?: string;
   id?: string;
   testId?: string;
+  containerStyle?: React.CSSProperties;
 };
 
 const TopBanner = ({
@@ -94,6 +95,7 @@ const TopBanner = ({
   dismissable = false,
   bannerId,
   link,
+  containerStyle,
 }: Props) => {
   const dispatch = useDispatch();
   const dismissedBanners = useSelector(dismissedBannersSelector);
@@ -108,7 +110,7 @@ const TopBanner = ({
   const { Icon, message, right } = content;
 
   return (
-    <Container status={status} id={id} data-testid={testId}>
+    <Container status={status} id={id} data-testid={testId} style={containerStyle}>
       {Icon && (
         <IconContainer>
           <Icon size={18} />

diff --git a/apps/ledger-live-desktop/src/renderer/screens/manager/FirmwareUpdate/index.tsx b/apps/ledger-live-desktop/src/renderer/screens/manager/FirmwareUpdate/index.tsx
@@ -13,12 +13,12 @@ import Box from "~/renderer/components/Box";
 import { urls } from "~/config/urls";
 import { openURL } from "~/renderer/linking";
 import FirmwareUpdateBanner from "~/renderer/components/FirmwareUpdateBanner";
-import { FakeLink } from "~/renderer/components/TopBanner";
 import { context } from "~/renderer/drawers/Provider";
 import { track } from "~/renderer/analytics/segment";
 import { LocalTracer } from "@ledgerhq/logs";
 import { useLocalizedUrl } from "~/renderer/hooks/useLocalizedUrls";
 import { useKeepScreenAwake } from "~/renderer/hooks/useKeepScreenAwake";
+import { Button } from "@ledgerhq/react-ui";
 
 type Props = {
   deviceInfo: DeviceInfo;
@@ -168,9 +168,9 @@ const FirmwareUpdate = (props: Props) => {
       <FirmwareUpdateBanner
         old
         right={
-          <FakeLink onClick={() => openURL(contactSupportUrl)}>
+          <Button variant="main" onClick={() => openURL(contactSupportUrl)}>
             <Trans i18nKey="manager.firmware.banner.old.cta" />
-          </FakeLink>
+          </Button>
         }
       />
     );
@@ -194,7 +194,8 @@ const FirmwareUpdate = (props: Props) => {
               </Text>
             </Box>
           )}
-          <FakeLink
+          <Button
+            variant="main"
             data-testid="manager-update-firmware-button"
             disabled={!!disableFirmwareUpdate}
             onClick={() => {
@@ -205,7 +206,7 @@ const FirmwareUpdate = (props: Props) => {
             }}
           >
             <Trans i18nKey="manager.firmware.banner.cta2" />
-          </FakeLink>
+          </Button>
         </Box>
       }
     />

diff --git a/apps/ledger-live-desktop/src/renderer/styles/theme.ts b/apps/ledger-live-desktop/src/renderer/styles/theme.ts
@@ -3,7 +3,7 @@ import { Theme as UITheme } from "@ledgerhq/react-ui/styles/theme";
 
 export const space = [0, 5, 10, 15, 20, 30, 40, 50, 70];
 export const fontSizes = [8, 9, 10, 12, 13, 16, 18, 22, 32];
-export const radii = [0, 4];
+export const radii = [0, 4, 8];
 export const shadows = ["0 4px 8px 0 rgba(0, 0, 0, 0.03)"];
 
 // Those fonts are now defined in global.css, this is just a mapping for styled-system

diff --git a/apps/ledger-live-desktop/static/i18n/en/app.json b/apps/ledger-live-desktop/static/i18n/en/app.json
@@ -1991,7 +1991,8 @@
       "updateBtn": "Update firmware",
       "installUpdate": "Install update",
       "banner": {
-        "warning": "Update Firmware to {{latestFirmware}} is available",
+        "warning": "OS update available",
+        "version": "Version {{latestFirmware}}",
         "cta": "Go to My Ledger",
         "old": {
           "warning": "Device firmware version too old to be updated. Contact Ledger Support for a replacement.",