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

chore: add project icon to new form (#6965)

Browse Source 
Imports and uses the same project icon used on the project cards. Also
aligns the header better and makes the text lighter.


![image](https://github.com/Unleash/unleash/assets/17786332/bf5082b0-1f00-45bb-a639-864963b6fe77)
This commit is contained in:
Thomas Heartman 2024-04-30 13:18:27 +02:00 committed by GitHub
parent cdbe26330e
commit 4fea198d6c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/component/project/Project/CreateProject/NewProjectForm.tsx
View File

@ -2,6 +2,7 @@ import { Button, Typography, styled } from '@mui/material';
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
import Input from 'component/common/Input/Input'; import Input from 'component/common/Input/Input';
import type { ProjectMode } from '../hooks/useProjectEnterpriseSettingsForm'; import type { ProjectMode } from '../hooks/useProjectEnterpriseSettingsForm';
import { ReactComponent as ProjectIcon } from 'assets/icons/projectIconSmall.svg';
const StyledForm = styled('form')(({ theme }) => ({ const StyledForm = styled('form')(({ theme }) => ({
background: theme.palette.background.default, background: theme.palette.background.default,
@ -19,19 +20,18 @@ const TopGrid = styled(StyledFormSection)(({ theme }) => ({
display: 'grid', display: 'grid',
gridTemplateAreas: gridTemplateAreas:
'"icon header" "icon project-name" "icon project-description"', '"icon header" "icon project-name" "icon project-description"',
gridTemplateColumns: 'minmax(auto, 50px) 1fr', gridTemplateColumns: 'auto 1fr',
gap: theme.spacing(2), gap: theme.spacing(2),
})); }));
const StyledIcon = styled('span')(({ theme }) => ({ const StyledIcon = styled(ProjectIcon)(({ theme }) => ({
border: `1px solid ${theme.palette.primary.main}`, color: theme.palette.primary.main,
width: `100%`,
aspectRatio: '1',
borderRadius: theme.shape.borderRadius,
})); }));
const StyledHeader = styled(Typography)(({ theme }) => ({ const StyledHeader = styled(Typography)(({ theme }) => ({
gridArea: 'header', gridArea: 'header',
alignSelf: 'center',
fontWeight: 'lighter',
})); }));
const ProjectNameContainer = styled('div')(({ theme }) => ({ const ProjectNameContainer = styled('div')(({ theme }) => ({
@ -129,7 +129,7 @@ export const NewProjectForm: React.FC<FormProps> = ({
}} }}
> >
<TopGrid> <TopGrid>
<StyledIcon>icon</StyledIcon> <StyledIcon aria-hidden='true' />
<StyledHeader variant='h2'>New project</StyledHeader> <StyledHeader variant='h2'>New project</StyledHeader>
<ProjectNameContainer> <ProjectNameContainer>
<StyledProjectName <StyledProjectName