Normalize share styling, fix overflow (#11057)

closes #11049

app/actions/definitions/collections.tsx

@@ -136,7 +136,6 @@ export const editCollectionPermissions = createAction({
 
     stores.dialogs.openModal({
       title: t("Share this collection"),
-      style: { marginBottom: -12 },
       content: (
         <SharePopover
           collection={collection}

app/actions/definitions/documents.tsx

@@ -506,7 +506,6 @@ export const shareDocument = createAction({
     }
 
     stores.dialogs.openModal({
-      style: { marginBottom: -12 },
       title: t("Share this document"),
       content: (
         <SharePopover

app/components/Sharing/Collection/PublicAccess.tsx

@@ -1,20 +1,18 @@
 import debounce from "lodash/debounce";
 import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
-import { CopyIcon, GlobeIcon, InfoIcon, QuestionMarkIcon } from "outline-icons";
+import { CopyIcon, GlobeIcon, QuestionMarkIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
-import styled, { useTheme } from "styled-components";
+import { useTheme } from "styled-components";
 import Squircle from "@shared/components/Squircle";
-import { s } from "@shared/styles";
 import { UrlHelper } from "@shared/utils/UrlHelper";
 import type Collection from "~/models/Collection";
 import type Share from "~/models/Share";
 import { AvatarSize } from "~/components/Avatar";
 import CopyToClipboard from "~/components/CopyToClipboard";
 import Flex from "~/components/Flex";
-import Input, { NativeInput } from "~/components/Input";
 import NudeButton from "~/components/NudeButton";
 import { ResizingHeightContainer } from "~/components/ResizingHeightContainer";
 import Switch from "~/components/Switch";
@@ -23,6 +21,7 @@ import Tooltip from "~/components/Tooltip";
 import env from "~/env";
 import usePolicy from "~/hooks/usePolicy";
 import { ListItem } from "../components/ListItem";
+import { DomainPrefix, ShareLinkInput, StyledInfoIcon } from "../components";
 
 type Props = {
   /** The collection to share. */
@@ -146,7 +145,7 @@ function InnerPublicAccess(
   );
 
   return (
-    <Wrapper ref={ref}>
+    <div ref={ref}>
       <ListItem
         title={t("Web")}
         subtitle={<>{t("Allow anyone with the link to access")}</>}
@@ -261,7 +260,7 @@ function InnerPublicAccess(
               {copyButton}
             </ShareLinkInput>
             <Flex align="flex-start" gap={4}>
-              <StyledInfoIcon size={18} color={theme.textTertiary} />
+              <StyledInfoIcon color={theme.textTertiary} />
               <Text type="tertiary" size="xsmall">
                 {t(
                   "All documents in this collection will be shared on the web, including any new documents added later"
@@ -272,37 +271,8 @@ function InnerPublicAccess(
           </>
         )}
       </ResizingHeightContainer>
-    </Wrapper>
+    </div>
   );
 }
 
-const Wrapper = styled.div`
-  padding-bottom: 8px;
-`;
-
-const DomainPrefix = styled.span`
-  padding: 0 2px 0 8px;
-  flex: 0 1 auto;
-  cursor: text;
-  color: ${s("placeholder")};
-  user-select: none;
-`;
-
-const ShareLinkInput = styled(Input)`
-  margin-top: 12px;
-  min-width: 100px;
-  flex: 1;
-
-  ${NativeInput}:not(:first-child) {
-    padding: 4px 8px 4px 0;
-    flex: 1;
-  }
-`;
-
-const StyledInfoIcon = styled(InfoIcon)`
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
-`;
-
 export const PublicAccess = observer(React.forwardRef(InnerPublicAccess));

app/components/Sharing/Document/DocumentMemberList.tsx

@@ -29,7 +29,7 @@ type Props = {
   invitedInSession: string[];
 };
 
-function DocumentMembersList({ document, invitedInSession }: Props) {
+function DocumentMemberList({ document, invitedInSession }: Props) {
   const { userMemberships, groupMemberships } = useStores();
 
   const user = useCurrentUser();
@@ -211,4 +211,4 @@ const StyledLink = styled(Link)`
   text-decoration: underline;
 `;
 
-export default observer(DocumentMembersList);
+export default observer(DocumentMemberList);

app/components/Sharing/Document/PublicAccess.tsx

@@ -1,19 +1,16 @@
 import debounce from "lodash/debounce";
 import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
-import { CopyIcon, GlobeIcon, InfoIcon, QuestionMarkIcon } from "outline-icons";
+import { CopyIcon, GlobeIcon, QuestionMarkIcon } from "outline-icons";
 import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
 import { toast } from "sonner";
-import styled, { useTheme } from "styled-components";
+import { useTheme } from "styled-components";
 import Flex from "@shared/components/Flex";
 import Squircle from "@shared/components/Squircle";
-import { s } from "@shared/styles";
 import { UrlHelper } from "@shared/utils/UrlHelper";
 import type Document from "~/models/Document";
 import type Share from "~/models/Share";
-import Input, { NativeInput } from "~/components/Input";
 import Switch from "~/components/Switch";
 import env from "~/env";
 import usePolicy from "~/hooks/usePolicy";
@@ -24,6 +21,12 @@ import { ResizingHeightContainer } from "../../ResizingHeightContainer";
 import Text from "../../Text";
 import Tooltip from "../../Tooltip";
 import { ListItem } from "../components/ListItem";
+import {
+  DomainPrefix,
+  ShareLinkInput,
+  StyledInfoIcon,
+  UnderlinedLink,
+} from "../components";
 
 type Props = {
   /** The document to share. */
@@ -156,7 +159,7 @@ function PublicAccess(
   );
 
   return (
-    <Wrapper ref={ref}>
+    <div ref={ref}>
       <ListItem
         title={t("Web")}
         subtitle={
@@ -166,17 +169,19 @@ function PublicAccess(
                 <Trans>
                   Anyone with the link can access because the containing
                   collection,{" "}
-                  <StyledLink to={`/collection/${sharedParent.collectionId}`}>
+                  <UnderlinedLink
+                    to={`/collection/${sharedParent.collectionId}`}
+                  >
                     {sharedParent.sourceTitle}
-                  </StyledLink>
+                  </UnderlinedLink>
                   , is shared
                 </Trans>
               ) : (
                 <Trans>
                   Anyone with the link can access because the parent document,{" "}
-                  <StyledLink to={`/doc/${sharedParent.documentId}`}>
+                  <UnderlinedLink to={`/doc/${sharedParent.documentId}`}>
                     {sharedParent.sourceTitle}
-                  </StyledLink>
+                  </UnderlinedLink>
                   , is shared
                 </Trans>
               )
@@ -309,7 +314,7 @@ function PublicAccess(
 
         {share?.published && !share.includeChildDocuments ? (
           <Text as="p" type="tertiary" size="xsmall">
-            <StyledInfoIcon size={18} />
+            <StyledInfoIcon color={theme.textTertiary} />
             <span>
               {t(
                 "Nested documents are not shared on the web. Toggle sharing to enable access, this will be the default behavior in the future"
@@ -319,41 +324,8 @@ function PublicAccess(
           </Text>
         ) : null}
       </ResizingHeightContainer>
-    </Wrapper>
+    </div>
   );
 }
 
-const StyledInfoIcon = styled(InfoIcon)`
-  vertical-align: bottom;
-  margin-right: 2px;
-`;
-
-const Wrapper = styled.div`
-  padding-bottom: 8px;
-`;
-
-const DomainPrefix = styled.span`
-  padding: 0 2px 0 8px;
-  flex: 0 1 auto;
-  cursor: text;
-  color: ${s("placeholder")};
-  user-select: none;
-`;
-
-const ShareLinkInput = styled(Input)`
-  margin-top: 12px;
-  min-width: 100px;
-  flex: 1;
-
-  ${NativeInput}:not(:first-child) {
-    padding: 4px 8px 4px 0;
-    flex: 1;
-  }
-`;
-
-const StyledLink = styled(Link)`
-  color: ${s("textSecondary")};
-  text-decoration: underline;
-`;
-
 export default observer(React.forwardRef(PublicAccess));

app/components/Sharing/components/index.tsx

@@ -3,6 +3,9 @@ import styled from "styled-components";
 import Flex from "@shared/components/Flex";
 import { s, hover } from "@shared/styles";
 import NudeButton from "~/components/NudeButton";
+import Input, { NativeInput } from "~/components/Input";
+import { InfoIcon } from "outline-icons";
+import { Link } from "react-router-dom";
 
 // TODO: Temp until Button/NudeButton styles are normalized
 export const Wrapper = styled.div`
@@ -14,7 +17,38 @@ export const Wrapper = styled.div`
 
 export const Separator = styled.div`
   border-top: 1px dashed ${s("divider")};
-  margin: 0 0 8px 0;
+  margin: 8px 0;
+`;
+
+export const StyledInfoIcon = styled(InfoIcon).attrs({
+  size: 18,
+})`
+  vertical-align: bottom;
+  margin-right: 2px;
+`;
+
+export const ShareLinkInput = styled(Input)`
+  padding: 12px 0 1px;
+  min-width: 100px;
+  flex: 1;
+
+  ${NativeInput}:not(:first-child) {
+    padding: 4px 8px 4px 0;
+    flex: 1;
+  }
+`;
+
+export const UnderlinedLink = styled(Link)`
+  color: ${s("textSecondary")};
+  text-decoration: underline;
+`;
+
+export const DomainPrefix = styled.span`
+  padding: 0 2px 0 8px;
+  flex: 0 1 auto;
+  cursor: text;
+  color: ${s("placeholder")};
+  user-select: none;
 `;
 
 export const HeaderInput = styled(Flex)`