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

feat: new application header design (#6379)

Browse Source 
- remove application icon
- Update font for created text
- change "Delete" button into a trash can button


![image](https://github.com/Unleash/unleash/assets/964450/c956ea23-8ac0-4c0b-9ef4-287f895ecc2f)
This commit is contained in:
Jaanus Sellin 2024-02-29 10:38:43 +02:00 committed by GitHub
parent 0887999dd0
commit 8f30904905
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 6 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/component/application/Application.tsx
View File

@ -2,8 +2,6 @@
import React, { useContext, useState } from 'react'; import React, { useContext, useState } from 'react';
import { import {
Box, Box,
Avatar,
Icon,
IconButton, IconButton,
LinearProgress, LinearProgress,
Link, Link,
@ -12,7 +10,7 @@ import {
Typography, Typography,
styled, styled,
} from '@mui/material'; } from '@mui/material';
import { Link as LinkIcon } from '@mui/icons-material'; import { Delete, Link as LinkIcon } from '@mui/icons-material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { UPDATE_APPLICATION } from 'component/providers/AccessProvider/permissions'; import { UPDATE_APPLICATION } from 'component/providers/AccessProvider/permissions';
import { ConnectedInstances } from './ConnectedInstances/ConnectedInstances'; import { ConnectedInstances } from './ConnectedInstances/ConnectedInstances';
@ -25,13 +23,13 @@ import useApplication from 'hooks/api/getters/useApplication/useApplication';
import { Route, Routes, useLocation, useNavigate } from 'react-router-dom'; import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
import { useLocationSettings } from 'hooks/useLocationSettings'; import { useLocationSettings } from 'hooks/useLocationSettings';
import useToast from 'hooks/useToast'; import useToast from 'hooks/useToast';
import PermissionButton from 'component/common/PermissionButton/PermissionButton';
import { formatDateYMD } from 'utils/formatDate'; import { formatDateYMD } from 'utils/formatDate';
import { formatUnknownError } from 'utils/formatUnknownError'; import { formatUnknownError } from 'utils/formatUnknownError';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import { useUiFlag } from 'hooks/useUiFlag'; import { useUiFlag } from 'hooks/useUiFlag';
import { ApplicationEdit } from './ApplicationEdit/ApplicationEdit'; import { ApplicationEdit } from './ApplicationEdit/ApplicationEdit';
import ApplicationOverview from './ApplicationOverview'; import ApplicationOverview from './ApplicationOverview';
import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
type Tab = { type Tab = {
title: string; title: string;
@ -150,19 +148,6 @@ export const Application = () => {
<StyledHeader> <StyledHeader>
<PageContent> <PageContent>
<PageHeader <PageHeader
titleElement={
<span
style={{
display: 'flex',
alignItems: 'center',
}}
>
<Avatar style={{ marginRight: '8px' }}>
<Icon>{icon || 'apps'}</Icon>
</Avatar>
{appName}
</span>
}
title={appName} title={appName}
actions={ actions={
<> <>
@ -179,25 +164,22 @@ export const Application = () => {
} }
/> />
<PermissionButton <PermissionIconButton
tooltipProps={{ tooltipProps={{
title: 'Delete application', title: 'Delete application',
}} }}
onClick={toggleModal} onClick={toggleModal}
permission={UPDATE_APPLICATION} permission={UPDATE_APPLICATION}
> >
Delete <Delete />
</PermissionButton> </PermissionIconButton>
</> </>
} }
/> />
<Box sx={(theme) => ({ marginTop: theme.spacing(1) })}> <Box sx={(theme) => ({ marginTop: theme.spacing(1) })}>
<Typography variant='body1'>
{description || ''}
</Typography>
<Typography variant='body2'> <Typography variant='body2'>
Created: <strong>{formatDate(createdAt)}</strong> Created: {formatDate(createdAt)}
</Typography> </Typography>
</Box> </Box>
</PageContent> </PageContent>