Merge pull request #7 from rohan09-raj/fix2

Added modal and audio assets, and Completed update flow

4 files changed, 119 insertions, 20 deletions

diff --git a/client/src/components/BackButton/BackButton.jsx b/client/src/components/BackButton/BackButton.jsx
new file mode 100644
index 0000000..c02681b
--- /dev/null
+++ b/client/src/components/BackButton/BackButton.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import styles from './BackButton.module.css'
+
+const BackButton = ({ onClick, onChange }) => {
+  return (
+    <>
+      <button
+        onClick={onClick}
+        className={styles.submit}
+        type="submit"
+        onChange={onChange}
+      >
+        <img
+          className={styles.submit__image}
+          src={`${process.env.PUBLIC_URL}/assets/images/next_icon.svg`}
+          alt=""
+        />
+      </button>
+    </>
+  )
+}
+
+export default BackButton
diff --git a/client/src/components/BackButton/BackButton.module.css b/client/src/components/BackButton/BackButton.module.css
new file mode 100644
index 0000000..cc9b51c
--- /dev/null
+++ b/client/src/components/BackButton/BackButton.module.css
@@ -0,0 +1,20 @@
+.submit {
+  position: absolute;
+  top: 100px;
+  left: 150px;
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  transition: 0.2s all;
+  cursor: pointer;
+}
+
+.submit:active {
+  transform: scale(0.98);
+  box-shadow: 3px 2px 22px 1px var(--color-shadow);
+}
+
+.submit__image {
+  height: 75px;
+  width: 75px;
+}
diff --git a/client/src/components/Modal/Modal.jsx b/client/src/components/Modal/Modal.jsx
new file mode 100644
index 0000000..312d01e
--- /dev/null
+++ b/client/src/components/Modal/Modal.jsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { Modal, Typography, Box, Button } from '@mui/material'
+
+const PopUpModal = () => {
+  const style = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: 1000,
+    bgcolor: 'background.paper',
+    borderRadius: '10px',
+    boxShadow: 24,
+    p: 4
+  }
+  const [open, setOpen] = React.useState(false)
+  const handleOpen = () => setOpen(true)
+  const handleClose = () => setOpen(false)
+
+  return (
+    <>
+      <Button onClick={handleOpen}>Open modal</Button>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={style}>
+          <Typography id="modal-modal-title" variant="h6" component="h2">
+            Text in a modal
+          </Typography>
+          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+          </Typography>
+        </Box>
+      </Modal>
+    </>
+  )
+}
+
+export default PopUpModal
diff --git a/client/src/components/UpdateInput/UpdateInput.jsx b/client/src/components/UpdateInput/UpdateInput.jsx
index 8fa3ba1..1cbfcbd 100644
--- a/client/src/components/UpdateInput/UpdateInput.jsx
+++ b/client/src/components/UpdateInput/UpdateInput.jsx
@@ -2,7 +2,22 @@ import React from 'react'
 import styles from './UpdateInput.module.css'
 import EditButton from '../EditButton/EditButton'
 
-const UpdateInput = ({ label, id, value, type, name, onChange, placeholder, maxLength, pattern, minLength, onInvalid, onValid, readOnly }) => {
+const UpdateInput = ({
+  label,
+  id,
+  value,
+  defaultValue,
+  type,
+  name,
+  onChange,
+  placeholder,
+  maxLength,
+  pattern,
+  minLength,
+  onInvalid,
+  onValid,
+  readOnly
+}) => {
   const [editable, setEditable] = React.useState(true)
 
   const handleEdit = () => {
@@ -14,25 +29,24 @@ const UpdateInput = ({ label, id, value, type, name, onChange, placeholder, maxL
       <div className={styles.input__container}>
         <label htmlFor={id}>{label}</label>
         <div className={styles.input__edit}>
-        <input
-          className={styles.input__field}
-          type={type}
-          id={id}
-          name={name}
-          value={value}
-          onChange={onChange}
-          required
-          placeholder={placeholder}
-          pattern={pattern}
-          maxLength={maxLength}
-          minLength={minLength}
-          onInvalid={onInvalid}
-          onValid={onValid}
-          readOnly={editable}
-        />
-        <EditButton
-          onClick={handleEdit}
-          enabled={!editable ? '1' : '0' } />
+          <input
+            className={styles.input__field}
+            type={type}
+            id={id}
+            name={name}
+            value={value}
+            defaultValue={defaultValue}
+            onChange={onChange}
+            required
+            placeholder={placeholder}
+            pattern={pattern}
+            maxLength={maxLength}
+            minLength={minLength}
+            onInvalid={onInvalid}
+            onValid={onValid}
+            readOnly={editable}
+          />
+          <EditButton onClick={handleEdit} enabled={!editable ? '1' : '0'} />
         </div>
       </div>
     </div>