feat(core): impl team workspace (#8920)

AF-1738 AF-1735 AF-1731 AF-1721 AF-1717 AF-1736 AF-1727 AF-1719 AF-1877
UI for team workspaces :
- add upgrade to team & successful upgrade page ( `/upgrade-to-team` & `/upgrade-success/team`)
- update team plans on pricing page ( settings —> pricing plans )
- update reaching the usage/member limit modal
- update invite member modal
- update member CRUD options

packages/frontend/component/src/components/member-components/styles.css.ts

@@ -0,0 +1,113 @@
+import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const inviteModalTitle = style({
+  fontWeight: '600',
+  fontSize: cssVar('fontH6'),
+  marginBottom: '20px',
+});
+
+export const inviteModalContent = style({
+  marginBottom: '10px',
+});
+
+export const inviteModalButtonContainer = style({
+  display: 'flex',
+  justifyContent: 'flex-end',
+  // marginTop: 10,
+});
+
+export const inviteName = style({
+  color: cssVarV2('text/primary'),
+});
+
+export const content = style({
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'center',
+  gap: '8px',
+});
+
+export const userWrapper = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '4px',
+});
+
+export const pagination = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: '6px',
+  marginTop: 5,
+});
+
+export const pageItem = style({
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '20px',
+  height: '20px',
+  fontSize: cssVar('fontXs'),
+  color: cssVarV2('text/primary'),
+  borderRadius: '4px',
+
+  selectors: {
+    '&:hover': {
+      background: cssVarV2('layer/background/hoverOverlay'),
+    },
+    '&.active': {
+      color: cssVarV2('text/emphasis'),
+      cursor: 'default',
+      pointerEvents: 'none',
+    },
+    '&.label': {
+      color: cssVarV2('icon/primary'),
+      fontSize: '16px',
+    },
+    '&.disabled': {
+      opacity: '.4',
+      cursor: 'default',
+      color: cssVarV2('text/disable'),
+      pointerEvents: 'none',
+    },
+  },
+});
+globalStyle(`${pageItem} a`, {
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const modalContent = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '12px',
+});
+
+export const modalSubTitle = style({
+  fontSize: cssVar('fontSm'),
+  fontWeight: '500',
+});
+
+export const radioItem = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '4px',
+});
+
+export const iconStyle = style({
+  color: cssVarV2('icon/primary'),
+  fontSize: '16px',
+});
+
+export const errorHint = style({
+  color: cssVarV2('status/error'),
+  fontSize: cssVar('fontXs'),
+});
+
+export const importButton = style({
+  padding: '4px 8px',
+});