Merge pull request #860 from sudhanshutech/share/ux

fix position of share icon

Author: sudhanshutech

src/custom/CatalogDetail/ActionButton.tsx

@@ -1,13 +1,6 @@
 import React from 'react';
 import { CircularProgress } from '../../base';
-import {
-  CopyIcon,
-  DeleteIcon,
-  EditIcon,
-  KanvasIcon,
-  PublishIcon,
-  ShareLineIcon
-} from '../../icons';
+import { CopyIcon, DeleteIcon, EditIcon, KanvasIcon, PublishIcon } from '../../icons';
 import Download from '../../icons/Download/Download';
 import { charcoal, useTheme } from '../../theme';
 import { Pattern } from '../CustomCatalog/CustomCard';
@@ -28,8 +21,6 @@ interface ActionButtonsProps {
   onOpenPlaygroundClick: (designId: string, name: string) => void;
   showInfoAction?: boolean;
   handleInfoClick?: () => void;
-  showShareAction?: boolean;
-  handleShare: () => void;
   showDeleteAction?: boolean;
   handleDelete: () => void;
 }
@@ -47,8 +38,6 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
   onOpenPlaygroundClick,
   showInfoAction,
   handleInfoClick,
-  showShareAction,
-  handleShare,
   showDeleteAction,
   handleDelete
 }) => {
@@ -151,47 +140,31 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
             Edit
           </ActionButton>
         )}
-        {showShareAction && (
-          <ActionButton
+        {showDeleteAction && (
+          <UnpublishAction
             sx={{
               borderRadius: '0.2rem',
-              backgroundColor: 'transparent',
-              border: `1px solid ${theme.palette.border.normal}`,
-              gap: '10px',
-              color: charcoal[10]
+              gap: '10px'
             }}
-            onClick={handleShare}
+            onClick={handleDelete}
           >
-            <ShareLineIcon width="24" height="24" fill={theme.palette.icon.default} />
-            Share
-          </ActionButton>
+            <DeleteIcon width={24} height={24} fill={charcoal[100]} />
+            Delete
+          </UnpublishAction>
         )}
-        {showDeleteAction && (
+        {showUnpublishAction && (
           <UnpublishAction
             sx={{
               borderRadius: '0.2rem',
               gap: '10px'
             }}
-            onClick={handleDelete}
+            onClick={handleUnpublish}
           >
-            <DeleteIcon width={24} height={24} fill={charcoal[100]} />
-            Delete
+            <PublishIcon width={24} height={24} fill={charcoal[100]} />
+            Unpublish
           </UnpublishAction>
         )}
       </div>
-
-      {showUnpublishAction && (
-        <UnpublishAction
-          sx={{
-            borderRadius: '0.2rem',
-            gap: '10px'
-          }}
-          onClick={handleUnpublish}
-        >
-          <PublishIcon width={24} height={24} fill={charcoal[100]} />
-          Unpublish
-        </UnpublishAction>
-      )}
     </StyledActionWrapper>
   );
 };

src/custom/CatalogDetail/LeftPanel.tsx

@@ -25,8 +25,6 @@ interface LeftPanelProps {
   onOpenPlaygroundClick: (designId: string, name: string) => void;
   showInfoAction?: boolean;
   handleInfoClick?: () => void;
-  showShareAction?: boolean;
-  handleShare: () => void;
   showDeleteAction?: boolean;
   handleDelete: () => void;
 }
@@ -49,8 +47,6 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
   onOpenPlaygroundClick,
   showInfoAction = false,
   handleInfoClick,
-  showShareAction = false,
-  handleShare,
   showDeleteAction = false,
   handleDelete
 }) => {
@@ -97,8 +93,6 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
         onOpenPlaygroundClick={onOpenPlaygroundClick}
         showInfoAction={showInfoAction}
         handleInfoClick={handleInfoClick}
-        showShareAction={showShareAction}
-        handleShare={handleShare}
         showDeleteAction={showDeleteAction}
         handleDelete={handleDelete}
       />

src/custom/CatalogDetail/SocialSharePopper.tsx

@@ -1,6 +1,4 @@
-import { Box, IconButton, Menu, MenuItem } from '@mui/material';
 import React, { useState } from 'react';
-import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from 'react-share';
 
 import {
   ChainIcon,
@@ -16,9 +14,11 @@ import { Pattern } from '../CustomCatalog/CustomCard';
 import { CustomTooltip } from '../CustomTooltip';
 import { ErrorBoundary } from '../ErrorBoundary';
 
+import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from 'react-share';
+import { Box, IconButton, Menu, MenuItem, Typography } from '../../base';
 import { VisibilityChipMenu } from '../VisibilityChipMenu';
 import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
-import { CopyShareIconWrapper } from './style';
+import { CopyShareIconWrapper, ShareButton, ShareButtonGroup, ShareSideButton } from './style';
 
 interface SocialSharePopperProps {
   details: Pattern;
@@ -37,7 +37,8 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
   cardId,
   title,
   getUrl,
-  handleCopyUrl
+  handleCopyUrl,
+  handleShare
 }) => {
   const theme = useTheme();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -66,14 +67,22 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
           ]}
         />
 
