summaryrefslogtreecommitdiff
path: root/client/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/components')
-rw-r--r--client/src/components/BackButton/BackButton.jsx23
-rw-r--r--client/src/components/BackButton/BackButton.module.css20
-rw-r--r--client/src/components/UpdateInput/UpdateInput.jsx54
3 files changed, 77 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/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>