From 201d72f9802921344b6056f91b51405e51f9c2d2 Mon Sep 17 00:00:00 2001
From: suubi-joshua <ssebaanajoshua@gmail.com>
Date: Tue, 27 Aug 2024 21:19:58 +0300
Subject: [PATCH 1/6] Added config to allow addition of Powered by Logo

---
 .../esm-login-app/__mocks__/config.mock.ts    |  8 +++++
 .../apps/esm-login-app/src/config-schema.ts   | 29 +++++++++++++++
 .../esm-login-app/src/footer.component.tsx    | 33 +++++++++++++++++
 .../src/login/login.component.tsx             |  8 ++---
 .../apps/esm-login-app/src/login/login.scss   | 36 +++++++++++++++++--
 .../apps/esm-login-app/src/logo.component.tsx |  2 +-
 6 files changed, 107 insertions(+), 9 deletions(-)
 create mode 100644 packages/apps/esm-login-app/src/footer.component.tsx

diff --git a/packages/apps/esm-login-app/__mocks__/config.mock.ts b/packages/apps/esm-login-app/__mocks__/config.mock.ts
index 16b2bc691..105c045b6 100644
--- a/packages/apps/esm-login-app/__mocks__/config.mock.ts
+++ b/packages/apps/esm-login-app/__mocks__/config.mock.ts
@@ -19,5 +19,13 @@ export const mockConfig: ConfigSchema = {
   links: {
     loginSuccess: '${openmrsSpaBase}/home',
   },
+  footer: {
+    logos: [
+      {
+        src: null,
+        alt: 'Logo',
+      }
+    ],
+  },
   showPasswordOnSeparateScreen: true,
 };
diff --git a/packages/apps/esm-login-app/src/config-schema.ts b/packages/apps/esm-login-app/src/config-schema.ts
index b550a92fc..885b67f7f 100644
--- a/packages/apps/esm-login-app/src/config-schema.ts
+++ b/packages/apps/esm-login-app/src/config-schema.ts
@@ -68,6 +68,29 @@ export const configSchema = {
       _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
     },
   },
+  footer: {
+    logos: {
+      _type: Type.Array,
+      _items: {
+        _type: Type.Object,
+        _properties: {
+          src: {
+            _type: Type.String,
+            _required: true,
+            _description: 'The source URL of the logo image',
+            _validations: [validators.isUrl]
+          },
+          alt: {
+            _type: Type.String,
+            _required: true,
+            _description: 'The alternative text for the logo image'
+          }
+        }
+      },
+      _default: [],
+      _description: 'An array of logos to be displayed in the footer.',
+    }
+  },
   showPasswordOnSeparateScreen: {
     _type: Type.Boolean,
     _default: true,
@@ -95,5 +118,11 @@ export interface ConfigSchema {
     alt: string;
     src: string;
   };
+  footer: {
+    logos: Array<{
+      src: string;
+      alt: string;
+    }>;
+  };
   showPasswordOnSeparateScreen: boolean;
 }