-        <CustomTooltip title="Copy Link" placement="top" arrow>
-          <IconButton
-            sx={{ borderRadius: '0.1rem', padding: '0.5rem' }}
-            onClick={() => handleCopyUrl(cleanedType, details?.name, details?.id)}
-          >
-            <ChainIcon height={'24'} width={'24'} fill={theme.palette.icon.secondary} />
-          </IconButton>
-        </CustomTooltip>
+        <ShareButtonGroup variant="contained">
+          <CustomTooltip title="Change access and visibility">
+            <ShareButton variant="contained" onClick={handleShare}>
+              <Typography>Share</Typography>
+            </ShareButton>
+          </CustomTooltip>
+          <CustomTooltip title="Copy link to design">
+            <ShareSideButton
+              variant="contained"
+              size="small"
+              onClick={() => handleCopyUrl(cleanedType, details?.name, details?.id)}
+            >
+              <ChainIcon height={'24'} width={'24'} fill={theme.palette.icon.inverse} />
+            </ShareSideButton>
+          </CustomTooltip>
+        </ShareButtonGroup>
 
         {(details?.visibility === 'published' || details?.visibility === 'public') && (
           <>

src/icons/Chain/ChainIcon.tsx

@@ -12,12 +12,12 @@ const ChainIcon: React.FC<ChainIconProps> = ({ width, height, style, fill = '#3C
   <svg
     width={width}
     height={height}
-    viewBox="0 0 34 18"
+    viewBox="0 0 24 24"
     fill={fill}
     xmlns="http://www.w3.org/2000/svg"
     style={style}
   >
-    <path d="M3.95098 9.00094C3.95098 6.16576 6.2556 3.86114 9.09078 3.86114H15.7228V0.710938H9.09078C4.5147 0.710938 0.800781 4.42486 0.800781 9.00094C0.800781 13.577 4.5147 17.2909 9.09078 17.2909H15.7228V14.1407H9.09078C6.2556 14.1407 3.95098 11.8361 3.95098 9.00094ZM10.7488 10.6589H24.0128V7.34294H10.7488V10.6589ZM25.6708 0.710938H19.0388V3.86114H25.6708C28.506 3.86114 30.8106 6.16576 30.8106 9.00094C30.8106 11.8361 28.506 14.1407 25.6708 14.1407H19.0388V17.2909H25.6708C30.2469 17.2909 33.9608 13.577 33.9608 9.00094C33.9608 4.42486 30.2469 0.710938 25.6708 0.710938Z" />
+    <path d="M10,17.55,8.23,19.27a2.47,2.47,0,0,1-3.5-3.5l4.54-4.55a2.46,2.46,0,0,1,3.39-.09l.12.1a1,1,0,0,0,1.4-1.43A2.75,2.75,0,0,0,14,9.59a4.46,4.46,0,0,0-6.09.22L3.31,14.36a4.48,4.48,0,0,0,6.33,6.33L11.37,19A1,1,0,0,0,10,17.55ZM20.69,3.31a4.49,4.49,0,0,0-6.33,0L12.63,5A1,1,0,0,0,14,6.45l1.73-1.72a2.47,2.47,0,0,1,3.5,3.5l-4.54,4.55a2.46,2.46,0,0,1-3.39.09l-.12-.1a1,1,0,0,0-1.4,1.43,2.75,2.75,0,0,0,.23.21,4.47,4.47,0,0,0,6.09-.22l4.55-4.55A4.49,4.49,0,0,0,20.69,3.31Z" />
   </svg>
 );