UI changes in user update page (#1182)

PalisadoesFoundation · Dec 12, 2023 · 4027f3a · 4027f3a
1 parent 7658a83
commit 4027f3a
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 47 deletions.
diff --git a/src/components/UserUpdate/UserUpdate.module.css b/src/components/UserUpdate/UserUpdate.module.css
@@ -14,17 +14,13 @@
 }
 .dispflex {
   display: flex;
+  flex-direction: column;
   justify-content: flex-start;
-  margin: 0 auto;
-}
-.dispbtnflex {
-  width: 90%;
-  margin-top: 20px;
-  display: flex;
-  margin: 0 30%;
+  margin: 0 8rem;
 }
+
 .dispflex > div {
-  width: 50%;
+  width: 100%;
   margin-right: 50px;
 }
 
@@ -38,6 +34,12 @@
   width: 50%;
 }
 
+.dispbtnflex {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+}
+
 .whitebtn {
   margin: 1rem 0 0;
   margin-top: 10px;
@@ -46,7 +48,6 @@
   padding: 10px 20px;
   border-radius: 5px;
   background: none;
-  width: 20%;
   font-size: 16px;
   color: #31bb6b;
   outline: none;
@@ -64,7 +65,6 @@
   padding: 10px 10px;
   border-radius: 5px;
   background-color: #31bb6b;
-  width: 20%;
   font-size: 16px;
   color: white;
   outline: none;

diff --git a/src/components/UserUpdate/UserUpdate.tsx b/src/components/UserUpdate/UserUpdate.tsx
@@ -211,43 +211,45 @@ const UserUpdate: React.FC<InterfaceUserUpdateProps> = ({
               </label>
             </div>
           </div>
-          <label htmlFor="orgphoto" className={styles.orgphoto}>
-            {t('displayImage')}:
-            <Form.Control
-              accept="image/*"
-              id="orgphoto"
-              name="photo"
-              type="file"
-              multiple={false}
-              onChange={async (e: React.ChangeEvent): Promise<void> => {
-                const target = e.target as HTMLInputElement;
-                const file = target.files && target.files[0];
-                if (file)
-                  setFormState({
-                    ...formState,
-                    file: await convertToBase64(file),
-                  });
-              }}
-              data-testid="organisationImage"
-            />
-          </label>
-          <div className={styles.dispbtnflex}>
-            <Button
-              type="button"
-              className={styles.greenregbtn}
-              value="savechanges"
-              onClick={loginLink}
-            >
-              {t('saveChanges')}
-            </Button>
-            <Button
-              type="button"
-              className={styles.whitebtn}
-              value="cancelchanges"
-              onClick={cancelUpdate}
-            >
-              {t('cancel')}
-            </Button>
+          <div className={styles.dispflex}>
+            <label htmlFor="orgphoto" className={styles.orgphoto}>
+              {t('displayImage')}:
+              <Form.Control
+                accept="image/*"
+                id="orgphoto"
+                name="photo"
+                type="file"
+                multiple={false}
+                onChange={async (e: React.ChangeEvent): Promise<void> => {
+                  const target = e.target as HTMLInputElement;
+                  const file = target.files && target.files[0];
+                  if (file)
+                    setFormState({
+                      ...formState,
+                      file: await convertToBase64(file),
+                    });
+                }}
+                data-testid="organisationImage"
+              />
+            </label>
+            <div className={styles.dispbtnflex}>
+              <Button
+                type="button"
+                className={styles.greenregbtn}
+                value="savechanges"
+                onClick={loginLink}
+              >
+                {t('saveChanges')}
+              </Button>
+              <Button
+                type="button"
+                className={styles.whitebtn}
+                value="cancelchanges"
+                onClick={cancelUpdate}
+              >
+                {t('cancel')}
+              </Button>
+            </div>
           </div>
         </form>
       </div>