diff options
Diffstat (limited to 'client/src/components')
-rw-r--r-- | client/src/components/BackButton/BackButton.jsx | 23 | ||||
-rw-r--r-- | client/src/components/BackButton/BackButton.module.css | 20 | ||||
-rw-r--r-- | client/src/components/UpdateInput/UpdateInput.jsx | 54 |
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> |