diff --git a/packages/apps/esm-login-app/src/footer.component.tsx b/packages/apps/esm-login-app/src/footer.component.tsx
new file mode 100644
index 000000000..2edf5c8c8
--- /dev/null
+++ b/packages/apps/esm-login-app/src/footer.component.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { interpolateUrl, useConfig } from '@openmrs/esm-framework';
+import { type TFunction } from 'react-i18next';
+import { type ConfigSchema } from './config-schema';
+import styles from './login/login.scss';
+
+const Footer: React.FC<{ t: TFunction }> = ({ t }) => {
+  const config = useConfig<ConfigSchema>();
+  const logos = config.footer.logos || [];
+
+  return (
+    <div className={styles.footer}>
+      <p className={styles.poweredByTxt}>{t('poweredBy', 'Powered by')}</p>
+      <div className={styles.logosContainer}>
+        {logos.length > 0 ? (
+          logos.map((logo, index) => (
+            <img
+              alt={logo.alt ? t(logo.alt) : t('poweredByLogo', 'Powered By Logo')}
+              className={styles.poweredByLogo}
+              src={interpolateUrl(logo.src)}
+            />
+          ))
+        ) : (
+          <svg role="img" className={styles.poweredByLogo}>
+            <use href="#omrs-logo-full-color"></use>
+          </svg>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Footer;
\ No newline at end of file
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 51a263ed46..b19a204e3 100644
--- a/packages/apps/esm-login-app/src/login/login.component.tsx
+++ b/packages/apps/esm-login-app/src/login/login.component.tsx
@@ -14,6 +14,7 @@ import {
 } from '@openmrs/esm-framework';
 import { type ConfigSchema } from '../config-schema';
 import Logo from '../logo.component';
+import Footer from '../footer.component';
 import styles from './login.scss';
 
 export interface LoginReferrer {
@@ -265,14 +266,9 @@ const Login: React.FC = () => {
             )}
           </form>
         </Tile>
-        <div className={styles.footer}>
-          <p className={styles.poweredByTxt}>{t('poweredBy', 'Powered by')}</p>
           <div>
-            <svg role="img" className={styles.poweredByLogo}>
-              <use href="#omrs-logo-partial-mono"></use>
-            </svg>
+            <Footer t={t} />
           </div>
-        </div>
       </div>
     );
   }
diff --git a/packages/apps/esm-login-app/src/login/login.scss b/packages/apps/esm-login-app/src/login/login.scss
index 87f113438..1e3656425 100644
--- a/packages/apps/esm-login-app/src/login/login.scss
+++ b/packages/apps/esm-login-app/src/login/login.scss
@@ -25,6 +25,7 @@
 
 .poweredByTxt {
   @extend .caption01;
+  margin-bottom: 1.5rem;
   text-align: center;
   color: $color-gray-70;
   color: $text-02;
@@ -50,9 +51,38 @@
   margin-left: 0.5rem;
 }
 
+.footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1.5rem;
+}
+
+.logosContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: 1.5rem;
+  gap: 2rem; 
+}
+
+@media (min-width: 768px) {
+  .footer {
+    padding: 2rem;
+  }
+  .poweredByLogo {
+    height: 3.5rem;
+    max-width: 9rem;
+  }
+}
+
 .poweredByLogo {
-  height: 2.5rem;
-  width: 6.5rem;
+  height: 3rem;
+  width: auto; 
+  max-width: 8rem;  
+  object-fit: contain;
+  display: block;
 }
 
 .loginCard {
@@ -63,6 +93,8 @@
   padding: 2.5rem;
   position: relative;
   min-height: fit-content;
+  margin-top: 2.5rem;
+  margin-bottom: -3.0rem;
 }
 
 @media only screen and (min-width: 481px) {
diff --git a/packages/apps/esm-login-app/src/logo.component.tsx b/packages/apps/esm-login-app/src/logo.component.tsx
index 1488258d4..fd760bf92 100644
--- a/packages/apps/esm-login-app/src/logo.component.tsx
+++ b/packages/apps/esm-login-app/src/logo.component.tsx
@@ -16,7 +16,7 @@ const Logo: React.FC<{ t: TFunction }> = ({ t }) => {
     <svg role="img" className={styles.logo}>
       <title>{t('openmrsLogo', 'OpenMRS logo')}</title>
       <use href="#omrs-logo-full-color"></use>
-    </svg>
+    </svg> 
   );
 };
 

From deb0137e63d809b86e3cbd4997e249a7f9541fd4 Mon Sep 17 00:00:00 2001
From: suubi-joshua <ssebaanajoshua@gmail.com>
Date: Wed, 28 Aug 2024 22:35:08 +0300
Subject: [PATCH 2/6] Removed the conditional rendering of the OMRS Logo

---
 .../esm-login-app/src/footer.component.tsx    | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/packages/apps/esm-login-app/src/footer.component.tsx b/packages/apps/esm-login-app/src/footer.component.tsx
index 2edf5c8c8..3b920ad6e 100644
--- a/packages/apps/esm-login-app/src/footer.component.tsx
+++ b/packages/apps/esm-login-app/src/footer.component.tsx
@@ -12,19 +12,16 @@ const Footer: React.FC<{ t: TFunction }> = ({ t }) => {
     <div className={styles.footer}>
       <p className={styles.poweredByTxt}>{t('poweredBy', 'Powered by')}</p>
       <div className={styles.logosContainer}>
-        {logos.length > 0 ? (
-          logos.map((logo, index) => (
-            <img
-              alt={logo.alt ? t(logo.alt) : t('poweredByLogo', 'Powered By Logo')}
-              className={styles.poweredByLogo}
-              src={interpolateUrl(logo.src)}
-            />
-          ))
-        ) : (
-          <svg role="img" className={styles.poweredByLogo}>
-            <use href="#omrs-logo-full-color"></use>
-          </svg>
-        )}
+        <svg role="img" className={styles.poweredByLogo}>
+          <use href="#omrs-logo-full-color"></use>
+        </svg>
+        {logos.map((logo, index) => (
+          <img
+            alt={logo.alt ? t(logo.alt) : t('poweredByLogo', 'Powered By Logo')}
+            className={styles.poweredByLogo}
+            src={interpolateUrl(logo.src)}
+          />
+        ))}
       </div>
     </div>
   );

