10 files changed, 215 insertions, 3 deletions
diff --git a/client/src/components/BiometricCard/BiometricCard.jsx b/client/src/components/BiometricCard/BiometricCard.jsx
new file mode 100644
index 0000000..ff5271f
--- /dev/null
+++ b/client/src/components/BiometricCard/BiometricCard.jsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import EditButton from '../EditButton/EditButton'
+import styles from './BiometricCard.module.css'
+
+const BiometricCard = ({ label, onclick }) => {
+  return (
+    <div className={styles.formone}>
+      <div className={styles.input}>
+        <div className={styles.input__container}>
+          <div className={styles.input__edit}>
+            <div className={styles.input__field}>{label}</div>
+            <EditButton onClick={onclick} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default BiometricCard
diff --git a/client/src/components/BiometricCard/BiometricCard.module.css b/client/src/components/BiometricCard/BiometricCard.module.css
new file mode 100644
index 0000000..ca6f46a
--- /dev/null
+++ b/client/src/components/BiometricCard/BiometricCard.module.css
@@ -0,0 +1,26 @@
+.input {
+    display: flex;
+    justify-content: center;
+    font-family: 'Barlow';
+    font-size: var(--font-medium-s);
+  }
+  
+  .input__container {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .input__edit{
+    display: flex;
+    flex-direction: row;
+  }
+  
+  .input__field {
+    width: 300px;
+    margin: 10px 0px;
+    padding: 18px 10px;
+    border: 3px solid;
+    border-radius: 10px;
+    font-size: 1rem;
+    text-align: center;
+  }
+\ No newline at end of file
diff --git a/client/src/components/EditButton/EditButton.jsx b/client/src/components/EditButton/EditButton.jsx
new file mode 100644
index 0000000..125ffad
--- /dev/null
+++ b/client/src/components/EditButton/EditButton.jsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import styles from './EditButton.module.css'
+
+const EditButton = ({ onClick, enabled }) => {
+  return (
+    <>
+      <button onClick={onClick} className={styles.submit} type="button">
+        <img
+          className={styles.submit__image}
+          src={`${process.env.PUBLIC_URL}/assets/images/edit.svg`}
+          alt=""
+          style={ { filter: `invert(${enabled}) sepia(1) saturate(100) hue-rotate(1490deg)` } }
+        />
+      </button>
+    </>
+  )
+}
+
+export default EditButton
diff --git a/client/src/components/EditButton/EditButton.module.css b/client/src/components/EditButton/EditButton.module.css
new file mode 100644
index 0000000..5c9a288
--- /dev/null
+++ b/client/src/components/EditButton/EditButton.module.css
@@ -0,0 +1,16 @@
+.submit {
+  background: transparent;
+  border: none;
+  transition: 0.2s all;
+  cursor: pointer;
+  margin-left: 10px;
+}
+
+.submit:active {
+  transform: scale(0.98);
+}
+
+.submit__image {
+  height: 30px;
+  width: 30px;
+}
diff --git a/client/src/components/Gender/Gender.jsx b/client/src/components/Gender/Gender.jsx
new file mode 100644
index 0000000..97e4d6e
--- /dev/null
+++ b/client/src/components/Gender/Gender.jsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import EditButton from '../../components/EditButton/EditButton'
+import LabelCard from '../LabelCard/LabelCard'
+import styles from './Gender.module.css'
+
+const Gender = ({ formData, setFormData }) => {
+    const [editable, setEditable] = React.useState(true)
+
+    const handleEdit = () => {
+      setEditable(!editable)
+    }
+  return (
+    <div className={styles.formone__gender}>
+    <LabelCard
+      id="male"
+      name="gender"
+      title="Male"
+      value={formData.gender}
+      readOnly={editable}
+      onChange={() => {
+        setFormData({
+          ...formData,
+          gender: 'Male'
+        })
+      }}
+      image={`${process.env.PUBLIC_URL}/assets/images/male.svg`} />
+    <LabelCard
+      id="female"
+      name="gender"
+      value={formData.gender}
+      title="Female"
+      readOnly={editable}
+      onChange={() => {
+        setFormData({
+          ...formData,
+          gender: 'Female'
+        })
+      }}
+      image={`${process.env.PUBLIC_URL}/assets/images/female.svg`} />
+    <LabelCard
+      id="trans"
+      name="gender"
+      value={formData.gender}
+      title="Transgender"
+      readOnly={editable}
+      onChange={() => {
+        setFormData({
+          ...formData,
+          gender: 'Transgender'
+        })
+      }}
+      image={`${process.env.PUBLIC_URL}/assets/images/trans.svg`} />
+    <EditButton
+    onClick={handleEdit}
+    enabled={!editable ? '1' : '0' } />
+  </div>
+  )
+}
+
+export default Gender
diff --git a/client/src/components/Gender/Gender.module.css b/client/src/components/Gender/Gender.module.css
new file mode 100644
index 0000000..f84ba2a
--- /dev/null
+++ b/client/src/components/Gender/Gender.module.css
@@ -0,0 +1,3 @@
+.formone__gender {
+    display: flex;
+  }
+\ No newline at end of file
diff --git a/client/src/components/LabelCard/LabelCard.jsx b/client/src/components/LabelCard/LabelCard.jsx
index 42ba7bf..dd02050 100644
--- a/client/src/components/LabelCard/LabelCard.jsx
+++ b/client/src/components/LabelCard/LabelCard.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import styles from './LabelCard.module.css'
 
-const LabelCard = ({ id, name, value, title, image, onChange }) => {
+const LabelCard = ({ id, name, value, title, image, onChange, readOnly }) => {
   return (
     <div className={styles.labelcard}>
       <label htmlFor={id} className={styles.card}>
@@ -16,6 +16,7 @@ const LabelCard = ({ id, name, value, title, image, onChange }) => {
         value={value}
         required
         onChange={onChange}
+        disabled={readOnly}
       />
     </div>
   )
diff --git a/client/src/components/SubmitButton/SubmitButton.jsx b/client/src/components/SubmitButton/SubmitButton.jsx
index 4437efa..6098f3c 100644
--- a/client/src/components/SubmitButton/SubmitButton.jsx
+++ b/client/src/components/SubmitButton/SubmitButton.jsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import styles from './SubmitButton.module.css'
 
-const SubmitButton = ({ onClick }) => {
+const SubmitButton = ({ onClick, onChange }) => {
   return (
     <>
-      <button onClick={onClick} className={styles.submit} type="submit">
+      <button onClick={onClick} className={styles.submit} type="submit" onChange={onChange}>
         <img
           className={styles.submit__image}
           src={`${process.env.PUBLIC_URL}/assets/images/white-check.svg`}
diff --git a/client/src/components/UpdateInput/UpdateInput.jsx b/client/src/components/UpdateInput/UpdateInput.jsx
new file mode 100644
index 0000000..8fa3ba1
--- /dev/null
+++ b/client/src/components/UpdateInput/UpdateInput.jsx
@@ -0,0 +1,42 @@
+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 [editable, setEditable] = React.useState(true)
+
+  const handleEdit = () => {
+    setEditable(!editable)
+  }
+
+  return (
+    <div className={styles.input}>
+      <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' } />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default UpdateInput
diff --git a/client/src/components/UpdateInput/UpdateInput.module.css b/client/src/components/UpdateInput/UpdateInput.module.css
new file mode 100644
index 0000000..52e13a7
--- /dev/null
+++ b/client/src/components/UpdateInput/UpdateInput.module.css
@@ -0,0 +1,25 @@
+.input {
+  display: flex;
+  justify-content: center;
+  font-family: 'Barlow';
+  font-size: var(--font-medium-s);
+}
+
+.input__container {
+  display: flex;
+  flex-direction: column;
+}
+
+.input__edit{
+  display: flex;
+  flex-direction: row;
+}
+
+.input__field {
+  width: 300px;
+  margin: 10px 0px;
+  padding: 18px 10px;
+  border: 3px solid;
+  border-radius: 10px;
+  font-size: 1rem;
+}