Web: Components: LinkRow: fixed styles

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

@@ -183,6 +183,7 @@ const Members = ({
           link={primaryLink}
           setIsScrollLocked={setIsScrollLocked}
           isShareLink
+          isPrimaryLink
         />,
       );
     }

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

@@ -64,6 +64,7 @@ type LinkRowProps = {
   setIsScrollLocked: (isScrollLocked: boolean) => void;
   isPublicRoomType: boolean;
   isFormRoom: boolean;
+  isPrimaryLink: boolean;
 };
 
 const LinkRow = (props: LinkRowProps) => {
@@ -79,6 +80,7 @@ const LinkRow = (props: LinkRowProps) => {
     setIsScrollLocked,
     isPublicRoomType,
     isFormRoom,
+    isPrimaryLink,
     editExternalLink,
     setExternalLink,
   } = props;
@@ -185,8 +187,6 @@ const LinkRow = (props: LinkRowProps) => {
   const editExternalLinkAction = (newLink: TFileLink) => {
     setLoadingLinks([newLink.sharedTo.id]);
 
-    console.log("newLink", newLink);
-
     editExternalLink(roomId, newLink)
       .then((linkData: TFileLink) => {
         setExternalLink(linkData);
@@ -227,6 +227,7 @@ const LinkRow = (props: LinkRowProps) => {
       onOpenContextMenu={onOpenContextMenu}
       onCloseContextMenu={onCloseContextMenu}
       isRoom
+      isPrimaryLink={isPrimaryLink}
       linkTitle={title}
       onAccessRightsSelect={onAccessRightsSelect}
       changeExpirationOption={changeExpirationOption}

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

@@ -50,10 +50,10 @@ const StyledLinks = styled.div`
 `;
 
 const StyledLinkRow = styled.div<{ isExpired?: boolean }>`
-  padding: 8px 0;
   display: flex;
   gap: 8px;
   align-items: center;
+  height: 68px;
 
   .avatar_role-wrapper {
     /* svg {

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

@@ -66,6 +66,7 @@ const LinkRow = ({
   loadingLinks,
 
   isRoom,
+  isPrimaryLink,
   linkTitle,
   getData,
   onOpenContextMenu,
@@ -133,14 +134,6 @@ const LinkRow = ({
               role={AvatarRole.user}
               source={avatar}
               roleIcon={isLocked ? <LockedReactSvg /> : undefined}
-
-              // roleIcon={
-              //   expiryDate ? (
-              //     <div className="clock-icon">
-              //       <ClockReactSvg />
-              //     </div>
-              //   ) : null
-              // }
             />
           )}
           <div className="link-options">
@@ -164,11 +157,13 @@ const LinkRow = ({
             ) : (
               <Text className="link-options_title">{shareOption?.label}</Text>
             )}
-            <ExpiredComboBox
+            {!isPrimaryLink && (
-              link={link}
+              <ExpiredComboBox
-              changeExpirationOption={changeExpirationOption}
+                link={link}
-              isDisabled={isLoaded}
+                changeExpirationOption={changeExpirationOption}
-            />
+                isDisabled={isLoaded}
+              />
+            )}
           </div>
           <div className="link-actions">
             <IconButton
@@ -182,31 +177,23 @@ const LinkRow = ({
             {isRoom ? (
               <>
                 <AccessRightSelect
-                  // className={className}
-                  // selectedOption={selectedOption}
-                  // onSelect={onSelectAccess}
                   selectedOption={roomSelectedOptions}
                   onSelect={onAccessRightsSelect}
                   accessOptions={roomAccessOptions}
                   noBorder
-                  // directionX="right"
+                  directionX="right"
-                  // directionY="bottom"
+                  directionY="bottom"
-                  // fixedDirection={true}
-                  // manualWidth={width + "px"}
-                  // isDefaultMode={false}
-                  // isAside={false}
-                  // setIsOpenItemAccess={setIsOpenItemAccess}
-                  // hideMobileView={isMobileHorizontalOrientation}
                   type="onlyIcon"
-                  manualWidth="448px"
+                  manualWidth="300px"
+                  isDisabled={isExpiredLink || isLoaded}
                 />
                 <ContextMenuButton
                   getData={getData}
-                  // isDisabled={isLoading}
                   title={t("Files:ShowLinkActions")}
                   directionY="both"
                   onClick={onOpenContextMenu}
                   onClose={onCloseContextMenu}
+                  isDisabled={isExpiredLink || isLoaded}
                 />
               </>
             ) : (