Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

💄 LLD - Fix Send StepConfirmation error message layout that was broken on some languages #8790

Merged
merged 1 commit into from
Jan 3, 2025
+66 −31
Merged

💄 LLD - Fix Send StepConfirmation error message layout that was broken on some languages #8790

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/chilled-coats-drive.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"ledger-live-desktop": minor
---

LLD - Fix Send StepConfirmation error message layout that was broken on some languages
41 changes: 28 additions & 13 deletions ...ledger-live-desktop/src/renderer/modals/Send/steps/Confirmation/NodeError/HelpSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,16 @@ type Props = {
onGetHelp: () => void;
};

const Container = styled(Flex)`
--line-clamp: 2;

&:hover {
--line-clamp: unset;
}
`;

const InteractFlex = styled(Flex)`
height: 40px;
&:hover {
cursor: pointer;
background-color: ${({ theme }) => theme.colors.palette.opacityDefault.c10};
Expand All @@ -24,34 +33,40 @@ const InteractFlex = styled(Flex)`
`;

const StyledText = styled(Text)`
word-break: break-all;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--line-clamp);
overflow: hidden;
text-overflow: ellipsis;
padding-right: 6px;
`;

const HelpSection = ({ onGetHelp }: Props) => {
const { t } = useTranslation();
return (
<Flex
alignItems="start"
flexDirection="column"
rowGap={2}
<Container
flexDirection="row"
bg="opacityDefault.c05"
borderRadius={8}
justifyContent="space-between"
p={2}
minHeight="128px"
p={3}
flex={1}
mb={2}
width="100%"
>
<Text variant="bodyLineHeight" fontSize={13}>
{t("errors.TransactionBroadcastError.helpCenterTitle")}
<Text color="neutral.c70">{t("errors.TransactionBroadcastError.helpCenterDesc")}</Text>
</Text>
<InteractFlex onClick={onGetHelp}>
<Flex flexShrink={1}>
<StyledText variant="bodyLineHeight" fontSize={13} flex={1} color="neutral.c70">
<Text color="neutral.c100">{t("errors.TransactionBroadcastError.helpCenterTitle")}</Text>
<Text color="neutral.c70">{t("errors.TransactionBroadcastError.helpCenterDesc")}</Text>
</StyledText>
</Flex>
<InteractFlex onClick={onGetHelp} flexShrink={0} flexGrow={0} alignSelf={"start"}>
<Icons.Support color="neutral.c100" size="S" />
<StyledText variant="bodyLineHeight" fontSize={13}>
{t("errors.TransactionBroadcastError.getHelp")}
</StyledText>
</InteractFlex>
</Flex>
</Container>
);
};

Expand Down
41 changes: 28 additions & 13 deletions ...e-desktop/src/renderer/modals/Send/steps/Confirmation/NodeError/TechnicalErrorSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,16 @@ type Props = {
onSaveLogs: () => void;
};

const Container = styled(Flex)`
--line-clamp: 2;

&:hover {
--line-clamp: unset;
}
`;

const InteractFlex = styled(Flex)`
height: 40px;
&:hover {
cursor: pointer;
background-color: ${({ theme }) => theme.colors.palette.opacityDefault.c10};
Expand All @@ -26,11 +35,12 @@ const InteractFlex = styled(Flex)`
`;

const StyledText = styled(Text)`
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--line-clamp);
overflow: hidden;
text-overflow: ellipsis;
padding-right: 6px;
`;

const TechnicalErrorSection = ({ error, onSaveLogs }: Props) => {
Expand All @@ -49,28 +59,33 @@ const TechnicalErrorSection = ({ error, onSaveLogs }: Props) => {
};

return (
<Flex
alignItems="flex-start"
flexDirection="column"
<Container
flexDirection="row"
bg="opacityDefault.c05"
borderRadius={8}
justifyContent="space-between"
p={2}
p={3}
flex={1}
width="100%"
>
<StyledText variant="bodyLineHeight" fontSize={13} width="100%">
{t("errors.TransactionBroadcastError.technicalErrorTitle")}
<Text color="neutral.c70">{error.message}</Text>
</StyledText>
<Flex columnGap={2}>
<InteractFlex onClick={onSaveLogs}>
<Flex flexShrink={1}>
<StyledText variant="bodyLineHeight" fontSize={13} flex={1} color="neutral.c70">
<Text color="neutral.c100">
{t("errors.TransactionBroadcastError.technicalErrorTitle")}
</Text>
<Text color="neutral.c70">{error.message}</Text>
</StyledText>
</Flex>
<Flex columnGap={2} alignSelf="start">
<InteractFlex onClick={onSaveLogs} flexShrink={1}>
<Icons.Download color="neutral.c100" size="S" />
<Text variant="bodyLineHeight" fontSize={13}>
{t("errors.TransactionBroadcastError.saveLogs")}
</Text>
</InteractFlex>
<InteractFlex onClick={handleCopyError}>{icon}</InteractFlex>
</Flex>
</Flex>
</Container>
);
};

Expand Down
10 changes: 5 additions & 5 deletions apps/ledger-live-desktop/src/renderer/modals/Send/steps/Confirmation/NodeError/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState } from "react";
import { Flex, Grid, Icons, Text } from "@ledgerhq/react-ui";
import { Flex, Icons, Text } from "@ledgerhq/react-ui";
import styled, { useTheme } from "styled-components";
import { CircleWrapper } from "~/renderer/components/CryptoCurrencyIcon";
import { useExportLogs } from "LLD/hooks/useExportLogs";
Expand Down Expand Up @@ -46,7 +46,7 @@ const NodeError: React.FC<Props> = ({ error }) => {
<Flex
justifyContent="center"
alignItems="center"
width={"90%"}
width="100%"
rowGap={32}
flexDirection="column"
>
Expand All @@ -72,7 +72,7 @@ const NodeError: React.FC<Props> = ({ error }) => {
}
/>
</Flex>
<Flex flexDirection="column" rowGap={16} width="100%" alignItems="flex-start">
<Flex flexDirection="column" rowGap={16} flex={1} alignItems="flex-start">
<InteractFlex alignItems="center" onClick={onShowMore}>
<Text variant="bodyLineHeight" fontSize={13}>
{t("errors.TransactionBroadcastError.needHelp")}
Expand All @@ -85,10 +85,10 @@ const NodeError: React.FC<Props> = ({ error }) => {
)}
</InteractFlex>
{isShowMore && (
<Grid columns={2} columnGap="8px" width="100%">
<Flex flexDirection="column" flex={1}>
<HelpSection onGetHelp={onGetHelp} />
<TechnicalErrorSection error={error} onSaveLogs={onSaveLogs} />
</Grid>
</Flex>
)}
</Flex>
</Flex>
Expand Down
Loading