Skip to content

Commit 2aa9b65

Browse files
shivani170shivani170
committed
chore: CSS modification
1 parent 5e22d57 commit 2aa9b65

File tree

6 files changed

+21
-19
lines changed

6 files changed

+21
-19
lines changed

‎src/assets/icons/ic-default-chart.svg

Lines changed: 1 addition & 1 deletion
Loading

‎src/components/chartRepo/ChartRepo.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export default function ChartRepo({ isSuperAdmin }: ChartRepoType) {
107107
isEditable
108108
allowInsecureConnection={false}
109109
/>
110-
<div className="chartRepo_form__subtitle dc__float-left dc__bold">
110+
<div className="chartRepo_form__subtitle dc__float-left dc__bold pb-16">
111111
Repositories({(result && Array.isArray(result.result) ? result.result : []).length})
112112
</div>
113113
{[]

‎src/components/charts/ChartCard.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ const ChartCard = ({
131131
{chart.deprecated && renderDeprecatedWarning()}
132132
</div>
133133

134-
<span className={`fw-4 fs-13 lh-20 ${getDescriptionTruncate()}`}>
134+
<span className={`fw-4 fs-13 lh-1-5 ${getDescriptionTruncate()}`}>
135135
{chart.description || 'No description'}
136136
</span>
137137
</div>
@@ -140,14 +140,18 @@ const ChartCard = ({
140140
const renderFooter = () => (
141141
<div className="flex left dc__content-space dc__border-top-n1 px-20 py-16 dc__gap-6">
142142
<div className="flex dc__gap-6">
143-
<Icon name="ic-folder-color" size={16} color={null} />
143+
<Icon name="ic-folder-color" size={18} color={null} />
144144
<InteractiveCellText
145145
text={chart.chart_name ? chart.chart_name : chart.docker_artifact_store_id}
146-
rootClassName="cn-7"
146+
rootClassName="cn-7 lh-1-5"
147147
fontSize={12}
148148
/>
149149
</div>
150-
<InteractiveCellText text={`v${chart.version}`} rootClassName="cn-7 lh-18" fontSize={12} />
150+
<InteractiveCellText
151+
text={`v${chart.version}`}
152+
rootClassName={`cn-7 lh-1-5 ${isListView ? 'dc__mxw-250' : 'dc__mxw-120'}`}
153+
fontSize={12}
154+
/>
151155
</div>
152156
)
153157
return (

‎src/components/charts/charts.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
border-radius: 8px;
2929
padding: 8px;
3030
width: fit-content;
31-
height: 48px;
31+
height: 50px;
3232
}
3333

3434
.chart-icon-dim {

‎src/components/charts/list/ChartCardSkeleton.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import { ChartSkeletonRowType } from './types'
22

33
export const ChartCardSkeleton = ({ isGridView }: ChartSkeletonRowType) => (
4-
<div
5-
className={`dc__gap-16 w-100 chart-grid-item dc__visible-hover dc__visible-hover--parent bg__primary border__primary cursor dc__position-rel br-8 `}
6-
>
4+
<div className="dc__gap-16 w-100 chart-grid-item dc__visible-hover dc__visible-hover--parent bg__primary border__secondary-translucent cursor dc__position-rel br-8">
75
<div className={`${isGridView ? 'flexbox-col dc__gap-12' : 'flexbox dc__gap-16'} px-20 pt-20 pb-16`}>
86
<div className="p-4 dc__no-shrink icon-dim-48 shimmer-loading h-48" />
97

@@ -31,14 +29,14 @@ export const ChartCardSkeleton = ({ isGridView }: ChartSkeletonRowType) => (
3129
)
3230

3331
const ChartCardSkeletonRow = ({ isGridView }: ChartSkeletonRowType) => (
34-
<div className={isGridView ? 'chart-grid' : 'chart-grid list-view'}>
35-
{Array(isGridView ? 4 : 2)
32+
<>
33+
{Array(2)
3634
.fill(0)
3735
.map((_, index) => (
3836
// eslint-disable-next-line react/no-array-index-key
3937
<ChartCardSkeleton key={index} isGridView={isGridView} />
4038
))}
41-
</div>
39+
</>
4240
)
4341

4442
export default ChartCardSkeletonRow

‎src/components/charts/list/DiscoverCharts.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ const DiscoverChartList = ({ isSuperAdmin }: { isSuperAdmin: boolean }) => {
132132
const [isLoading, setIsLoading] = useState<boolean>(false)
133133
const [filteredChartList, setFilteredChartList] = useState<ChartListType[]>([])
134134

135-
const chartStoreRef =useRef<HTMLDivElement>(null)
135+
const chartStoreRef = useRef<HTMLDivElement>(null)
136136

137137
const noChartAvailable: boolean =
138138
chartList.length > 0 || searchApplied || selectedChartRepo.length > 0 || !!chartCategoryIds
@@ -525,7 +525,8 @@ const DiscoverChartList = ({ isSuperAdmin }: { isSuperAdmin: boolean }) => {
525525
{serverMode == SERVER_MODE.FULL &&
526526
!searchApplied &&
527527
!selectedChartRepo.length &&
528-
!chartCategoryIds.length && (
528+
!chartCategoryIds.length &&
529+
!!state.charts.length && (
529530
<ChartGroupListMin
530531
chartGroups={state.chartGroups.slice(0, isGrid ? 5 : 1)}
531532
showChartGroupModal={showChartGroupModal}
@@ -563,14 +564,13 @@ const DiscoverChartList = ({ isSuperAdmin }: { isSuperAdmin: boolean }) => {
563564
isListView={!isGrid}
564565
/>
565566
))}
567+
{state.hasMoreCharts && (
568+
<ChartCardSkeletonRow isGridView={isGrid} />
569+
)}
566570
{state.hasMoreCharts && (
567571
<DetectBottom callback={reloadNextAfterBottom} />
568572
)}
569573
</div>
570-
571-
{state.hasMoreCharts && (
572-
<ChartCardSkeletonRow isGridView={isGrid} />
573-
)}
574574
</>
575575
) : (
576576
renderChartStoreEmptyState()

0 commit comments

Comments
 (0)