add Modern Treasury to mini sponsors

Author: FezVrasta

package.json

@@ -14,6 +14,7 @@
     "@openfonts/luckiest-guy_latin": "^1.44.2",
     "@pauliescanlon/gatsby-mdx-routes": "^0.0.4",
     "@popperjs/core": "^2.7.0",
+    "@tippyjs/react": "^4.2.5",
     "gatsby": "^2.32.3",
     "gatsby-dynamical-navigation": "^0.4.1",
     "gatsby-image": "^2.11.0",

src/components/Affiliates.js

@@ -3,6 +3,9 @@ import { StaticQuery, graphql } from 'gatsby';
 import { ProductCard, Grid } from './ProductCard';
 import { shuffle } from 'weighted-shuffle';
 import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import Tippy from '@tippyjs/react';
+import 'tippy.js/dist/tippy.css'; // optional
 
 const pickRandom = (array, n) =>
   shuffle(array.map(({ probability, ...p }) => [p, probability]))
@@ -101,21 +104,30 @@ const MINI_SPONSORS = [
     label: 'Mobile Mall - Mobile Phone Prices in Pakistan',
     url: 'https://mobilemall.pk/',
   },
+  {
+    logo: require('../images/logos/sponsors/modern-treasury.svg'),
+    label: 'Modern Treasury - The one place to keep a business’s money flowing',
+    url: 'https://www.moderntreasury.com/',
+  },
 ];
 
 const random = products.slice(0, 3);
 const bigOne = random.find((x) => x.xlImage != null);
 
 const MiniSponsor = styled((props) => (
-  <a
-    href={props.href}
-    target="_blank"
-    className={props.className}
-    title={props.alt}
-    rel="noopener noreferrer"
-  >
-    <img src={props.src} alt={props.alt} width="40" height="40" />
-  </a>
+  <Tippy content={props.alt}>
+    <a
+      css={css`
+        display: block;
+      `}
+      href={props.href}
+      target="_blank"
+      className={props.className}
+      rel="noopener noreferrer"
+    >
+      <img src={props.src} alt={props.alt} width="40" height="40" />
+    </a>
+  </Tippy>
 ))`
   opacity: 0.2;
   transition: opacity 0.2s ease-in-out;
@@ -200,13 +212,21 @@ export const Sponsors = () => {
 
       <div style={{ height: '2em' }} />
 
-      {MINI_SPONSORS.map((sponsor) => (
-        <MiniSponsor
-          src={sponsor.logo}
-          alt={sponsor.label}
-          href={sponsor.url}
-        />
-      ))}
+      <div
+        css={css`
+          display: flex;
+          justify-content: center;
+          flex-wrap: wrap;
+        `}
+      >
+        {MINI_SPONSORS.map((sponsor) => (
+          <MiniSponsor
+            src={sponsor.logo}
+            alt={sponsor.label}
+            href={sponsor.url}
+          />
+        ))}
+      </div>
     </>
   );
 };

src/components/layout.css

@@ -16,3 +16,7 @@ h2,
 h3 {
   font-weight: normal;
 }
+
+.tippy-content {
+  text-align: center;
+}

src/images/logos/sponsors/modern-treasury.svg

@@ -2771,6 +2771,11 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.7.0.tgz#5f7760965170f7f1e2910d2498c5be88b47a2a8c"
   integrity sha512-V3WyEc8ZyAuOQ2fpFuTuYYOd2tV4NePeSdxaHYgYAOs7ERLxlcFi2XsmgI5LJFdAUmJKXsg8jaIiVTkTHQygQw==
 
+"@popperjs/core@^2.9.0":
+  version "2.10.2"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.2.tgz#0798c03351f0dea1a5a4cabddf26a55a7cbee590"
+  integrity sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==
+
 "@prefresh/babel-plugin@^0.4.0":
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/@prefresh/babel-plugin/-/babel-plugin-0.4.0.tgz#78ca60adb51095b20e6afdaadc1015e549ae89c9"
@@ -2876,6 +2881,13 @@
   dependencies:
     defer-to-connect "^2.0.0"
 
+"@tippyjs/react@^4.2.5":
+  version "4.2.5"
+  resolved "https://registry.yarnpkg.com/@tippyjs/react/-/react-4.2.5.tgz#9b5837db93a1cac953962404df906aef1a18e80d"
+  integrity sha512-YBLgy+1zznBNbx4JOoOdFXWMLXjBh9hLPwRtq3s8RRdrez2l3tPBRt2m2909wZd9S1KUeKjOOYYsnitccI9I3A==
+  dependencies:
+    tippy.js "^6.3.1"
+
 "@tokenizer/token@^0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@tokenizer/token/-/token-0.1.1.tgz#f0d92c12f87079ddfd1b29f614758b9696bc29e3"
@@ -17086,6 +17098,13 @@ tinycolor2@^1.4.1:
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
   integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
 
+tippy.js@^6.3.1:
+  version "6.3.2"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.2.tgz#c03a0b88f170dffeba42f569771801dddc1f6340"
+  integrity sha512-35XVQI7Zl/jHZ51+8eHu/vVRXBjWYGobPm5G9FxOchj4r5dWhghKGS0nm0ARUKZTF96V7pPn7EbXS191NTwldw==
+  dependencies:
+    "@popperjs/core" "^2.9.0"
+
 title-case@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/title-case/-/title-case-2.1.1.tgz#3e127216da58d2bc5becf137ab91dae3a7cd8faa"