From 4fb63f6d9b4f5557a9e9baceeb45fb75eb9824a1 Mon Sep 17 00:00:00 2001
From: Shivanand Sonnad <shivanand.sonnad@harness.io>
Date: Fri, 7 Feb 2025 08:21:57 +0000
Subject: [PATCH] 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
---
 web/src/ar/frameworks/RepositoryStep/RepositoryIcon.tsx       | 2 +-
 .../components/ArtifactListTable/ArtifactListTableCell.tsx    | 2 +-
 .../RegistryArtifactListTableCell.tsx                         | 2 +-
 .../RepositoryDetailsHeader/RepositoryDetailsHeader.tsx       | 2 +-
 .../RepositoryDetailsHeaderContent.tsx                        | 4 ++--
 .../components/SetupClientContent/SetupClientContent.tsx      | 2 +-
 .../components/RepositoryListTable/RepositoryListCells.tsx    | 2 +-
 .../UpstreamProxyDetailsHeader/UpstreamProxyDetailsHeader.tsx | 2 +-
 .../UpstreamProxyDetailsHeaderContent.tsx                     | 2 +-
 .../DockerVersionOSSContent/DockerVersionOSSGeneralInfo.tsx   | 2 +-
 .../DockerVersion/DockerVersionOverviewContent.tsx            | 2 +-
 .../version-details/GenericVersion/GenericVersionHeader.tsx   | 2 +-
 .../GenericVersion/pages/overview/GeneralInformationCard.tsx  | 2 +-
 .../HelmVersionOSSContent/HelmVersionOSSGeneralInfo.tsx       | 2 +-
 .../HelmVersion/HelmVersionOverviewContent.tsx                | 2 +-
 .../pages/overview/MavnGeneralInformationCard.tsx             | 2 +-
 .../VersionDetailsHeaderContent.tsx                           | 2 +-
 .../DockerVersion/VersionListTable/DockerVersionListCell.tsx  | 2 +-
 .../components/VersionListTable/VersionListCell.tsx           | 2 +-
 19 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/web/src/ar/frameworks/RepositoryStep/RepositoryIcon.tsx b/web/src/ar/frameworks/RepositoryStep/RepositoryIcon.tsx
index e058e7b33..b21cf8eec 100644
--- a/web/src/ar/frameworks/RepositoryStep/RepositoryIcon.tsx
+++ b/web/src/ar/frameworks/RepositoryStep/RepositoryIcon.tsx
@@ -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}
     />
   )
