Merge branch 'master' into visiblitymenu

layer5io · Dec 11, 2024 · 50b6844 · 50b6844
2 parents ad9f4ec + fe9d911
commit 50b6844
Show file tree

Hide file tree

Showing 22 changed files with 855 additions and 57 deletions.
diff --git a/.github/workflows/preview-site.yml b/.github/workflows/preview-site.yml
@@ -14,7 +14,7 @@ jobs:
         uses: actions/[email protected]
 
       - name: Download Site dir
-        uses: dawidd6/action-download-artifact@v2
+        uses: dawidd6/action-download-artifact@v6
         with:
           github_token: ${{ secrets.GH_ACCESS_TOKEN }}
           workflow: build-and-preview-site.yml

diff --git a/src/custom/CatalogDetail/ActionButton.tsx b/src/custom/CatalogDetail/ActionButton.tsx
@@ -76,15 +76,15 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
               backgroundColor: 'transparent',
               border: `1px solid ${theme.palette.border.normal}`,
               gap: '10px',
-              color: charcoal[10]
+              color: theme.palette.text.default
             }}
             onClick={() =>
               cleanedType === RESOURCE_TYPES.FILTERS
                 ? downloadFilter(details.id, details.name)
                 : downloadYaml(details.pattern_file, details.name)
             }
           >
-            <Download width={24} height={24} fill={charcoal[10]} />
+            <Download width={24} height={24} fill={theme.palette.icon.default} />
             Download
           </ActionButton>
 
@@ -104,7 +104,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
                 <CircularProgress size={24} color={'inherit'} />
               ) : (
                 <>
-                  <CopyIcon width={24} height={24} fill={charcoal[10]} />
+                  <CopyIcon width={24} height={24} fill={theme.palette.icon.default} />
                   Clone
                 </>
               )}

