chore: Improve group membership dialogs (#9693)

* chore: Improve group membership dialogs
Remove fullscreen dialog styling

* tidying

app/actions/definitions/teams.tsx

@@ -65,7 +65,6 @@ export const createTeam = createAction({
     if (user) {
       stores.dialogs.openModal({
         title: t("Create a workspace"),
-        fullscreen: true,
         content: <TeamNew user={user} />,
       });
     }

app/components/Dialogs.tsx

@@ -21,7 +21,6 @@ function Dialogs() {
         <Modal
           key={id}
           isOpen={modal.isOpen}
-          fullscreen={modal.fullscreen ?? false}
           onRequestClose={() => {
             modal.onClose?.();
             dialogs.closeModal(id);

app/components/Modal.tsx

@@ -1,10 +1,9 @@
 import * as Dialog from "@radix-ui/react-dialog";
 import { observer } from "mobx-react";
 import { CloseIcon, BackIcon } from "outline-icons";
-import { transparentize } from "polished";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import styled, { DefaultTheme } from "styled-components";
+import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";
 import Flex from "~/components/Flex";
@@ -13,17 +12,13 @@ import Scrollable from "~/components/Scrollable";
 import Text from "~/components/Text";
 import useMobile from "~/hooks/useMobile";
 import usePrevious from "~/hooks/usePrevious";
-import useUnmount from "~/hooks/useUnmount";
 import { fadeAndScaleIn } from "~/styles/animations";
 import Desktop from "~/utils/Desktop";
 import ErrorBoundary from "./ErrorBoundary";
 
-let openModals = 0;
-
 type Props = {
   children?: React.ReactNode;
   isOpen: boolean;
-  fullscreen?: boolean;
   title?: React.ReactNode;
   style?: React.CSSProperties;
   onRequestClose: () => void;
@@ -32,32 +27,14 @@ type Props = {
 const Modal: React.FC<Props> = ({
   children,
   isOpen,
-  fullscreen = true,
   title = "Untitled",
   style,
   onRequestClose,
 }: Props) => {
-  const [depth, setDepth] = React.useState(0);
   const wasOpen = usePrevious(isOpen);
   const isMobile = useMobile();
   const { t } = useTranslation();
 
-  React.useEffect(() => {
-    if (!wasOpen && isOpen) {
-      setDepth(openModals++);
-    }
-
-    if (wasOpen && !isOpen) {
-      setDepth(openModals--);
-    }
-  }, [wasOpen, isOpen]);
-
-  useUnmount(() => {
-    if (isOpen) {
-      openModals--;
-    }
-  });
-
   if (!isOpen && !wasOpen) {
     return null;
   }
@@ -68,23 +45,14 @@ const Modal: React.FC<Props> = ({
       onOpenChange={(open) => !open && onRequestClose()}
     >
       <Dialog.Portal>
-        <StyledOverlay $fullscreen={fullscreen}>
+        <StyledOverlay>
           <StyledContent
             onEscapeKeyDown={onRequestClose}
-            onPointerDownOutside={fullscreen ? undefined : onRequestClose}
+            onPointerDownOutside={onRequestClose}
             aria-describedby={undefined}
           >
-            {fullscreen || isMobile ? (
-              <Fullscreen
-                $nested={!!depth}
-                style={
-                  isMobile
-                    ? undefined
-                    : {
-                        marginLeft: `${depth * 12}px`,
-                      }
-                }
-              >
+            {isMobile ? (
+              <Mobile>
                 <Content>
                   <Centered onClick={(ev) => ev.stopPropagation()} column>
                     {title && (
@@ -102,7 +70,7 @@ const Modal: React.FC<Props> = ({
                   <BackIcon size={32} />
                   <Text>{t("Back")} </Text>
                 </Back>
-              </Fullscreen>
+              </Mobile>
             ) : (
               <Small>
                 <Centered
@@ -131,16 +99,13 @@ const Modal: React.FC<Props> = ({
   );
 };
 
-const StyledOverlay = styled(Dialog.Overlay)<{ $fullscreen?: boolean }>`
+const StyledOverlay = styled(Dialog.Overlay)`
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: ${(props) =>
-    props.$fullscreen
-      ? transparentize(0.25, props.theme.background)
-      : props.theme.modalBackdrop} !important;
+  background-color: ${(props) => props.theme.modalBackdrop} !important;
   z-index: ${depths.overlay};
   transition: opacity 50ms ease-in-out;
   opacity: 0;
@@ -163,12 +128,7 @@ const StyledContent = styled(Dialog.Content)`
   outline: none;
 `;
 
-type FullscreenProps = {
-  $nested: boolean;
-  theme: DefaultTheme;
-};
-
-const Fullscreen = styled.div<FullscreenProps>`
+const Mobile = styled.div`
   animation: ${fadeAndScaleIn} 250ms ease;
 
   position: absolute;
@@ -182,16 +142,6 @@ const Fullscreen = styled.div<FullscreenProps>`
   align-items: flex-start;
   background: ${s("background")};
   outline: none;
-
-  ${breakpoint("tablet")`
-  ${(props: FullscreenProps) =>
-    props.$nested &&
-    `
-      box-shadow: 0 -2px 10px ${props.theme.shadow};
-      border-radius: 8px 0 0 8px;
-      overflow: hidden;
-  `}
-`}
 `;
 
 const Content = styled(Scrollable)`
@@ -256,7 +206,7 @@ const Header = styled(Flex)`
   align-items: center;
   justify-content: space-between;
   font-weight: 600;
-  padding: 24px 24px 4px;
+  padding: 24px 24px 12px;
 `;
 
 const Small = styled.div`
@@ -290,7 +240,7 @@ const Small = styled.div`
 `;
 
 const SmallContent = styled(Scrollable)`
-  padding: 12px 24px 24px;
+  padding: 8px 24px 24px;
 `;
 
 export default observer(Modal);

app/components/Table.tsx

@@ -383,7 +383,7 @@ const TD = styled.span`
     right: 0;
   }
 
-  ${NudeButton} {
+  ${NudeButton}[aria-haspopup="menu"] {
     &:hover,
     &[aria-expanded="true"] {
       background: ${s("sidebarControlHoverBackground")};

app/menus/GroupMenu.tsx

@@ -31,7 +31,6 @@ function GroupMenu({ group }: Props) {
     dialogs.openModal({
       title: t("Group members"),
       content: <ViewGroupMembersDialog group={group} />,
-      fullscreen: true,
     });
   }, [t, group, dialogs]);
 

app/scenes/Settings/components/GroupDialogs.tsx

@@ -20,7 +20,6 @@ import Input from "~/components/Input";
 import PlaceholderList from "~/components/List/Placeholder";
 import PaginatedList from "~/components/PaginatedList";
 import { ListItem } from "~/components/Sharing/components/ListItem";
-import Subheading from "~/components/Subheading";
 import Text from "~/components/Text";
 import Time from "~/components/Time";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
@@ -54,10 +53,10 @@ export function CreateGroupDialog() {
 
       try {
         await group.save();
+        dialogs.closeAllModals();
         dialogs.openModal({
           title: t("Group members"),
           content: <ViewGroupMembersDialog group={group} />,
-          fullscreen: true,
         });
       } catch (err) {
         toast.error(err.message);
@@ -197,7 +196,7 @@ export const ViewGroupMembersDialog = observer(function ({
         groupName: group.name,
       }),
       content: <AddPeopleToGroupDialog group={group} />,
-      fullscreen: true,
+      replace: true,
     });
   }, [t, group, dialogs]);
 
@@ -264,10 +263,7 @@ export const ViewGroupMembersDialog = observer(function ({
           />
         </Text>
       )}
-
-      <Subheading>
-        <Trans>Members</Trans>
-      </Subheading>
+      <br />
       <PaginatedList<User>
         items={users.inGroup(group.id)}
         fetch={groupUsers.fetchPage}
@@ -339,6 +335,7 @@ const AddPeopleToGroupDialog = observer(function ({
       id,
       title: t("Invite people"),
       content: <Invite onSubmit={() => dialogs.closeModal(id)} />,
+      replace: true,
     });
   }, [t, dialogs]);
 

app/scenes/Settings/components/GroupsTable.tsx

@@ -20,6 +20,8 @@ import useStores from "~/hooks/useStores";
 import GroupMenu from "~/menus/GroupMenu";
 import { ViewGroupMembersDialog } from "./GroupDialogs";
 import { FILTER_HEIGHT } from "./StickyFilters";
+import NudeButton from "~/components/NudeButton";
+import { AvatarSize } from "~/components/Avatar";
 
 const ROW_HEIGHT = 60;
 const STICKY_OFFSET = HEADER_HEIGHT + FILTER_HEIGHT;
@@ -35,7 +37,6 @@ export function GroupsTable(props: Props) {
       dialogs.openModal({
         title: t("Group members"),
         content: <ViewGroupMembersDialog group={group} />,
-        fullscreen: true,
       });
     },
     [t, dialogs]
@@ -78,10 +79,19 @@ export function GroupsTable(props: Props) {
             const users = group.users.slice(0, MAX_AVATAR_DISPLAY);
             const overflow = group.memberCount - users.length;
 
+            if (users.length === 0) {
+              return null;
+            }
+
             return (
-              <Flex>
+              <GroupMembers
+                onClick={() => handleViewMembers(group)}
+                width={
+                  (users.length + (overflow > 0 ? 1 : 0)) * AvatarSize.Large
+                }
+              >
                 <Facepile users={users} overflow={overflow} />
-              </Flex>
+              </GroupMembers>
             );
           },
           width: "1fr",
@@ -118,6 +128,11 @@ export function GroupsTable(props: Props) {
   );
 }
 
+const GroupMembers = styled(NudeButton)`
+  justify-content: flex-start;
+  display: flex;
+`;
+
 const Image = styled(Flex)`
   align-items: center;
   justify-content: center;

app/stores/DialogsStore.ts

@@ -6,7 +6,6 @@ type DialogDefinition = {
   title: string;
   content: React.ReactNode;
   isOpen: boolean;
-  fullscreen?: boolean;
   style?: React.CSSProperties;
   onClose?: () => void;
 };
@@ -48,14 +47,12 @@ export default class DialogsStore {
     id,
     title,
     content,
-    fullscreen,
     replace,
     style,
     onClose,
   }: {
     id?: string;
     title: string;
-    fullscreen?: boolean;
     content: React.ReactNode;
     style?: React.CSSProperties;
     replace?: boolean;
@@ -70,7 +67,6 @@ export default class DialogsStore {
         this.modalStack.set(id ?? uuidv4(), {
           title,
           content,
-          fullscreen,
           style,
           isOpen: true,
           onClose,