fix(buttons): position and add info action

Signed-off-by: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>

Author: sudhanshutech

src/custom/CatalogDetail/ActionButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CircularProgress } from '../../base';
-import { CopyIcon, KanvasIcon, PublishIcon } from '../../icons';
+import { CopyIcon, EditIcon, KanvasIcon, PublishIcon } from '../../icons';
 import Download from '../../icons/Download/Download';
 import { charcoal, useTheme } from '../../theme';
 import { Pattern } from '../CustomCatalog/CustomCard';
@@ -19,6 +19,8 @@ interface ActionButtonsProps {
   showUnpublishAction: boolean;
   showOpenPlaygroundAction: boolean;
   onOpenPlaygroundClick: (designId: string, name: string) => void;
+  showInfoAction?: boolean;
+  handleInfoClick?: () => void;
 }
 
 const ActionButtons: React.FC<ActionButtonsProps> = ({
@@ -31,12 +33,34 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
   showUnpublishAction,
   handleUnpublish,
   showOpenPlaygroundAction,
-  onOpenPlaygroundClick
+  onOpenPlaygroundClick,
+  showInfoAction,
+  handleInfoClick
 }) => {
   const cleanedType = type.replace('my-', '').replace(/s$/, '');
   const theme = useTheme();
   return (
     <StyledActionWrapper>
+      {showOpenPlaygroundAction && (
+        <ActionButton
+          sx={{
+            borderRadius: '0.2rem',
+            backgroundColor: theme.palette.background.cta?.default,
+            color: theme.palette.text.inverse,
+            gap: '10px',
+            width: '100%'
+          }}
+          onClick={() => onOpenPlaygroundClick(details.id, details.name)}
+        >
+          <KanvasIcon
+            width={24}
+            height={24}
+            primaryFill={theme.palette.icon.inverse}
+            fill={theme.palette.icon.default}
+          />
+          Open in Playground
+        </ActionButton>
+      )}
       {actionItems && (
         <div
           style={{
@@ -49,17 +73,18 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
           <ActionButton
             sx={{
               borderRadius: '0.2rem',
-              backgroundColor: theme.palette.background.brand?.default,
+              backgroundColor: 'transparent',
+              border: `1px solid ${theme.palette.border.normal}`,
               gap: '10px',
-              color: charcoal[100]
+              color: charcoal[10]
             }}
             onClick={() =>
               cleanedType === RESOURCE_TYPES.FILTERS
                 ? downloadFilter(details.id, details.name)
                 : downloadYaml(details.pattern_file, details.name)
             }
           >
-            <Download width={24} height={24} fill={charcoal[100]} />
+            <Download width={24} height={24} fill={charcoal[10]} />
             Download
           </ActionButton>
 
@@ -68,8 +93,9 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
               sx={{
                 borderRadius: '0.2rem',
                 gap: '10px',
-                color: charcoal[100],
-                backgroundColor: theme.palette.background.cta?.default
+                color: theme.palette.text.default,
+                backgroundColor: 'transparent',
+                border: `1px solid ${theme.palette.border.normal}`
               }}
               onClick={() => handleClone(details?.name, details?.id)}
               disabled={isCloneDisabled}
@@ -78,49 +104,51 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
                 <CircularProgress size={24} color={'inherit'} />
               ) : (
                 <>
-                  <CopyIcon width={24} height={24} fill={charcoal[100]} />
+                  <CopyIcon width={24} height={24} fill={charcoal[10]} />
                   Clone
                 </>
               )}
             </ActionButton>
           )}
         </div>
       )}
-      {showOpenPlaygroundAction && (
-        <ActionButton
-          sx={{
-            borderRadius: '0.2rem',
-            backgroundColor: 'transparent',
-            border: `1px solid ${theme.palette.border.normal}`,
-            color: theme.palette.text.default,
-            gap: '10px',
-            width: '100%'
-          }}
-          onClick={() => onOpenPlaygroundClick(details.id, details.name)}
-        >
-          <KanvasIcon
-            width={24}
-            height={24}
-            primaryFill={theme.palette.icon.default}
-            fill={theme.palette.icon.default}
-          />
-          Open in Playground
-        </ActionButton>
-      )}
 
-      {showUnpublishAction && (
-        <UnpublishAction
-          sx={{
-            borderRadius: '0.2rem',
-            gap: '10px',
-            width: '100%'
-          }}
-          onClick={handleUnpublish}
-        >
-          <PublishIcon width={24} height={24} fill={charcoal[10]} />
-          Unpublish
-        </UnpublishAction>
-      )}
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          gap: '0.75rem',
+          width: '100%'
+        }}
+      >
+        {showInfoAction && (
+          <ActionButton
+            sx={{
+              borderRadius: '0.2rem',
+              backgroundColor: 'transparent',
+              border: `1px solid ${theme.palette.border.normal}`,
+              gap: '10px',
+              color: charcoal[10]
+            }}
+            onClick={handleInfoClick}
+          >
+            <EditIcon width={24} height={24} fill={charcoal[10]} />
+            Edit
+          </ActionButton>
+        )}
+        {showUnpublishAction && (
+          <UnpublishAction
+            sx={{
+              borderRadius: '0.2rem',
+              gap: '10px'
+            }}
+            onClick={handleUnpublish}
+          >
+            <PublishIcon width={24} height={24} fill={charcoal[100]} />
+            Unpublish
+          </UnpublishAction>
+        )}
+      </div>
     </StyledActionWrapper>
   );
 };

src/custom/CatalogDetail/LeftPanel.tsx

@@ -23,6 +23,8 @@ interface LeftPanelProps {
   showUnpublishAction?: boolean;
   showOpenPlaygroundAction?: boolean;
   onOpenPlaygroundClick: (designId: string, name: string) => void;
+  showInfoAction?: boolean;
+  handleInfoClick?: () => void;
 }
 
 const LeftPanel: React.FC<LeftPanelProps> = ({
@@ -40,7 +42,9 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
   fontFamily,
   showUnpublishAction = false,
   showOpenPlaygroundAction = true,
-  onOpenPlaygroundClick
+  onOpenPlaygroundClick,
+  showInfoAction = false,
+  handleInfoClick
 }) => {
   const theme = useTheme();
 
@@ -83,6 +87,8 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
         isCloneDisabled={isCloneDisabled}
         showOpenPlaygroundAction={showOpenPlaygroundAction}
         onOpenPlaygroundClick={onOpenPlaygroundClick}
+        showInfoAction={showInfoAction}
+        handleInfoClick={handleInfoClick}
       />
       {showTechnologies && (
         <TechnologySection

src/custom/CatalogDetail/style.tsx

@@ -43,10 +43,9 @@ export const UnpublishAction = styled('div')<ActionButtonProps>(({ disabled = fa
   justifyContent: 'center',
   alignItems: 'center',
   borderRadius: '0.5rem',
-  backgroundColor: 'transparent',
-  border: `1px solid ${theme.palette.border.normal}`,
+  backgroundColor: theme.palette.background.error?.default,
   padding: '0.5rem',
-  color: theme.palette.text.default,
+  color: theme.palette.text.inverse,
   gap: '0.625rem',
   flex: '1'
 }));