From 330e7ad37f53eb99856c1f25b20bf3e461942e9e Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Wed, 24 Jan 2024 14:04:02 +0000
Subject: [PATCH] Add Tooltips to the logos in the 'Our Allies' section of the
 About page

---
 .../containers/about/our-allies/component.tsx | 18 ++----------
 .../about/our-allies/logo/component.tsx       | 29 +++++++++++++++++++
 .../containers/about/our-allies/logo/index.ts |  2 ++
 .../containers/about/our-allies/logo/types.ts |  8 +++++
 frontend/containers/sdgs/component.tsx        |  2 +-
 5 files changed, 43 insertions(+), 16 deletions(-)
 create mode 100644 frontend/containers/about/our-allies/logo/component.tsx
 create mode 100644 frontend/containers/about/our-allies/logo/index.ts
 create mode 100644 frontend/containers/about/our-allies/logo/types.ts

diff --git a/frontend/containers/about/our-allies/component.tsx b/frontend/containers/about/our-allies/component.tsx
index af2032885..a0750d644 100644
--- a/frontend/containers/about/our-allies/component.tsx
+++ b/frontend/containers/about/our-allies/component.tsx
@@ -5,6 +5,7 @@ import cx from 'classnames';
 import Image from 'next/image';
 
 import { useAlliesLogos, useSupportedByLogos } from './data';
+import Logo from './logo/component';
 
 export const OurAllies = () => {
   const alliesLogos = useAlliesLogos();
@@ -27,16 +28,7 @@ export const OurAllies = () => {
                 })}
               >
                 {row.map((logo) => {
-                  return (
-                    <span key={logo.src}>
-                      <Image
-                        src={logo.src}
-                        width={logo.width}
-                        height={logo.height}
-                        alt={logo.alt}
-                      />
-                    </span>
-                  );
+                  return <Logo key={logo.src} logo={logo} />;
                 })}
               </div>
             );
@@ -50,11 +42,7 @@ export const OurAllies = () => {
         <div className="flex flex-col mt-8">
           <div className="flex flex-wrap items-center justify-center gap-6">
             {supportedByLogos.map((logo) => {
-              return (
-                <span key={logo.src}>
-                  <Image src={logo.src} width={logo.width} height={logo.height} alt={logo.alt} />
-                </span>
-              );
+              return <Logo key={logo.src} logo={logo} />;
             })}
           </div>
         </div>
diff --git a/frontend/containers/about/our-allies/logo/component.tsx b/frontend/containers/about/our-allies/logo/component.tsx
new file mode 100644
index 000000000..eb9007e46
--- /dev/null
+++ b/frontend/containers/about/our-allies/logo/component.tsx
@@ -0,0 +1,29 @@
+import { FC } from 'react';
+
+import Image from 'next/image';
+
+import Tooltip from 'components/tooltip';
+
+import { OurAlliesLogoType } from './';
+
+export const OurAlliesLogo: FC<OurAlliesLogoType> = ({ logo }) => {
+  return (
+    <span>
+      <Tooltip
+        arrow
+        arrowClassName="bg-black"
+        content={
+          <div className="max-w-xs p-2 font-sans text-sm font-normal text-white bg-black rounded-sm">
+            {logo.alt}
+          </div>
+        }
+      >
+        <span className="flex py-1 sm:py-0">
+          <Image src={logo.src} width={logo.width} height={logo.height} alt={logo.alt} />
+        </span>
+      </Tooltip>
+    </span>
+  );
+};
+
+export default OurAlliesLogo;
diff --git a/frontend/containers/about/our-allies/logo/index.ts b/frontend/containers/about/our-allies/logo/index.ts
new file mode 100644
index 000000000..a03cf4214
--- /dev/null
+++ b/frontend/containers/about/our-allies/logo/index.ts
@@ -0,0 +1,2 @@
+export type { OurAlliesLogoType } from './types';
+export { default } from './component';
diff --git a/frontend/containers/about/our-allies/logo/types.ts b/frontend/containers/about/our-allies/logo/types.ts
new file mode 100644
index 000000000..910b5f1d4
--- /dev/null
+++ b/frontend/containers/about/our-allies/logo/types.ts
@@ -0,0 +1,8 @@
+export type OurAlliesLogoType = {
+  logo: {
+    src: string;
+    width: number;
+    height: number;
+    alt: string;
+  };
+};
diff --git a/frontend/containers/sdgs/component.tsx b/frontend/containers/sdgs/component.tsx
index 967b22eb0..6b8f41d21 100644
--- a/frontend/containers/sdgs/component.tsx
+++ b/frontend/containers/sdgs/component.tsx
@@ -23,7 +23,7 @@ export const SDGs: FC<SDGsProps> = ({ className, size = 'small', sdgs = [] }: SD
             arrowClassName="bg-black"
             content={
               <div className="max-w-xs p-2 font-sans text-sm font-normal text-white bg-black rounded-sm">
-                {sdg.name}
+                haha
               </div>
             }
           >