fix: update button sizes and improve layout in chart components

Author: RohitRaj011

src/components/charts/list/AddChartSource.tsx

@@ -27,7 +27,7 @@ const AddChartSource = ({ text }: { text?: string }) => (
             text,
             dataTestId: 'add-chart-source-button',
             startIcon: <Icon name="ic-add" color="B500" />,
-            size: ComponentSizeType.xxs,
+            size: ComponentSizeType.small,
             variant: ButtonVariantType.borderLess,
         }}
     />

src/components/charts/list/ChartListPopUpRow.tsx

@@ -15,10 +15,13 @@
  */
 
 import { useState } from 'react'
-import Tippy from '@tippyjs/react'
 import {
+    Button,
+    ButtonStyleType,
+    ButtonVariantType,
+    ComponentSizeType,
     DTSwitch,
-    Progressing,
+    Icon,
     RegistryIcon,
     RegistryType,
     showError,
@@ -27,7 +30,6 @@ import {
 } from '@devtron-labs/devtron-fe-common-lib'
 import { List } from '../../globalConfigurations/GlobalConfiguration'
 import { updateChartProviderList, updateSyncSpecificChart } from '../charts.service'
-import { ReactComponent as SyncIcon } from '../../../assets/icons/ic-arrows_clockwise.svg'
 import { ReactComponent as Helm } from '../../../assets/icons/ic-helmchart.svg'
 import { ChartListType } from '../charts.types'
 import { getNonEditableChartRepoText } from '../../common'
@@ -113,25 +115,18 @@ const ChartListPopUpRow = ({
                         <Helm className="icon-dim-20 fcb-5 dc__vertical-align-middle " />
                     )}
                 </List.Logo>
-                <div className="dc__truncate-text">{list.name}</div>
-                <Tippy className="default-tt" arrow={false} placement="top" content="Refetch charts">
-                    <a
-                        rel="noreferrer noopener"
-                        target="_blank"
-                        className={`dc__link ${!isSpecificChartRefetchLoading ? 'cursor' : ''} ${
-                            !enabled ? 'cursor-not-allowed' : ''
-                        }`}
-                        onClick={() => enabled && refetchSpecificChart(list.id, list.isOCIRegistry)}
-                    >
-                        {isSpecificChartRefetchLoading ? (
-                            <Progressing size={16} fillColor="var(--N500)" />
-                        ) : (
-                            <span>
-                                <SyncIcon className={`${enabled ? 'scn-5' : 'scn-2'}`} />
-                            </span>
-                        )}
-                    </a>
-                </Tippy>
+                <span className="dc__truncate-text cn-9">{list.name}</span>
+                <Button
+                    dataTestId="chart-refetch-button"
+                    isLoading={isSpecificChartRefetchLoading}
+                    disabled={!enabled}
+                    onClick={() => refetchSpecificChart(list.id, list.isOCIRegistry)}
+                    icon={<Icon name="ic-arrows-clockwise" color={enabled ? 'N500' : 'N200'} />}
+                    ariaLabel="Refetch charts"
+                    variant={ButtonVariantType.borderLess}
+                    style={ButtonStyleType.neutral}
+                    size={ComponentSizeType.xxs}
+                />
 
                 <div className="ml-auto">
                     <DTSwitch

src/components/charts/list/ChartsList.tsx

@@ -37,6 +37,7 @@ export const ChartsList = ({ chartsList, isLoading }: ChartsListProps) => {
     // HOOKS
     const { open, overlayProps, popoverProps, scrollableRef, triggerProps, closePopover } = usePopover({
         id: 'chart-list-popover',
+        variant: 'overlay',
         alignment: 'middle',
         width: 400,
     })
@@ -132,6 +133,7 @@ export const ChartsList = ({ chartsList, isLoading }: ChartsListProps) => {
                     dataTestId="chart-store-search-box"
                     initialSearchText={searchText}
                     containerClassName="p-12"
+                    size={ComponentSizeType.large}
                     handleEnter={handleSearchEnter}
                     inputProps={{
                         placeholder: 'Search by repository or registry',
@@ -202,14 +204,14 @@ export const ChartsList = ({ chartsList, isLoading }: ChartsListProps) => {
             }}
         >
             <div className="charts-list flexbox-col mh-400">
-                <div className="flex dc__content-space px-16 pt-12 pb-11 border__primary--bottom">
-                    <h4 className="m-0 fs-14 lh-1-5 fw-6">Helm chart sources</h4>
+                <div className="flex dc__content-space px-16 pt-10 pb-9 border__primary--bottom">
+                    <h4 className="m-0 fs-14 lh-1-5 fw-6 cn-9">Helm chart sources</h4>
                     <div className="flex dc__gap-12">
                         <AddChartSource text="Add" />
                         <Button
                             isLoading={isFetching}
                             icon={<Icon name="ic-arrows-clockwise" color={null} />}
-                            size={ComponentSizeType.xxs}
+                            size={ComponentSizeType.small}
                             variant={ButtonVariantType.borderLess}
                             dataTestId="chart-store-refetch-button"
                             ariaLabel="Refetch charts"
@@ -219,7 +221,7 @@ export const ChartsList = ({ chartsList, isLoading }: ChartsListProps) => {
                         <Button
                             icon={<Icon name="ic-close-large" size={16} color={null} />}
                             onClick={closePopover}
-                            size={ComponentSizeType.xxs}
+                            size={ComponentSizeType.small}
                             variant={ButtonVariantType.borderLess}
                             dataTestId="chart-store-close-button"
                             showAriaLabelInTippy={false}

src/components/charts/list/DiscoverCharts.tsx

@@ -677,16 +677,18 @@ const ChartListHeader = ({ charts }) => (
         <h3 className="chart-grid__title pl-20 pr-20 pt-16" data-testid="chart-store-chart-heading">
             {charts.length === 0 ? 'All Charts' : 'Select Charts'}
         </h3>
-        <p className="mb-0 mt-4 pl-20" data-testid="chart-store-list-subheading">
-            Select chart to deploy. &nbsp;
+        <div className="flex left dc__gap-4 mt-4 pl-20">
+            <p className="m-0" data-testid="chart-store-list-subheading">
+                Select chart to deploy.
+            </p>
             <DocLink
                 dataTestId="chart-group-link"
                 docLinkKey="CHART_LIST"
                 text="Learn how to deploy charts"
                 fontWeight="normal"
                 size={ComponentSizeType.small}
             />
-        </p>
+        </div>
     </div>
 )
 

src/components/charts/list/list.scss

@@ -23,7 +23,6 @@
     padding: 16px 20px;
 }
 
-
 .selected-widgets-container {
     overflow: auto;
 
@@ -66,7 +65,6 @@
         background-size: contain;
     }
 
-
     .popup-button {
         border: unset;
         width: unset;
@@ -390,8 +388,13 @@
     }
 
     .chart-list__row .list {
+        background: transparent;
         height: 36px;
         cursor: auto;
+
+        &:hover {
+            background: var(--bg-hover);
+        }
     }
 }