mirror of https://github.com/harness/drone.git
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 contentpull/3616/head
parent
e42e24cdfe
commit
4fb63f6d9b
|
@ -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}
|
||||
/>
|
||||
)
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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={
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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={
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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} />
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue