1-3158: move invite link wrap into component

Unleash · Nov 26, 2024 · c340930 · c340930
1 parent 8dd4af9
commit c340930
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 24 deletions.
diff --git a/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx b/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx
@@ -1,6 +1,15 @@
 import type { VFC } from 'react';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { InviteLinkBarContent } from './InviteLinkBarContent';
+import { styled } from '@mui/material';
+
+const Bar = styled('article')(({ theme }) => ({
+    display: 'flex',
+    flexFlow: 'row wrap',
+    gap: theme.spacing(2),
+    justifyContent: 'space-between',
+    alignItems: 'center',
+}));
 
 export const InviteLinkBar: VFC = () => {
     const { trackEvent } = usePlausibleTracker();
@@ -14,5 +23,9 @@ export const InviteLinkBar: VFC = () => {
         });
     };
 
-    return <InviteLinkBarContent onActionClick={onInviteLinkActionClick} />;
+    return (
+        <Bar>
+            <InviteLinkBarContent onActionClick={onInviteLinkActionClick} />
+        </Bar>
+    );
 };
diff --git a/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBarContent.tsx b/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBarContent.tsx
@@ -22,12 +22,6 @@ export const StyledBox = styled(Box)(() => ({
     flexDirection: 'column',
 }));
 
-export const StyledButtonBox = styled(Box)(() => ({
-    display: 'flex',
-    alignItems: 'center',
-    flexGrow: 1,
-}));
-
 export const InviteLinkBarContent = ({
     onActionClick,
 }: IInviteLinkBarContentProps) => {
@@ -108,22 +102,13 @@ export const InviteLinkBarContent = ({
                     }
                 />
             </StyledBox>
-            <StyledButtonBox
-                sx={{
-                    justifyContent: {
-                        xs: 'center',
-                        md: 'flex-end',
-                    },
-                }}
+            <Button
+                variant='outlined'
+                onClick={onInviteLinkActionClick}
+                data-loading
             >
-                <Button
-                    variant='outlined'
-                    onClick={onInviteLinkActionClick}
-                    data-loading
-                >
-                    {inviteLink ? 'Update' : 'Create'} invite link
-                </Button>
-            </StyledButtonBox>
+                {inviteLink ? 'Update' : 'Create'} invite link
+            </Button>
         </>
     );
 };
diff --git a/frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx b/frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx
@@ -21,15 +21,14 @@ const StyledElement = styled(Box)(({ theme }) => ({
     backgroundColor: theme.palette.background.paper,
     padding: theme.spacing(2, 3, 2, 2),
     borderRadius: `${theme.shape.borderRadiusLarge}px`,
-    display: 'flex',
     border: '2px solid',
     borderColor: theme.palette.divider,
 }));
 
 export const UsersHeader = () => {
     const licensedUsers = useUiFlag('licensedUsers');
     const { isOss } = useUiConfig();
-    const licensedUsersEnabled = licensedUsers && !isOss();
+    const licensedUsersEnabled = true; //licensedUsers && !isOss();
 
     return (
         <StyledContainer licensedUsersEnabled={licensedUsersEnabled}>