diff --git a/src/custom/CatalogDetail/OverviewSection.tsx b/src/custom/CatalogDetail/OverviewSection.tsx
@@ -23,6 +23,8 @@ interface OverviewSectionProps {
   fontFamily?: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   userProfile?: any;
+  showShareAction: boolean;
+  handleShare: () => void;
 }
 
 const OverviewSection: React.FC<OverviewSectionProps> = ({
@@ -37,7 +39,9 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
   classes,
   handleCopyUrl,
   fontFamily,
-  userProfile
+  userProfile,
+  showShareAction,
+  handleShare
 }) => {
   return (
     <OverviewContainer>
@@ -58,6 +62,8 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
           title={title}
           getUrl={getUrl}
           handleCopyUrl={handleCopyUrl}
+          showShareAction={showShareAction}
+          handleShare={handleShare}
         />
       </div>
       <Grid container spacing={2}>

diff --git a/src/custom/CatalogDetail/RightPanel.tsx b/src/custom/CatalogDetail/RightPanel.tsx
@@ -26,6 +26,8 @@ interface RightPanelProps {
   technologySVGSubpath: string;
   orgName: string;
   fetchingOrgError: boolean;
+  showShareAction: boolean;
+  handleShare: () => void;
 }
 
 const RightPanel: React.FC<RightPanelProps> = ({
@@ -47,7 +49,9 @@ const RightPanel: React.FC<RightPanelProps> = ({
   technologySVGPath,
   technologySVGSubpath,
   orgName,
-  fetchingOrgError
+  fetchingOrgError,
+  showShareAction,
+  handleShare
 }) => {
   const cleanedType = type.replace('my-', '').replace(/s$/, '');
   const { data: userProfile } = useGetUserProfileByIdQuery({
@@ -69,6 +73,8 @@ const RightPanel: React.FC<RightPanelProps> = ({
         handleCopyUrl={handleCopyUrl}
         fontFamily={fontFamily}
         userProfile={userProfile}
+        showShareAction={showShareAction}
+        handleShare={handleShare}
       />
       {showCaveats && <CaveatsSection details={details} />}
       <RelatedDesigns

diff --git a/src/custom/CatalogDetail/SocialSharePopper.tsx b/src/custom/CatalogDetail/SocialSharePopper.tsx
@@ -1,12 +1,19 @@
 import { Box, IconButton, Menu, MenuItem } from '@mui/material';
 import React, { useState } from 'react';
 import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from 'react-share';
+import { Typography } from '../../base';
 import { ChainIcon, FacebookIcon, LinkedinIcon, ShareIcon, TwitterIcon } from '../../icons';
 import { useTheme } from '../../theme';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { CustomTooltip } from '../CustomTooltip';
 import { ErrorBoundary } from '../ErrorBoundary';
-import { CopyShareIconWrapper, VisibilityChip } from './style';
+import {
+  CopyShareIconWrapper,
+  ShareButton,
+  ShareButtonGroup,
+  ShareSideButton,
+  VisibilityChip
+} from './style';
 
 interface SocialSharePopperProps {
   details: Pattern;
@@ -15,6 +22,8 @@ interface SocialSharePopperProps {
   title: string;
   getUrl: (type: string, id: string) => string;
   handleCopyUrl: (type: string, name: string, id: string) => void;
+  showShareAction: boolean;
+  handleShare: () => void;
 }
 
 const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
@@ -23,7 +32,9 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
   cardId,
   title,
   getUrl,
-  handleCopyUrl
+  handleCopyUrl,
+  showShareAction,
+  handleShare
 }) => {
   const theme = useTheme();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -50,15 +61,36 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
           {details?.visibility}
         </VisibilityChip>
 
-        {details?.visibility !== 'private' && (
-          <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>
+        {showShareAction ? (
+          <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 !== 'private' && (
+              <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>
+            )}
+          </>
         )}
 
         {(details?.visibility === 'published' || details?.visibility === 'public') && (

diff --git a/src/custom/CatalogDetail/style.tsx b/src/custom/CatalogDetail/style.tsx
@@ -1,4 +1,4 @@
-import { Link, ListItemButton, Paper, Typography } from '../../base';
+import { Button, ButtonGroup, Link, ListItemButton, Paper, Typography } from '../../base';
 import { styled } from '../../theme';
 import { Theme } from './types';
 
@@ -265,3 +265,24 @@ export const RedirectLink = styled(Link)(({ theme }) => ({
   textDecoration: 'none',
   cursor: 'pointer'
 }));
+
+export const ShareButtonGroup = styled(ButtonGroup)({
+  boxShadow: 'none',
+  border: 'none',
+  outline: 'none',
+  height: '76%'
+});
+
+export const ShareButton = styled(Button)(({ theme }) => ({
+  backgroundColor: theme.palette.background.brand?.default,
+  color: 'white',
+  border: 'none',
+  borderRadius: '0.5rem 0px 0px 0.5rem'
+}));
+
+export const ShareSideButton = styled(Button)(({ theme }) => ({
+  backgroundColor: theme.palette.background.brand?.default,
+  color: 'white',
+  border: 'none',
+  borderRadius: '0px 0.5rem  0.5rem 0px'
+}));
diff --git a/src/custom/CustomTooltip/customTooltip.tsx b/src/custom/CustomTooltip/customTooltip.tsx
@@ -21,7 +21,7 @@ function CustomTooltip({
   fontSize,
   fontWeight = 400,
   variant = 'standard',
-  bgColor = '#333333',
+  bgColor = '#141414',
   ...props
 }: CustomTooltipProps): JSX.Element {
   return (
@@ -35,8 +35,7 @@ function CustomTooltip({
             fontWeight: { fontWeight },
             borderRadius: '0.5rem',
             padding: variant === 'standard' ? '0.9rem' : '0.5rem 0.75rem',
-            boxShadow:
-              'rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px'
+            boxShadow: 'rgba(0, 0, 0, 0.6) 0px 4px 10px, rgba(0, 0, 0, 0.5) 0px 2px 4px'
           }
         },
         popper: {

diff --git a/src/custom/Modal/index.tsx b/src/custom/Modal/index.tsx
@@ -10,8 +10,8 @@ import { CustomTooltip } from '../CustomTooltip';
 interface ModalProps extends DialogProps {
   closeModal: () => void;
   title: string;
-  headerIcon: React.ReactNode;
-  reactNode: React.ReactNode;
+  headerIcon?: React.ReactNode;
+  reactNode?: React.ReactNode;
 }
 
 interface ModalFooterProps {