(fix) login: Restore footer styles for additional logos (#1245)

Restore footer styles for additional logos --------- Co-authored-by: Dennis Kigen <[email protected]>
openmrs · Dec 17, 2024 · bdb5a06 · bdb5a06
1 parent d46e219
commit bdb5a06
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 56 deletions.
diff --git a/packages/apps/esm-login-app/src/footer.scss b/packages/apps/esm-login-app/src/footer.scss
@@ -13,6 +13,57 @@
   width: 100%;
 }
 
+.logosContainer {
+  display: flex;
+  max-height: layout.$spacing-07;
+  justify-content: flex-end;
+  flex-direction: row;
+  gap: layout.$spacing-03;
+  filter: grayscale(100%);
+  opacity: 80%;
+}
+
+@media only screen and (max-width: 1024px) {
+  .footer {
+    flex-direction: row;
+    justify-content: center;
+    padding: layout.$spacing-05;
+  }
+
+  .poweredByTile {
+    padding: layout.$spacing-05 layout.$spacing-03;
+    font-size: layout.$spacing-04;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .logosContainer {
+    justify-content: center;
+    gap: layout.$spacing-04;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  .footer {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: layout.$spacing-03;
+    padding: layout.$spacing-05;
+  }
+
+  .poweredByTile {
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 1.25rem 1rem;
+    font-size: layout.$spacing-04;
+    height: auto;
+    max-width: 100%;
+    border-radius: layout.$spacing-04;
+  }
+}
+
 .poweredByTile {
   display: flex;
   text-align: left;

diff --git a/packages/apps/esm-login-app/src/login/login.scss b/packages/apps/esm-login-app/src/login/login.scss
@@ -50,16 +50,6 @@
   margin-left: 0.5rem;
 }
 
-.logosContainer {
-  display: flex;
-  max-height: 2rem;
-  justify-content: flex-end;
-  flex-direction: row;
-  gap: 0.5rem;
-  filter: grayscale(100%);
-  opacity: 80%;
-}
-
 .loginCard {
   border-radius: 0;
   border: 1px solid $ui-03;
@@ -78,57 +68,15 @@
 }
 
 @media only screen and (max-width: 1024px) {
-  .footer {
-    flex-direction: row;
-    justify-content: center;
-    padding: 1rem;
-  }
-
-  .poweredByTile {
-    padding: 1rem 0.5rem;
-    font-size: 0.8rem;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .logosContainer {
-    justify-content: center;
-    gap: 0.75rem;
-  }
-
   .container {
     height: 100vh;
   }
 }
 
 @media only screen and (max-width: 480px) {
-  .login-card {
-    margin-top: 2.5%;
-    border: none;
-  }
-
   .container {
     height: 100vh;
   }
-
-  .footer {
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    padding: 1rem;
-  }
-
-  .poweredByTile {
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    padding: 1.2rem 1rem;
-    font-size: 0.7rem;
-    height: auto;
-    max-width: 100%;
-    border-radius: 0.75rem;
-  }
 }
 
 .inputGroup {
@@ -165,10 +113,6 @@
   left: 0;
 }
 
-.footer {
-  margin-top: 6.75rem;
-}
-
 .loader {
   min-height: fit-content;
 }