fix(clerk-js): Fix Invite members button on Organization Profile (#2466)

* fix(clerk-js): Fix Invite members button on Organization Profile * fix(clerk-js): Added some space between button and horizontal line * chore(repo): Add Changeset
clerk · Jan 3, 2024 · 56fb1e5 · 56fb1e5
1 parent 7af77f6
commit 56fb1e5
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 61 deletions.
diff --git a/.changeset/rotten-rats-protect.md b/.changeset/rotten-rats-protect.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx
@@ -17,12 +17,32 @@ import {
 } from '../../elements';
 import { Action } from '../../elements/Action';
 import { UserAdd } from '../../icons';
+import { mqu, type ThemableCssProp } from '../../styledSystem';
 import { ActiveMembersList } from './ActiveMembersList';
 import { InviteMembersScreen } from './InviteMembersScreen';
 import { MembershipWidget } from './MembershipWidget';
 import { OrganizationMembersTabInvitations } from './OrganizationMembersTabInvitations';
 import { OrganizationMembersTabRequests } from './OrganizationMembersTabRequests';
 
+export const InviteMembersButton = (props: { sx?: ThemableCssProp }) => {
+  return (
+    <IconButton
+      {...props}
+      elementDescriptor={descriptors.membersPageInviteButton}
+      aria-label='Invite'
+      icon={
+        <Icon
+          icon={UserAdd}
+          size={'sm'}
+          sx={t => ({ marginRight: t.space.$2 })}
+        />
+      }
+      textVariant='buttonSmall'
+      localizationKey={localizationKeys('organizationProfile.membersPage.action__invite')}
+    />
+  );
+};
+
 export const OrganizationMembers = withCardStateProvider(() => {
   const { organizationSettings } = useEnvironment();
   const card = useCardState();
@@ -57,72 +77,85 @@ export const OrganizationMembers = withCardStateProvider(() => {
               localizationKey={localizationKeys('organizationProfile.start.headerTitle__members')}
               textVariant='h2'
             />
-            <Action.Trigger value='invite'>
-              <IconButton
-                elementDescriptor={descriptors.membersPageInviteButton}
-                aria-label='Invite'
-                icon={
-                  <Icon
-                    icon={UserAdd}
-                    size={'sm'}
-                    sx={t => ({ marginRight: t.space.$2 })}
-                  />
-                }
-                sx={t => ({ height: t.space.$8 })}
-                textVariant='buttonSmall'
-                localizationKey={localizationKeys('organizationProfile.membersPage.action__invite')}
-              />
-            </Action.Trigger>
-          </Header.Root>
-          <Action.Open value='invite'>
-            <Action.Card>
-              <InviteMembersScreen />
-            </Action.Card>
-          </Action.Open>
-        </Action.Root>
-        <Tabs>
-          <TabsList>
-            {canReadMemberships && (
-              <Tab localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__members')} />
-            )}
             {canManageMemberships && (
-              <Tab
-                localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__invitations')}
-              />
-            )}
-            {canManageMemberships && isDomainsEnabled && (
-              <Tab localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__requests')}>
-                <NotificationCountBadge notificationCount={membershipRequests?.count || 0} />
-              </Tab>
-            )}
-          </TabsList>
-          <TabPanels>
-            {canReadMemberships && (
-              <TabPanel sx={{ width: '100%' }}>
-                <Flex
-                  gap={4}
-                  direction='col'
+              <Action.Trigger value='invite'>
+                <InviteMembersButton
                   sx={{
-                    width: '100%',
+                    display: 'none',
+                    [mqu.md]: {
+                      display: 'inline-flex',
+                    },
                   }}
-                >
-                  {canManageMemberships && __unstable_manageBillingUrl && <MembershipWidget />}
-                  <ActiveMembersList />
-                </Flex>
-              </TabPanel>
-            )}
-            {canManageMemberships && (
-              <TabPanel sx={{ width: '100%' }}>
-                <OrganizationMembersTabInvitations />
-              </TabPanel>
+                />
+              </Action.Trigger>
             )}
-            {canManageMemberships && isDomainsEnabled && (
-              <TabPanel sx={{ width: '100%' }}>
-                <OrganizationMembersTabRequests />
-              </TabPanel>
+          </Header.Root>
+          <Tabs>
+            <TabsList>
+              {canReadMemberships && (
+                <Tab localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__members')} />
+              )}
+              {canManageMemberships && (
+                <Tab
+                  localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__invitations')}
+                />
+              )}
+              {canManageMemberships && isDomainsEnabled && (
+                <Tab localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__requests')}>
+                  <NotificationCountBadge notificationCount={membershipRequests?.count || 0} />
+                </Tab>
+              )}
+              <Col
+                justify='center'
+                sx={{
+                  marginLeft: 'auto',
+                  [mqu.md]: {
+                    display: 'none',
+                  },
+                }}
+              >
+                {canManageMemberships && (
+                  <Action.Trigger value='invite'>
+                    <InviteMembersButton />
+                  </Action.Trigger>
+                )}
+              </Col>
+            </TabsList>
+            {canReadMemberships && (
+              <Action.Open value='invite'>
+                <Action.Card>
+                  <InviteMembersScreen />
+                </Action.Card>
+              </Action.Open>
             )}
-          </TabPanels>
-        </Tabs>
+            <TabPanels>
+              {canReadMemberships && (
+                <TabPanel sx={{ width: '100%' }}>
+                  <Flex
+                    gap={4}
+                    direction='col'
+                    sx={{
+                      width: '100%',
+                    }}
+                  >
+                    {canManageMemberships && __unstable_manageBillingUrl && <MembershipWidget />}
+                    <ActiveMembersList />
+                  </Flex>
+                </TabPanel>
+              )}
+              {canManageMemberships && (
+                <TabPanel sx={{ width: '100%' }}>
+                  <OrganizationMembersTabInvitations />
+                </TabPanel>
+              )}
+              {canManageMemberships && isDomainsEnabled && (
+                <TabPanel sx={{ width: '100%' }}>
+                  <OrganizationMembersTabRequests />
+                </TabPanel>
+              )}
+            </TabPanels>
+          </Tabs>
+        </Action.Root>
       </Col>
     </Col>
   );

diff --git a/packages/clerk-js/src/ui/elements/Tabs.tsx b/packages/clerk-js/src/ui/elements/Tabs.tsx
@@ -70,6 +70,7 @@ export const TabsList = (props: TabsListProps) => {
     <Flex
       elementDescriptor={descriptors.tabListContainer}
       onKeyDown={onKeyDown}
+      justify='center'
       sx={[
         theme => ({
           borderBottom: theme.borders.$normal,
@@ -138,6 +139,7 @@ export const Tab = (props: TabProps) => {
           marginBottom: '-1px',
           borderColor: isActive ? t.colors.$blackAlpha800 : t.colors.$transparent,
           borderRadius: 0,
+          padding: `${t.space.$2x5} ${t.space.$3x5}`,
           width: 'fit-content',
           '&:hover, :focus': { backgroundColor: t.colors.$transparent },
         }),