Merge branch 'task-75-modals-styles' into 'development'

Task 75 modals styles

See merge request !51

planner-front/src/components/Menus/WorkerMenu/WorkerMenu.js

@@ -10,7 +10,7 @@ const WorkerMenu = () => {
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     const user = useSelector(state => state.users.user)
-    console.log(user)
+  
     const handleClick = (event) => {
         setAnchorEl(event.currentTarget);
     };

planner-front/src/components/MyTasksCompoments/TaskModal/TaskModal.css

 .modal{
-    width: 200px;
-    height: 200px;
-    background-color: rgb(180, 243, 243);
     display: flex;
-    margin:10% 20%;
-    padding: 30px;
-    word-break: break-all;
-    transition-duration:0.5s;
+    flex-direction: column;
+    padding: 10px;
+    align-items: center;
+    position: absolute;
+    top: 200px;
+    left: 200px;
+    width: 300px;
+    height: 300px;
+    background-color: white;
+    border: 2px solid #000;
+    box-shadow: 24px;
+    border-radius:5px
 }
 .modalBox{
     display: flex;

planner-front/src/components/MyTasksCompoments/TaskModal/TaskModal.js

@@ -2,64 +2,95 @@ import { Modal, IconButton } from "@mui/material";
 import "./TaskModal.css";
 import { Done } from "@mui/icons-material";
 import Input from "@mui/material/Input";
+import TextField from "@mui/material/Input";
 
 const TaskModal = ({handleClose,open,task,onChange,user }) => {
 
   return (
     <Modal
-      aria-labelledby="transition-modal-title"
-      aria-describedby="transition-modal-description"
-      className={"modal"}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+      BackdropProps={{ style: { backgroundColor: 'rgba(255,255,255, 0)' } }}
       closeAfterTransition
       onClose={handleClose}
       open={open}
     >
       {task?.isEditMode && task.author.id===user.id ? (
-        <div className="modalBox">
+        <div className="modal">
           <Input
+           label="название"
+           color="secondary" 
             value={task.title}
             name="title"
             onChange={(e) => onChange(e, task)}
             style={{
               width: "auto",
-              fontSize: "12px",
-              color: "white",
               fontWeight: "600",
+              height: "40px",
+              fontWeight: "600",
+              width:"280px",
+              margin:"10px",
+              padding:"5px",
+              border: '2px solid #D3D3D3',
+              borderRadius:"5px"
             }}
           />
-          <Input
+          <TextField
+            label="описание"
             value={task.description}
             name="description"
             onChange={(e) => onChange(e, task)}
-            style={{ width: "auto", fontSize: "12px", color: "white" }}
+            multiline={true}
+            sx={{
+            fontWeight: "400",
+            width:"280px",
+            margin:"10px",
+            padding:"5px",
+            border: '2px solid #D3D3D3',
+            borderRadius:"5px",
+            height:"300px",
+            whiteSpace:"normal"
+            }}
                />
-          <IconButton aria-label="done" onClick={handleClose}>
+          <IconButton aria-label="done" onClick={handleClose}
+           sx={{margingBottom:"5px",marginTop:"auto"}}>
             <Done />
           </IconButton>
         </div>
       ) : (
-        <div className="modalBox">
+        <div className="modal">
           {task && task.title && (
             <div
               style={{
-                width: "200px",
-                height: "200px",
-                color: "white",
+               height: "40px",
                fontWeight: "600",
+               width:"280px",
+               margin:"10px",
+               padding:"5px",
+               border: '2px solid #D3D3D3',
+               borderRadius:"5px"
               }}
             >
               {task.title}
             </div>
           )}
           {task && task.description && (
-            <div style={{ width: "200px", height: "200px", color: "white" }}>
+            <div 
+            style={{margin:"10px",
+                    border: '2px solid #D3D3D3',
+                    borderRadius:"5px",
+                    width:"280px",
+                    height: "200px",
+                    margin:"10px",
+                    padding:"5px",
+               }}>
               {task.description}
             </div>
           )}
           <IconButton
-            sx={{ marginLeft: 0, color: "white" }}
             aria-label="close"
             onClick={handleClose}
+            sx={{margingBottom:"5px",marginTop:"auto"}}
           >
             X
           </IconButton>

planner-front/src/containers/MyTasks/MyTasks.js

@@ -388,9 +388,6 @@ console.log(tasks)
                               .format("hh:mm A"),
                                user:user
                             }}>
-                              {/* <span>"время завершения"+ {moment(task.dateTimeDue)
-                              .utc()
-                              .format("hh:mm A")}</span> */}
                           </CustomTableCell>
                         
                           </>
@@ -475,7 +472,8 @@ console.log(tasks)
                             )}
                           </Tooltip>
                         </TableCell>
-                        <TableCell>
+                        {task.author.id===user.id  ?
+                        (<TableCell>
                           <Tooltip title="Удалить">
                             <IconButton
                               onClick={(id) => {
@@ -485,7 +483,8 @@ console.log(tasks)
                               <DeleteIcon />
                             </IconButton>
                           </Tooltip>
-                        </TableCell>
+                        </TableCell>):null}
+
                       </TableRow>
                     );
                   })}