From 60a67d477571e824e90d3a3c50866ef605ae9a7b Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Fri, 10 May 2024 11:46:32 +0200
Subject: [PATCH] fix: Adjust meta data icons (#7026)

---
 .../FeatureEnvironmentSeen.tsx                |  2 +-
 .../DependencyActions.tsx                     |  6 ++--
 .../FeatureOverviewMetaData.tsx               | 28 +++++++++----------
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx b/frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx
index 9d13a9ec86..ac1f4f5a42 100644
--- a/frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx
@@ -17,7 +17,7 @@ interface IFeatureEnvironmentSeenProps {
 
 const StyledContainer = styled('div')(({ theme }) => ({
     display: 'flex',
-    padding: theme.spacing(1.5),
+    padding: theme.spacing(1),
 }));
 
 const StyledBox = styled(Box)(({ theme }) => ({
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/DependencyActions.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/DependencyActions.tsx
index de2df7534b..2dbcf4bfd2 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/DependencyActions.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/DependencyActions.tsx
@@ -11,6 +11,7 @@ import {
     styled,
     Tooltip,
     Typography,
+    Box,
 } from '@mui/material';
 import Delete from '@mui/icons-material/Delete';
 import Edit from '@mui/icons-material/Edit';
@@ -40,9 +41,10 @@ export const DependencyActions: FC<{
     };
 
     return (
-        <span>
+        <Box>
             <Tooltip title='Dependency actions' arrow describeChild>
                 <IconButton
+                    sx={{ mr: 0.25 }}
                     id={id}
                     aria-controls={open ? menuId : undefined}
                     aria-haspopup='true'
@@ -112,6 +114,6 @@ export const DependencyActions: FC<{
                     />
                 </MenuList>
             </StyledPopover>
-        </span>
+        </Box>
     );
 };
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
index d3a783c134..c4904320ac 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
@@ -59,11 +59,9 @@ const StyledBody = styled('div')(({ theme }) => ({
     fontSize: theme.fontSizes.smallBody,
 }));
 
-const StyledBodyItem = styled('span')(({ theme }) => ({
-    padding: theme.spacing(0.5, 0),
-}));
+const BodyItemWithIcon = styled('div')(({ theme }) => ({}));
 
-const StyledRow = styled('div')(({ theme }) => ({
+const SpacedBodyItem = styled('div')(({ theme }) => ({
     display: 'flex',
     justifyContent: 'space-between',
     padding: theme.spacing(1, 0),
@@ -72,6 +70,7 @@ const StyledRow = styled('div')(({ theme }) => ({
 const StyledDescriptionContainer = styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
+    justifyContent: 'space-between',
 }));
 
 const StyledDetailsContainer = styled('div')(({ theme }) => ({
@@ -133,14 +132,14 @@ const FeatureOverviewMetaData = () => {
                     <StyledHeader>{capitalize(type || '')} toggle</StyledHeader>
                 </StyledMetaDataHeader>
                 <StyledBody>
-                    <StyledRow data-loading>
+                    <SpacedBodyItem data-loading>
                         <StyledLabel>Project:</StyledLabel>
                         <span>{project}</span>
-                    </StyledRow>
+                    </SpacedBodyItem>
                     <ConditionallyRender
                         condition={featureLifecycleEnabled}
                         show={
-                            <StyledRow data-loading>
+                            <SpacedBodyItem data-loading>
                                 <StyledLabel>Lifecycle:</StyledLabel>
                                 <FeatureLifecycle
                                     feature={feature}
@@ -150,14 +149,14 @@ const FeatureOverviewMetaData = () => {
                                     }
                                     onUncomplete={refetchFeature}
                                 />
-                            </StyledRow>
+                            </SpacedBodyItem>
                         }
                     />
 
                     <ConditionallyRender
                         condition={Boolean(description)}
                         show={
-                            <StyledBodyItem data-loading>
+                            <BodyItemWithIcon data-loading sx={{ pt: 1 }}>
                                 <StyledLabel>Description:</StyledLabel>
                                 <StyledDescriptionContainer>
                                     <StyledDescription>
@@ -175,10 +174,10 @@ const FeatureOverviewMetaData = () => {
                                         <Edit />
                                     </PermissionIconButton>
                                 </StyledDescriptionContainer>
-                            </StyledBodyItem>
+                            </BodyItemWithIcon>
                         }
                         elseShow={
-                            <span data-loading>
+                            <div data-loading>
                                 <StyledDescriptionContainer>
                                     No description.{' '}
                                     <PermissionIconButton
@@ -193,10 +192,10 @@ const FeatureOverviewMetaData = () => {
                                         <Edit />
                                     </PermissionIconButton>
                                 </StyledDescriptionContainer>
-                            </span>
+                            </div>
                         }
                     />
-                    <StyledBodyItem>
+                    <BodyItemWithIcon>
                         <StyledDetailsContainer>
                             <StyledDetail>
                                 <StyledLabel>Created at:</StyledLabel>
@@ -211,10 +210,9 @@ const FeatureOverviewMetaData = () => {
                             <FeatureEnvironmentSeen
                                 featureLastSeen={feature.lastSeenAt}
                                 environments={lastSeenEnvironments}
-                                sx={{ p: 0 }}
                             />
                         </StyledDetailsContainer>
-                    </StyledBodyItem>
+                    </BodyItemWithIcon>
                     <ConditionallyRender
                         condition={showDependentFeatures}
                         show={<DependencyRow feature={feature} />}