Use standard Tabs component for PendingInvites

stylesheets/components/ConversationDetails.scss

@@ -118,24 +118,8 @@
   }
 
   &__tabs {
-    display: flex;
+    &#{&} {
-    justify-content: space-around;
+      border-bottom: none;
-  }
-
-  &__tab {
-    @include font-body-1;
-    cursor: pointer;
-    padding: 15px;
-
-    &:focus {
-      @include mouse-mode {
-        outline: none;
-      }
-    }
-
-    &--selected {
-      @include font-body-1-bold;
-      border-bottom: 2px solid $color-black;
     }
   }
 

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

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
-import classNames from 'classnames';
 import _ from 'lodash';
 
 import type { ConversationType } from '../../../state/ducks/conversations';
@@ -15,6 +14,7 @@ import { PanelSection } from './PanelSection';
 import { PanelRow } from './PanelRow';
 import { ConversationDetailsIcon, IconType } from './ConversationDetailsIcon';
 import { isAccessControlEnabled } from '../../../groups/util';
+import { Tabs } from '../../Tabs';
 import { assertDev } from '../../../util/assert';
 
 export type PropsDataType = {
@@ -84,56 +84,31 @@ export function PendingInvites({
     );
   }
 
-  const [selectedTab, setSelectedTab] = React.useState(Tab.Requests);
   const [stagedMemberships, setStagedMemberships] =
     React.useState<Array<StagedMembershipType> | null>(null);
 
   return (
     <div className="conversation-details-panel">
-      <div className="ConversationDetails__tabs">
+      <Tabs
-        <div
+        moduleClassName="ConversationDetails__tabs"
-          className={classNames({
+        initialSelectedTab={Tab.Requests}
-            ConversationDetails__tab: true,
+        tabs={[
-            'ConversationDetails__tab--selected': selectedTab === Tab.Requests,
+          {
-          })}
+            id: Tab.Requests,
-          onClick={() => {
+            label: i18n('icu:PendingInvites--tab-requests', {
-            setSelectedTab(Tab.Requests);
-          }}
-          onKeyUp={(e: React.KeyboardEvent) => {
-            if (e.target === e.currentTarget && e.keyCode === 13) {
-              setSelectedTab(Tab.Requests);
-            }
-          }}
-          role="tab"
-          tabIndex={0}
-        >
-          {i18n('icu:PendingInvites--tab-requests', {
               count: pendingApprovalMemberships.length,
-          })}
+            }),
-        </div>
+          },
-
+          {
-        <div
+            id: Tab.Pending,
-          className={classNames({
+            label: i18n('icu:PendingInvites--tab-invites', {
-            ConversationDetails__tab: true,
-            'ConversationDetails__tab--selected': selectedTab === Tab.Pending,
-          })}
-          onClick={() => {
-            setSelectedTab(Tab.Pending);
-          }}
-          onKeyUp={(e: React.KeyboardEvent) => {
-            if (e.target === e.currentTarget && e.keyCode === 13) {
-              setSelectedTab(Tab.Pending);
-            }
-          }}
-          role="tab"
-          tabIndex={0}
-        >
-          {i18n('icu:PendingInvites--tab-invites', {
               count: pendingMemberships.length,
-          })}
+            }),
-        </div>
+          },
-      </div>
+        ]}
-
+      >
+        {({ selectedTab }) => (
+          <>
             {selectedTab === Tab.Requests ? (
               <MembersPendingAdminApproval
                 conversation={conversation}
@@ -156,6 +131,9 @@ export function PendingInvites({
                 theme={theme}
               />
             ) : null}
+          </>
+        )}
+      </Tabs>
 
       {stagedMemberships && stagedMemberships.length && (
         <MembershipActionConfirmation

ts/test-mock/pnp/accept_gv2_invite_test.ts

@@ -216,7 +216,7 @@ describe('pnp/accept gv2 invite', function needsName() {
       )
       .click();
     await conversationStack
-      .locator('.ConversationDetails__tab >> text=Invites (1)')
+      .locator('.ConversationDetails__tabs__tab >> text=Invites (1)')
       .click();
     await conversationStack
       .locator(