fix : UI Issues

Project/Frontend/SignConnectPlus/src/pages/ssl-translate/process/process.tsx

@@ -163,7 +163,7 @@ const Process = () => {
               padding: 2
             }}
           >
-            <ButtonGroup disableElevation variant="contained" aria-label="Disabled elevation buttons">
+            <ButtonGroup disableElevation variant="contained" aria-label="Disabled elevation buttons" sx={{ marginBottom: '10px' }}>
               <Button
                 variant={checkTranalationTypeForUpload()}
                 startIcon={<CloudUploadOutlined />}
@@ -190,14 +190,14 @@ const Process = () => {
                   <CardHeader title="Upload a video containing Sign Language" />
                   <Grid container spacing={2}>
                     <Grid item xs={12} md={6}>
-                      <Card>
+                      <Card sx={{ marginBottom: '10px', marginLeft: '10px' }}>
                         <CardContent>
                           {/* ! Important */}
 
                           {/* @ts-ignore */}
-                          <MuiFileInput value={file} onChange={handleDropSingleFile} />
+                          <MuiFileInput value={file} onChange={handleDropSingleFile} inputProps={{ accept: 'video/*' }} />
 
-                          {file && (
+                          {/* {file && (
                             <Paper style={{ padding: '20px' }}>
                               <Typography variant="h5" align="center" gutterBottom>
                                 Preview
@@ -206,12 +206,20 @@ const Process = () => {
                                 <video src={videoUrl} width="400" controls />
                               </div>
                             </Paper>
-                          )}
+                          )} */}
+                          <Paper style={{ padding: '20px', marginTop: '15px' }}>
+                            <Typography variant="h5" align="center" gutterBottom>
+                              Preview
+                            </Typography>
+                            <div style={{ marginTop: '20px', textAlign: 'center' }}>
+                              {file ? <video src={videoUrl} width="400" controls /> : <p>No Video Selected ...</p>}
+                            </div>
+                          </Paper>
                         </CardContent>
                       </Card>
                     </Grid>
                     <Grid item xs={12} md={6}>
-                      <Card sx={{ p: 5, minHeight: 300 }}>
+                      <Card sx={{ p: 5, minHeight: 300, marginBottom: '10px', marginRight: '10px' }}>
                         <Box display="grid" gap={5}>
                           <Stack spacing={2}>
                             <Grid container spacing={2}>
@@ -295,7 +303,7 @@ const Process = () => {
                   <Grid container spacing={2}>
                     {/* Paste Here  */}
                     <Grid item xs={12} md={6}>
-                      <Card>
+                      <Card sx={{ marginBottom: '10px', marginLeft: '10px' }}>
                         <CardContent>
                           <WebcamStreamCapture onVideoRecorded={handleVideoRecorded} />
                         </CardContent>
@@ -309,7 +317,7 @@ const Process = () => {
                       </Card>
                     </Grid>
                     <Grid item xs={12} md={6}>
-                      <Card sx={{ p: 5, minHeight: 300 }}>
+                      <Card sx={{ p: 5, minHeight: 300, marginBottom: '10px', marginRight: '10px' }}>
                         <Box display="grid" gap={5}>
                           <Stack spacing={2}>
                             <Grid container spacing={2}>