Fix back button altering position of card (#455)

* fix back button altering position of card * updated the translations Co-authored-by: jwnasambu <julietwamalwa@yahoo.com>
openmrs · Jun 21, 2022 · bd41cf6 · bd41cf6
1 parent 81dbc2b
commit bd41cf6
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 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
@@ -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
@@ -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;