diff --git a/src/pages/proposal-commons/vote-status/vote-status.module.scss b/src/pages/proposal-commons/vote-status/vote-status.module.scss index a2d9f2a2..341f9309 100644 --- a/src/pages/proposal-commons/vote-status/vote-status.module.scss +++ b/src/pages/proposal-commons/vote-status/vote-status.module.scss @@ -15,19 +15,36 @@ } } +.votedByDelegate { + @include font-body-17; +} + .wrapperLarge { display: flex; justify-content: center; - align-items: center; margin: 14px 0 48px 0; @include font-body-11; @media (min-width: $md) { @include font-body-5; } + + .votedByDelegate { + @include font-body-17; + text-align: left; + + @media (min-width: $md) { + @include font-body-14; + } + } } .icon { - margin-right: $space-sm; - height: 25px; + margin-right: 6px; + height: 26px; + + @media (min-width: $md) { + margin-right: 8px; + height: 30px; + } } diff --git a/src/pages/proposal-commons/vote-status/vote-status.test.ts b/src/pages/proposal-commons/vote-status/vote-status.test.ts deleted file mode 100644 index da1303cb..00000000 --- a/src/pages/proposal-commons/vote-status/vote-status.test.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { formatVoteStatus } from './vote-status'; - -describe('formatVoteStatus', () => { - it('formats correctly when delegated', () => { - expect(formatVoteStatus(0, true)).toBe('Unvoted'); - expect(formatVoteStatus(1, true)).toBe('Voted For (by delegate)'); - expect(formatVoteStatus(2, true)).toBe('Voted Against (by delegate)'); - }); - - it('formats correctly when NOT delegated', () => { - expect(formatVoteStatus(0, false)).toBe('Unvoted'); - expect(formatVoteStatus(1, false)).toBe('Voted For'); - expect(formatVoteStatus(2, false)).toBe('Voted Against'); - }); -}); diff --git a/src/pages/proposal-commons/vote-status/vote-status.tsx b/src/pages/proposal-commons/vote-status/vote-status.tsx index 8434bba2..2ad75457 100644 --- a/src/pages/proposal-commons/vote-status/vote-status.tsx +++ b/src/pages/proposal-commons/vote-status/vote-status.tsx @@ -9,11 +9,6 @@ interface Props { large?: true; } -export const formatVoteStatus = (voterState: keyof typeof VOTER_STATES, wasDelegated: boolean) => { - if (VOTER_STATES[voterState] === 'Unvoted') return 'Unvoted'; - return [VOTER_STATES[voterState], wasDelegated && '(by delegate)'].filter(Boolean).join(' '); -}; - const VoteStatus = (props: Props) => { const { voterState, wasDelegated, large } = props; @@ -33,7 +28,10 @@ const VoteStatus = (props: Props) => { [styles.votedFor]: VOTER_STATES[voterState] === 'Voted For', })} > - {formatVoteStatus(voterState, wasDelegated)} + {VOTER_STATES[voterState]} + {VOTER_STATES[voterState] !== 'Unvoted' && wasDelegated && ( +