Chore: css

Author: baomastr

src/components/v2/ProgressBar/index.stories.tsx

@@ -15,7 +15,7 @@ export const ValidProgressBar = () => (
 
 export const ProgressBarWithCustomProgressColor = () => (
   <ProgressBar
-    progressColorOverride="yellow"
+    successColor="yellow"
     value={50}
     step={5}
     mark={75}

src/components/v2/ProgressBar/index.tsx

@@ -6,6 +6,7 @@ import { SliderTypeMap } from '@mui/material/Slider/Slider';
 
 import { Tooltip, ITooltipProps } from '../Tooltip';
 import { useStyles } from './styles';
+import { PALETTE } from '../../../theme/MuiThemeProvider/muiTheme';
 
 export interface IProgressBarProps {
   value: number;
@@ -19,7 +20,7 @@ export interface IProgressBarProps {
   markTooltip?: ITooltipProps['title'];
   className?: string;
   tooltipPlacement?: ITooltipProps['placement'];
-  progressColorOverride?: string;
+  successColor?: string;
 }
 
 export const ProgressBar = ({
@@ -34,15 +35,15 @@ export const ProgressBar = ({
   markTooltip,
   className,
   tooltipPlacement = 'top',
-  progressColorOverride,
+  successColor = PALETTE.interactive.success,
 }: IProgressBarProps) => {
   const safeValue = value < max ? value : max;
 
   const marks = mark ? [{ value: mark }] : undefined;
   const styles = useStyles({
     over: mark ? safeValue > mark : false,
     secondaryOver: mark ? !!(secondaryValue && secondaryValue > mark) : false,
-    progressColorOverride,
+    successColor,
   });
 
   const renderMark = (props?: NonNullable<SliderTypeMap['props']['componentsProps']>['mark']) => (

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)};
       }

src/components/v2/VoteProposalUi/ActiveVotingProgress/index.tsx

@@ -72,7 +72,7 @@ export const ActiveVotingProgress: React.FC<IActiveVotingProgressProps> = ({
         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<IActiveVotingProgressProps> = ({
         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<IActiveVotingProgressProps> = ({
   );
 
   return (
-    <>
+    <div css={styles.votesWrapper}>
       {activeProposalVotingData.map(({ id, label, value, progressBarProps }) => {
         if (!value) {
           return null;
@@ -112,6 +112,6 @@ export const ActiveVotingProgress: React.FC<IActiveVotingProgressProps> = ({
           </React.Fragment>
         );
       })}
-    </>
+    </div>
   );
 };

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;