From f737c361a63a4fc217f013f6ef58a70295024049 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Ra=C4=8D=C3=A1k?= <martin.racak@ourworldindata.org>
Date: Thu, 12 Dec 2024 19:36:24 +0100
Subject: [PATCH] Implement feedback from QA

---
 packages/@ourworldindata/utils/src/index.ts  |  7 ++++++-
 packages/@ourworldindata/utils/src/string.ts |  5 +++++
 site/gdocs/components/Donors.tsx             |  6 ++++--
 site/gdocs/components/People.scss            | 10 ++++++++++
 site/gdocs/components/Person.scss            |  5 +++++
 site/gdocs/components/centered-article.scss  |  5 +----
 site/gdocs/pages/AboutPage.scss              | 19 +++++++++++--------
 7 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/packages/@ourworldindata/utils/src/index.ts b/packages/@ourworldindata/utils/src/index.ts
index d3a9d6e1912..b11d4a36b08 100644
--- a/packages/@ourworldindata/utils/src/index.ts
+++ b/packages/@ourworldindata/utils/src/index.ts
@@ -293,7 +293,12 @@ export { Url, setWindowUrl, getWindowUrl } from "./urls/Url.js"
 
 export { type UrlMigration, performUrlMigrations } from "./urls/UrlMigration.js"
 
-export { camelCaseProperties, titleCase, toAsciiQuotes } from "./string.js"
+export {
+    camelCaseProperties,
+    titleCase,
+    toAsciiQuotes,
+    removeDiacritics,
+} from "./string.js"
 
 export { serializeJSONForHTML, deserializeJSONFromHTML } from "./serializers.js"
 
diff --git a/packages/@ourworldindata/utils/src/string.ts b/packages/@ourworldindata/utils/src/string.ts
index b6dae99eaee..056fe1e7c8e 100644
--- a/packages/@ourworldindata/utils/src/string.ts
+++ b/packages/@ourworldindata/utils/src/string.ts
@@ -35,3 +35,8 @@ export const titleCase = (str: string): string => {
 export function toAsciiQuotes(str: string): string {
     return str.replace(/[“”]/g, '"').replace(/[‘’]/g, "'")
 }
+
+// https://stackoverflow.com/a/37511463/9846837
+export function removeDiacritics(str: string): string {
+    return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "")
+}
diff --git a/site/gdocs/components/Donors.tsx b/site/gdocs/components/Donors.tsx
index 34970caffb3..f3d05db2475 100644
--- a/site/gdocs/components/Donors.tsx
+++ b/site/gdocs/components/Donors.tsx
@@ -1,12 +1,14 @@
 import * as React from "react"
-import { groupBy } from "@ourworldindata/utils"
+import { groupBy, removeDiacritics } from "@ourworldindata/utils"
 import { useDonors } from "../utils.js"
 
 export default function Donors({ className }: { className?: string }) {
     const donors = useDonors()
     if (!donors) return null
 
-    const donorsByLetter = groupBy(donors, (donor) => donor[0])
+    const donorsByLetter = groupBy(donors, (donor) =>
+        removeDiacritics(donor[0].toUpperCase())
+    )
     return (
         <div className={className}>
             <div className="col-start-2 span-cols-12">
diff --git a/site/gdocs/components/People.scss b/site/gdocs/components/People.scss
index 2537255eea7..fa4ac6ac264 100644
--- a/site/gdocs/components/People.scss
+++ b/site/gdocs/components/People.scss
@@ -1,5 +1,11 @@
 .people {
     row-gap: 16px;
+
+    .article-block__text,
+    .article-block__list,
+    .article-block__numbered-list {
+        font-size: 16px;
+    }
 }
 
 .people-cols-2 {
@@ -15,6 +21,10 @@
 }
 
 .people-cols-4 {
+    .person-heading {
+        font-size: 18px;
+    }
+
     @include lg-up {
         .article-block__text {
             @include body-3-medium;
diff --git a/site/gdocs/components/Person.scss b/site/gdocs/components/Person.scss
index 6f49bc591d5..26ad65283a4 100644
--- a/site/gdocs/components/Person.scss
+++ b/site/gdocs/components/Person.scss
@@ -21,6 +21,10 @@
 }
 
 .person-image {
+    picture {
+        display: flex; // Fix extra padding at the bottom.
+    }
+
     img {
         border-radius: 50%;
     }
@@ -42,6 +46,7 @@
 }
 
 .person-title {
+    line-height: 19px;
     color: $blue-60;
 }
 
diff --git a/site/gdocs/components/centered-article.scss b/site/gdocs/components/centered-article.scss
index d91a4cf958c..0fe67ca4bf9 100644
--- a/site/gdocs/components/centered-article.scss
+++ b/site/gdocs/components/centered-article.scss
@@ -464,14 +464,11 @@ h3.article-block__heading {
     }
 }
 
-.image--has-outline + .article-block__image-caption {
-    margin-top: 8px;
-}
-
 .article-block__image-caption {
     @include body-3-medium-italic;
     color: $blue-60;
     text-align: center;
+    margin-top: 16px;
 }
 
 .article-block__chart + .article-block__heading {
diff --git a/site/gdocs/pages/AboutPage.scss b/site/gdocs/pages/AboutPage.scss
index 7a32487fd0a..436b27a151d 100644
--- a/site/gdocs/pages/AboutPage.scss
+++ b/site/gdocs/pages/AboutPage.scss
@@ -54,10 +54,6 @@
         @include h1-semibold;
         color: $blue-60;
         margin-top: 0;
-
-        &:has(+ .article-block__side-by-side) {
-            margin-bottom: 8px;
-        }
     }
 
     h3.article-block__heading {
@@ -97,18 +93,19 @@
         margin-bottom: 24px;
     }
 
-    .article-block__chart {
-        margin-bottom: 24px;
-    }
-
     .article-block__code-snippet {
         margin-bottom: 16px;
     }
 
+    .article-block__chart,
     .article-block__image {
         margin: 0 0 24px;
     }
 
+    .article-block__people + .article-block__heading {
+        margin-top: 40px;
+    }
+
     .article-block__prominent-link {
         margin-bottom: 24px;
     }
@@ -122,6 +119,12 @@
         }
     }
 
+    .article-block__side-by-side {
+        :first-child {
+            margin-top: 0;
+        }
+    }
+
     .article-block__donors {
         margin-top: 32px;
         padding-top: 40px;