Merge pull request #1153 from kubeshop/razvantopliceanu/fix/add-new-r…

…esource-disabled fix: add new resource button disabled color when in preview mode
kubeshop · Jan 25, 2022 · c5984b8 · c5984b8
2 parents c351b02 + 5b28ee4
commit c5984b8
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/src/components/organisms/NavigatorPane/NavigatorPane.styled.tsx b/src/components/organisms/NavigatorPane/NavigatorPane.styled.tsx
@@ -40,10 +40,10 @@ export const FiltersNumber = styled.div`
   margin-left: 5px;
 `;
 
-export const PlusButton = styled(Button)<{$highlighted?: boolean}>`
-  ${({$highlighted}) => `
+export const PlusButton = styled(Button)<{$highlighted: boolean; $disabled: boolean}>`
+  ${({$disabled, $highlighted}) => `
     border-radius: ${$highlighted ? '100%' : 'inherit'} !important;
-    color: ${$highlighted ? Colors.whitePure : Colors.blue6} !important`};
+    color: ${$highlighted ? Colors.whitePure : $disabled ? 'rgba(255, 255, 255, 0.3)' : Colors.blue6} !important`};
 
   &:after {
     ${({$highlighted}) => `

diff --git a/src/components/organisms/NavigatorPane/NavigatorPane.tsx b/src/components/organisms/NavigatorPane/NavigatorPane.tsx
@@ -120,13 +120,14 @@ const NavPane: React.FC = () => {
           </MonoPaneTitle>
           <S.TitleBarRightButtons>
             <S.PlusButton
-              className={highlightedItems.createResource ? 'animated-highlight' : ''}
+              $disabled={!isFolderOpen || isInPreviewMode}
               $highlighted={highlightedItems.createResource}
-              disabled={!isFolderOpen || isInClusterMode || isInPreviewMode}
-              onClick={onClickNewResource}
-              type="link"
-              size="small"
+              className={highlightedItems.createResource ? 'animated-highlight' : ''}
+              disabled={!isFolderOpen || isInPreviewMode}
               icon={<PlusOutlined />}
+              size="small"
+              type="link"
+              onClick={onClickNewResource}
             />
             <Badge count={appliedFilters.length} size="small" offset={[-2, 2]} color={Colors.greenOkay}>
               <Button