Added width and height to images

src/components-v2/TokenLogo/TokenLogo.tsx

@@ -14,7 +14,16 @@ const TokenLogo = ({ token, ...imageProps }: Props): JSX.Element => {
     currentTarget.src = '/assets/icons/token-logo-fallback.svg';
     currentTarget.onerror = null;
   };
-  return <img {...imageProps} src={getTokenIconPath(token)} onError={handleError} alt={`${token.symbol} logo`} />;
+  return (
+    <img
+      width="32"
+      height="32"
+      {...imageProps}
+      src={getTokenIconPath(token)}
+      onError={handleError}
+      alt={`${token.symbol} logo`}
+    />
+  );
 };
 
 export default TokenLogo;

src/components-v2/VaultApyInformation/index.tsx

@@ -239,7 +239,7 @@ const VaultApyInformation = ({
               <Box display="flex" justifyContent="flex-end" alignItems="center">
                 {isNewVault && (
                   <>
-                    <img width="12" src="assets/icons/new-vault.svg" alt="New Vault" />
+                    <img width="12" height="12" src="assets/icons/new-vault.svg" alt="New Vault" />
                     <Typography component="span">New Vault</Typography>
                   </>
                 )}

src/components-v2/YieldBearingVaults/YieldBearingRewards.tsx

@@ -25,7 +25,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   video: {
     display: 'flex',
-    background: '#CCCCCC',
+    background: '#121212',
     width: '100%',
     height: 320,
   },

src/components-v2/common/NetworkGasWidget.tsx

@@ -44,6 +44,8 @@ const NetworkGasWidget = (): JSX.Element => {
             className={classes.selectedNetworkIcon}
             src={getNetworkIconPath(networkStore.network)}
             alt="selected network icon"
+            width="17"
+            height="17"
           />
         </Button>
         <Popper

src/components-v2/common/WalletTokenBalance.tsx

@@ -45,7 +45,7 @@ const WalletTokenBalance = ({ balance }: Props): JSX.Element => {
     <Grid container className={classes.tokenBalance}>
       <Grid item container justifyContent="space-between" alignItems="center">
         <div className={classes.tokenNameAndIcon}>
-          <TokenLogo className={classes.icon} token={token} />
+          <TokenLogo className={classes.icon} token={token} width="25" height="25" />
           <Typography variant="body1" display="inline" className={classes.tokenName}>
             {balance.token.symbol}
           </Typography>

src/components-v2/common/dialogs/VaultDeposit.tsx

@@ -106,6 +106,7 @@ const useStyles = makeStyles((theme) => ({
       height: '100%',
       '& img': {
         maxWidth: 24,
+        maxHeight: 24,
       },
       '& .token-name': {
         paddingLeft: 5,

src/components-v2/common/dialogs/VaultWithdraw.tsx

@@ -62,6 +62,7 @@ const useStyles = makeStyles((theme) => ({
       height: '100%',
       '& img': {
         maxWidth: 24,
+        maxHeight: 24,
       },
       '& .token-name': {
         paddingLeft: 5,

src/components-v2/landing/VaultItemApr.tsx

@@ -24,6 +24,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   aprDisplay: {
     justifyContent: 'flex-end',
+    alignItems: 'center',
     [theme.breakpoints.down('sm')]: {
       justifyContent: 'flex-start',
     },
@@ -106,7 +107,7 @@ const VaultItemApr = ({ vault }: Props): JSX.Element => {
   const isNewVault = vault.state === VaultState.Experimental || vault.state === VaultState.Guarded;
   const aprDisplay = isNewVault ? (
     <>
-      <img src={'assets/icons/new-vault.svg'} alt="New Vault" /> New Vault
+      <img src={'assets/icons/new-vault.svg'} alt="New Vault" width="12" height="12" /> New Vault
     </>
   ) : !useHistoricAPY ? (
     `${numberWithCommas(projectedVaultBoost.toFixed(2))}%`
@@ -126,13 +127,13 @@ const VaultItemApr = ({ vault }: Props): JSX.Element => {
         <Typography variant={isNewVault ? 'subtitle1' : 'body1'} color={'textPrimary'} display="inline">
           {aprDisplay}
         </Typography>
-        <img src="/assets/icons/apy-info.svg" className={classes.apyInfo} alt="apy info icon" />
+        <img src="/assets/icons/apy-info.svg" className={classes.apyInfo} alt="apy info icon" width="12" height="24" />
       </Box>
       {yieldSourcesAprTotal > 0 && (
         <Box className={classes.yieldBearingRewards}>
           <Link color="primary" onClick={handleYieldBearingRewardsClick}>
-            <img width="9" src="assets/icons/yield-bearing-rewards.svg" alt="Yield-Bearing Rewards" /> Yield-Bearing
-            Rewards:
+            <img width="9" height="15" src="assets/icons/yield-bearing-rewards.svg" alt="Yield-Bearing Rewards" />{' '}
+            Yield-Bearing Rewards:
           </Link>
           <Typography onClick={handleApyInfoClick} variant="inherit">
             Rewards earn up to {yieldSourcesAprTotal.toFixed(2)}%

src/components-v2/landing/VaultListItem.tsx

@@ -48,6 +48,9 @@ const useStyles = makeStyles((theme) => ({
         padding: 2,
       },
     },
+    '& img': {
+      width: 'fit-content',
+    },
   },
   vaultName: {
     fontSize: 16,

src/components-v2/landing/VaultListItemMobile.tsx

@@ -21,6 +21,11 @@ const useStyles = makeStyles(() => ({
   name: {
     marginLeft: 8,
   },
+  logoContainer: {
+    '& img': {
+      width: 'fit-content',
+    },
+  },
 }));
 
 interface Props {
@@ -48,7 +53,7 @@ const VaultListItemMobile = ({ vault }: Props): JSX.Element => {
 
   return (
     <Grid container direction="column" component={Card} onClick={goToVaultDetail} className={classes.root}>
-      <Grid item container>
+      <Grid item container className={classes.logoContainer}>
         <VaultLogo tokens={vault.tokens} />
         <Typography variant="subtitle1" display="inline" className={classes.name}>
           {vault.name}

src/components-v2/navbar/NavbarMobileRow.tsx

@@ -31,7 +31,7 @@ export const NavbarMobileRow = observer((): JSX.Element => {
     <Grid container justifyContent="space-between">
       <Grid item xs container alignItems="center">
         <IconButton className={classes.menuIcon} onClick={() => uiState.openSidebar()}>
-          <img src="/assets/icons/mobile-drawer-icon.svg" alt="open menu" />
+          <img src="/assets/icons/mobile-drawer-icon.svg" alt="open menu" width="22" height="19" />
         </IconButton>
         <img className={classes.badgerIcon} alt="Badger Logo" src="/assets/icons/badger_head.svg" />
       </Grid>

src/components-v2/vault-detail/specs/VaultMetrics.tsx

@@ -62,6 +62,7 @@ const useStyles = makeStyles((theme) => ({
   },
   aprDisplay: {
     justifyContent: 'flex-end',
+    alignItems: 'center',
     [theme.breakpoints.down('sm')]: {
       justifyContent: 'flex-start',
     },
@@ -111,7 +112,13 @@ const VaultMetrics = observer(({ vault }: Props): JSX.Element => {
             <Typography variant={'body1'} color={'textPrimary'} display="inline">
               {aprDisplay}
             </Typography>
-            <img src="/assets/icons/apy-info.svg" className={classes.apyInfo} alt="apy info icon" />
+            <img
+              src="/assets/icons/apy-info.svg"
+              className={classes.apyInfo}
+              alt="apy info icon"
+              width="12"
+              height="24"
+            />
           </Box>
         </Grid>
       </Grid>

src/components/Boost/BadgerBoostImage.tsx

@@ -23,14 +23,18 @@ const useStyles = (signatureColor: string) => {
 
 interface Props extends BoxProps {
   signatureColor: string;
+  imageProps: {
+    width: string;
+    height: string;
+  };
 }
 
-export const BadgerBoostImage = ({ signatureColor, className, ...boxProps }: Props): JSX.Element => {
+export const BadgerBoostImage = ({ signatureColor, className, imageProps, ...boxProps }: Props): JSX.Element => {
   const classes = useStyles(signatureColor)();
 
   return (
     <div className={clsx(className, classes.container)} {...boxProps}>
-      <img alt="Badger Logo" src={'assets/badger-transparent.png'} className={classes.boostImage} />
+      <img alt="Badger Logo" src={'assets/badger-transparent.png'} className={classes.boostImage} {...imageProps} />
     </div>
   );
 };

src/components/Boost/HoldingAssetInput.tsx

@@ -105,12 +105,24 @@ export const HoldingAssetInput = ({
         ...InputProps,
         startAdornment: (
           <Button className={buttonClasses.actionButton} onClick={onReduction}>
-            <img className={buttonClasses.actionImage} src="/assets/icons/boost-down.svg" alt={decreaseAlt} />
+            <img
+              width="12"
+              height="7"
+              className={buttonClasses.actionImage}
+              src="/assets/icons/boost-down.svg"
+              alt={decreaseAlt}
+            />
           </Button>
         ),
         endAdornment: (
           <Button className={buttonClasses.actionButton} onClick={onIncrement}>
-            <img className={buttonClasses.actionImage} src="/assets/icons/boost-up.svg" alt={increaseAlt} />
+            <img
+              width="12"
+              height="7"
+              className={buttonClasses.actionImage}
+              src="/assets/icons/boost-up.svg"
+              alt={increaseAlt}
+            />
           </Button>
         ),
         classes: inputClasses,

src/components/Boost/RankLevel.tsx

@@ -64,6 +64,7 @@ export const RankLevel = ({ name, signatureColor, obtained = false, hasBeenReach
         <BadgerBoostImage
           className={clsx(classes.softBorder, obtained && classes.obtained)}
           signatureColor={signatureColor}
+          imageProps={{ width: '28', height: '31.4' }}
         />
       </div>
       <div className={classes.badgerLevelInfoContainer}>

src/components/Boost/ScoreAnimation.tsx

@@ -30,6 +30,7 @@ const useStyles = makeStyles((theme) => ({
   },
   boostImage: {
     width: '60%',
+    height: 'auto',
   },
   boostEye: {
     width: '30px',
@@ -97,11 +98,19 @@ const useAnimatedStyles = (stakeRatio: number) => {
 export const BoostBadgerAnimation = ({ stakeRatio }: BoostBadgeProps): JSX.Element => {
   const classes = useStyles();
   const animatedClasses = useAnimatedStyles(stakeRatio)();
-  const eyesImage = <img src={'assets/badger-eyes.png'} alt="Badger Eyes" className={classes.boostEyeStar} />;
+  const eyesImage = (
+    <img width="6" height="6" src={'assets/badger-eyes.png'} alt="Badger Eyes" className={classes.boostEyeStar} />
+  );
   return (
     <Box className={[classes.root, animatedClasses.container].join(' ')}>
       <div className={[classes.boostEye, classes.boostLeft, animatedClasses.eyes].join(' ')}>{eyesImage}</div>
-      <img alt="Badger Logo" src={'assets/badger-transparent.png'} className={classes.boostImage} />
+      <img
+        alt="Badger Logo"
+        src={'assets/badger-transparent.png'}
+        className={classes.boostImage}
+        width="144"
+        height="161"
+      />
       <div className={[classes.boostEye, classes.boostRight, animatedClasses.eyes].join(' ')}>{eyesImage}</div>
     </Box>
   );

src/components/Boost/StakeInformationHeader.tsx

@@ -88,7 +88,10 @@ export const StakeInformationHeader = ({
     <Grid container>
       <Grid container alignItems="center">
         <div className={classes.currentLevelImgContainer}>
-          <BadgerBoostImage signatureColor={currentRank.signatureColor} />
+          <BadgerBoostImage
+            signatureColor={currentRank.signatureColor}
+            imageProps={{ width: '16.6', height: '18.8' }}
+          />
         </div>
         <Typography display="inline" className={classes.rankName}>
           {currentRank.name}

src/components/IbBTC/OptionToken.tsx

@@ -26,7 +26,7 @@ export const OptionToken = ({ token }: TokenProps): JSX.Element => {
   const classes = useStyles();
   return (
     <div className={classes.tokenContainer} aria-label={symbol}>
-      <TokenLogo token={token} className={classes.tokenIcon} />
+      <TokenLogo token={token} className={classes.tokenIcon} width="24" height="24" />
       <Typography variant="body1" component="div">
         {symbol}
       </Typography>