Merge pull request #840 from Vizzuality/develop

Prod release 1.14.0

backend/Gemfile.lock

@@ -356,12 +356,12 @@ GEM
     net-smtp (0.4.0)
       net-protocol
     nio4r (2.7.0)
-    nokogiri (1.16.0)
+    nokogiri (1.16.2)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.16.0-x86_64-darwin)
+    nokogiri (1.16.2-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.0-x86_64-linux)
+    nokogiri (1.16.2-x86_64-linux)
       racc (~> 1.4)
     optimist (3.0.1)
     orm_adapter (0.5.0)

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>

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;

frontend/containers/about/our-allies/logo/index.ts

@@ -0,0 +1,2 @@
+export type { OurAlliesLogoType } from './types';
+export { default } from './component';

frontend/containers/about/our-allies/logo/types.ts

@@ -0,0 +1,8 @@
+export type OurAlliesLogoType = {
+  logo: {
+    src: string;
+    width: number;
+    height: number;
+    alt: string;
+  };
+};

frontend/containers/about/our-partners/card/component.tsx

@@ -20,7 +20,7 @@ export const OurPartnersCard: FC<OurPartnersCardProps> = ({
   return (
     <button
       type="button"
-      className="py-6 px-4 bg-background-middle rounded-2xl focus-visible:outline focus-visible:outline-green-dark focus-visible:outline-2 focus-visible:outline-offset-2"
+      className="py-6 px-4 bg-background-middle rounded-2xl focus-visible:outline focus-visible:outline-green-dark focus-visible:outline-2 focus-visible:outline-offset-2 hover:shadow border border-transparent transition-all duration-500 hover:border-green-light"
       onClick={handleCardClick}
     >
       <div className="text-center">

frontend/containers/about/our-partners/data.ts

@@ -145,7 +145,10 @@ export const usePartners = () => {
             id: 'AS8i3c',
           }),
         },
-        text: '',
+        text: formatMessage({
+          defaultMessage: 'Gobierno de España partner card description text',
+          id: 'IlZRZq',
+        }),
       },
     ],
     [formatMessage]

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>
             }
           >

frontend/package.json

@@ -111,6 +111,7 @@
     "react-stately": "^3.12.2",
     "react-table": "^7.8.0",
     "rooks": "^5.10.0",
+    "sass": "^1.70.0",
     "sharp": "^0.30.1",
     "slugify": "^1.6.5",
     "supercluster": "^7.1.5",

frontend/pages/_app.tsx

@@ -22,7 +22,7 @@ import localesConfig from 'locales.config.json';
 import store from 'store';
 import { LayoutStaticProp } from 'types';
 
-import 'styles/globals.css';
+import 'styles/globals.scss';
 
 // Enable dayjs to display translated dates in all the application's locales
 localesConfig.locales.forEach(({ locale }) => require(`dayjs/locale/${locale}.js`));