From 6688259229721c9f8a0a277b346ef3b117b80202 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 21 Nov 2024 11:38:41 +0100
Subject: [PATCH] 1-3145: counteract the MUI button's negative margin

This change styles the project status svg for this by giving it a
negative margin in this case.

This isn't a native MUI icon, so handling it is a bit tricky. That
said, the ideal solution would be to make the icon conform better to
MUI standards, but this is a quick fix for now.
---
 frontend/src/component/project/Project/Project.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx
index 15dbbf2eeb79..88bc946c9adb 100644
--- a/frontend/src/component/project/Project/Project.tsx
+++ b/frontend/src/component/project/Project/Project.tsx
@@ -118,6 +118,10 @@ const ProjectStatusButton = styled(Button)(({ theme }) => ({
     },
 }));
 
+const ProjectStatusSvgWithMargin = styled(ProjectStatusSvg)(({ theme }) => ({
+    marginLeft: theme.spacing(0.5),
+}));
+
 export const Project = () => {
     const projectId = useRequiredPathParam('projectId');
     const { trackEvent } = usePlausibleTracker();
@@ -300,7 +304,7 @@ export const Project = () => {
                             {simplifyProjectOverview && (
                                 <ProjectStatusButton
                                     onClick={() => setProjectStatusOpen(true)}
-                                    startIcon={<ProjectStatusSvg />}
+                                    startIcon={<ProjectStatusSvgWithMargin />}
                                     data-loading-project
                                 >
                                     Project status