From d9b6ef74db4af81ff5e44645a3f8a216c4721dc9 Mon Sep 17 00:00:00 2001
From: jwnasambu <julietwamalwa@yahoo.com>
Date: Thu, 16 Jun 2022 22:38:29 +0300
Subject: [PATCH 1/2] fix back button altering position of card

---
 .../src/login/login.component.tsx             | 26 +++++++++----------
 packages/apps/esm-login-app/src/styles.scss   |  8 ++++++
 .../apps/esm-login-app/translations/en.json   |  1 -
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/packages/apps/esm-login-app/src/login/login.component.tsx b/packages/apps/esm-login-app/src/login/login.component.tsx
index ecd41aa06..548cf50a9 100644
--- a/packages/apps/esm-login-app/src/login/login.component.tsx
+++ b/packages/apps/esm-login-app/src/login/login.component.tsx
@@ -149,20 +149,20 @@ const Login: React.FC<LoginProps> = ({ history, location, isLoginEnabled }) => {
             onClick={() => setErrorMessage("")}
           />
         )}
-        {showPassword ? (
-          <div style={{ width: "23rem" }}>
-            <Button
-              className={styles["back-button"]}
-              kind="ghost"
-              iconDescription="Back to username"
-              onClick={() => history.push("/login")}
-            >
-              <ArrowLeft16 style={{ marginRight: "1rem" }} />
-              Back
-            </Button>
-          </div>
-        ) : null}
         <Tile className={styles["login-card"]}>
+          {showPassword ? (
+            <div className={styles["back-button-div"]}>
+              <Button
+                className={styles["back-button"]}
+                kind="ghost"
+                iconDescription="Back to username"
+                onClick={() => history.push("/login")}
+              >
+                <ArrowLeft16 style={{ marginRight: "1rem" }} />
+                Back
+              </Button>
+            </div>
+          ) : null}
           <div className={styles["center"]}>{logo}</div>
           <form onSubmit={handleSubmit} ref={formRef}>
             {!showPassword && (
diff --git a/packages/apps/esm-login-app/src/styles.scss b/packages/apps/esm-login-app/src/styles.scss
index 3dc9cb102..ffefbfca4 100644
--- a/packages/apps/esm-login-app/src/styles.scss
+++ b/packages/apps/esm-login-app/src/styles.scss
@@ -72,6 +72,7 @@
   background-color: $ui-02;
   width: 23rem;
   padding: 2.5rem;
+  position: relative;
 }
 
 @media only screen and (min-width: 481px) {
@@ -115,6 +116,13 @@
   width: 18rem;
 }
 
+.back-button-div {
+  width: 23rem;
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+}
+
 .back-button {
   height: 3rem;
 
diff --git a/packages/apps/esm-login-app/translations/en.json b/packages/apps/esm-login-app/translations/en.json
index db81d252c..57dbb9fb4 100644
--- a/packages/apps/esm-login-app/translations/en.json
+++ b/packages/apps/esm-login-app/translations/en.json
@@ -1,5 +1,4 @@
 {
-  "back": "back",
   "change": "Change",
   "confirm": "Confirm",
   "contactAdmin": "Contact the site administrator",

From 7613e302eceafa608361fbbddc4e2b4d3f609c63 Mon Sep 17 00:00:00 2001
From: jwnasambu <julietwamalwa@yahoo.com>
Date: Thu, 16 Jun 2022 23:10:33 +0300
Subject: [PATCH 2/2] updated the translations

---
 packages/apps/esm-login-app/translations/en.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/apps/esm-login-app/translations/en.json b/packages/apps/esm-login-app/translations/en.json
index 57dbb9fb4..db81d252c 100644
--- a/packages/apps/esm-login-app/translations/en.json
+++ b/packages/apps/esm-login-app/translations/en.json
@@ -1,4 +1,5 @@
 {
+  "back": "back",
   "change": "Change",
   "confirm": "Confirm",
   "contactAdmin": "Contact the site administrator",