fix: fix dark theme logo

lifinance · May 26, 2022 · effa1d4 · effa1d4
1 parent 88df9ff
commit effa1d4
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 15 deletions.
diff --git a/packages/widget/src/components/LiFiLogo.tsx b/packages/widget/src/components/LiFiLogo.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from '@mui/material/styles';
 import { CSSProperties } from 'react';
 import { ReactComponent as LiFiFullLogo } from '../icons/LiFiFullLogo.svg';
 import { ReactComponent as LiFiIconLogo } from '../icons/LiFiLogo.svg';
@@ -7,16 +6,6 @@ export const LiFiLogo: React.FC<{
   variant?: 'icon' | 'full';
   style?: CSSProperties;
 }> = ({ variant = 'icon', style }) => {
-  const theme = useTheme();
   const Component = variant === 'icon' ? LiFiIconLogo : LiFiFullLogo;
-  return (
-    <Component
-      style={style}
-      fill={
-        theme.palette.mode === 'light'
-          ? theme.palette.common.black
-          : theme.palette.common.white
-      }
-    />
-  );
+  return <Component style={style} fill="currentColor" />;
 };
diff --git a/packages/widget/src/components/PoweredBy.tsx b/packages/widget/src/components/PoweredBy.tsx
@@ -22,6 +22,7 @@ export const PoweredBy: React.FC = () => {
         href="https://li.fi"
         target="_blank"
         underline="none"
+        color="text.primary"
       >
         <Typography color="text.secondary" fontSize={12} px={0.5}>
           Powered by

diff --git a/packages/widget/src/components/StepActions/StepActions.style.tsx b/packages/widget/src/components/StepActions/StepActions.style.tsx
@@ -1,4 +1,5 @@
 import {
+  Avatar,
   StepConnector as MuiStepConnector,
   StepContent as MuiStepContent,
   StepLabel as MuiStepLabel,
@@ -52,3 +53,10 @@ export const StepContent = styled(MuiStepContent)(({ theme }) => ({
     paddingLeft: theme.spacing(4.1875),
   },
 }));
+
+export const StepAvatar = styled(Avatar)(({ theme, variant }) => ({
+  color:
+    variant === 'square' ? theme.palette.text.primary : theme.palette.grey[900],
+  backgroundColor:
+    variant === 'square' ? 'transparent' : theme.palette.background.paper,
+}));
diff --git a/packages/widget/src/components/StepActions/StepActions.tsx b/packages/widget/src/components/StepActions/StepActions.tsx
@@ -1,7 +1,6 @@
 import { LifiStep, Step } from '@lifinance/sdk';
 import { ArrowForward as ArrowForwardIcon } from '@mui/icons-material';
 import {
-  Avatar,
   Box,
   Step as MuiStep,
   Stepper,
@@ -13,6 +12,7 @@ import { useChains } from '../../hooks';
 import { formatTokenAmount } from '../../utils/format';
 import { LiFiLogo } from '../LiFiLogo';
 import {
+  StepAvatar,
   StepConnector,
   StepContent,
   StepIcon,
@@ -36,13 +36,13 @@ export const StepActions: React.FC<StepActionsProps> = ({
         sx={{ display: 'flex', alignItems: 'center' }}
         mb={isFullView ? 1 : 0}
       >
-        <Avatar
+        <StepAvatar
           variant={step.type === 'lifi' ? 'square' : 'circular'}
           src={step.type !== 'lifi' ? step.toolDetails.logoURI : undefined}
           alt={step.toolDetails.name}
         >
           {step.type === 'lifi' ? <LiFiLogo /> : step.toolDetails.name[0]}
-        </Avatar>
+        </StepAvatar>
         <Typography
           ml={2}
           fontSize={18}