diff --git a/web/src/ar/pages/artifact-list/components/ArtifactListTable/ArtifactListTableCell.tsx b/web/src/ar/pages/artifact-list/components/ArtifactListTable/ArtifactListTableCell.tsx
index 86ca1cea5..9f1050432 100644
--- a/web/src/ar/pages/artifact-list/components/ArtifactListTable/ArtifactListTableCell.tsx
+++ b/web/src/ar/pages/artifact-list/components/ArtifactListTable/ArtifactListTableCell.tsx
@@ -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,
diff --git a/web/src/ar/pages/artifact-list/components/RegistryArtifactListTable/RegistryArtifactListTableCell.tsx b/web/src/ar/pages/artifact-list/components/RegistryArtifactListTable/RegistryArtifactListTableCell.tsx
index 9f8ba04f0..d678b92bf 100644
--- a/web/src/ar/pages/artifact-list/components/RegistryArtifactListTable/RegistryArtifactListTableCell.tsx
+++ b/web/src/ar/pages/artifact-list/components/RegistryArtifactListTable/RegistryArtifactListTableCell.tsx
@@ -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
diff --git a/web/src/ar/pages/repository-details/components/RepositoryDetailsHeader/RepositoryDetailsHeader.tsx b/web/src/ar/pages/repository-details/components/RepositoryDetailsHeader/RepositoryDetailsHeader.tsx
index f51f27f41..a265d7da0 100644
--- a/web/src/ar/pages/repository-details/components/RepositoryDetailsHeader/RepositoryDetailsHeader.tsx
+++ b/web/src/ar/pages/repository-details/components/RepositoryDetailsHeader/RepositoryDetailsHeader.tsx
@@ -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={
diff --git a/web/src/ar/pages/repository-details/components/RepositoryDetailsHeader/RepositoryDetailsHeaderContent.tsx b/web/src/ar/pages/repository-details/components/RepositoryDetailsHeader/RepositoryDetailsHeaderContent.tsx
index f09488081..656eb817f 100644
--- a/web/src/ar/pages/repository-details/components/RepositoryDetailsHeader/RepositoryDetailsHeaderContent.tsx
+++ b/web/src/ar/pages/repository-details/components/RepositoryDetailsHeader/RepositoryDetailsHeaderContent.tsx
@@ -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()
diff --git a/web/src/ar/pages/repository-details/components/SetupClientContent/SetupClientContent.tsx b/web/src/ar/pages/repository-details/components/SetupClientContent/SetupClientContent.tsx
index 115a08a6a..0dbf780f0 100644
--- a/web/src/ar/pages/repository-details/components/SetupClientContent/SetupClientContent.tsx
+++ b/web/src/ar/pages/repository-details/components/SetupClientContent/SetupClientContent.tsx
@@ -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">
diff --git a/web/src/ar/pages/repository-list/components/RepositoryListTable/RepositoryListCells.tsx b/web/src/ar/pages/repository-list/components/RepositoryListTable/RepositoryListCells.tsx
index 42eaefaf6..809461973 100644
--- a/web/src/ar/pages/repository-list/components/RepositoryListTable/RepositoryListCells.tsx
+++ b/web/src/ar/pages/repository-list/components/RepositoryListTable/RepositoryListCells.tsx
@@ -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>
diff --git a/web/src/ar/pages/upstream-proxy-details/components/UpstreamProxyDetailsHeader/UpstreamProxyDetailsHeader.tsx b/web/src/ar/pages/upstream-proxy-details/components/UpstreamProxyDetailsHeader/UpstreamProxyDetailsHeader.tsx
index 05cdbc9c7..a16ac5176 100644
--- a/web/src/ar/pages/upstream-proxy-details/components/UpstreamProxyDetailsHeader/UpstreamProxyDetailsHeader.tsx
+++ b/web/src/ar/pages/upstream-proxy-details/components/UpstreamProxyDetailsHeader/UpstreamProxyDetailsHeader.tsx
@@ -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={
diff --git a/web/src/ar/pages/upstream-proxy-details/components/UpstreamProxyDetailsHeader/UpstreamProxyDetailsHeaderContent.tsx b/web/src/ar/pages/upstream-proxy-details/components/UpstreamProxyDetailsHeader/UpstreamProxyDetailsHeaderContent.tsx
index 693405737..a15da2a68 100644
--- a/web/src/ar/pages/upstream-proxy-details/components/UpstreamProxyDetailsHeader/UpstreamProxyDetailsHeaderContent.tsx
+++ b/web/src/ar/pages/upstream-proxy-details/components/UpstreamProxyDetailsHeader/UpstreamProxyDetailsHeaderContent.tsx
@@ -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 (
diff --git a/web/src/ar/pages/version-details/DockerVersion/DockerVersionOSSContent/DockerVersionOSSGeneralInfo.tsx b/web/src/ar/pages/version-details/DockerVersion/DockerVersionOSSContent/DockerVersionOSSGeneralInfo.tsx
index a8acf5dd0..8ee0f7390 100644
--- a/web/src/ar/pages/version-details/DockerVersion/DockerVersionOSSContent/DockerVersionOSSGeneralInfo.tsx
+++ b/web/src/ar/pages/version-details/DockerVersion/DockerVersionOSSContent/DockerVersionOSSGeneralInfo.tsx
@@ -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
diff --git a/web/src/ar/pages/version-details/DockerVersion/DockerVersionOverviewContent.tsx b/web/src/ar/pages/version-details/DockerVersion/DockerVersionOverviewContent.tsx
index 845c696a0..919808752 100644
--- a/web/src/ar/pages/version-details/DockerVersion/DockerVersionOverviewContent.tsx
+++ b/web/src/ar/pages/version-details/DockerVersion/DockerVersionOverviewContent.tsx
@@ -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
diff --git a/web/src/ar/pages/version-details/GenericVersion/GenericVersionHeader.tsx b/web/src/ar/pages/version-details/GenericVersion/GenericVersionHeader.tsx
index 2dbbeac4f..c0f488337 100644
--- a/web/src/ar/pages/version-details/GenericVersion/GenericVersionHeader.tsx
+++ b/web/src/ar/pages/version-details/GenericVersion/GenericVersionHeader.tsx
@@ -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()
diff --git a/web/src/ar/pages/version-details/GenericVersion/pages/overview/GeneralInformationCard.tsx b/web/src/ar/pages/version-details/GenericVersion/pages/overview/GeneralInformationCard.tsx
index 77178f4ca..d0e884f94 100644
--- a/web/src/ar/pages/version-details/GenericVersion/pages/overview/GeneralInformationCard.tsx
+++ b/web/src/ar/pages/version-details/GenericVersion/pages/overview/GeneralInformationCard.tsx
@@ -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
diff --git a/web/src/ar/pages/version-details/HelmVersion/HelmVersionOSSContent/HelmVersionOSSGeneralInfo.tsx b/web/src/ar/pages/version-details/HelmVersion/HelmVersionOSSContent/HelmVersionOSSGeneralInfo.tsx
index cccb84091..a0b850b6c 100644
--- a/web/src/ar/pages/version-details/HelmVersion/HelmVersionOSSContent/HelmVersionOSSGeneralInfo.tsx
+++ b/web/src/ar/pages/version-details/HelmVersion/HelmVersionOSSContent/HelmVersionOSSGeneralInfo.tsx
@@ -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
diff --git a/web/src/ar/pages/version-details/HelmVersion/HelmVersionOverviewContent.tsx b/web/src/ar/pages/version-details/HelmVersion/HelmVersionOverviewContent.tsx
index 4b2541efd..8595b723c 100644
--- a/web/src/ar/pages/version-details/HelmVersion/HelmVersionOverviewContent.tsx
+++ b/web/src/ar/pages/version-details/HelmVersion/HelmVersionOverviewContent.tsx
@@ -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
diff --git a/web/src/ar/pages/version-details/MavenVersion/pages/overview/MavnGeneralInformationCard.tsx b/web/src/ar/pages/version-details/MavenVersion/pages/overview/MavnGeneralInformationCard.tsx
index 0dfbf8a4b..f5259e70f 100644
--- a/web/src/ar/pages/version-details/MavenVersion/pages/overview/MavnGeneralInformationCard.tsx
+++ b/web/src/ar/pages/version-details/MavenVersion/pages/overview/MavnGeneralInformationCard.tsx
@@ -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} />
diff --git a/web/src/ar/pages/version-details/components/VersionDetailsHeaderContent/VersionDetailsHeaderContent.tsx b/web/src/ar/pages/version-details/components/VersionDetailsHeaderContent/VersionDetailsHeaderContent.tsx
index 38845d3fc..fbf6deca1 100644
--- a/web/src/ar/pages/version-details/components/VersionDetailsHeaderContent/VersionDetailsHeaderContent.tsx
+++ b/web/src/ar/pages/version-details/components/VersionDetailsHeaderContent/VersionDetailsHeaderContent.tsx
@@ -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()
diff --git a/web/src/ar/pages/version-list/DockerVersion/VersionListTable/DockerVersionListCell.tsx b/web/src/ar/pages/version-list/DockerVersion/VersionListTable/DockerVersionListCell.tsx
index 4095ff602..b571eccd6 100644
--- a/web/src/ar/pages/version-list/DockerVersion/VersionListTable/DockerVersionListCell.tsx
+++ b/web/src/ar/pages/version-list/DockerVersion/VersionListTable/DockerVersionListCell.tsx
@@ -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>
diff --git a/web/src/ar/pages/version-list/components/VersionListTable/VersionListCell.tsx b/web/src/ar/pages/version-list/components/VersionListTable/VersionListCell.tsx
index 6ded68c89..23ffb0441 100644
--- a/web/src/ar/pages/version-list/components/VersionListTable/VersionListCell.tsx
+++ b/web/src/ar/pages/version-list/components/VersionListTable/VersionListCell.tsx
@@ -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,