From 5812923f046f17c3355753e805caa6875218d4cc Mon Sep 17 00:00:00 2001
From: andreas-unleash <andreas@getunleash.ai>
Date: Fri, 12 Apr 2024 15:16:10 +0300
Subject: [PATCH] replace with styled component

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
---
 frontend/src/component/menu/Header/Header.tsx | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/frontend/src/component/menu/Header/Header.tsx b/frontend/src/component/menu/Header/Header.tsx
index 74d1596d591a..95740e9d9f9a 100644
--- a/frontend/src/component/menu/Header/Header.tsx
+++ b/frontend/src/component/menu/Header/Header.tsx
@@ -9,7 +9,6 @@ import {
     styled,
     type Theme,
     Box,
-    Typography,
 } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
 import SettingsIcon from '@mui/icons-material/Settings';
@@ -118,21 +117,20 @@ const styledIconProps = (theme: Theme) => ({
 
 const StyledLink = styled(Link)(({ theme }) => focusable(theme));
 
+const StyledText = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+}));
+
 const StyledLinkWithBetaBadge = ({
     title,
     to,
 }: { title: string; to: string }) => (
     <StyledLink to={to} sx={{ margin: 0 }}>
-        <Typography
-            component='div'
-            sx={(theme) => ({
-                display: 'flex',
-                alignItems: 'center',
-                gap: theme.spacing(1),
-            })}
-        >
+        <StyledText>
             <span>{title}</span> <Badge color='success'>Beta</Badge>
-        </Typography>
+        </StyledText>
     </StyledLink>
 );