feat: Improved viewers popover (#2106)

* refactoring popover

* feat: DocumentViews popover

* i18n

* fix: tab focus warnings

* test: Add tests around users.info changes

* snapshots

app/scenes/Document/components/Header.js

@@ -16,7 +16,6 @@ import Badge from "components/Badge";
 import Breadcrumb, { Slash } from "components/Breadcrumb";
 import Button from "components/Button";
 import Collaborators from "components/Collaborators";
-import Fade from "components/Fade";
 import Header from "components/Header";
 import Tooltip from "components/Tooltip";
 import ShareButton from "./ShareButton";
@@ -148,12 +147,10 @@ function DocumentHeader({
         actions={
           <>
             {!isPublishing && isSaving && <Status>{t("Saving")}…</Status>}
-            <Fade>
-              <Collaborators
-                document={document}
-                currentUserId={auth.user ? auth.user.id : undefined}
-              />
-            </Fade>
+            <Collaborators
+              document={document}
+              currentUserId={auth.user ? auth.user.id : undefined}
+            />
             {isEditing && !isTemplate && isNew && (
               <Action>
                 <TemplatesMenu document={document} />

app/scenes/Document/components/ShareButton.js

@@ -3,11 +3,10 @@ import { observer } from "mobx-react";
 import { GlobeIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
-import { usePopoverState, Popover, PopoverDisclosure } from "reakit/Popover";
-import styled from "styled-components";
-import { fadeAndScaleIn } from "shared/styles/animations";
+import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
 import Document from "models/Document";
 import Button from "components/Button";
+import Popover from "components/Popover";
 import Tooltip from "components/Tooltip";
 import SharePopover from "./SharePopover";
 import useStores from "hooks/useStores";
@@ -55,28 +54,14 @@ function ShareButton({ document }: Props) {
         )}
       </PopoverDisclosure>
       <Popover {...popover} aria-label={t("Share")}>
-        <Contents>
-          <SharePopover
-            document={document}
-            share={share}
-            onSubmit={popover.hide}
-          />
-        </Contents>
+        <SharePopover
+          document={document}
+          share={share}
+          onSubmit={popover.hide}
+        />
       </Popover>
     </>
   );
 }
 
-const Contents = styled.div`
-  animation: ${fadeAndScaleIn} 200ms ease;
-  transform-origin: 75% 0;
-  background: ${(props) => props.theme.menuBackground};
-  border-radius: 6px;
-  padding: 24px 24px 12px;
-  width: 380px;
-  box-shadow: ${(props) => props.theme.menuShadow};
-  border: ${(props) =>
-    props.theme.menuBorder ? `1px solid ${props.theme.menuBorder}` : "none"};
-`;
-
 export default observer(ShareButton);

app/scenes/Document/components/SharePopover.js

@@ -109,7 +109,7 @@ function DocumentShare({ document, share, onSubmit }: Props) {
           type="text"
           label={t("Link")}
           placeholder={`${t("Loading")}…`}
-          value={share ? share.url : undefined}
+          value={share ? share.url : ""}
           labelHidden
           readOnly
         />
@@ -126,7 +126,7 @@ function DocumentShare({ document, share, onSubmit }: Props) {
 const Heading = styled.h2`
   display: flex;
   align-items: center;
-  margin-top: 0;
+  margin-top: 12px;
   margin-left: -4px;
 `;