Web: Components: LinkRow: fixed styles

packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/LinkRow.tsx

@@ -215,7 +215,9 @@ const LinkRow = (props: LinkRowProps) => {
     expirationDate: moment.Moment | null,
   ) => {
     const newLink = { ...link };
-    newLink.sharedTo.expirationDate = moment(expirationDate);
+    newLink.sharedTo.expirationDate = expirationDate
+      ? moment(expirationDate)
+      : null;
     editExternalLinkAction(newLink);
   };
 
@@ -230,6 +232,7 @@ const LinkRow = (props: LinkRowProps) => {
       isPrimaryLink={isPrimaryLink}
       onAccessRightsSelect={onAccessRightsSelect}
       changeExpirationOption={changeExpirationOption}
+      isArchiveFolder={isArchiveFolder}
     />
   );
 };

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

@@ -50,12 +50,23 @@ const StyledLinks = styled.div`
   }
 `;
 
-const StyledLinkRow = styled.div<{ isExpired?: boolean }>`
+const StyledLinkRow = styled.div<{ isExpired?: boolean; isDisabled?: boolean }>`
   display: flex;
   gap: 8px;
   align-items: center;
   height: 68px;
 
+  opacity: ${({ isDisabled }) => (isDisabled ? 0.4 : 1)};
+
+  .avatar-wrapper,
+  .avatar-wrapper:hover {
+    svg {
+      path {
+        fill: ${({ theme }) => theme.infoPanel.avatarColor};
+      }
+    }
+  }
+
   .avatar_role-wrapper {
     svg {
       path:nth-child(3) {
@@ -76,6 +87,7 @@ const StyledLinkRow = styled.div<{ isExpired?: boolean }>`
     display: flex;
     flex-direction: column;
     gap: 0;
+    overflow: hidden;
   }
 
   .internal-combobox {
@@ -102,6 +114,14 @@ const StyledLinkRow = styled.div<{ isExpired?: boolean }>`
   .expired-options {
     padding: 0px;
 
+    .text {
+      color: ${({ theme }) => theme.infoPanel.links.color};
+      :hover {
+        color: ${({ theme }) => theme.infoPanel.links.color};
+        background: unset;
+      }
+    }
+
     & > span > a {
       padding: 0px !important;
     }

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

@@ -58,6 +58,7 @@ export type LinkRowProps =
       loadingLinks: (string | number)[];
       isRoomsLink?: undefined;
       isPrimaryLink?: undefined;
+      isArchiveFolder?: undefined;
       getData: () => undefined;
       onOpenContextMenu?: undefined;
       onCloseContextMenu?: undefined;
@@ -75,7 +76,8 @@ export type LinkRowProps =
       availableExternalRights: TAvailableExternalRights;
       loadingLinks: (string | number)[];
       isRoomsLink?: boolean;
-      isPrimaryLink?: boolean;
+      isPrimaryLink: boolean;
+      isArchiveFolder: boolean;
       getData: () => ContextMenuModel[];
       onOpenContextMenu: (e: React.MouseEvent) => void;
       onCloseContextMenu: () => void;

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

@@ -66,6 +66,7 @@ const LinkRow = ({
   loadingLinks,
   isRoomsLink,
   isPrimaryLink,
+  isArchiveFolder,
   getData,
   onOpenContextMenu,
   onCloseContextMenu,
@@ -124,6 +125,7 @@ const LinkRow = ({
         <StyledLinkRow
           isExpired={isExpiredLink}
           key={`share-link-row-${index * 5}`}
+          isDisabled={isArchiveFolder}
         >
           {isLoaded ? (
             <Loader className="loader" size="20px" type={LoaderTypes.track} />
@@ -137,7 +139,9 @@ const LinkRow = ({
           )}
           <div className="link-options">
             {isRoomsLink ? (
-              <Text className="link-options_title">{linkTitle}</Text>
+              <Text className="link-options_title" truncate>
+                {linkTitle}
+              </Text>
             ) : !isExpiredLink ? (
               <ComboBox
                 className="internal-combobox"
@@ -160,20 +164,22 @@ const LinkRow = ({
               <ExpiredComboBox
                 link={link}
                 changeExpirationOption={changeExpirationOption}
-                isDisabled={isLoaded}
+                isDisabled={isLoaded || isArchiveFolder}
                 isRoomsLink={isRoomsLink}
               />
             )}
           </div>
           <div className="link-actions">
-            <IconButton
-              size={16}
-              className="link-row_copy-icon"
-              iconName={CopyIcon}
-              onClick={() => onCopyLink(link)}
-              title={t("Common:CreateAndCopy")}
-              isDisabled={isExpiredLink || isLoaded}
-            />
+            {!isArchiveFolder && (
+              <IconButton
+                size={16}
+                className="link-row_copy-icon"
+                iconName={CopyIcon}
+                onClick={() => onCopyLink(link)}
+                title={t("Common:CreateAndCopy")}
+                isDisabled={isExpiredLink || isLoaded}
+              />
+            )}
             {isRoomsLink ? (
               <>
                 <AccessRightSelect
@@ -185,16 +191,18 @@ const LinkRow = ({
                   directionY="bottom"
                   type="onlyIcon"
                   manualWidth="300px"
-                  isDisabled={isExpiredLink || isLoaded}
-                />
-                <ContextMenuButton
-                  getData={getData}
-                  title={t("Files:ShowLinkActions")}
-                  directionY="both"
-                  onClick={onOpenContextMenu}
-                  onClose={onCloseContextMenu}
-                  isDisabled={isExpiredLink || isLoaded}
+                  isDisabled={isExpiredLink || isLoaded || isArchiveFolder}
                 />
+                {!isArchiveFolder && (
+                  <ContextMenuButton
+                    getData={getData}
+                    title={t("Files:ShowLinkActions")}
+                    directionY="both"
+                    onClick={onOpenContextMenu}
+                    onClose={onCloseContextMenu}
+                    isDisabled={isExpiredLink || isLoaded}
+                  />
+                )}
               </>
             ) : (
               <ComboBox

packages/shared/themes/base.ts

@@ -2081,8 +2081,10 @@ export const getBaseTheme = () => {
       closeButtonBg: "transparent",
 
       nameColor: "#858585",
+      avatarColor: "#555F65",
 
       links: {
+        color: "#4781D1",
         iconColor: "#3B72A7",
         iconErrorColor: "#F24724",
         primaryColor: "#555F65",

packages/shared/themes/dark.ts

@@ -2053,8 +2053,10 @@ const Dark: TTheme = {
     closeButtonBg: "#a2a2a2",
 
     nameColor: "#A3A9AE",
+    avatarColor: "#A3A9AE",
 
     links: {
+      color: "#4781D1",
       iconColor: "#858585",
       iconErrorColor: "#E06451",
       primaryColor: "#ADADAD",