Removes some Backbone views

ts/components/App.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import classNames from 'classnames';
 
 import { AppViewType } from '../state/ducks/app';
@@ -10,12 +10,16 @@ import { ThemeType } from '../types/Util';
 export type PropsType = {
   appView: AppViewType;
   hasInitialLoadCompleted: boolean;
+  renderCallManager: () => JSX.Element;
+  renderGlobalModalContainer: () => JSX.Element;
   theme: ThemeType;
 };
 
 export const App = ({
   appView,
   hasInitialLoadCompleted,
+  renderCallManager,
+  renderGlobalModalContainer,
   theme,
 }: PropsType): JSX.Element => {
   let contents;
@@ -28,6 +32,20 @@ export const App = ({
     contents = <Inbox hasInitialLoadCompleted={hasInitialLoadCompleted} />;
   }
 
+  // This is here so that themes are properly applied to anything that is
+  // created in a portal and exists outside of the <App /> container.
+  useEffect(() => {
+    document.body.classList.remove('light-theme');
+    document.body.classList.remove('dark-theme');
+
+    if (theme === ThemeType.dark) {
+      document.body.classList.add('dark-theme');
+    }
+    if (theme === ThemeType.light) {
+      document.body.classList.add('light-theme');
+    }
+  }, [theme]);
+
   return (
     <div
       className={classNames({
@@ -36,6 +54,8 @@ export const App = ({
         'dark-theme': theme === ThemeType.dark,
       })}
     >
+      {renderGlobalModalContainer()}
+      {renderCallManager()}
       {contents}
     </div>
   );

ts/components/conversation/conversation-details/ConversationDetailsMembershipList.tsx

@@ -19,14 +19,13 @@ export type GroupV2Membership = {
 
 export type Props = {
   canAddNewMembers: boolean;
+  i18n: LocalizerType;
+  maxShownMemberCount?: number;
   memberships: Array<GroupV2Membership>;
   showContactModal: (conversationId: string) => void;
-  startAddingNewMembers: () => void;
-  i18n: LocalizerType;
+  startAddingNewMembers?: () => void;
 };
 
-const MAX_MEMBER_COUNT = 5;
-
 const collator = new Intl.Collator(undefined, { sensitivity: 'base' });
 function sortConversationTitles(
   left: GroupV2Membership,
@@ -68,18 +67,20 @@ function sortMemberships(
 
 export const ConversationDetailsMembershipList: React.ComponentType<Props> = ({
   canAddNewMembers,
+  i18n,
+  maxShownMemberCount = 5,
   memberships,
   showContactModal,
   startAddingNewMembers,
-  i18n,
 }) => {
   const [showAllMembers, setShowAllMembers] = React.useState<boolean>(false);
   const sortedMemberships = sortMemberships(memberships);
 
-  const shouldHideRestMembers = sortedMemberships.length - MAX_MEMBER_COUNT > 1;
+  const shouldHideRestMembers =
+    sortedMemberships.length - maxShownMemberCount > 1;
   const membersToShow =
     shouldHideRestMembers && !showAllMembers
-      ? MAX_MEMBER_COUNT
+      ? maxShownMemberCount
       : sortedMemberships.length;
 
   return (
@@ -94,7 +95,7 @@ export const ConversationDetailsMembershipList: React.ComponentType<Props> = ({
             <div className="module-conversation-details-membership-list__add-members-icon" />
           }
           label={i18n('ConversationDetailsMembershipList--add-members')}
-          onClick={startAddingNewMembers}
+          onClick={() => startAddingNewMembers?.()}
         />
       )}
       {sortedMemberships.slice(0, membersToShow).map(({ isAdmin, member }) => (