From 6e34ae4ada9af782c8f7b8ea2b8149c3e66b45b4 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Fri, 26 Jul 2024 10:26:16 +0200
Subject: [PATCH] fix: project icon sizing and color (#7672)

This PR fixes the project icon sizing and color in the create feature
form. However, it includes a little more cleanup work.

1. I've switched out the previous project icon with a new one. The
difference? The old one had lots of whitespace around it, which made
sizing it awkward.
2. I've added a wrapping Icon component to common. The idea was taken
from this thread on the MUI GitHub about how to make imported icons
behave consistently with MUI icons.
3. Because I've switched the icon and added a new component, I've also
gone and updated the other places we used the old icon, so that we're
consistent about the usage.

In create dialog form:

![image](https://github.com/user-attachments/assets/9b5caed7-cd50-437b-82bb-1d7ccbfaac3f)

Updated icon in:
Project card component

![image](https://github.com/user-attachments/assets/4ce809f4-4083-4554-ac4c-3597d9bf42df)


Project creation form

![image](https://github.com/user-attachments/assets/4227416f-a56d-41ed-96a4-99b71a11dbf7)


Sidebar and command bar (it's actually larger here, but maybe that's
okay? Previous project was kinda small):

![image](https://github.com/user-attachments/assets/72b8aa2e-6970-4c11-9a4d-250648b44ad9)

(Previous sidebar and command bar):

![image](https://github.com/user-attachments/assets/bcef9208-9819-4742-87a1-3a20d50d741c)


I'd be willing to leave the sidebar and command bar for now if we think
it's better to leave them using the same size as previously, but we can
talk about that. I think it's better in the sidebar; undecided about the
command bar.

Bonus changes: I fixed some typos
---
 frontend/src/assets/icons/projectIconSmall.svg     |  8 ++++----
 .../RecentlyVisited/CommandResultGroup.tsx         | 12 +++++-------
 .../DialogFormTemplate.styles.tsx                  |  8 +++-----
 .../DialogFormTemplate/DialogFormTemplate.tsx      | 10 ++++------
 .../component/common/FormTemplate/FormTemplate.tsx |  8 ++------
 .../component/common/ProjectIcon/ProjectIcon.tsx   |  6 ++++++
 .../MainLayout/NavigationSidebar/IconRenderer.tsx  | 11 -----------
 .../NavigationSidebar/NavigationList.tsx           |  7 ++++---
 .../NewProjectCard/NewProjectCard.styles.ts        | 14 +++++---------
 .../project/NewProjectCard/NewProjectCard.tsx      |  4 ++--
 .../NewCreateProjectForm/CreateProjectDialog.tsx   | 13 ++++---------
 .../CreateFeatureDialog.tsx                        |  6 +++---
 .../Settings/EditProject/UpdateProject.tsx         |  2 +-
 13 files changed, 43 insertions(+), 66 deletions(-)
 create mode 100644 frontend/src/component/common/ProjectIcon/ProjectIcon.tsx

diff --git a/frontend/src/assets/icons/projectIconSmall.svg b/frontend/src/assets/icons/projectIconSmall.svg
index 7e6546eedb..e90fd8c788 100644
--- a/frontend/src/assets/icons/projectIconSmall.svg
+++ b/frontend/src/assets/icons/projectIconSmall.svg
@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" focusable='false' aria-hidden='true' width="37" height="35" viewBox="0 0 37 35" fill="none">
-    <rect x="8.9864" y="9.93245" width="3.78378" height="13.2432" rx="1.41892" stroke-width="0.945947" />
-    <rect x="16.5542" y="13.7161" width="3.78378" height="9.45946" rx="1.41892" stroke-width="0.945947" />
-    <rect x="24.1217" y="18.4456" width="3.78378" height="4.72973" rx="1.41892" stroke-width="0.945947" />
+<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.9054" y="0.527119" width="2.48649" height="8.7027" rx="0.932432" stroke-width="0.621622"/>
+<rect x="5.87838" y="3.01345" width="2.48649" height="6.21622" rx="0.932432" stroke-width="0.621622"/>
+<rect x="10.8513" y="6.12185" width="2.48649" height="3.10811" rx="0.932432" stroke-width="0.621622"/>
 </svg>
diff --git a/frontend/src/component/commandBar/RecentlyVisited/CommandResultGroup.tsx b/frontend/src/component/commandBar/RecentlyVisited/CommandResultGroup.tsx
index 12bf94cab5..cc0d39e589 100644
--- a/frontend/src/component/commandBar/RecentlyVisited/CommandResultGroup.tsx
+++ b/frontend/src/component/commandBar/RecentlyVisited/CommandResultGroup.tsx
@@ -10,16 +10,14 @@ import {
 import { Link } from 'react-router-dom';
 import type { Theme } from '@mui/material/styles/createTheme';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import {
-    IconRenderer,
-    StyledProjectIcon,
-} from 'component/layout/MainLayout/NavigationSidebar/IconRenderer';
+import { IconRenderer } from 'component/layout/MainLayout/NavigationSidebar/IconRenderer';
 import InsightsIcon from '@mui/icons-material/Insights';
 import PlaygroundIcon from '@mui/icons-material/AutoFixNormal';
 import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
 import { Children } from 'react';
+import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
 
 export const listItemButtonStyle = (theme: Theme) => ({
     border: `1px solid transparent`,
@@ -56,7 +54,7 @@ const ButtonItemIcon = ({
     path: string;
 }) => {
     if (path === '/projects') {
-        return <StyledProjectIcon />;
+        return <ProjectIcon />;
     }
     if (path === '/playground') {
         return <PlaygroundIcon />;
@@ -149,7 +147,7 @@ export const RecentlyVisitedProjectButton = ({
             onClick={onItemClick}
         >
             <StyledListItemIcon>
-                <StyledProjectIcon />
+                <ProjectIcon />
             </StyledListItemIcon>
             <StyledListItemText>
                 <StyledButtonTypography color='textPrimary'>
@@ -263,7 +261,7 @@ export const CommandResultGroup = ({
                         <StyledListItemIcon>
                             <ConditionallyRender
                                 condition={groupName === 'Projects'}
-                                show={<StyledProjectIcon />}
+                                show={<ProjectIcon />}
                                 elseShow={<Icon>{icon}</Icon>}
                             />
                         </StyledListItemIcon>
diff --git a/frontend/src/component/common/DialogFormTemplate/DialogFormTemplate.styles.tsx b/frontend/src/component/common/DialogFormTemplate/DialogFormTemplate.styles.tsx
index 4b80f10485..80b052ef6c 100644
--- a/frontend/src/component/common/DialogFormTemplate/DialogFormTemplate.styles.tsx
+++ b/frontend/src/component/common/DialogFormTemplate/DialogFormTemplate.styles.tsx
@@ -23,11 +23,9 @@ export const TopGrid = styled(StyledFormSection)(({ theme }) => ({
     gap: theme.spacing(4),
 }));
 
-export const styleIcon = (Icon: React.ComponentType) =>
-    styled(Icon)(({ theme }) => ({
-        fill: theme.palette.primary.main,
-        stroke: theme.palette.primary.main,
-    }));
+export const IconWrapper = styled('span')(({ theme }) => ({
+    color: theme.palette.primary.main,
+}));
 
 export const StyledHeader = styled(Typography)({
     gridArea: 'header',
diff --git a/frontend/src/component/common/DialogFormTemplate/DialogFormTemplate.tsx b/frontend/src/component/common/DialogFormTemplate/DialogFormTemplate.tsx
index 8b0bbed770..266612d329 100644
--- a/frontend/src/component/common/DialogFormTemplate/DialogFormTemplate.tsx
+++ b/frontend/src/component/common/DialogFormTemplate/DialogFormTemplate.tsx
@@ -10,7 +10,7 @@ import {
     TopGrid,
     LimitContainer,
     FormActions,
-    styleIcon,
+    IconWrapper,
 } from './DialogFormTemplate.styles';
 import { Button } from '@mui/material';
 import { CreateButton } from 'component/common/CreateButton/CreateButton';
@@ -21,7 +21,7 @@ type FormProps = {
     description: string;
     errors: { [key: string]: string };
     handleSubmit: FormEventHandler<HTMLFormElement>;
-    icon: React.ComponentType;
+    Icon: React.ReactNode;
     Limit?: React.ReactNode;
     name: string;
     onClose: () => void;
@@ -40,19 +40,17 @@ export const DialogFormTemplate: React.FC<FormProps> = ({
     description,
     setDescription,
     errors,
-    icon,
+    Icon,
     resource,
     onClose,
     configButtons,
     createButtonProps,
     validateName = () => {},
 }) => {
-    const StyledIcon = styleIcon(icon);
-
     return (
         <StyledForm onSubmit={handleSubmit}>
             <TopGrid>
-                <StyledIcon aria-hidden='true' />
+                <IconWrapper>{Icon}</IconWrapper>
                 <StyledHeader variant='h2'>Create {resource}</StyledHeader>
                 <ProjectNameContainer>
                     <StyledInput
diff --git a/frontend/src/component/common/FormTemplate/FormTemplate.tsx b/frontend/src/component/common/FormTemplate/FormTemplate.tsx
index 0e8cdec026..dcb9ec6ce3 100644
--- a/frontend/src/component/common/FormTemplate/FormTemplate.tsx
+++ b/frontend/src/component/common/FormTemplate/FormTemplate.tsx
@@ -185,7 +185,6 @@ const StyledSidebar = styled('aside', {
         width: sidebarWidth || formTemplateSidebarWidth,
         [theme.breakpoints.down(1100)]: {
             width: '100%',
-            color: 'red',
         },
         [theme.breakpoints.down(500)]: {
             padding: theme.spacing(4, 2),
@@ -434,14 +433,11 @@ const GuidanceContent: React.FC<
     showLink = true,
     fixedDocumentationHeight,
 }) => {
-    const StyledDocumentationIconWrapper = styled('div')(({ theme }) => ({
+    const StyledDocumentationIconWrapper = styled('div')({
         height: '2rem',
         display: 'grid',
         placeItems: 'center',
-        svg: {
-            width: '100%',
-        },
-    }));
+    });
 
     const StyledDocumentationWrapper = styled('div')({
         height: fixedDocumentationHeight,
diff --git a/frontend/src/component/common/ProjectIcon/ProjectIcon.tsx b/frontend/src/component/common/ProjectIcon/ProjectIcon.tsx
new file mode 100644
index 0000000000..3bde699536
--- /dev/null
+++ b/frontend/src/component/common/ProjectIcon/ProjectIcon.tsx
@@ -0,0 +1,6 @@
+import { SvgIcon } from '@mui/material';
+import { ReactComponent as Svg } from 'assets/icons/projectIconSmall.svg';
+
+export const ProjectIcon = () => (
+    <SvgIcon component={Svg} viewBox={'0 0 14 10'} />
+);
diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/IconRenderer.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/IconRenderer.tsx
index d4a0a706d8..d50dad6bb4 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/IconRenderer.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/IconRenderer.tsx
@@ -27,9 +27,7 @@ import BillingIcon from '@mui/icons-material/CreditCardOutlined';
 import EventLogIcon from '@mui/icons-material/EventNoteOutlined';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import LibraryBooksIcon from '@mui/icons-material/LibraryBooks';
-import { ReactComponent as ProjectIcon } from 'assets/icons/projectIconSmall.svg';
 import type { FC } from 'react';
-import { styled } from '@mui/material';
 
 // TODO: move to routes
 const icons: Record<string, typeof SvgIcon> = {
@@ -71,12 +69,3 @@ export const IconRenderer: FC<{ path: string }> = ({ path }) => {
 
     return <IconComponent />;
 };
-
-export const StyledProjectIcon = styled(ProjectIcon)(({ theme }) => ({
-    fill: theme.palette.neutral.main,
-    stroke: theme.palette.neutral.main,
-    // same as built-in icons
-    width: theme.spacing(3),
-    height: theme.spacing(3),
-    fontSize: theme.spacing(3),
-}));
diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx
index f07da49f20..69a767fd6a 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx
@@ -9,7 +9,7 @@ import {
     SignOutItem,
 } from './ListItems';
 import { Box, List, styled, Tooltip, Typography } from '@mui/material';
-import { IconRenderer, StyledProjectIcon } from './IconRenderer';
+import { IconRenderer } from './IconRenderer';
 import { EnterpriseBadge } from 'component/common/EnterpriseBadge/EnterpriseBadge';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import SearchIcon from '@mui/icons-material/Search';
@@ -23,6 +23,7 @@ import FlagIcon from '@mui/icons-material/OutlinedFlag';
 import { useUiFlag } from 'hooks/useUiFlag';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
+import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
 
 const StyledBadgeContainer = styled('div')(({ theme }) => ({
     paddingLeft: theme.spacing(2),
@@ -119,7 +120,7 @@ export const RecentProjectsList: FC<{
                 onClick={onClick}
                 selected={false}
             >
-                <StyledProjectIcon />
+                <ProjectIcon />
             </DynamicListItem>
         </List>
     );
@@ -166,7 +167,7 @@ export const PrimaryNavigationList: FC<{
                 onClick={() => onClick('/projects')}
                 selected={activeItem === '/projects'}
             >
-                <StyledProjectIcon />
+                <ProjectIcon />
             </DynamicListItem>
             <DynamicListItem
                 href='/search'
diff --git a/frontend/src/component/project/NewProjectCard/NewProjectCard.styles.ts b/frontend/src/component/project/NewProjectCard/NewProjectCard.styles.ts
index cb81c2688f..6e9e7e970e 100644
--- a/frontend/src/component/project/NewProjectCard/NewProjectCard.styles.ts
+++ b/frontend/src/component/project/NewProjectCard/NewProjectCard.styles.ts
@@ -3,7 +3,6 @@ import { Card, Box } from '@mui/material';
 import Delete from '@mui/icons-material/Delete';
 import Edit from '@mui/icons-material/Edit';
 import { flexRow } from 'themes/themeStyles';
-import { ReactComponent as ProjectIcon } from 'assets/icons/projectIconSmall.svg';
 
 export const StyledProjectCard = styled(Card)(({ theme }) => ({
     display: 'flex',
@@ -79,15 +78,12 @@ export const StyledParagraphInfo = styled('p')(({ theme }) => ({
     fontSize: theme.typography.body1.fontSize,
 }));
 
-export const StyledProjectIcon = styled(ProjectIcon)(({ theme }) => ({
-    fill: theme.palette.primary.main,
-    stroke: theme.palette.primary.main,
-}));
-
 export const StyledIconBox = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    justifyContent: 'center',
-    padding: theme.spacing(1, 0.5, 0.5, 0),
+    display: 'grid',
+    placeItems: 'center',
+    padding: theme.spacing(0, 0.5, 0, 1),
     marginRight: theme.spacing(2),
     alignSelf: 'baseline',
+    color: theme.palette.primary.main,
+    height: '100%',
 }));
diff --git a/frontend/src/component/project/NewProjectCard/NewProjectCard.tsx b/frontend/src/component/project/NewProjectCard/NewProjectCard.tsx
index 59bb6be9ec..23198c0502 100644
--- a/frontend/src/component/project/NewProjectCard/NewProjectCard.tsx
+++ b/frontend/src/component/project/NewProjectCard/NewProjectCard.tsx
@@ -9,12 +9,12 @@ import {
     StyledParagraphInfo,
     StyledProjectCardBody,
     StyledIconBox,
-    StyledProjectIcon,
 } from './NewProjectCard.styles';
 import { ProjectCardFooter } from './ProjectCardFooter/ProjectCardFooter';
 import { ProjectModeBadge } from './ProjectModeBadge/ProjectModeBadge';
 import { ProjectOwners } from './ProjectOwners/ProjectOwners';
 import type { ProjectSchemaOwners } from 'openapi';
+import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
 
 interface IProjectCardProps {
     name: string;
@@ -43,7 +43,7 @@ export const ProjectCard = ({
         <StyledProjectCardBody>
             <StyledDivHeader>
                 <StyledIconBox>
-                    <StyledProjectIcon />
+                    <ProjectIcon />
                 </StyledIconBox>
                 <StyledBox data-loading>
                     <StyledCardTitle>{name}</StyledCardTitle>
diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.tsx
index aa2dc4e748..49751e7586 100644
--- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.tsx
+++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.tsx
@@ -16,7 +16,6 @@ import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useNavigate } from 'react-router-dom';
 import { Dialog, styled } from '@mui/material';
-import { ReactComponent as ProjectIcon } from 'assets/icons/projectIconSmall.svg';
 import { useUiFlag } from 'hooks/useUiFlag';
 import useProjects from 'hooks/api/getters/useProjects/useProjects';
 import { Limit } from 'component/common/Limit/Limit';
@@ -28,6 +27,7 @@ import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironmen
 import { useStickinessOptions } from 'hooks/useStickinessOptions';
 import { ChangeRequestTableConfigButton } from './ConfigButtons/ChangeRequestTableConfigButton';
 import { StyledDefinitionList } from './CreateProjectDialog.styles';
+import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
 
 interface ICreateProjectDialogProps {
     open: boolean;
@@ -47,11 +47,6 @@ const StyledDialog = styled(Dialog)(({ theme }) => ({
     },
 }));
 
-const StyledProjectIcon = styled(ProjectIcon)(({ theme }) => ({
-    fill: theme.palette.common.white,
-    stroke: theme.palette.common.white,
-}));
-
 const projectModeOptions = [
     { value: 'open', label: 'open' },
     { value: 'protected', label: 'protected' },
@@ -151,8 +146,8 @@ export const CreateProjectDialog = ({
         text: string;
         link?: { url: string; label: string };
     } = {
-        icon: <StyledProjectIcon />,
-        text: 'Projects allows you to group feature flags together in the management UI.',
+        icon: <ProjectIcon />,
+        text: 'Projects allow you to group feature flags together in the management UI.',
         link: {
             url: 'https://docs.getunleash.io/reference/projects',
             label: 'Projects documentation',
@@ -273,7 +268,7 @@ export const CreateProjectDialog = ({
                     description={projectDesc}
                     setDescription={setProjectDesc}
                     errors={errors}
-                    icon={StyledProjectIcon}
+                    Icon={<ProjectIcon />}
                     onClose={onClose}
                     validateName={validateName}
                     configButtons={
diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx
index be7bc7c730..f032198490 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx
@@ -12,7 +12,6 @@ import {
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useNavigate } from 'react-router-dom';
 import { Dialog, styled } from '@mui/material';
-import { ReactComponent as ProjectIcon } from 'assets/icons/projectIconSmall.svg';
 import { useUiFlag } from 'hooks/useUiFlag';
 import useProjects from 'hooks/api/getters/useProjects/useProjects';
 import { Limit } from 'component/common/Limit/Limit';
@@ -32,6 +31,7 @@ import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons';
 import useFeatureTypes from 'hooks/api/getters/useFeatureTypes/useFeatureTypes';
 import { DialogFormTemplate } from 'component/common/DialogFormTemplate/DialogFormTemplate';
 import { SingleSelectConfigButton } from 'component/common/DialogFormTemplate/ConfigButtons/SingleSelectConfigButton';
+import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
 
 interface ICreateFeatureDialogProps {
     open: boolean;
@@ -54,7 +54,7 @@ const StyledDialog = styled(Dialog)(({ theme }) => ({
 const configButtonData = {
     project: {
         icon: <ProjectIcon />,
-        text: 'Projects allows you to group feature flags together in the management UI.',
+        text: 'Projects allow you to group feature flags together in the management UI.',
     },
     type: {
         icon: <FlagIcon />,
@@ -205,7 +205,7 @@ export const CreateFeatureDialog = ({
                     description={description}
                     errors={errors}
                     handleSubmit={handleSubmit}
-                    icon={FlagIcon}
+                    Icon={<FlagIcon />}
                     validateName={validateToggleName}
                     Limit={
                         <ConditionallyRender
diff --git a/frontend/src/component/project/Project/ProjectSettings/Settings/EditProject/UpdateProject.tsx b/frontend/src/component/project/Project/ProjectSettings/Settings/EditProject/UpdateProject.tsx
index b76f50dd13..38f067337b 100644
--- a/frontend/src/component/project/Project/ProjectSettings/Settings/EditProject/UpdateProject.tsx
+++ b/frontend/src/component/project/Project/ProjectSettings/Settings/EditProject/UpdateProject.tsx
@@ -111,7 +111,7 @@ export const UpdateProject = ({ project }: IUpdateProject) => {
             <FormTemplate
                 loading={loading}
                 title='General settings'
-                description='Projects allows you to group feature flags together in the management UI.'
+                description='Projects allow you to group feature flags together in the management UI.'
                 documentationLink='https://docs.getunleash.io/reference/projects'
                 documentationLinkLabel='Projects documentation'
                 formatApiCode={formatProjectApiCode}