Chore/vote progress color (#1504)
* chore: fix vote progress color * chore: sort out double full stops
This commit is contained in:
parent
0d8c052ec6
commit
3b03b16938
@ -63,7 +63,7 @@ export const CurrentProposalStatus = ({
|
||||
<>
|
||||
<span>{t('voteFailedReason')}</span>
|
||||
<StatusFail>{t('participationNotMet')}</StatusFail>
|
||||
<span> {daysClosedAgo}.</span>
|
||||
<span> {daysClosedAgo}</span>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -73,7 +73,7 @@ export const CurrentProposalStatus = ({
|
||||
<>
|
||||
<span>{t('voteFailedReason')}</span>
|
||||
<StatusFail>{t('majorityNotMet')}</StatusFail>
|
||||
<span> {daysClosedAgo}.</span>
|
||||
<span> {daysClosedAgo}</span>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -82,7 +82,7 @@ export const CurrentProposalStatus = ({
|
||||
<>
|
||||
<span>{t('voteFailedReason')}</span>
|
||||
<StatusFail>{proposal.state}</StatusFail>
|
||||
<span> {daysClosedAgo}.</span>
|
||||
<span> {daysClosedAgo}</span>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -99,7 +99,6 @@ export const CurrentProposalStatus = ({
|
||||
{proposal.state === ProposalState.STATE_ENACTED
|
||||
? daysEnactedAgo
|
||||
: daysClosedAgo}
|
||||
.
|
||||
</span>
|
||||
</>
|
||||
);
|
||||
|
@ -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%',
|
||||
});
|
||||
});
|
@ -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>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user