Changes in interview page layout

client/src/components/Interview/Interview.js

@@ -9,6 +9,8 @@ import styles from "./Interview.module.css";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { questions, introduction } from "./FirstQuestions";
 
+import image from './interview_img.jpg';
+
 const Interview = (props) => {
   console.log(props);
 
@@ -207,6 +209,13 @@ const Interview = (props) => {
   return (
 
     <div className={styles["interview-container"]}>
+      <div className={styles["video-container"]}>
+        <video
+          ref={liveVideoFeed}
+          autoPlay
+          className={styles["live-player"]}
+        ></video>
+      </div>
       <div className={styles["header-container"]}>
         <span className={styles["candidate-name"]}>{candidateName}</span>
         {remainingTime !== null && (
@@ -218,16 +227,13 @@ const Interview = (props) => {
           </button>
         </Link>
       </div>
+      <div className={styles["image"]}>
+        <img src={image} alt="Image" />
+      </div>
       <div className={styles["question-container"]}>
         <p id="question">Question will be shown here</p>
       </div>
-      <div className={styles["video-container"]}>
-        <video
-          ref={liveVideoFeed}
-          autoPlay
-          className={styles["live-player"]}
-        ></video>
-      </div>
+
       <div className={styles["controls-container"]}>
         <button onClick={startRecording}>
           <FontAwesomeIcon icon={faMicrophone} />

client/src/components/Interview/Interview.module.css

@@ -24,12 +24,29 @@
 }
 
 .video-container {
-  width: 80%;
-  max-width: 800px;
+  width: 40%;
+  max-width: 400px;
   margin-bottom: 20px;
   overflow: hidden;
   border: 2px solid #333;
   border-radius: 8px;
+  position: fixed;
+  top: 10px;
+  left: 10px;
+  margin: 5vh
+}
+
+.remaining-time{
+  background-color: rgb(0, 188, 245);
+  padding: 9px 15px;
+  border-radius: 4px;
+  margin-right: 10px;
+}
+
+.image {
+  border-radius: 50%;
+  /* width: 50px; */
+  margin: 0 auto; /* Center the image horizontally */
 }
 
 .live-player {