TP-40366| fixed Design callouts

src/Pages/Team/index.tsx

@@ -69,9 +69,9 @@ const Team: FC = () => {
   return (
     <div className={styles['team-wrapper']}>
       <div className={styles['team-header-wrapper']}>
-        <Typography variant="h1">
+        <Typography variant="h3">
           Teams{' '}
-          <Typography color="#969696" variant="h1" as="span">
+          <Typography color="#969696" variant="p2" as="span">
             ({data?.length})
           </Typography>
         </Typography>
@@ -93,7 +93,6 @@ const Team: FC = () => {
       </div>
 
       {returnTable()}
-
       <CreateTeam
         open={open}
         setOpen={setOpen}

src/Pages/Team/partials/CreateTeam.tsx

@@ -1,5 +1,5 @@
 import TeamResultsTable from './TeamResultsTable';
-import { CREATE_TEAM, TeamsData } from '../constants';
+import { CREATE_TEAM, TeamsData, FETCH_SINGLE_TEAM_DATA } from '../constants';
 import { returnFormattedDate } from '@src/services/globalUtils';
 import styles from '../Team.module.scss';
 import { Typography } from '@navi/web-ui/lib/primitives';
@@ -16,6 +16,8 @@ const CreateTeam: React.FC<CreateTeamProps> = ({
   startTeamSearch,
   setOpen,
 }) => {
+  // console.log("fetchTeamById",fetchTeamById);
+
   const [teamName, setTeamName] = useState<string>('');
   const [teamNameError, setTeamNameError] = useState<string>('');
   const [emailError, setEmailError] = useState<string>('');
@@ -25,7 +27,7 @@ const CreateTeam: React.FC<CreateTeamProps> = ({
     value = value.trim();
     if (!regularExpression.test(value)) {
       setTeamNameError(
-        'Min. 3 characters required. For special characters use spaces, ‘_’, or ‘-’ only”',
+        'Min. 3 characters required. Use spaces, ‘_’, or ‘-’ only',
       );
     } else {
       setTeamNameError('');
@@ -33,10 +35,13 @@ const CreateTeam: React.FC<CreateTeamProps> = ({
   };
 
   const validateEmail = (value: string): void => {
-    if (!emailRegularExpression.test(value)) {
-      setEmailError('Please enter a Navi email ID');
-    } else {
-      setEmailError('');
+    const validEmail = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+    if (validEmail.test(value)) {
+      if (!emailRegularExpression.test(value)) {
+        setEmailError('Please enter a Navi email ID');
+      } else {
+        setEmailError('');
+      }
     }
   };
 
@@ -56,6 +61,9 @@ const CreateTeam: React.FC<CreateTeamProps> = ({
       .then((response: any) => {
         toast.success('Team added successfully');
         startTeamSearch(response?.data?.data?.id);
+        //scroll to the newly created team
+        //route to the newly created team
+        console.log(response?.data?.data?.id);
         setOpen(false);
         setTeamName('');
         setEmail('');
@@ -106,7 +114,7 @@ const CreateTeam: React.FC<CreateTeamProps> = ({
                 value={teamName}
                 onChange={handleTeamNameChange}
                 error={teamNameError}
-                Icon={<AlertOutlineIcon color="#e92c2c" size="xl" />}
+                Icon={<AlertOutlineIcon color="#e92c2c" />}
                 placeholder="E.g. NaviPay_Operations"
               />
             </Typography>

src/Pages/Team/partials/TeamForm.tsx

@@ -14,12 +14,13 @@ import {
   slackUserOptions,
   userInputPlaceholders,
 } from '../constants';
+
 import { ApiService } from '@src/services/api';
 import MembersDetails from '@src/components/MembersDetails';
 import DrawerStyles from '@src/Pages/Incidents/DrawerMode/DrawerMode.module.scss';
 import styles from '../Team.module.scss';
 
-const TeamForm = (props: TeamFormProps) => {
+export const TeamForm = (props: TeamFormProps) => {
   const { teamId, isExpanded, setTeamId, setLastUpdatedAt } = props;
   const [data, setData] = useState<any>({});
   const [slackUserIds, setSlackUserIds] = useState('');

src/Pages/Team/partials/TeamResultsTable.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import Typography from '@navi/web-ui/lib/primitives/Typography';
 import { Accordion, AccordionGroup } from '@navi/web-ui/lib/primitives';
 import { TeamResultsTableProps } from '@src/Pages/Incidents/constants';
@@ -6,6 +6,7 @@ import TeamForm from './TeamForm';
 import { TeamsData } from '../constants';
 import { returnFormattedDate } from '@src/services/globalUtils';
 import styles from '../Team.module.scss';
+import { Link } from 'react-router-dom';
 
 const TeamResultsTable = (props: TeamResultsTableProps) => {
   const { teamsData } = props;
@@ -24,7 +25,7 @@ const TeamResultsTable = (props: TeamResultsTableProps) => {
     <div>
       <AccordionGroup spaced className={styles['accordion-wrapper']}>
         {teamsData?.map((team: TeamsData) => (
-          <div key={returnAccordionKey(team?.id)}>
+          <div key={returnAccordionKey(team?.id)} id={team?.id}>
             <Accordion
               onToggledExpansion={(isExpanded: boolean) => {
                 if (isExpanded) setTeamId(team?.id);