Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

fix: project icon sizing and color (#7672)

Browse Source 
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
This commit is contained in:
Thomas Heartman 2024-07-26 10:26:16 +02:00 committed by GitHub
parent d96da453a4
commit 6e34ae4ada
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 43 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/assets/icons/projectIconSmall.svg
View File

@ -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>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 460 B

After

Width:  |  Height:  |  Size: 411 B

12
frontend/src/component/commandBar/RecentlyVisited/CommandResultGroup.tsx
View File

@ -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>

8
frontend/src/component/common/DialogFormTemplate/DialogFormTemplate.styles.tsx
View File

@ -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',

10
frontend/src/component/common/DialogFormTemplate/DialogFormTemplate.tsx
View File

@ -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

8
frontend/src/component/common/FormTemplate/FormTemplate.tsx
View File

@ -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,

6
frontend/src/component/common/ProjectIcon/ProjectIcon.tsx Normal file
View File

@ -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'} />
);

11
frontend/src/component/layout/MainLayout/NavigationSidebar/IconRenderer.tsx
View File

@ -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),
}));

7
frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx
View File

@ -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'

14
frontend/src/component/project/NewProjectCard/NewProjectCard.styles.ts
View File

@ -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%',
}));

4
frontend/src/component/project/NewProjectCard/NewProjectCard.tsx
View File

@ -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>

13
frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.tsx
View File

@ -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={

6
frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx
View File

@ -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

2
frontend/src/component/project/Project/ProjectSettings/Settings/EditProject/UpdateProject.tsx
View File

@ -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}