diff options
| -rw-r--r-- | gui/src/renderer/components/RedeemVoucher.tsx | 13 | ||||
| -rw-r--r-- | gui/src/renderer/components/RedeemVoucherStyles.tsx | 15 |
2 files changed, 25 insertions, 3 deletions
diff --git a/gui/src/renderer/components/RedeemVoucher.tsx b/gui/src/renderer/components/RedeemVoucher.tsx index 72ff6aa265..5521e66850 100644 --- a/gui/src/renderer/components/RedeemVoucher.tsx +++ b/gui/src/renderer/components/RedeemVoucher.tsx @@ -16,6 +16,8 @@ import { StyledErrorResponse, StyledInput, StyledLabel, + StyledProgressResponse, + StyledProgressWrapper, StyledSpinner, StyledStatusIcon, StyledTitle, @@ -153,7 +155,16 @@ export function RedeemVoucherResponse() { const { response, submitting } = useContext(RedeemVoucherContext); if (submitting) { - return <StyledSpinner source="icon-spinner" height={20} width={20} />; + return ( + <> + <StyledProgressWrapper> + <StyledSpinner source="icon-spinner" height={20} width={20} /> + <StyledProgressResponse> + {messages.pgettext('redeem-voucher-view', 'Verifying voucher...')} + </StyledProgressResponse> + </StyledProgressWrapper> + </> + ); } if (response) { diff --git a/gui/src/renderer/components/RedeemVoucherStyles.tsx b/gui/src/renderer/components/RedeemVoucherStyles.tsx index 908681898a..bbf20067b3 100644 --- a/gui/src/renderer/components/RedeemVoucherStyles.tsx +++ b/gui/src/renderer/components/RedeemVoucherStyles.tsx @@ -34,10 +34,21 @@ export const StyledResponse = styled.span({ fontFamily: 'Open Sans', fontSize: '13px', lineHeight: '20px', + fontWeight: 800, + color: colors.white, +}); + +export const StyledProgressWrapper = styled.div({ + display: 'flex', + alignItems: 'center', + marginTop: '8px', +}); + +export const StyledProgressResponse = styled(StyledResponse)({ + marginTop: 0, }); export const StyledErrorResponse = styled(StyledResponse)({ - fontWeight: 800, color: colors.red, }); @@ -47,7 +58,7 @@ export const StyledEmptyResponse = styled.span({ }); export const StyledSpinner = styled(ImageView)({ - marginTop: '8px', + marginRight: '8px', }); export const StyledStatusIcon = styled.div({ |
