chore: DeploymentConfigDiff, CollapsibleList: UI/UX Changes

Author: RohitRaj011

src/Shared/Components/CollapsibleList/CollapsibleList.component.tsx

@@ -25,11 +25,11 @@ export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListP
                     <div className="flexbox dc__align-items-center dc__gap-4 py-6 px-8 br-4 dc__hover-n50">
                         <button
                             type="button"
-                            className="dc__unset-button-styles mw-none flexbox dc__align-items-center flex-grow-1 p-0 cn-9 fs-12 lh-1-5 fw-6 dc__gap-4"
+                            className="dc__unset-button-styles mw-none flexbox dc__align-items-center flex-grow-1 p-0 cn-9 fs-13 lh-1-5 fw-6 dc__gap-4"
                             onClick={(e) => onCollapseBtnClick(id, e)}
                         >
                             <ICExpand
-                                className="icon-dim-16 fcn-6 dc__no-shrink cursor rotate"
+                                className="icon-dim-20 fcn-6 dc__no-shrink cursor rotate"
                                 style={{ ['--rotateBy' as string]: isExpanded ? '90deg' : '0deg' }}
                             />
                             <span className="flex-grow-1 dc__align-left dc__truncate">{header}</span>
@@ -46,14 +46,14 @@ export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListP
                                 >
                                     <headerIconConfig.Icon
                                         {...headerIconConfig.props}
-                                        className={`icon-dim-16 ${headerIconConfig.props?.className || ''}`}
+                                        className={`icon-dim-20 ${headerIconConfig.props?.className || ''}`}
                                     />
                                 </button>
                             </ConditionalWrap>
                         )}
                     </div>
                     <Collapse expand={isExpanded}>
-                        <div className="collapsible ml-16 pl-4 dc__border-left">
+                        <div className="collapsible ml-18 pl-4 dc__border-left">
                             {!items.length ? (
                                 <div className="collapsible__item flexbox dc__gap-8 dc__no-decor no-hover br-4 py-6 px-8">
                                     <span className="collapsible__item__title dc__truncate fs-13 lh-20 cn-5">
@@ -89,7 +89,7 @@ export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListP
                                             >
                                                 <iconConfig.Icon
                                                     {...iconConfig.props}
-                                                    className={`icon-dim-16 dc__no-shrink cursor ${iconConfig.props?.className || ''}`}
+                                                    className={`icon-dim-20 dc__no-shrink cursor ${iconConfig.props?.className || ''}`}
                                                 />
                                             </ConditionalWrap>
                                         )}

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useState } from 'react'
+import { Fragment, TransitionEvent, useEffect, useState } from 'react'
 
 import { ReactComponent as ICSortArrowDown } from '@Icons/ic-sort-arrow-down.svg'
 import { ReactComponent as ICSort } from '@Icons/ic-arrow-up-down.svg'
@@ -29,8 +29,8 @@ export const DeploymentConfigDiffMain = ({
         })
     }
 
-    const handleTransitionEnd = () => {
-        if (scrollIntoViewId) {
+    const handleTransitionEnd = (id: string) => (e: TransitionEvent<HTMLDivElement>) => {
+        if (e.target === e.currentTarget && scrollIntoViewId === id) {
             const element = document.querySelector(`#${scrollIntoViewId}`)
             element?.scrollIntoView({ block: 'start' })
         }
@@ -63,6 +63,7 @@ export const DeploymentConfigDiffMain = ({
                         ) : (
                             configItem.text
                         )}
+                        {index !== list.length - 1 && <span className="cn-9 fs-13 lh-20">/</span>}
                     </Fragment>
                 )
             }
@@ -122,7 +123,7 @@ export const DeploymentConfigDiffMain = ({
                     isExpanded={expandedView[id]}
                     hasDiff={hasDiff}
                     onClick={handleAccordionClick(id)}
-                    onTransitionEnd={handleTransitionEnd}
+                    onTransitionEnd={handleTransitionEnd(id)}
                 >
                     {isDeploymentTemplate ? (
                         <>
@@ -164,12 +165,12 @@ export const DeploymentConfigDiffMain = ({
     return (
         <div className="bcn-0 deployment-config-diff__main-top">
             <div className="dc__border-bottom-n1 flexbox dc__align-items-center dc__position-sticky dc__top-0 bcn-0 w-100 dc__zi-11">
-                <div className="flexbox dc__align-items-center p-12 dc__gap-4 deployment-config-diff__main-top__header">
+                <div className="flexbox dc__align-items-center p-12 dc__gap-8 deployment-config-diff__main-top__header">
                     <p className="m-0 cn-9 fs-13 lh-20">{headerText}</p>
                     {renderHeaderSelectors(selectorsConfig.primaryConfig)}
                 </div>
                 <div className="dc__border-left flexbox dc__align-items-center deployment-config-diff__main-top__header">
-                    <div className="flex-grow-1 flexbox dc__align-items-center dc__gap-4 p-12">
+                    <div className="flex-grow-1 flexbox dc__align-items-center dc__gap-8 p-12">
                         {renderHeaderSelectors(selectorsConfig.secondaryConfig)}
                     </div>
                     {renderSortButton()}

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx

@@ -78,7 +78,7 @@ export const DeploymentConfigDiffNavigation = ({
                     onClick={onClick}
                 >
                     <span className="dc__truncate">{title}</span>
-                    {hasDiff && <ICDiffFileUpdated className="icon-dim-16 dc__no-shrink" />}
+                    {hasDiff && <ICDiffFileUpdated className="icon-dim-20 dc__no-shrink" />}
                 </NavLink>
             ))}
             <CollapsibleList config={collapsibleListConfig} onCollapseBtnClick={onCollapseBtnClick} />