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

* feat: [AH-944]: update version list icon
* feat: [AH-944]: use icon size 24 in listing page and 40 in header content
pull/3616/head
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

View File

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

View File

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

View File

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

View File

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

View File

@ -40,7 +40,7 @@ interface RepositoryDetailsHeaderContentProps {
}
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 { getString } = useStrings()
const [showSetupClientModal] = useSetupClientModal({
@ -87,7 +87,7 @@ export default function RepositoryDetailsHeaderContent(props: RepositoryDetailsH
<Expander />
<Layout.Horizontal>
<Button
variation={ButtonVariation.PRIMARY}
variation={ButtonVariation.SECONDARY}
text={getString('actions.setupClient')}
onClick={() => {
showSetupClientModal()

View File

@ -61,7 +61,7 @@ export default function SetupClientContent(props: SetupClientContentProps): JSX.
{responseData && (
<Layout.Vertical>
<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>
</Layout.Horizontal>
<Layout.Vertical data-testid="setup-client-body" className={css.contentContainer} spacing="medium">

View File

@ -45,7 +45,7 @@ export const RepositoryNameCell: CellType = ({ value, row }) => {
const { labels, description, packageType } = original
return (
<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' }}>
{value}
</Text>

View File

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

View File

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

View File

@ -73,7 +73,7 @@ export default function DockerVersionOSSGeneralInfo({ className }: DockerVersion
<Text font={{ variation: FontVariation.SMALL_BOLD }}>
{getString('versionDetails.overview.generalInformation.packageType')}
</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')}
</Text>
<LabelValueContent

View File

@ -97,7 +97,7 @@ export default function DockerVersionOverviewContent(): JSX.Element {
<Text font={{ variation: FontVariation.SMALL_BOLD }}>
{getString('versionDetails.overview.generalInformation.packageType')}
</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')}
</Text>
<LabelValueContent

View File

@ -34,7 +34,7 @@ interface GenericVersionHeaderProps {
}
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 pathParams = useDecodedParams<VersionDetailsPathParams>()
const { getString } = useStrings()

View File

@ -56,7 +56,7 @@ export default function GeneralInformationCard(props: GeneralInformationCardProp
<Text font={{ variation: FontVariation.SMALL_BOLD }}>
{getString('versionDetails.overview.generalInformation.packageType')}
</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')}
</Text>
<LabelValueContent

View File

@ -63,7 +63,7 @@ export default function HelmVersionOSSGeneralInfo(props: HelmVersionOSSGeneralIn
<Text font={{ variation: FontVariation.SMALL_BOLD }}>
{getString('versionDetails.overview.generalInformation.packageType')}
</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')}
</Text>
<LabelValueContent

View File

@ -72,7 +72,7 @@ export default function HelmVersionOverviewContent(): JSX.Element {
<Text font={{ variation: FontVariation.SMALL_BOLD }}>
{getString('versionDetails.overview.generalInformation.packageType')}
</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')}
</Text>
<LabelValueContent

View File

@ -55,7 +55,7 @@ export default function MavnGeneralInformationCard(props: MavnGeneralInformation
<Text font={{ variation: FontVariation.SMALL_BOLD }}>
{getString('versionDetails.overview.generalInformation.packageType')}
</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')}
</Text>
<LabelValueContent label={getString('versionDetails.overview.generalInformation.size')} value={data.size} />

View File

@ -35,7 +35,7 @@ interface VersionDetailsHeaderContentProps {
}
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 pathParams = useDecodedParams<VersionDetailsPathParams>()
const { getString } = useStrings()

View File

@ -40,7 +40,7 @@ export const DockerVersionNameCell: CellType = ({ value, row }) => {
const { getString } = useStrings()
return (
<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} />
{original.islatestVersion && <Tag isVersionTag>{getString('tags.latest')}</Tag>}
</Layout.Horizontal>

View File

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