Complete all basic styling for video meeting section

Author: johnwage

app/src/components/bottom/VideoMeeting.tsx

@@ -15,6 +15,10 @@ import {
 import ReactPlayer from 'react-player';
 import Button from '@mui/material/Button';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import MicOffIcon from '@mui/icons-material/MicOff';
+import MicIcon from '@mui/icons-material/Mic';
+import VideocamIcon from '@mui/icons-material/Videocam';
+import VideocamOffIcon from '@mui/icons-material/VideocamOff';
 import VideoMeetingControl from './VideoMeetingControl';
 
 const Videomeeting = (props): JSX.Element => {
@@ -59,8 +63,8 @@ const Videomeeting = (props): JSX.Element => {
   };
 
   const handleUserInfoStyle = (isLocalParticipant: boolean) => {
-    if (isLocalParticipant) return { color: '#0671E3', alignSelf: 'center' };
-    else return { color: 'white' };
+    if (isLocalParticipant) return { color: '#0671E3', alignItems: 'center' };
+    else return { color: 'white', alignItems: 'center' };
   };
 
   const ParticipantView = ({ participantId, isLocalParticipant }) => {
@@ -101,17 +105,15 @@ const Videomeeting = (props): JSX.Element => {
             <div
               key={participantId}
               style={{
-                justifyContent: 'center',
-                alignItems: 'center',
-                display: 'column',
+                display: 'flex',
+                flexDirection: 'column',
+                // justifyContent: 'center',
+                // alignItems: 'center',
                 paddingLeft: '5px',
                 paddingRight: '5px'
               }}
             >
-              <p style={handleUserInfoStyle(isLocalParticipant)}>
-                Participant: {isLocalParticipant ? 'You' : displayName} |
-                Video: {webcamOn ? 'ON' : 'OFF'} | Mic: {micOn ? 'ON' : 'OFF'}
-              </p>
+              
               <audio ref={micRef} autoPlay muted={isLocal} />
               {!webcamOn && <TurnOffCameraDisplay />}
               {webcamOn && (
@@ -130,6 +132,10 @@ const Videomeeting = (props): JSX.Element => {
                   }}
                 />
               )}
+              <div style={{...handleUserInfoStyle(isLocalParticipant), display: 'flex', marginTop: '-50px', marginLeft: '15px'}}>
+              <span>{displayName}</span>
+                {webcamOn ? <VideocamIcon style={{marginLeft: '14.5px'}}/> : <VideocamOffIcon style={{marginLeft: '14.5px'}}/>} {micOn ? <MicIcon style={{marginLeft: '10px'}}/> : <MicOffIcon style={{marginLeft: '10px'}}/>}
+              </div>
             </div>
           </>
         )}
@@ -178,10 +184,11 @@ const Videomeeting = (props): JSX.Element => {
           flexDirection: 'column',
           justifyContent: 'center',
           alignItems: 'center',
-          width: '80%',
+          width: '60%',
           height: '100%',
           position: 'relative',
-          overflow: 'auto'
+          overflow: 'auto',
+          paddingBottom: '68px'
         }}
       >
         <div className="video-scrollable" style={{ overflow: 'auto' }}>

app/src/components/bottom/VideoMeetingControl.tsx

@@ -70,7 +70,6 @@ const VideoMeetingControl: React.FC<VideoMeetingControlProps> = () => {
         {/* Mic Button */}
         <div
           style={{
-            // backgroundColor: micHovered ? '#dddddd' : 'transparent',
             transition: 'background-color 0.3s',
             borderRadius: '5px',
             padding: '5px'
@@ -107,7 +106,6 @@ const VideoMeetingControl: React.FC<VideoMeetingControlProps> = () => {
         {/* Webcam Button */}
         <div
           style={{
-            // backgroundColor: webcamHovered ? '#dddddd' : 'transparent',
             transition: 'background-color 0.3s',
             borderRadius: '5px',
             padding: '5px'
@@ -144,7 +142,6 @@ const VideoMeetingControl: React.FC<VideoMeetingControlProps> = () => {
         {/* Call End Button */}
         <div
           style={{
-            // backgroundColor: callEndHovered ? '#dddddd' : 'transparent',
             transition: 'background-color 0.3s',
             borderRadius: '5px',
             padding: '5px'

app/src/public/styles/style.css

@@ -608,7 +608,7 @@ BOTTOM PANEL
   transition: 0.3s ease all;
   border-color: transparent;
   background-color: #1e2024;
-  background-image: linear-gradient(180deg, #1e2024 15%, grey 15%, grey 85%, #1e2024 85%);
+  background-image: linear-gradient(180deg, #1e2024 15%, #31343A 15%, #31343A 85%, #1e2024 85%);
   border-radius: 10px;
   z-index: 40;
   overflow-y: hidden;