Merge pull request #3992 from Emurgo/fix/YOEXT-1976

fix: notifications toasts icons styling

Author: vsubhuman

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

@@ -1,10 +1,10 @@
 import React from 'react';
 
-export const Cancel = (props: React.SVGProps<SVGSVGElement>) => {
+export const Cancel = () => {
   return (
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M15.7071 8.29289C16.0976 8.68342 16.0976 9.31658 15.7071 9.70711L13.4142 12L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L12 13.4142L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L10.5858 12L8.29289 9.70711C7.90237 9.31658 7.90237 8.68342 8.29289 8.29289C8.68342 7.90237 9.31658 7.90237 9.70711 8.29289L12 10.5858L14.2929 8.29289C14.6834 7.90237 15.3166 7.90237 15.7071 8.29289Z" fill={props.fill || "currentColor"} />
-      <path fillRule="evenodd" clipRule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z" fill={props.fill || "currentColor"} />
+      <path d="M15.7071 8.29289C16.0976 8.68342 16.0976 9.31658 15.7071 9.70711L13.4142 12L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L12 13.4142L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L10.5858 12L8.29289 9.70711C7.90237 9.31658 7.90237 8.68342 8.29289 8.29289C8.68342 7.90237 9.31658 7.90237 9.70711 8.29289L12 10.5858L14.2929 8.29289C14.6834 7.90237 15.3166 7.90237 15.7071 8.29289Z" fill="currentColor" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z" fill="currentColor" />
     </svg>
   );
 };

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

@@ -1,17 +1,17 @@
 import React from 'react';
 
-export const Receive = (_: React.SVGProps<SVGSVGElement>) => {
+export const Receive = () => {
   return (
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M12 7C12.5523 7 13 7.44772 13 8V13.5858L15.2929 11.2929C15.6834 10.9024 16.3166 10.9024 16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L12.7071 16.7071C12.3166 17.0976 11.6834 17.0976 11.2929 16.7071L7.29289 12.7071C6.90237 12.3166 6.90237 11.6834 7.29289 11.2929C7.68342 10.9024 8.31658 10.9024 8.70711 11.2929L11 13.5858V8C11 7.44772 11.4477 7 12 7Z"
-        fill="black"
+        fill="currentColor"
       />
       <path
         fill-rule="evenodd"
         clip-rule="evenodd"
         d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z"
-        fill="black"
+         fill="currentColor"
       />
     </svg>
   );

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

@@ -5,13 +5,13 @@ export const Send = (props: React.SVGProps<SVGSVGElement>) => {
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
       <path
         d="M7.29289 11.2929L11.2929 7.29289C11.6834 6.90237 12.3166 6.90237 12.7071 7.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071C16.3166 13.0976 15.6834 13.0976 15.2929 12.7071L13 10.4142V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V10.4142L8.70711 12.7071C8.31658 13.0976 7.68342 13.0976 7.29289 12.7071C6.90237 12.3166 6.90237 11.6834 7.29289 11.2929Z"
-        fill="#4B6DDE"
+        fill="currentColor"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z"
-        fill="#4B6DDE"
+        fill="currentColor"
       />
     </svg>
   );

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

@@ -1,21 +1,21 @@
 import React from 'react';
 
-export const Staking = (props: React.SVGProps<SVGSVGElement>) => {
+export const Staking = () => {
   return (
     <svg width="24" height="24" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M17 7C17 3.13401 13.866 0 10 0C6.13401 0 3 3.13401 3 7C3 10.866 6.13401 14 10 14C13.866 14 17 10.866 17 7ZM5 7C5 4.23858 7.23858 2 10 2C12.7614 2 15 4.23858 15 7C15 9.76142 12.7614 12 10 12C7.23858 12 5 9.76142 5 7Z"
-        fill={props.fill}
+        fill="currentColor"
       />
       <path
         d="M3.83203 13.5547C4.13839 13.0952 4.01421 12.4743 3.55468 12.168C3.09516 11.8616 2.47429 11.9858 2.16793 12.4453L0.175339 15.4342C0.120665 15.5137 0.0771997 15.6016 0.047221 15.6955C0.00659317 15.8223 -0.00748416 15.9543 0.00344384 16.0836C0.014645 16.2189 0.0528037 16.3466 0.112538 16.4613C0.178898 16.5893 0.273797 16.7044 0.395157 16.7964C0.482244 16.8627 0.580526 16.9149 0.686665 16.9499C0.793789 16.9853 0.90467 17.0017 1.01463 17H3.88192L5.09836 19.4329C5.13559 19.5106 5.18311 19.584 5.24048 19.6509C5.3238 19.7483 5.42382 19.827 5.53398 19.8849C5.66407 19.9536 5.80389 19.9909 5.94384 19.9986C6.2121 20.0134 6.48085 19.9198 6.68255 19.7311C6.74348 19.6743 6.79634 19.6106 6.84052 19.542L8.83204 16.5547C9.13839 16.0952 9.01421 15.4743 8.55468 15.168C8.09516 14.8616 7.47429 14.9858 7.16793 15.4453L6.12377 17.0116L5.4049 15.5738C5.32424 15.4029 5.19656 15.2584 5.03854 15.1573C4.91479 15.078 4.77243 15.0253 4.61947 15.0071C4.57292 15.0014 4.52585 14.999 4.4786 15H2.86851L3.83203 13.5547Z"
-        fill={props.fill}
+        fill="currentColor"
       />
       <path
         d="M16.4453 12.168C15.9858 12.4743 15.8616 13.0952 16.1679 13.5547L17.1315 15H15.5223C15.4702 14.9989 15.4183 15.0018 15.3671 15.0087C15.2289 15.0271 15.0996 15.0737 14.9852 15.1425C14.8171 15.2436 14.6812 15.3928 14.5964 15.571L13.8762 17.0115L12.832 15.4453C12.5257 14.9858 11.9048 14.8616 11.4453 15.1679C10.9858 15.4743 10.8616 16.0952 11.1679 16.5547L13.1588 19.5409C13.2063 19.6151 13.2641 19.6834 13.3311 19.7437C13.4254 19.8286 13.5336 19.8933 13.6492 19.9365C13.7847 19.9875 13.9257 20.007 14.0634 19.9981C14.1997 19.9896 14.3356 19.9531 14.4624 19.8867C14.5737 19.8288 14.6747 19.7497 14.7588 19.6517C14.8166 19.5845 14.8644 19.5107 14.9018 19.4325L16.118 17H18.9853C19.0953 17.0017 19.2062 16.9853 19.3133 16.9499C19.4194 16.9149 19.5177 16.8626 19.6048 16.7964C19.7262 16.7044 19.8211 16.5893 19.8874 16.4613C19.9468 16.3474 19.9848 16.2206 19.9963 16.0863C20.0076 15.9561 19.9937 15.8232 19.9527 15.6955C19.9228 15.6016 19.8793 15.5138 19.8246 15.4342L17.832 12.4453C17.5257 11.9858 16.9048 11.8616 16.4453 12.168Z"
-        fill={props.fill}
+        fill="currentColor"
       />
     </svg>
   );

packages/yoroi-extension/app/UI/features/notifications/common/NotificationsManager.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
 import { ToastContainer } from 'react-toastify'
 import NotificationsStyles, { FadeInOut } from './NotificationsStyles';
+/* import { useNotifications } from '../module/NotificationsProvider';
+import { Box, Button } from '@mui/material';
+import environment from '../../../../environment';
+import { NotificationTypes } from '../../../types/notifications'; */
 
 export default function NotificationsManager() {
-  // const { showRandomToast } = useNotifications();
+  // const { createNotification } = useNotifications();
 
   return (
     <>
@@ -18,16 +22,16 @@ export default function NotificationsManager() {
         closeButton={false}
         closeOnClick={false}
       />
-      {/*{environment.isDev() && (*/}
-      {/*  <Box sx={{ position: 'fixed', bottom: 10, left: 100, zIndex: 9999 }}>*/}
-      {/*    <Button*/}
-      {/*      variant='contained'*/}
-      {/*      onClick={showRandomToast}*/}
-      {/*    >*/}
-      {/*      Create toast notification*/}
-      {/*    </Button>*/}
-      {/*  </Box>*/}
-      {/*)}*/}
+      {/* {environment.isDev() && (
+        <Box sx={{ position: 'fixed', bottom: 10, left: 100, zIndex: 9999 }}>
+          <Button
+            variant='contained'
+            onClick={() => createNotification(NotificationTypes.Rewards)}
+         >
+            Create toast notification
+          </Button>
+      </Box>
+      )} */}
     </>
   )
 }

packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/AssetTransactionDetails/TransactionTable.tsx

@@ -4,7 +4,7 @@ import _ from 'lodash';
 import moment from 'moment';
 import React, { Fragment, useMemo, useState } from 'react';
 import { Card } from '../../../../../components';
-import { Icon } from '../../../../../components/icons';
+import { Icon, Icons, IconWrapper } from '../../../../../components/icons';
 import { formatNumber } from '../../../common/helpers/formatHelper';
 import { mapStrings } from '../../../common/helpers/transactionHelper';
 import { useStrings } from '../../../common/hooks/useStrings';
@@ -153,9 +153,9 @@ const TransactionHistoryItem = ({ index, row, theme, strings, unitOfAccount, hea
             {row.type === HistoryItemType.RECEIVED && (
               <Icon.Send stroke={theme.palette.ds.secondary_600} style={{ transform: 'rotate(180deg)' }} />
             )}
-            {row.type === HistoryItemType.ERROR && <Icon.Cancel fill={theme.palette.ds.sys_magenta_500} />}
-            {row.type === HistoryItemType.WITHDRAW && <Icon.Staking fill={theme.palette.ds.secondary_600} />}
-            {row.type === HistoryItemType.DELEGATE && <Icon.Staking fill={theme.palette.ds.primary_500} />}
+            {row.type === HistoryItemType.ERROR && <IconWrapper color="ds.sys_magenta_500" icon={Icons.Cancel} />}
+            {row.type === HistoryItemType.WITHDRAW && <IconWrapper color="ds.secondary_600" icon={Icons.Staking} />}
+            {row.type === HistoryItemType.DELEGATE &&<IconWrapper color="ds.primary_500" icon={Icons.Staking} />}
           </IconButton>
           <Stack direction="column">
             <Typography color="ds.gray_900">{row.label}</Typography>