From 48b6609cbc3d33a1186f8916eeefce95a94847ef Mon Sep 17 00:00:00 2001
From: suubi-joshua <ssebaanajoshua@gmail.com>
Date: Fri, 20 Sep 2024 00:22:26 +0300
Subject: [PATCH 3/6] Worked on requested changes

---
 packages/apps/esm-login-app/__mocks__/config.mock.ts      | 6 +++---
 packages/apps/esm-login-app/src/config-schema.ts          | 2 +-
 packages/apps/esm-login-app/src/footer.component.tsx      | 7 ++++---
 packages/apps/esm-login-app/src/login/login.component.tsx | 4 +---
 packages/apps/esm-login-app/src/login/login.scss          | 8 ++++----
 packages/apps/esm-login-app/src/login/login.test.tsx      | 2 +-
 6 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/packages/apps/esm-login-app/__mocks__/config.mock.ts b/packages/apps/esm-login-app/__mocks__/config.mock.ts
index 105c045b6..9e7c40a34 100644
--- a/packages/apps/esm-login-app/__mocks__/config.mock.ts
+++ b/packages/apps/esm-login-app/__mocks__/config.mock.ts
@@ -1,4 +1,4 @@
-import { ConfigSchema } from '../src/config-schema';
+import { type ConfigSchema } from '../src/config-schema';
 
 export const mockConfig: ConfigSchema = {
   provider: {
@@ -22,8 +22,8 @@ export const mockConfig: ConfigSchema = {
   footer: {
     logos: [
       {
-        src: null,
-        alt: 'Logo',
+        src: '',
+        alt: '',
       }
     ],
   },
diff --git a/packages/apps/esm-login-app/src/config-schema.ts b/packages/apps/esm-login-app/src/config-schema.ts
index 885b67f7f..cfb1ca26f 100644
--- a/packages/apps/esm-login-app/src/config-schema.ts
+++ b/packages/apps/esm-login-app/src/config-schema.ts
@@ -71,7 +71,7 @@ export const configSchema = {
   footer: {
     logos: {
       _type: Type.Array,
-      _items: {
+      _elements: {
         _type: Type.Object,
         _properties: {
           src: {
diff --git a/packages/apps/esm-login-app/src/footer.component.tsx b/packages/apps/esm-login-app/src/footer.component.tsx
index 3b920ad6e..d3b4d3103 100644
--- a/packages/apps/esm-login-app/src/footer.component.tsx
+++ b/packages/apps/esm-login-app/src/footer.component.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import { interpolateUrl, useConfig } from '@openmrs/esm-framework';
-import { type TFunction } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { type ConfigSchema } from './config-schema';
 import styles from './login/login.scss';
 
-const Footer: React.FC<{ t: TFunction }> = ({ t }) => {
+const Footer: React.FC = () => {
+  const {t} = useTranslation();
   const config = useConfig<ConfigSchema>();
   const logos = config.footer.logos || [];
 
@@ -17,7 +18,7 @@ const Footer: React.FC<{ t: TFunction }> = ({ t }) => {
         </svg>
         {logos.map((logo, index) => (
           <img
-            alt={logo.alt ? t(logo.alt) : t('poweredByLogo', 'Powered By Logo')}
+            alt={logo.alt ? t(logo.alt) : t('logo', 'Logo')}
             className={styles.poweredByLogo}
             src={interpolateUrl(logo.src)}
           />
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 b19a204e3..6213fcd94 100644
--- a/packages/apps/esm-login-app/src/login/login.component.tsx
+++ b/packages/apps/esm-login-app/src/login/login.component.tsx
@@ -266,9 +266,7 @@ const Login: React.FC = () => {
             )}
           </form>
         </Tile>
-          <div>
-            <Footer t={t} />
-          </div>
+       <Footer/>
       </div>
     );
   }
diff --git a/packages/apps/esm-login-app/src/login/login.scss b/packages/apps/esm-login-app/src/login/login.scss
index 1e3656425..7f8db6ce0 100644
--- a/packages/apps/esm-login-app/src/login/login.scss
+++ b/packages/apps/esm-login-app/src/login/login.scss
@@ -59,15 +59,17 @@
 }
 
 .logosContainer {
+  margin-right: 0;
   display: flex;
   justify-content: center;
+  flex-direction: row;
   align-items: center;
   flex-wrap: wrap;
   margin-bottom: 1.5rem;
   gap: 2rem; 
 }
 
-@media (min-width: 768px) {
+:global(.omrs-breakpoint-gt-phone) {
   .footer {
     padding: 2rem;
   }
@@ -93,8 +95,6 @@
   padding: 2.5rem;
   position: relative;
   min-height: fit-content;
-  margin-top: 2.5rem;
-  margin-bottom: -3.0rem;
 }
 
 @media only screen and (min-width: 481px) {
@@ -148,7 +148,7 @@
 }
 
 .footer {
-  margin-top: 6.75rem;
+  margin-top: 3.0rem;
 }
 
 .loader {
diff --git a/packages/apps/esm-login-app/src/login/login.test.tsx b/packages/apps/esm-login-app/src/login/login.test.tsx
index 08f259148..1882a46e4 100644
--- a/packages/apps/esm-login-app/src/login/login.test.tsx
+++ b/packages/apps/esm-login-app/src/login/login.test.tsx
@@ -35,7 +35,7 @@ describe('Login', () => {
     renderWithRouter(
       Login,
       {},
-      {
+      { 
         route: '/login',
       },
     );

From 50410c936496d54c5bbf1bd3791c19f1e4faea67 Mon Sep 17 00:00:00 2001
From: suubi-joshua <ssebaanajoshua@gmail.com>
Date: Mon, 23 Sep 2024 15:17:33 +0300
Subject: [PATCH 4/6] Fixed breaking tests

---
 packages/apps/esm-login-app/src/footer.component.tsx | 3 ++-
 packages/apps/esm-login-app/src/login/login.test.tsx | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/apps/esm-login-app/src/footer.component.tsx b/packages/apps/esm-login-app/src/footer.component.tsx
index d3b4d3103..59f3196ce 100644
--- a/packages/apps/esm-login-app/src/footer.component.tsx
+++ b/packages/apps/esm-login-app/src/footer.component.tsx
@@ -18,7 +18,8 @@ const Footer: React.FC = () => {
         </svg>
         {logos.map((logo, index) => (
           <img
-            alt={logo.alt ? t(logo.alt) : t('logo', 'Logo')}
+            key={index}
+            alt={logo.alt ? t(logo.alt) : t('footerlogo', 'Footer Logo')}
             className={styles.poweredByLogo}
             src={interpolateUrl(logo.src)}
           />
diff --git a/packages/apps/esm-login-app/src/login/login.test.tsx b/packages/apps/esm-login-app/src/login/login.test.tsx
index 1882a46e4..70c3ac00c 100644
--- a/packages/apps/esm-login-app/src/login/login.test.tsx
+++ b/packages/apps/esm-login-app/src/login/login.test.tsx
@@ -41,7 +41,7 @@ describe('Login', () => {
     );
 
     screen.getByRole('img', { name: /OpenMRS logo/i });
-    expect(screen.queryByAltText(/logo/i)).not.toBeInTheDocument();
+    expect(screen.queryByAltText(/^logo$/i)).not.toBeInTheDocument();
     screen.getByRole('textbox', { name: /Username/i });
     screen.getByRole('button', { name: /Continue/i });
   });

From 526792133e218fa4b79e5b8ffd9d0859771c012a Mon Sep 17 00:00:00 2001
From: suubi-joshua <ssebaanajoshua@gmail.com>
Date: Mon, 14 Oct 2024 13:52:31 +0300
Subject: [PATCH 5/6] Renamed Logos to additional Logos

---
 .../apps/esm-login-app/__mocks__/config.mock.ts  |  7 +------
 packages/apps/esm-login-app/src/config-schema.ts |  6 +++---
 .../apps/esm-login-app/src/footer.component.tsx  |  6 +++---
 packages/apps/esm-login-app/src/login/login.scss | 16 ++--------------
 4 files changed, 9 insertions(+), 26 deletions(-)

diff --git a/packages/apps/esm-login-app/__mocks__/config.mock.ts b/packages/apps/esm-login-app/__mocks__/config.mock.ts
index 9e7c40a34..c125a1ca8 100644
--- a/packages/apps/esm-login-app/__mocks__/config.mock.ts
+++ b/packages/apps/esm-login-app/__mocks__/config.mock.ts
@@ -20,12 +20,7 @@ export const mockConfig: ConfigSchema = {
     loginSuccess: '${openmrsSpaBase}/home',
   },
   footer: {
-    logos: [
-      {
-        src: '',
-        alt: '',
-      }
-    ],
+    additionalLogos: [],
   },
   showPasswordOnSeparateScreen: true,
 };
diff --git a/packages/apps/esm-login-app/src/config-schema.ts b/packages/apps/esm-login-app/src/config-schema.ts
index cfb1ca26f..cfe544a30 100644
--- a/packages/apps/esm-login-app/src/config-schema.ts
+++ b/packages/apps/esm-login-app/src/config-schema.ts
@@ -69,7 +69,7 @@ export const configSchema = {
     },
   },
   footer: {
-    logos: {
+    additionalLogos: {
       _type: Type.Array,
       _elements: {
         _type: Type.Object,
@@ -88,7 +88,7 @@ export const configSchema = {
         }
       },
       _default: [],
-      _description: 'An array of logos to be displayed in the footer.',
+      _description: 'An array of logos to be displayed in the footer next to the OpenMRS logo.',
     }
   },
   showPasswordOnSeparateScreen: {
@@ -119,7 +119,7 @@ export interface ConfigSchema {
     src: string;
   };
   footer: {
-    logos: Array<{
+    additionalLogos: Array<{
       src: string;
       alt: string;
     }>;
diff --git a/packages/apps/esm-login-app/src/footer.component.tsx b/packages/apps/esm-login-app/src/footer.component.tsx
index 59f3196ce..130753f67 100644
--- a/packages/apps/esm-login-app/src/footer.component.tsx
+++ b/packages/apps/esm-login-app/src/footer.component.tsx
@@ -7,21 +7,21 @@ import styles from './login/login.scss';
 const Footer: React.FC = () => {
   const {t} = useTranslation();
   const config = useConfig<ConfigSchema>();
-  const logos = config.footer.logos || [];
+  const logos = config.footer.additionalLogos || [];
 
   return (
     <div className={styles.footer}>
       <p className={styles.poweredByTxt}>{t('poweredBy', 'Powered by')}</p>
       <div className={styles.logosContainer}>
         <svg role="img" className={styles.poweredByLogo}>
-          <use href="#omrs-logo-full-color"></use>
+          <use href="#omrs-logo-partial-mono"></use>
         </svg>
         {logos.map((logo, index) => (
           <img
             key={index}
             alt={logo.alt ? t(logo.alt) : t('footerlogo', 'Footer Logo')}
             className={styles.poweredByLogo}
-            src={interpolateUrl(logo.src)}
+            src={logo.src}
           />
         ))}
       </div>
diff --git a/packages/apps/esm-login-app/src/login/login.scss b/packages/apps/esm-login-app/src/login/login.scss
index 7f8db6ce0..25e2da5c0 100644
--- a/packages/apps/esm-login-app/src/login/login.scss
+++ b/packages/apps/esm-login-app/src/login/login.scss
@@ -25,7 +25,6 @@
 
 .poweredByTxt {
   @extend .caption01;
-  margin-bottom: 1.5rem;
   text-align: center;
   color: $color-gray-70;
   color: $text-02;
@@ -65,23 +64,12 @@
   flex-direction: row;
   align-items: center;
   flex-wrap: wrap;
-  margin-bottom: 1.5rem;
   gap: 2rem; 
 }
 
-:global(.omrs-breakpoint-gt-phone) {
-  .footer {
-    padding: 2rem;
-  }
-  .poweredByLogo {
-    height: 3.5rem;
-    max-width: 9rem;
-  }
-}
-
 .poweredByLogo {
   height: 3rem;
-  width: auto; 
+  width: auto;
   max-width: 8rem;  
   object-fit: contain;
   display: block;
@@ -148,7 +136,7 @@
 }
 
 .footer {
-  margin-top: 3.0rem;
+  margin-top: 6.75rem;
 }
 
 .loader {

From bba99222867ac07694e8f55379175eafccb103c2 Mon Sep 17 00:00:00 2001
From: suubi-joshua <ssebaanajoshua@gmail.com>
Date: Mon, 14 Oct 2024 14:13:38 +0300
Subject: [PATCH 6/6] Make all added logos grey

---
 packages/apps/esm-login-app/src/login/login.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/apps/esm-login-app/src/login/login.scss b/packages/apps/esm-login-app/src/login/login.scss
index 25e2da5c0..e8418be4a 100644
--- a/packages/apps/esm-login-app/src/login/login.scss
+++ b/packages/apps/esm-login-app/src/login/login.scss
@@ -65,6 +65,8 @@
   align-items: center;
   flex-wrap: wrap;
   gap: 2rem; 
+  filter: grayscale(100%);
+  opacity: 1;
 }
 
 .poweredByLogo {