Web: Files: Fixed shared link styles

packages/client/src/pages/Home/InfoPanel/Body/views/Members/index.js

@@ -45,7 +45,7 @@ import { IconButton } from "@docspace/shared/components/icon-button";
 import { Tooltip } from "@docspace/shared/components/tooltip";
 import { isDesktop } from "@docspace/shared/utils";
 import LinksToViewingIconUrl from "PUBLIC_DIR/images/links-to-viewing.react.svg?url";
-import PlusReactSvgUrl from "PUBLIC_DIR/images/actions.button.plus.react.svg?url";
+import PlusIcon from "PUBLIC_DIR/images/plus.react.svg?url";
 
 import { Avatar } from "@docspace/shared/components/avatar";
 import { copyShareLink } from "@docspace/shared/utils/copy";
@@ -216,10 +216,12 @@ const Members = ({
           className="additional-link"
           onClick={onAddNewLink}
         >
-          <Avatar size="min" source={PlusReactSvgUrl} />
+          <div className="create-link-icon">
+            <IconButton size={12} iconName={PlusIcon} isDisabled />
+          </div>
 
           <Link
-            isHovered
+            noHover
             type="action"
             fontSize="14px"
             fontWeight={600}

packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/Styled.js

@@ -73,12 +73,27 @@ const StyledLinkRow = styled.div`
   gap: 12px;
   height: 100%;
   background: ${(props) => props.theme.backgroundColor};
+  cursor: pointer;
+
+  .icon-button_svg {
+    cursor: pointer;
+  }
+
+  .create-link-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 3px;
+    padding: 10px;
+    background: ${(props) => props.theme.avatar.icon.background};
+  }
 
   .external-row-link {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     width: 100%;
+    color: ${({ theme }) => theme.infoPanel.members.createLink};
   }
 
   .external-row-icons {

packages/shared/components/share/Share.styled.ts

@@ -101,6 +101,11 @@ const StyledLinkRow = styled.div`
     height: 32px;
     width: 32px;
   }
+
+  .create-and-copy_link {
+    width: 100%;
+    color: ${({ theme }) => theme.infoPanel.members.createLink};
+  }
 `;
 
 const StyledSquare = styled.div`
@@ -110,6 +115,10 @@ const StyledSquare = styled.div`
   border-radius: 3px;
   padding: 10px;
   background: ${(props) => props.theme.avatar.icon.background};
+  cursor: pointer;
+  .icon-button_svg {
+    cursor: pointer;
+  }
 `;
 
 export { StyledLinks, StyledLinkRow, StyledSquare };

packages/shared/components/share/sub-components/LinkRow.tsx

@@ -67,16 +67,11 @@ const LinkRow = ({
   };
 
   return !links?.length ? (
-    <StyledLinkRow>
+    <StyledLinkRow onClick={onAddClick}>
       <StyledSquare>
         <IconButton size={12} iconName={PlusIcon} isDisabled />
       </StyledSquare>
-      <Link
-        type={LinkType.action}
-        isHovered
-        fontWeight={600}
-        onClick={onAddClick}
-      >
+      <Link className="create-and-copy_link" noHover fontWeight={600}>
         {t("Common:CreateAndCopy")}
       </Link>
     </StyledLinkRow>

packages/shared/themes/base.ts

@@ -2113,6 +2113,7 @@ export const getBaseTheme = () => {
         roleSelectorColor: "#a3a9ae",
         disabledRoleSelectorColor: "#a3a9ae",
         roleSelectorArrowColor: "#a3a9ae",
+        createLink: "#a3a9ae",
       },
 
       history: {

packages/shared/themes/dark.ts

@@ -2084,6 +2084,7 @@ const Dark: TTheme = {
       roleSelectorColor: "#a3a9ae",
       disabledRoleSelectorColor: "#a3a9ae",
       roleSelectorArrowColor: "#a3a9ae",
+      createLink: "#858585",
     },
 
     history: {