Refactor use of antd tab component. Closes #2098

web/components/modals/AuthModal/AuthModal.tsx

@@ -14,8 +14,6 @@ import {
   accessTokenAtom,
 } from '../../stores/ClientConfigStore';
 
-const { TabPane } = Tabs;
-
 export const AuthModal: FC = () => {
   const currentUser = useRecoilValue(currentUserAtom);
   if (!currentUser) {
@@ -27,45 +25,48 @@ export const AuthModal: FC = () => {
   const federationEnabled = true;
   const { displayName } = currentUser;
 
+  const indieAuthTabTitle = (
+    <span className={styles.tabContent}>
+      <img className={styles.icon} src={IndieAuthIcon.src} alt="IndieAuth" />
+      IndieAuth
+    </span>
+  );
+  const indieAuthTab = (
+    <IndieAuthModal
+      authenticated={authenticated}
+      displayName={displayName}
+      accessToken={accessToken}
+    />
+  );
+
+  const fediAuthTabTitle = (
+    <span className={styles.tabContent}>
+      <img className={styles.icon} src={FediverseIcon.src} alt="Fediverse auth" />
+      FediAuth
+    </span>
+  );
+  const fediAuthTab = (
+    <FediAuthModal
+      authenticated={authenticated}
+      displayName={displayName}
+      accessToken={accessToken}
+    />
+  );
+
+  const items = [
+    { label: indieAuthTabTitle, key: '1', children: indieAuthTab },
+    { label: fediAuthTabTitle, key: '2', children: fediAuthTab },
+  ];
+
   return (
     <div>
       <Tabs
         defaultActiveKey="1"
+        items={items}
         type="card"
         size="small"
         renderTabBar={federationEnabled ? null : () => null}
-      >
-        <TabPane
-          tab={
-            <span className={styles.tabContent}>
-              <img className={styles.icon} src={IndieAuthIcon.src} alt="IndieAuth" />
-              IndieAuth
-            </span>
-          }
-          key="1"
-        >
-          <IndieAuthModal
-            authenticated={authenticated}
-            displayName={displayName}
-            accessToken={accessToken}
-          />
-        </TabPane>
-        <TabPane
-          tab={
-            <span className={styles.tabContent}>
-              <img className={styles.icon} src={FediverseIcon.src} alt="Fediverse auth" />
-              FediAuth
-            </span>
-          }
-          key="2"
-        >
-          <FediAuthModal
-            authenticated={authenticated}
-            displayName={displayName}
-            accessToken={accessToken}
-          />
-        </TabPane>
-      </Tabs>
+      />
     </div>
   );
 };