diff --git a/src/components/v2/ProgressBar/index.stories.tsx b/src/components/v2/ProgressBar/index.stories.tsx index 2bdfb4dad9..e62a526b83 100644 --- a/src/components/v2/ProgressBar/index.stories.tsx +++ b/src/components/v2/ProgressBar/index.stories.tsx @@ -15,7 +15,7 @@ export const ValidProgressBar = () => ( export const ProgressBarWithCustomProgressColor = () => ( { const safeValue = value < max ? value : max; @@ -42,7 +43,7 @@ export const ProgressBar = ({ const styles = useStyles({ over: mark ? safeValue > mark : false, secondaryOver: mark ? !!(secondaryValue && secondaryValue > mark) : false, - progressColorOverride, + successColor, }); const renderMark = (props?: NonNullable['mark']) => ( diff --git a/src/components/v2/ProgressBar/styles.ts b/src/components/v2/ProgressBar/styles.ts index 4efaa62e1e..63352a19c7 100644 --- a/src/components/v2/ProgressBar/styles.ts +++ b/src/components/v2/ProgressBar/styles.ts @@ -4,30 +4,25 @@ import { useTheme } from '@mui/material'; export const useStyles = ({ over, secondaryOver, - progressColorOverride, + successColor, }: { over: boolean; secondaryOver: boolean; - progressColorOverride?: string; + successColor: string; }) => { const theme = useTheme(); return { slider: css` display: block; - color: ${over ? theme.palette.interactive.error50 : theme.palette.interactive.success}; - color: ${progressColorOverride}; + color: ${over ? theme.palette.interactive.error50 : successColor}; background-color: ${theme.palette.background.default}; height: ${theme.spacing(2)}; padding: 0 !important; &.Mui-disabled { - color: ${over ? theme.palette.interactive.error50 : theme.palette.interactive.success}; - color: ${progressColorOverride}; + color: ${over ? theme.palette.interactive.error50 : successColor}; } .MuiSlider-track { - background-color: ${over - ? theme.palette.interactive.error50 - : theme.palette.interactive.success}; - background-color: ${progressColorOverride}; + background-color: ${over ? theme.palette.interactive.error50 : successColor}; height: ${theme.spacing(2)}; border-radius: ${theme.spacing(1)}; } diff --git a/src/components/v2/VoteProposalUi/ActiveVotingProgress/index.tsx b/src/components/v2/VoteProposalUi/ActiveVotingProgress/index.tsx index dddc4d7e20..a5cf6752f8 100644 --- a/src/components/v2/VoteProposalUi/ActiveVotingProgress/index.tsx +++ b/src/components/v2/VoteProposalUi/ActiveVotingProgress/index.tsx @@ -72,7 +72,7 @@ export const ActiveVotingProgress: React.FC = ({ label: t('voteProposalUi.statusCard.against'), value: getValueString(tokenId, votedAgainstWei), progressBarProps: { - progressColorOverride: PALETTE.interactive.error50, + successColor: PALETTE.interactive.error50, ariaLabel: t('voteProposalUi.statusCard.ariaLabelAgainst'), value: getValueNumber(tokenId, votedAgainstWei), }, @@ -82,7 +82,7 @@ export const ActiveVotingProgress: React.FC = ({ label: t('voteProposalUi.statusCard.abstain'), value: getValueString(tokenId, abstainedWei), progressBarProps: { - progressColorOverride: PALETTE.text.secondary, + successColor: PALETTE.text.secondary, ariaLabel: t('voteProposalUi.statusCard.ariaLabelAbstain'), value: getValueNumber(tokenId, abstainedWei), }, @@ -92,7 +92,7 @@ export const ActiveVotingProgress: React.FC = ({ ); return ( - <> +
{activeProposalVotingData.map(({ id, label, value, progressBarProps }) => { if (!value) { return null; @@ -112,6 +112,6 @@ export const ActiveVotingProgress: React.FC = ({ ); })} - +
); }; diff --git a/src/components/v2/VoteProposalUi/styles.ts b/src/components/v2/VoteProposalUi/styles.ts index 834505211b..e5c39be236 100644 --- a/src/components/v2/VoteProposalUi/styles.ts +++ b/src/components/v2/VoteProposalUi/styles.ts @@ -29,6 +29,7 @@ export const useStyles = () => { cardHeader: css` display: flex; justify-content: space-between; + align-items: center; `, cardBadges: css` /* TODO */ @@ -80,6 +81,11 @@ export const useStyles = () => { `, /* StatusCard styles */ + votesWrapper: css` + display: flex; + flex-direction: column; + width: 100%; + `, voteRow: css` display: flex; justify-content: space-between;