[FEATURE]: Team Page (#603)

* feat: add layout to display the team page * fix: add requested changes
xgeekshq · Nov 21, 2022 · 7fc0722 · 7fc0722
1 parent 9c37ca3
commit 7fc0722
Show file tree

Hide file tree

Showing 28 changed files with 387 additions and 49 deletions.
diff --git a/frontend/src/components/Primitives/Text.tsx b/frontend/src/components/Primitives/Text.tsx
@@ -92,10 +92,19 @@ const Text = styled('span', {
 			}
 		},
 		weight: {
+			regular: {
+				fontWeight: '$regular'
+			},
 			medium: {
 				fontWeight: '$medium'
 			},
-			bold: { fontWeight: '$bold' }
+			bold: { fontWeight: '$bold' },
+			semiBold: {
+				fontWeight: '$semiBold'
+			},
+			extraBold: {
+				fontWeight: '$extrabold'
+			}
 		},
 		size: {
 			xl: {

diff --git a/frontend/src/components/Teams/CreateTeam/AddMemberBtn/index.tsx b/frontend/src/components/Teams/CreateTeam/AddMemberBtn/index.tsx
@@ -9,9 +9,7 @@ const AddMemberBtn = () => {
 			<Flex align="center" css={{ justifyContent: 'end' }}>
 				<ButtonAddMember>
 					<Icon css={{ width: '$16', height: '$16' }} name="plus" />{' '}
-					<Text
-						css={{ ml: '$10', fontSize: '$14', lineHeight: '$18', fontWeight: '700' }}
-					>
+					<Text css={{ ml: '$10', fontSize: '$14', lineHeight: '$18' }} weight="bold">
 						Add new member
 					</Text>
 				</ButtonAddMember>

diff --git a/...c/components/Teams/CreateTeam/CardEnd.tsx → ...ms/CreateTeam/CardEnd/RoleDescription.tsx b/...c/components/Teams/CreateTeam/CardEnd.tsx → ...ms/CreateTeam/CardEnd/RoleDescription.tsx
@@ -1,19 +1,15 @@
 import React from 'react';
 
-import Flex from 'components/Primitives/Flex';
 import Text from 'components/Primitives/Text';
-import { TeamUserRoles } from '../../../utils/enums/team.user.roles';
-import PopoverRoleSettings from './CardMember/RoleSettings';
+import { TeamUserRoles } from '../../../../utils/enums/team.user.roles';
 
-type CardEndProps = {
+type RoleDescriptionProps = {
 	role: string;
-	isTeamCreator?: boolean;
-	userId: string;
 };
 
-const CardEnd = ({ role, isTeamCreator, userId }: CardEndProps) => {
+const RoleDescription = ({ role }: RoleDescriptionProps) => {
 	return (
-		<Flex align="center" css={{ width: '23%' }} justify="end">
+		<>
 			<Text color="primary200" size="sm">
 				Role |
 			</Text>
@@ -22,9 +18,8 @@ const CardEnd = ({ role, isTeamCreator, userId }: CardEndProps) => {
 				{(role === TeamUserRoles.ADMIN || role === TeamUserRoles.MEMBER) &&
 					`Team ${role[0].toUpperCase()}${role.substring(1)}`}
 			</Text>
-			{!isTeamCreator && <PopoverRoleSettings userId={userId} />}
-		</Flex>
+		</>
 	);
 };
 
-export default CardEnd;
+export default RoleDescription;
diff --git a/frontend/src/components/Teams/CreateTeam/CardEnd/index.tsx b/frontend/src/components/Teams/CreateTeam/CardEnd/index.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import Flex from 'components/Primitives/Flex';
+import PopoverRoleSettings from '../CardMember/RoleSettings';
+import RoleDescription from './RoleDescription';
+
+type CardEndCreateTeamProps = {
+	role: string;
+	isTeamCreator?: boolean;
+	userId: string;
+};
+
+const CardEndCreateTeam = ({ role, isTeamCreator, userId }: CardEndCreateTeamProps) => {
+	return (
+		<Flex align="center" css={{ width: '23%' }} justify="end">
+			<RoleDescription role={role} />
+			{!isTeamCreator && <PopoverRoleSettings userId={userId} />}
+		</Flex>
+	);
+};
+
+export default CardEndCreateTeam;
diff --git a/frontend/src/components/Teams/CreateTeam/CardMember/RoleSettings.tsx b/frontend/src/components/Teams/CreateTeam/CardMember/RoleSettings.tsx
@@ -50,11 +50,11 @@ const PopoverRoleSettings: React.FC<PopoverRoleSettingsProps> = React.memo(({ us
 						direction="column"
 						onClick={() => selectRole(TeamUserRoles.MEMBER)}
 					>
-						<Text css={{ fontWeight: 500, textAlign: 'end' }} size="sm">
+						<Text css={{ textAlign: 'end' }} size="sm" weight="medium">
 							Team Member
 						</Text>
 
-						<Text css={{ fontWeight: 400, textAlign: 'end' }} size="sm">
+						<Text css={{ textAlign: 'end' }} size="sm">
 							The team member can create boards and can create teams.
 						</Text>
 					</PopoverItemStyled>
@@ -65,10 +65,10 @@ const PopoverRoleSettings: React.FC<PopoverRoleSettingsProps> = React.memo(({ us
 						direction="column"
 						onClick={() => selectRole(TeamUserRoles.ADMIN)}
 					>
-						<Text css={{ fontWeight: 500, textAlign: 'end' }} size="sm">
+						<Text css={{ textAlign: 'end' }} size="sm" weight="medium">
 							Team Admin
 						</Text>
-						<Text css={{ fontWeight: 400, textAlign: 'end' }} size="sm">
+						<Text css={{ textAlign: 'end' }} size="sm">
 							The team admin can nominate team admins / stakeholder and can
 							create/delete/edit team boards.
 						</Text>
@@ -80,10 +80,10 @@ const PopoverRoleSettings: React.FC<PopoverRoleSettingsProps> = React.memo(({ us
 						direction="column"
 						onClick={() => selectRole(TeamUserRoles.STAKEHOLDER)}
 					>
-						<Text css={{ fontWeight: 500, textAlign: 'end' }} size="sm">
+						<Text css={{ textAlign: 'end' }} size="sm" weight="medium">
 							Stakeholder
 						</Text>
-						<Text css={{ fontWeight: 400, textAlign: 'end' }} size="sm">
+						<Text css={{ textAlign: 'end' }} size="sm">
 							Stakeholders will not be included in sub-team SPLIT retrospectives.
 						</Text>
 					</PopoverItemStyled>

diff --git a/frontend/src/components/Teams/CreateTeam/CardMember/index.tsx b/frontend/src/components/Teams/CreateTeam/CardMember/index.tsx
@@ -1,26 +1,39 @@
 import React from 'react';
-import { useSetRecoilState } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 
 import Icon from 'components/icons/Icon';
 import Flex from 'components/Primitives/Flex';
+import Text from 'components/Primitives/Text';
 import { membersListState } from '../../../../store/team/atom/team.atom';
-import { TeamUser } from '../../../../types/team/team.user';
 import { User } from '../../../../types/user/user';
 import { ConfigurationSettings } from '../../../Board/Settings/partials/ConfigurationSettings';
-import CardEnd from '../CardEnd';
-import { InnerContainer, StyledMemberTitle } from './styles';
+import Tooltip from '../../../Primitives/Tooltip';
+import CardEndTeam from '../../Team/CardEnd';
+import CardEndCreateTeam from '../CardEnd';
+import { IconButton, InnerContainer, StyledMemberTitle } from './styles';
 
 type CardBodyProps = {
 	member: User;
 	role: string;
 	isTeamCreator?: boolean;
 	isNewJoiner?: boolean;
-	membersList: TeamUser[];
+	isTeamMemberOrStakeholder?: boolean;
+	isNewTeamPage?: boolean;
+	isTeamPage?: boolean;
 };
 
 const CardMember = React.memo<CardBodyProps>(
-	({ member, role, isTeamCreator, isNewJoiner, membersList }) => {
+	({
+		isNewTeamPage,
+		isTeamPage,
+		member,
+		role,
+		isTeamCreator,
+		isNewJoiner,
+		isTeamMemberOrStakeholder
+	}) => {
 		const setMembersList = useSetRecoilState(membersListState);
+		const membersList = useRecoilValue(membersListState);
 
 		const handleIsNewJoiner = (checked: boolean) => {
 			const listUsersMembers = membersList.map((user) => {
@@ -61,15 +74,54 @@ const CardMember = React.memo<CardBodyProps>(
 								</StyledMemberTitle>
 							</Flex>
 						</Flex>
-						<Flex align="center" css={{ width: '23%' }} gap="8" justify="center">
-							<ConfigurationSettings
-								handleCheckedChange={handleIsNewJoiner}
-								isChecked={isNewJoiner || false}
-								text=""
-								title="New Joiner"
+						{isTeamMemberOrStakeholder ? (
+							<Flex align="center" css={{ width: '35%' }} gap="8" justify="end">
+								<Text size="sm" weight="medium">
+									New Joiner
+								</Text>
+								<Tooltip
+									content={
+										<Text color="white" size="sm">
+											The new joiner will not be selected as a responsible for
+											the TEAM sub-teams.
+										</Text>
+									}
+								>
+									<IconButton>
+										<Icon
+											name="info"
+											css={{
+												'&:hover': { cursor: 'pointer' }
+											}}
+										/>
+									</IconButton>
+								</Tooltip>
+							</Flex>
+						) : (
+							<Flex align="center" css={{ width: '23%' }} gap="8" justify="center">
+								<ConfigurationSettings
+									handleCheckedChange={handleIsNewJoiner}
+									isChecked={isNewJoiner || false}
+									text=""
+									title="New Joiner"
+								/>
+							</Flex>
+						)}
+						{isNewTeamPage && (
+							<CardEndCreateTeam
+								isTeamCreator={isTeamCreator}
+								role={role}
+								userId={member._id}
 							/>
-						</Flex>
-						<CardEnd isTeamCreator={isTeamCreator} role={role} userId={member._id} />
+						)}
+						{isTeamPage && (
+							<CardEndTeam
+								isTeamCreator={isTeamCreator}
+								isTeamMemberOrStakeholder={isTeamMemberOrStakeholder}
+								role={role}
+								userId={member._id}
+							/>
+						)}
 					</InnerContainer>
 				</Flex>
 			</Flex>

diff --git a/frontend/src/components/Teams/CreateTeam/CardMember/styles.tsx b/frontend/src/components/Teams/CreateTeam/CardMember/styles.tsx
@@ -48,7 +48,22 @@ const PopoverItemStyled = styled(PopoverItem, {
 	height: '$100'
 });
 
+const IconButton = styled('button', {
+	all: 'unset',
+	fontFamily: 'inherit',
+	borderRadius: '100%',
+	height: 25,
+	width: 25,
+	display: 'inline-flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+	color: '$primaryBase',
+	backgroundColor: 'white',
+	boxShadow: `0 2px 10px $primaryBase`
+});
+
 export {
+	IconButton,
 	InnerContainer,
 	PopoverCloseStyled,
 	PopoverItemStyled,

diff --git a/frontend/src/components/Teams/CreateTeam/ListCardsMembers/index.tsx b/frontend/src/components/Teams/CreateTeam/ListCardsMembers/index.tsx
@@ -41,10 +41,10 @@ const TeamMembersList = () => {
 				{membersList?.map((member) => (
 					<CardMember
 						key={member.user._id}
+						isNewTeamPage
 						isNewJoiner={member.isNewJoiner}
 						isTeamCreator={member.user._id === session?.user.id}
 						member={member.user}
-						membersList={membersList}
 						role={member.role}
 					/>
 				))}

diff --git a/frontend/src/components/Teams/CreateTeam/ListMembers/index.tsx b/frontend/src/components/Teams/CreateTeam/ListMembers/index.tsx
@@ -115,11 +115,11 @@ const ListMembers = ({ isOpen, setIsOpen }: Props) => {
 					<ButtonAddMember>
 						<Icon css={{ width: '$16', height: '$16' }} name="plus" />{' '}
 						<Text
+							weight="medium"
 							css={{
 								ml: '$10',
 								fontSize: '$14',
-								lineHeight: '$18',
-								fontWeight: '500'
+								lineHeight: '$18'
 							}}
 						>
 							Add new member

diff --git a/frontend/src/components/Teams/Team/CardEnd/index.tsx b/frontend/src/components/Teams/Team/CardEnd/index.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import Flex from 'components/Primitives/Flex';
+import RoleDescription from '../../CreateTeam/CardEnd/RoleDescription';
+import PopoverRoleSettings from '../../CreateTeam/CardMember/RoleSettings';
+
+type CardEndTeamProps = {
+	role: string;
+	isTeamMemberOrStakeholder?: boolean;
+	userId: string;
+	isTeamCreator?: boolean;
+};
+
+const CardEndTeam = ({
+	role,
+	isTeamMemberOrStakeholder,
+	userId,
+	isTeamCreator
+}: CardEndTeamProps) => {
+	return (
+		<Flex align="center" css={{ width: '$237' }} justify="end">
+			<RoleDescription role={role} />
+			{!isTeamMemberOrStakeholder && !isTeamCreator && (
+				<PopoverRoleSettings userId={userId} />
+			)}
+		</Flex>
+	);
+};
+
+export default CardEndTeam;
diff --git a/frontend/src/components/Teams/Team/Header/index.tsx b/frontend/src/components/Teams/Team/Header/index.tsx
@@ -0,0 +1,38 @@
+import Breadcrumb from 'components/breadcrumb/Breadcrumb';
+import Flex from 'components/Primitives/Flex';
+import Text from 'components/Primitives/Text';
+import { BreadcrumbType } from 'types/board/Breadcrumb';
+import { TitleSection } from './styles';
+
+type TeamHeaderProps = {
+	title: string;
+};
+
+const TeamHeader = ({ title }: TeamHeaderProps) => {
+	// Set breadcrumbs
+	const breadcrumbItems: BreadcrumbType = [
+		{
+			title: 'Teams',
+			link: '/teams'
+		}
+	];
+
+	breadcrumbItems.push({
+		title,
+		isActive: true
+	});
+	return (
+		<Flex align="center" justify="between">
+			<Flex direction="column">
+				<Flex align="center" css={{ pb: '$12' }}>
+					<Breadcrumb items={breadcrumbItems} />
+				</Flex>
+				<TitleSection>
+					<Text heading="1">{title}</Text>
+				</TitleSection>
+			</Flex>
+		</Flex>
+	);
+};
+
+export default TeamHeader;
diff --git a/frontend/src/components/Teams/Team/Header/styles.tsx b/frontend/src/components/Teams/Team/Header/styles.tsx
@@ -0,0 +1,23 @@
+import { styled } from 'styles/stitches/stitches.config';
+
+const StyledHeader = styled('div', {
+	width: '100%',
+	maxHeight: '108px',
+
+	position: 'relative',
+
+	padding: '$24 $37',
+	borderBottomStyle: 'solid',
+	borderBottomWidth: 1,
+	borderBottomColor: '$primary100',
+
+	backgroundColor: '$surface'
+});
+
+const TitleSection = styled('section', {
+	display: 'flex',
+	alignItems: 'center',
+	gap: '$10'
+});
+
+export { StyledHeader, TitleSection };