TP-40366 | Changes for UI done

src/Pages/Team/Team.module.scss

@@ -106,14 +106,13 @@
   border: 1px solid var(--navi-color-gray-border);
 }
 .input-wrapper {
-  display: flex;
-  align-items: center;
+  height: medium;
+  margin-bottom: 20px;
   gap: 0 8px;
-  margin-bottom: 24px;
 }
 
 .email-wrapper {
-  display: flex;
-  align-items: center;
+  height: medium;
+  margin-bottom: 20px;
   gap: 0 8px;
 }

src/Pages/Team/index.tsx

@@ -51,8 +51,6 @@ const Team: FC = () => {
     setOpen(true);
   };
 
-  console.log('data', data);
-
   const returnTable = (): JSX.Element => {
     if (isLoading) {
       return <FallbackComponent />;
@@ -71,13 +69,13 @@ const Team: FC = () => {
   return (
     <div className={styles['team-wrapper']}>
       <div className={styles['team-header-wrapper']}>
-        <Typography variant="h1">Teams</Typography>
-        <Typography variant="p3">
-          Total:
-          <Typography color="#585858" variant="p3" as="span">
-            {' '}
-            {data?.length} teams{' '}
+        <Typography variant="h1">
+          Teams{' '}
+          <Typography color="#969696" variant="h1" as="span">
+            ({data?.length})
           </Typography>
+        </Typography>
+        <Typography variant="p3">
           <div className={styles['create-team-btn-wrapper']}>
             {Role.includes('Admin') && (
               <Button

src/Pages/Team/partials/CreateTeam.tsx

@@ -24,7 +24,9 @@ const CreateTeam: React.FC<CreateTeamProps> = ({
   const validateTeamName = (value: string): void => {
     value = value.trim();
     if (!regularExpression.test(value)) {
-      setTeamNameError('Please enter a valid team name');
+      setTeamNameError(
+        'Min. 3 characters required. For special characters use spaces, ‘_’, or ‘-’ only”',
+      );
     } else {
       setTeamNameError('');
     }
@@ -32,7 +34,7 @@ const CreateTeam: React.FC<CreateTeamProps> = ({
 
   const validateEmail = (value: string): void => {
     if (!emailRegularExpression.test(value)) {
-      setEmailError('This is not a Navi e-mail ID');
+      setEmailError('Please enter a Navi email ID');
     } else {
       setEmailError('');
     }
@@ -56,6 +58,7 @@ const CreateTeam: React.FC<CreateTeamProps> = ({
         startTeamSearch(response?.data?.data?.id);
         setOpen(false);
         setTeamName('');
+        setEmail('');
       })
       .catch(error => {
         const toastMessage = `${
@@ -94,7 +97,7 @@ const CreateTeam: React.FC<CreateTeamProps> = ({
           header="Set up new team "
           onClose={clearErrors}
         >
-          <div className="input-wrapper">
+          <div className={styles['input-wrapper']}>
             <Typography variant="p4">
               <BorderedInput
                 inputLabel="Team name"
@@ -103,7 +106,7 @@ const CreateTeam: React.FC<CreateTeamProps> = ({
                 value={teamName}
                 onChange={handleTeamNameChange}
                 error={teamNameError}
-                Icon={<AlertOutlineIcon color="#e92c2c" />}
+                Icon={<AlertOutlineIcon color="#e92c2c" size="xl" />}
                 placeholder="E.g. NaviPay_Operations"
               />
             </Typography>
@@ -117,7 +120,7 @@ const CreateTeam: React.FC<CreateTeamProps> = ({
                 type="text"
                 value={email}
                 onChange={handleEmailChange}
-                placeholder="a.b@navi.com"
+                placeholder="name@navi.com"
                 error={emailError}
                 Icon={<AlertOutlineIcon color="#e92c2c" />}
               />

src/Pages/Team/partials/TeamResultsTable.tsx

@@ -1,20 +1,16 @@
 import { useState } 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';
 import TeamForm from './TeamForm';
 import { TeamsData } from '../constants';
 import { returnFormattedDate } from '@src/services/globalUtils';
-
 import styles from '../Team.module.scss';
 
 const TeamResultsTable = (props: TeamResultsTableProps) => {
   const { teamsData } = props;
   const [lastUpdated, setLastUpdated] = useState<string>('');
   const [teamId, setTeamId] = useState<string>('');
-
   const returnAccordionKey = (value): string => {
     return lastUpdated.length ? `${value}-${lastUpdated}` : `${value}`;
   };
@@ -64,5 +60,4 @@ const TeamResultsTable = (props: TeamResultsTableProps) => {
     </div>
   );
 };
-
 export default TeamResultsTable;