chore: improve project card design

frontend/src/component/project/ProjectCard/ProjectArchiveCard.tsx

@@ -4,13 +4,11 @@ import {
     StyledBox,
     StyledCardTitle,
     StyledProjectCardBody,
-    StyledIconBox,
     StyledActions,
 } from './ProjectCard.styles';
 import { ProjectCardFooter } from './ProjectCardFooter/ProjectCardFooter.tsx';
 import { ProjectModeBadge } from './ProjectModeBadge/ProjectModeBadge.tsx';
 import type { ProjectSchemaOwners } from 'openapi';
-import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
 import { formatDateYMDHM } from 'utils/formatDate';
 import { useLocationSettings } from 'hooks/useLocationSettings';
 import { parseISO } from 'date-fns';
@@ -72,9 +70,6 @@ export const ProjectArchiveCard: FC<ProjectArchiveCardProps> = ({
         <StyledProjectCard disabled data-testid={id}>
             <StyledProjectCardBody>
                 <StyledDivHeader>
-                    <StyledIconBox>
-                        <ProjectIcon color='action' />
-                    </StyledIconBox>
                     <StyledBox data-loading>
                         <Tooltip title={`id: ${id}`} arrow>
                             <StyledTitle>

frontend/src/component/project/ProjectCard/ProjectCard.styles.ts

@@ -89,16 +89,6 @@ export const StyledParagraphInfo = styled('p')<{ disabled?: boolean }>(
     }),
 );
 
-export const StyledIconBox = styled(Box)(({ theme }) => ({
-    display: 'grid',
-    placeItems: 'center',
-    padding: theme.spacing(0, 0.5, 0, 1),
-    marginRight: theme.spacing(1),
-    alignSelf: 'baseline',
-    color: theme.palette.primary.main,
-    height: '100%',
-}));
-
 export const StyledActions = styled(Box)(({ theme }) => ({
     display: 'flex',
     margin: theme.spacing(0.5),

frontend/src/component/project/ProjectCard/ProjectCard.tsx

@@ -2,14 +2,12 @@ import {
     StyledProjectCard,
     StyledCardTitle,
     StyledProjectCardBody,
-    StyledIconBox,
 } from './ProjectCard.styles';
 import { ProjectCardFooter } from './ProjectCardFooter/ProjectCardFooter.tsx';
 import { ProjectModeBadge } from './ProjectModeBadge/ProjectModeBadge.tsx';
-import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
 import { FavoriteAction } from './FavoriteAction/FavoriteAction.tsx';
 import { Box, styled } from '@mui/material';
-import { flexColumn } from 'themes/themeStyles';
+import { flexColumn, flexRow } from 'themes/themeStyles';
 import { TimeAgo } from 'component/common/TimeAgo/TimeAgo';
 import { ProjectLastSeen } from './ProjectLastSeen/ProjectLastSeen.tsx';
 import { Highlighter } from 'component/common/Highlighter/Highlighter';
@@ -29,15 +27,15 @@ const StyledCount = styled('strong')(({ theme }) => ({
 }));
 
 const StyledInfo = styled('div')(({ theme }) => ({
-    display: 'grid',
-    gridTemplate: '1rem 1rem / 1fr 1fr',
-    gridAutoFlow: 'column',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginTop: theme.spacing(1),
+    ...flexColumn,
     fontSize: theme.fontSizes.smallerBody,
 }));
 
+const StyledContent = styled('div')({
+    ...flexRow,
+    justifyContent: 'space-between',
+});
+
 const StyledHeader = styled('div')(({ theme }) => ({
     gap: theme.spacing(1),
     display: 'flex',
@@ -67,9 +65,6 @@ export const ProjectCard = ({
         <StyledProjectCard onMouseEnter={onHover}>
             <StyledProjectCardBody>
                 <StyledHeader>
-                    <StyledIconBox>
-                        <ProjectIcon />
-                    </StyledIconBox>
                     <Box
                         data-loading
                         sx={(theme) => ({
@@ -95,13 +90,14 @@ export const ProjectCard = ({
                         <StyledCount>{featureCount}</StyledCount> flag
                         {featureCount === 1 ? '' : 's'}
                     </div>
-                    <div data-loading>
-                        <StyledCount>{health}%</StyledCount> health
-                    </div>
-                    <div />
-                    <div data-loading>
-                        <ProjectLastSeen date={lastReportedFlagUsage} />
-                    </div>
+                    <StyledContent>
+                        <div data-loading>
+                            <StyledCount>{health}%</StyledCount> health
+                        </div>
+                        <div data-loading>
+                            <ProjectLastSeen date={lastReportedFlagUsage} />
+                        </div>
+                    </StyledContent>
                 </StyledInfo>
             </StyledProjectCardBody>
             <ProjectCardFooter id={id} owners={owners}>