fix(theme): button UX

Signed-off-by: Sudhanshu Dasgupta <[email protected]>
layer5io · Nov 29, 2024 · cbc755a · cbc755a
1 parent b6ec794
commit cbc755a
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 20 deletions.
diff --git a/src/custom/CatalogDetail/SocialSharePopper.tsx b/src/custom/CatalogDetail/SocialSharePopper.tsx
@@ -56,8 +56,8 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
 
         {showShareAction ? (
           <CustomTooltip title="Share" placement="top" arrow>
-            <ActionButton sx={{ borderRadius: '0.1rem', padding: '0.5rem' }} onClick={handleShare}>
-              <ChainIcon height={'24'} width={'24'} fill={theme.palette.icon.secondary} />
+            <ActionButton sx={{ borderRadius: '0.2rem', padding: '0.4rem' }} onClick={handleShare}>
+              <ChainIcon height={'24'} width={'24'} fill={theme.palette.icon.inverse} />
               Share
             </ActionButton>
           </CustomTooltip>

diff --git a/src/custom/ShareModal/ShareModal.tsx b/src/custom/ShareModal/ShareModal.tsx
@@ -286,25 +286,36 @@ const ShareModal: React.FC<ShareModalProps> = ({
           </CustomDialogContentText>
         </ModalBody>
 
-        <ModalFooter variant="filled">
-          <ModalButtonSecondary
-            variant="outlined"
-            onClick={handleCopy}
-            style={{ marginRight: '1rem', padding: '7px 16px' }}
+        <ModalFooter
+          variant="filled"
+          helpText="You can share your designs or designs for which you have permission to share with other members of your organization and teams, and you can control access permissions."
+        >
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'end',
+              gap: '1rem'
+            }}
           >
-            <IconButtonWrapper>
-              <ChainIcon width="24" height="24" fill={theme.palette.text.constant?.white} />
-            </IconButtonWrapper>
-            <Typography>Copy Link</Typography>
-          </ModalButtonSecondary>
-          <ModalButtonPrimary
-            disabled={isShareDisabled()}
-            variant="contained"
-            color="primary"
-            onClick={() => handleShare(shareUserData, selectedOption)}
-          >
-            Share
-          </ModalButtonPrimary>
+            <ModalButtonSecondary
+              variant="outlined"
+              onClick={handleCopy}
+              style={{ marginRight: '1rem', padding: '7px 16px' }}
+            >
+              <IconButtonWrapper>
+                <ChainIcon width="24" height="24" fill={theme.palette.text.constant?.white} />
+              </IconButtonWrapper>
+              <Typography>Copy Link</Typography>
+            </ModalButtonSecondary>
+            <ModalButtonPrimary
+              disabled={isShareDisabled()}
+              variant="contained"
+              color="primary"
+              onClick={() => handleShare(shareUserData, selectedOption)}
+            >
+              Share
+            </ModalButtonPrimary>
+          </div>
         </ModalFooter>
       </Modal>
     </div>