Update the invite others screen to match with the design

custom/fitness-demo/components/Call/InviteOthers.js

@@ -3,20 +3,25 @@ import Button from '@custom/shared/components/Button';
 import { Card, CardBody, CardHeader } from '@custom/shared/components/Card';
 import { TextInput } from '@custom/shared/components/Input';
 import Tile from '@custom/shared/components/Tile';
+import VideoContainer from '@custom/shared/components/VideoContainer';
 import { DEFAULT_ASPECT_RATIO } from '@custom/shared/constants';
 import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
+import Container from './Container';
+import Header from './Header';
 
 export const InviteOthers = () => {
   const { localParticipant } = useParticipants();
 
   return (
+    <Container>
+      <Header />
+      <VideoContainer>
         <div className="invite-wrapper">
           <div className="invite-others">
             <Card variant="dark">
-          <CardHeader>
-            Waiting for others to join!
-          </CardHeader>
+              <CardHeader>Waiting for others to join?</CardHeader>
               <CardBody>
+                <h3>Copy the link and invite them to the call!</h3>
                 <div className="link">
                   <TextInput
                     variant="border"
@@ -56,11 +61,14 @@ export const InviteOthers = () => {
             }
             
             .preview {
+              position: absolute;
+              bottom: 0;
               width: 186px;
             }
-      `}
-      </style>
+          `}</style>
         </div>
+      </VideoContainer>
+    </Container>
   )
 }