Merge pull request #3984 from Emurgo/fix/YOEXT-1963

fix: yoroi drep banner close button styling

Author: vsubhuman

packages/yoroi-extension/app/UI/components/DrepPromotionBanner/DrepPromotionBanner.tsx

@@ -1,4 +1,4 @@
-import { Button, Stack, Typography, styled } from '@mui/material';
+import { Button, Stack, Typography, styled, useTheme } from '@mui/material';
 import BigNumber from 'bignumber.js';
 import { observer } from 'mobx-react';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
@@ -55,6 +55,7 @@ const useDrepBannerVisibility = (balance: BigNumber, selectedWalletId: number) =
 
 export const DrepPromotionBanner = observer(({ stores, intl }) => {
   const selectedWallet = stores.wallets.selectedOrFail;
+  const theme: any = useTheme();
 
   if (selectedWallet.isTestnet) {
     return null;
@@ -100,6 +101,7 @@ export const DrepPromotionBanner = observer(({ stores, intl }) => {
         <IconWrapper
           onClick={dismissBanner}
           icon={Icons.CloseCircleIcon}
+          iconProps={{fill: theme.palette.ds.el_gray_max}}
           color="ds.el_gray_max"
           borderColor="ds.el_gray_max"
           asButton

packages/yoroi-extension/app/UI/components/icons/CloseCircleIcon.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 
-export const CloseCircleIcon = () => {
+export const CloseCircleIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg width="24" height="24" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M13.7071 6.29289C14.0976 6.68342 14.0976 7.31658 13.7071 7.70711L11.4142 10L13.7071 12.2929C14.0976 12.6834 14.0976 13.3166 13.7071 13.7071C13.3166 14.0976 12.6834 14.0976 12.2929 13.7071L10 11.4142L7.70711 13.7071C7.31658 14.0976 6.68342 14.0976 6.29289 13.7071C5.90237 13.3166 5.90237 12.6834 6.29289 12.2929L8.58579 10L6.29289 7.70711C5.90237 7.31658 5.90237 6.68342 6.29289 6.29289C6.68342 5.90237 7.31658 5.90237 7.70711 6.29289L10 8.58579L12.2929 6.29289C12.6834 5.90237 13.3166 5.90237 13.7071 6.29289Z"
-        fill="black"
+        fill={props.fill || "black"}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10ZM10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2Z"
-        fill="black"
+        fill={props.fill || "black"}
       />
     </svg>
   );