summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--gui/src/renderer/components/RedeemVoucher.tsx13
-rw-r--r--gui/src/renderer/components/RedeemVoucherStyles.tsx15
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({