Merge pull request #1096 from kubeshop/devcatalin/fix/section-title

fix section header padding and quick preview padding
kubeshop · Jan 22, 2022 · dd67ef5 · dd67ef5
2 parents 57edded + 0b9b190
commit dd67ef5
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/src/components/molecules/QuickActionPreview/styled.tsx b/src/components/molecules/QuickActionPreview/styled.tsx
@@ -13,6 +13,7 @@ export const PreviewSpan = styled.span<{isItemSelected: boolean}>`
   font-size: 12px;
   cursor: pointer;
   color: ${props => (props.isItemSelected ? Colors.blackPure : Colors.blue6)};
+  margin-left: 5px;
   margin-right: 15px;
 `;
 

diff --git a/src/components/molecules/SectionRenderer/SectionHeader.tsx b/src/components/molecules/SectionRenderer/SectionHeader.tsx
@@ -82,7 +82,11 @@ function SectionHeader(props: SectionHeaderProps) {
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      <S.NameContainer isHovered={isHovered} $hasCustomNameDisplay={Boolean(NameDisplay.Component)}>
+      <S.NameContainer
+        isHovered={isHovered}
+        isCheckable={Boolean(sectionBlueprint.builder?.makeCheckable)}
+        $hasCustomNameDisplay={Boolean(NameDisplay.Component)}
+      >
         {sectionInstance.checkable &&
           sectionInstance.isInitialized &&
           (sectionBlueprint.customization?.isCheckVisibleOnHover

diff --git a/src/components/molecules/SectionRenderer/styled.tsx b/src/components/molecules/SectionRenderer/styled.tsx
@@ -6,6 +6,7 @@ import Colors, {FontColors} from '@styles/Colors';
 
 type NameContainerProps = {
   isHovered?: boolean;
+  isCheckable?: boolean;
   $hasCustomNameDisplay: boolean;
 };
 
@@ -27,7 +28,7 @@ export const NameContainer = styled.span<NameContainerProps>`
   display: flex;
   align-items: center;
   width: 100%;
-  padding-left: 24px;
+  ${props => props.isCheckable && `padding-left: 24px;`}
   ${props => !props.isHovered && 'padding-right: 30px;'}
   ${props => props.$hasCustomNameDisplay && 'padding: 0;'}
 `;