diff --git a/.changeset/chatty-snakes-drum.md b/.changeset/chatty-snakes-drum.md new file mode 100644 index 000000000000..f46a09dcce59 --- /dev/null +++ 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 index f1f1d36ef5e2..24c1e30080b5 100644 --- 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 ( - {t(old ? "manager.firmware.banner.old.warning" : "manager.firmware.banner.warning", { - latestFirmware: visibleFirmwareVersion, - })} - + + + {t(old ? "manager.firmware.banner.old.warning" : "manager.firmware.banner.warning")} + + {old ? null : ( + + {t("manager.firmware.banner.version", { + latestFirmware: visibleFirmwareVersion, + })} + + )} + + ), + right: right || ( + ), - right: right || {t("manager.firmware.banner.cta")}, }} - 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 ; + + return ( + + + + ); }; + 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 index a20e1c6a6dc4..ca43119b74af 100644 --- 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 ( - + {Icon && ( 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 index 5d99f5f29dbc..ce93134e6889 100644 --- 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) => { openURL(contactSupportUrl)}> + } /> ); @@ -194,7 +194,8 @@ const FirmwareUpdate = (props: Props) => { )} - { @@ -205,7 +206,7 @@ const FirmwareUpdate = (props: Props) => { }} > - + } /> diff --git a/apps/ledger-live-desktop/src/renderer/styles/theme.ts b/apps/ledger-live-desktop/src/renderer/styles/theme.ts index edf78c3028a9..a38ee068c74c 100644 --- 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 index d8f12cf24efd..a48ca87396a9 100644 --- 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.",