From b1a809a10dd13ca32dc455794629b24120618c21 Mon Sep 17 00:00:00 2001
From: David Leek <david@getunleash.io>
Date: Mon, 25 Nov 2024 15:42:07 +0100
Subject: [PATCH] chore: use styled instead of sx

---
 .../MilestoneStrategyTitle.tsx                | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/frontend/src/component/releases/ReleasePlanTemplate/MilestoneStrategyTitle.tsx b/frontend/src/component/releases/ReleasePlanTemplate/MilestoneStrategyTitle.tsx
index f7e36430345f..654ba36267df 100644
--- a/frontend/src/component/releases/ReleasePlanTemplate/MilestoneStrategyTitle.tsx
+++ b/frontend/src/component/releases/ReleasePlanTemplate/MilestoneStrategyTitle.tsx
@@ -1,6 +1,14 @@
-import { Box, Typography } from '@mui/material';
+import { Box, Typography, styled } from '@mui/material';
 import Input from 'component/common/Input/Input';
 
+const StyledBox = styled(Box)(({ theme }) => ({
+    paddingBottom: theme.spacing(2),
+}));
+
+const StyledTypography = styled(Typography)(({ theme }) => ({
+    paddingBottom: theme.spacing(2),
+}));
+
 interface IMilestoneStrategyTitleProps {
     title: string;
     setTitle: (title: string) => void;
@@ -11,14 +19,10 @@ export const MilestoneStrategyTitle = ({
     setTitle,
 }: IMilestoneStrategyTitleProps) => {
     return (
-        <Box sx={{ paddingBottom: (theme) => theme.spacing(2) }}>
-            <Typography
-                sx={{
-                    paddingBottom: (theme) => theme.spacing(2),
-                }}
-            >
+        <StyledBox>
+            <StyledTypography>
                 What would you like to call this strategy? (optional)
-            </Typography>
+            </StyledTypography>
             <Input
                 label='Strategy title'
                 id='title-input'
@@ -26,6 +30,6 @@ export const MilestoneStrategyTitle = ({
                 onChange={(e) => setTitle(e.target.value)}
                 sx={{ width: '100%' }}
             />
-        </Box>
+        </StyledBox>
     );
 };