github/drone
5
0
Fork 0
mirror of https://github.com/harness/drone.git synced 2025-05-06 11:51:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: [AH-944]: use icon size 24 in listing page and 40 in header content (#3387)

Browse Source 
* feat: [AH-944]: update version list icon
* feat: [AH-944]: use icon size 24 in listing page and 40 in header content
This commit is contained in:
Shivanand Sonnad 2025-02-07 08:21:57 +00:00 committed by Harness
parent e42e24cdfe
commit 4fb63f6d9b
19 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/ar/frameworks/RepositoryStep/RepositoryIcon.tsx
View File

@ -41,7 +41,7 @@ export default function RepositoryIcon(props: RepositoryIconProps): JSX.Element
<Icon <Icon
key={packageType} key={packageType}
name={repositoryType.getIconName()} name={repositoryType.getIconName()}
size={defaultTo(iconProps?.size, 16)} size={defaultTo(iconProps?.size, 24)}
inverse={iconProps?.inverse} inverse={iconProps?.inverse}
/> />
) )

2
web/src/ar/pages/artifact-list/components/ArtifactListTable/ArtifactListTableCell.tsx
View File

@ -59,7 +59,7 @@ export const ArtifactNameCell: Renderer<{
return ( return (
<Layout.Vertical> <Layout.Vertical>
<TableCells.LinkCell <TableCells.LinkCell
prefix={<RepositoryIcon packageType={original.packageType as RepositoryPackageType} iconProps={{ size: 24 }} />} prefix={<RepositoryIcon packageType={original.packageType as RepositoryPackageType} />}
linkTo={routes.toARRedirect({ linkTo={routes.toARRedirect({
packageType: packageType as RepositoryPackageType, packageType: packageType as RepositoryPackageType,
registryId: registryIdentifier, registryId: registryIdentifier,

2
web/src/ar/pages/artifact-list/components/RegistryArtifactListTable/RegistryArtifactListTableCell.tsx
View File

@ -54,7 +54,7 @@ export const RegistryArtifactNameCell: Renderer<{
const value = original.name const value = original.name
return ( return (
<TableCells.LinkCell <TableCells.LinkCell
prefix={<RepositoryIcon packageType={original.packageType as RepositoryPackageType} iconProps={{ size: 24 }} />} prefix={<RepositoryIcon packageType={original.packageType as RepositoryPackageType} />}
linkTo={routes.toARArtifactDetails({ linkTo={routes.toARArtifactDetails({
repositoryIdentifier: original.registryIdentifier, repositoryIdentifier: original.registryIdentifier,
artifactIdentifier: value artifactIdentifier: value

2
web/src/ar/pages/repository-details/components/RepositoryDetailsHeader/RepositoryDetailsHeader.tsx
View File

@ -38,7 +38,7 @@ export default function RepositoryDetailsHeader(props: RepositoryDetailsHeaderPr
return ( return (
<Page.Header <Page.Header
title={<RepositoryDetailsHeaderContent data={data} iconSize={40} />} title={<RepositoryDetailsHeaderContent data={data} />}
className={cx(css.header)} className={cx(css.header)}
size="xlarge" size="xlarge"
breadcrumbs={ breadcrumbs={

4
web/src/ar/pages/repository-details/components/RepositoryDetailsHeader/RepositoryDetailsHeaderContent.tsx
View File

@ -40,7 +40,7 @@ interface RepositoryDetailsHeaderContentProps {
} }
export default function RepositoryDetailsHeaderContent(props: RepositoryDetailsHeaderContentProps): JSX.Element { export default function RepositoryDetailsHeaderContent(props: RepositoryDetailsHeaderContentProps): JSX.Element {
const { data, iconSize = 18 } = props const { data, iconSize = 40 } = props
const { identifier, labels, description, modifiedAt, packageType } = data || {} const { identifier, labels, description, modifiedAt, packageType } = data || {}
const { getString } = useStrings() const { getString } = useStrings()
const [showSetupClientModal] = useSetupClientModal({ const [showSetupClientModal] = useSetupClientModal({
@ -87,7 +87,7 @@ export default function RepositoryDetailsHeaderContent(props: RepositoryDetailsH
<Expander /> <Expander />
<Layout.Horizontal> <Layout.Horizontal>
<Button <Button
variation={ButtonVariation.PRIMARY} variation={ButtonVariation.SECONDARY}
text={getString('actions.setupClient')} text={getString('actions.setupClient')}
onClick={() => { onClick={() => {
showSetupClientModal() showSetupClientModal()

2
web/src/ar/pages/repository-details/components/SetupClientContent/SetupClientContent.tsx
View File

@ -61,7 +61,7 @@ export default function SetupClientContent(props: SetupClientContentProps): JSX.
{responseData && ( {responseData && (
<Layout.Vertical> <Layout.Vertical>
<Layout.Horizontal data-testid="setup-client-header" className={css.titleContainer} spacing="medium"> <Layout.Horizontal data-testid="setup-client-header" className={css.titleContainer} spacing="medium">
<RepositoryIcon packageType={packageType as RepositoryPackageType} iconProps={{ size: 28 }} /> <RepositoryIcon packageType={packageType as RepositoryPackageType} iconProps={{ size: 40 }} />
<Text font={{ variation: FontVariation.H3 }}>{responseData.mainHeader}</Text> <Text font={{ variation: FontVariation.H3 }}>{responseData.mainHeader}</Text>
</Layout.Horizontal> </Layout.Horizontal>
<Layout.Vertical data-testid="setup-client-body" className={css.contentContainer} spacing="medium"> <Layout.Vertical data-testid="setup-client-body" className={css.contentContainer} spacing="medium">

2
web/src/ar/pages/repository-list/components/RepositoryListTable/RepositoryListCells.tsx
View File

@ -45,7 +45,7 @@ export const RepositoryNameCell: CellType = ({ value, row }) => {
const { labels, description, packageType } = original const { labels, description, packageType } = original
return ( return (
<Layout.Horizontal className={css.nameCellContainer} spacing="small"> <Layout.Horizontal className={css.nameCellContainer} spacing="small">
<RepositoryIcon packageType={packageType as RepositoryPackageType} iconProps={{ size: 20 }} /> <RepositoryIcon packageType={packageType as RepositoryPackageType} />
<Text lineClamp={1} color={Color.GREY_900} font={{ size: 'small' }}> <Text lineClamp={1} color={Color.GREY_900} font={{ size: 'small' }}>
{value} {value}
</Text> </Text>

2
web/src/ar/pages/upstream-proxy-details/components/UpstreamProxyDetailsHeader/UpstreamProxyDetailsHeader.tsx
View File

@ -35,7 +35,7 @@ export default function UpstreamProxyDetailsHeader(props: UpstreamProxyDetailsHe
return ( return (
<Page.Header <Page.Header
title={<UpstreamProxyDetailsHeaderContent data={data} iconSize={40} />} title={<UpstreamProxyDetailsHeaderContent data={data} />}
className={classNames(css.header)} className={classNames(css.header)}
size="xlarge" size="xlarge"
breadcrumbs={ breadcrumbs={

2
web/src/ar/pages/upstream-proxy-details/components/UpstreamProxyDetailsHeader/UpstreamProxyDetailsHeaderContent.tsx
View File

@ -37,7 +37,7 @@ interface UpstreamProxyDetailsHeaderContentProps {
} }
export default function UpstreamProxyDetailsHeaderContent(props: UpstreamProxyDetailsHeaderContentProps): JSX.Element { export default function UpstreamProxyDetailsHeaderContent(props: UpstreamProxyDetailsHeaderContentProps): JSX.Element {
const { data, iconSize = 18 } = props const { data, iconSize = 40 } = props
const { identifier, modifiedAt, packageType } = data const { identifier, modifiedAt, packageType } = data
const { getString } = useStrings() const { getString } = useStrings()
return ( return (

2
web/src/ar/pages/version-details/DockerVersion/DockerVersionOSSContent/DockerVersionOSSGeneralInfo.tsx
View File

@ -73,7 +73,7 @@ export default function DockerVersionOSSGeneralInfo({ className }: DockerVersion
<Text font={{ variation: FontVariation.SMALL_BOLD }}> <Text font={{ variation: FontVariation.SMALL_BOLD }}>
{getString('versionDetails.overview.generalInformation.packageType')} {getString('versionDetails.overview.generalInformation.packageType')}
</Text> </Text>
<Text icon="docker-step" iconProps={{ size: 16 }} font={{ variation: FontVariation.SMALL }}> <Text icon="docker-step" iconProps={{ size: 20 }} font={{ variation: FontVariation.SMALL }}>
{getString('packageTypes.dockerPackage')} {getString('packageTypes.dockerPackage')}
</Text> </Text>
<LabelValueContent <LabelValueContent

2
web/src/ar/pages/version-details/DockerVersion/DockerVersionOverviewContent.tsx
View File

@ -97,7 +97,7 @@ export default function DockerVersionOverviewContent(): JSX.Element {
<Text font={{ variation: FontVariation.SMALL_BOLD }}> <Text font={{ variation: FontVariation.SMALL_BOLD }}>
{getString('versionDetails.overview.generalInformation.packageType')} {getString('versionDetails.overview.generalInformation.packageType')}
</Text> </Text>
<Text icon="docker-step" iconProps={{ size: 16 }} font={{ variation: FontVariation.SMALL }}> <Text icon="docker-step" iconProps={{ size: 20 }} font={{ variation: FontVariation.SMALL }}>
{getString('packageTypes.dockerPackage')} {getString('packageTypes.dockerPackage')}
</Text> </Text>
<LabelValueContent <LabelValueContent

2
web/src/ar/pages/version-details/GenericVersion/GenericVersionHeader.tsx
View File

@ -34,7 +34,7 @@ interface GenericVersionHeaderProps {
} }
export default function GenericVersionHeader(props: GenericVersionHeaderProps): JSX.Element { export default function GenericVersionHeader(props: GenericVersionHeaderProps): JSX.Element {
const { iconSize = 30, data } = props const { iconSize = 40, data } = props
const { imageName, version, isLatestVersion = false, packageType } = data const { imageName, version, isLatestVersion = false, packageType } = data
const pathParams = useDecodedParams<VersionDetailsPathParams>() const pathParams = useDecodedParams<VersionDetailsPathParams>()
const { getString } = useStrings() const { getString } = useStrings()

2
web/src/ar/pages/version-details/GenericVersion/pages/overview/GeneralInformationCard.tsx
View File

@ -56,7 +56,7 @@ export default function GeneralInformationCard(props: GeneralInformationCardProp
<Text font={{ variation: FontVariation.SMALL_BOLD }}> <Text font={{ variation: FontVariation.SMALL_BOLD }}>
{getString('versionDetails.overview.generalInformation.packageType')} {getString('versionDetails.overview.generalInformation.packageType')}
</Text> </Text>
<Text icon="generic-repository-type" iconProps={{ size: 16 }} font={{ variation: FontVariation.SMALL }}> <Text icon="generic-repository-type" iconProps={{ size: 20 }} font={{ variation: FontVariation.SMALL }}>
{getString('packageTypes.genericPackage')} {getString('packageTypes.genericPackage')}
</Text> </Text>
<LabelValueContent <LabelValueContent

2
web/src/ar/pages/version-details/HelmVersion/HelmVersionOSSContent/HelmVersionOSSGeneralInfo.tsx
View File

@ -63,7 +63,7 @@ export default function HelmVersionOSSGeneralInfo(props: HelmVersionOSSGeneralIn
<Text font={{ variation: FontVariation.SMALL_BOLD }}> <Text font={{ variation: FontVariation.SMALL_BOLD }}>
{getString('versionDetails.overview.generalInformation.packageType')} {getString('versionDetails.overview.generalInformation.packageType')}
</Text> </Text>
<Text icon="service-helm" iconProps={{ size: 16 }} font={{ variation: FontVariation.SMALL }}> <Text icon="service-helm" iconProps={{ size: 20 }} font={{ variation: FontVariation.SMALL }}>
{getString('packageTypes.helmPackage')} {getString('packageTypes.helmPackage')}
</Text> </Text>
<LabelValueContent <LabelValueContent

2
web/src/ar/pages/version-details/HelmVersion/HelmVersionOverviewContent.tsx
View File

@ -72,7 +72,7 @@ export default function HelmVersionOverviewContent(): JSX.Element {
<Text font={{ variation: FontVariation.SMALL_BOLD }}> <Text font={{ variation: FontVariation.SMALL_BOLD }}>
{getString('versionDetails.overview.generalInformation.packageType')} {getString('versionDetails.overview.generalInformation.packageType')}
</Text> </Text>
<Text icon="service-helm" iconProps={{ size: 16 }} font={{ variation: FontVariation.SMALL }}> <Text icon="service-helm" iconProps={{ size: 20 }} font={{ variation: FontVariation.SMALL }}>
{getString('packageTypes.helmPackage')} {getString('packageTypes.helmPackage')}
</Text> </Text>
<LabelValueContent <LabelValueContent

2
web/src/ar/pages/version-details/MavenVersion/pages/overview/MavnGeneralInformationCard.tsx
View File

@ -55,7 +55,7 @@ export default function MavnGeneralInformationCard(props: MavnGeneralInformation
<Text font={{ variation: FontVariation.SMALL_BOLD }}> <Text font={{ variation: FontVariation.SMALL_BOLD }}>
{getString('versionDetails.overview.generalInformation.packageType')} {getString('versionDetails.overview.generalInformation.packageType')}
</Text> </Text>
<Text icon="generic-repository-type" iconProps={{ size: 16 }} font={{ variation: FontVariation.SMALL }}> <Text icon="generic-repository-type" iconProps={{ size: 20 }} font={{ variation: FontVariation.SMALL }}>
{getString('packageTypes.mavenPackage')} {getString('packageTypes.mavenPackage')}
</Text> </Text>
<LabelValueContent label={getString('versionDetails.overview.generalInformation.size')} value={data.size} /> <LabelValueContent label={getString('versionDetails.overview.generalInformation.size')} value={data.size} />

2
web/src/ar/pages/version-details/components/VersionDetailsHeaderContent/VersionDetailsHeaderContent.tsx
View File

@ -35,7 +35,7 @@ interface VersionDetailsHeaderContentProps {
} }
export default function VersionDetailsHeaderContent(props: VersionDetailsHeaderContentProps): JSX.Element { export default function VersionDetailsHeaderContent(props: VersionDetailsHeaderContentProps): JSX.Element {
const { iconSize = 30, data } = props const { iconSize = 40, data } = props
const { imageName, version, isLatestVersion = false, packageType } = data const { imageName, version, isLatestVersion = false, packageType } = data
const pathParams = useDecodedParams<VersionDetailsPathParams>() const pathParams = useDecodedParams<VersionDetailsPathParams>()
const { getString } = useStrings() const { getString } = useStrings()

2
web/src/ar/pages/version-list/DockerVersion/VersionListTable/DockerVersionListCell.tsx
View File

@ -40,7 +40,7 @@ export const DockerVersionNameCell: CellType = ({ value, row }) => {
const { getString } = useStrings() const { getString } = useStrings()
return ( return (
<Layout.Horizontal className={css.nameCellContainer} spacing="small"> <Layout.Horizontal className={css.nameCellContainer} spacing="small">
<Icon name="store-artifact-bundle" size={18} /> <Icon name="store-artifact-bundle" size={24} />
<TableCells.TextCell value={value} /> <TableCells.TextCell value={value} />
{original.islatestVersion && <Tag isVersionTag>{getString('tags.latest')}</Tag>} {original.islatestVersion && <Tag isVersionTag>{getString('tags.latest')}</Tag>}
</Layout.Horizontal> </Layout.Horizontal>

2
web/src/ar/pages/version-list/components/VersionListTable/VersionListCell.tsx
View File

@ -69,7 +69,7 @@ export const VersionNameCell: CellType = ({ value, row }) => {
const pathParams = useDecodedParams<ArtifactDetailsPathParams>() const pathParams = useDecodedParams<ArtifactDetailsPathParams>()
return ( return (
<Layout.Horizontal className={css.nameCellContainer} spacing="small"> <Layout.Horizontal className={css.nameCellContainer} spacing="small">
<Icon name="store-artifact-bundle" size={18} /> <Icon name="store-artifact-bundle" size={24} />
<Link <Link
to={routes.toARVersionDetailsTab({ to={routes.toARVersionDetailsTab({
repositoryIdentifier: pathParams.repositoryIdentifier, repositoryIdentifier: pathParams.repositoryIdentifier,