Chore/vote progress color (#1504)

* chore: fix vote progress color

* chore: sort out double full stops
This commit is contained in:
Dexter Edwards 2022-09-27 14:00:11 +01:00 committed by GitHub
parent 0d8c052ec6
commit 3b03b16938
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 44 additions and 6 deletions

View File

@ -63,7 +63,7 @@ export const CurrentProposalStatus = ({
<>
<span>{t('voteFailedReason')}</span>
<StatusFail>{t('participationNotMet')}</StatusFail>
<span>&nbsp;{daysClosedAgo}.</span>
<span>&nbsp;{daysClosedAgo}</span>
</>
);
}
@ -73,7 +73,7 @@ export const CurrentProposalStatus = ({
<>
<span>{t('voteFailedReason')}</span>
<StatusFail>{t('majorityNotMet')}</StatusFail>
<span>&nbsp;{daysClosedAgo}.</span>
<span>&nbsp;{daysClosedAgo}</span>
</>
);
}
@ -82,7 +82,7 @@ export const CurrentProposalStatus = ({
<>
<span>{t('voteFailedReason')}</span>
<StatusFail>{proposal.state}</StatusFail>
<span>&nbsp;{daysClosedAgo}.</span>
<span>&nbsp;{daysClosedAgo}</span>
</>
);
}
@ -99,7 +99,6 @@ export const CurrentProposalStatus = ({
{proposal.state === ProposalState.STATE_ENACTED
? daysEnactedAgo
: daysClosedAgo}
.
</span>
</>
);

View File

@ -0,0 +1,29 @@
import { render, screen } from '@testing-library/react';
import BigNumber from 'bignumber.js';
import { VoteProgress } from './vote-progress';
it('Renders with data-testid', () => {
render(
<VoteProgress threshold={new BigNumber(50)} progress={new BigNumber(10)} />
);
expect(screen.getByTestId('vote-progress')).toBeInTheDocument();
});
it('Renders indicator', () => {
render(
<VoteProgress threshold={new BigNumber(50)} progress={new BigNumber(10)} />
);
expect(screen.getByTestId('vote-progress-indicator')).toBeInTheDocument();
});
it('Renders widths appropriately', () => {
render(
<VoteProgress threshold={new BigNumber(50)} progress={new BigNumber(10)} />
);
expect(screen.getByTestId('vote-progress-bar-for')).toHaveStyle({
width: '10%',
});
expect(screen.getByTestId('vote-progress-bar-against')).toHaveStyle({
width: '90%',
});
});

View File

@ -8,7 +8,10 @@ export const VoteProgress = ({
progress: BigNumber;
}) => {
return (
<div className="w-full h-1 relative bg-neutral-500">
<div
data-testid="vote-progress"
className="w-full h-1 relative bg-neutral-500"
>
<div
data-testid="vote-progress-indicator"
className="absolute -top-1 w-[1px] h-3 bg-white z-1"
@ -17,11 +20,18 @@ export const VoteProgress = ({
<div className="w-full h-2">
<div
className="absolute left-0 bg-vega-green h-1"
data-testid="vote-progress-bar"
data-testid="vote-progress-bar-for"
style={{
width: `${progress}%`,
}}
/>
<div
className="absolute left-0 bg-vega-red h-1"
data-testid="vote-progress-bar-against"
style={{
width: `${100 - progress.toNumber()}%`,
}}
/>
</div>
</div>
);