From e6b75d14ca97173858f70cf1b85e2bc03c25d56f Mon Sep 17 00:00:00 2001
From: Eugene Chybisov <imchybisov@gmail.com>
Date: Mon, 27 Jun 2022 18:13:57 +0100
Subject: [PATCH] fix: PoweredBy hover color

---
 packages/widget/src/components/Header/Header.style.ts  |  2 +-
 packages/widget/src/components/LiFiLogo.tsx            |  2 +-
 .../widget/src/components/PoweredBy/PoweredBy.style.ts | 10 ++++++++++
 .../src/components/{ => PoweredBy}/PoweredBy.tsx       |  9 +++------
 packages/widget/src/components/PoweredBy/index.ts      |  1 +
 5 files changed, 16 insertions(+), 8 deletions(-)
 create mode 100644 packages/widget/src/components/PoweredBy/PoweredBy.style.ts
 rename packages/widget/src/components/{ => PoweredBy}/PoweredBy.tsx (76%)
 create mode 100644 packages/widget/src/components/PoweredBy/index.ts

diff --git a/packages/widget/src/components/Header/Header.style.ts b/packages/widget/src/components/Header/Header.style.ts
index 9a90c392d..bc93faeda 100644
--- a/packages/widget/src/components/Header/Header.style.ts
+++ b/packages/widget/src/components/Header/Header.style.ts
@@ -9,7 +9,7 @@ export const HeaderAppBar = styled(AppBar)(({ theme }) => ({
   position: 'relative',
   minHeight: 48,
   padding: theme.spacing(0, 3, 0, 3),
-  '&:first-of-type': {
+  ':first-of-type': {
     paddingTop: theme.spacing(1.5),
   },
 }));
diff --git a/packages/widget/src/components/LiFiLogo.tsx b/packages/widget/src/components/LiFiLogo.tsx
index 5aec00569..25214ff30 100644
--- a/packages/widget/src/components/LiFiLogo.tsx
+++ b/packages/widget/src/components/LiFiLogo.tsx
@@ -7,5 +7,5 @@ export const LiFiLogo: React.FC<{
   style?: CSSProperties;
 }> = ({ variant = 'icon', style }) => {
   const Component = variant === 'icon' ? LiFiIconLogo : LiFiFullLogo;
-  return <Component style={style} fill="currentColor" />;
+  return <Component style={style} fill="currentColor" color="currentColor" />;
 };
diff --git a/packages/widget/src/components/PoweredBy/PoweredBy.style.ts b/packages/widget/src/components/PoweredBy/PoweredBy.style.ts
new file mode 100644
index 000000000..a1f7b5b67
--- /dev/null
+++ b/packages/widget/src/components/PoweredBy/PoweredBy.style.ts
@@ -0,0 +1,10 @@
+import { Link as MuiLink } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const Link = styled(MuiLink)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  ':hover': {
+    color: theme.palette.primary.main,
+  },
+}));
diff --git a/packages/widget/src/components/PoweredBy.tsx b/packages/widget/src/components/PoweredBy/PoweredBy.tsx
similarity index 76%
rename from packages/widget/src/components/PoweredBy.tsx
rename to packages/widget/src/components/PoweredBy/PoweredBy.tsx
index 16653c203..8ff5f905e 100644
--- a/packages/widget/src/components/PoweredBy.tsx
+++ b/packages/widget/src/components/PoweredBy/PoweredBy.tsx
@@ -1,5 +1,6 @@
-import { Box, Link, Typography } from '@mui/material';
-import { LiFiLogo } from './LiFiLogo';
+import { Box, Typography } from '@mui/material';
+import { LiFiLogo } from '../LiFiLogo';
+import { Link } from './PoweredBy.style';
 
 export const PoweredBy: React.FC = () => {
   return (
@@ -15,10 +16,6 @@ export const PoweredBy: React.FC = () => {
       }}
     >
       <Link
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-        }}
         href="https://li.fi"
         target="_blank"
         underline="none"
diff --git a/packages/widget/src/components/PoweredBy/index.ts b/packages/widget/src/components/PoweredBy/index.ts
new file mode 100644
index 000000000..8c9efdcb5
--- /dev/null
+++ b/packages/widget/src/components/PoweredBy/index.ts
@@ -0,0 +1 @@
+export { PoweredBy } from './PoweredBy';